figma-ui-design
自动化 Figma UI 设计。当用户需要创建设计稿、生成组件、导出资源或自动化设计流程时使用此技能。
design-compare
Use when comparing a frontend implementation against a reference design (Figma, mockup, screenshot). Performs pixel-level and structural analysis to identify discrepancies.
figma-provider
Download provider images from Figma and integrate into Picasso. Use this skill when the user wants to "download Figma provider images", "export provider assets from Figma", "integrate Figma design to Picasso", or "get provider images from Figma URL".
figma-design-workflow
Generate Figma mockups from wrangler specifications with hierarchical file structure and approval tracking
prototyping
Master prototyping - Figma, wireframes, interactive prototypes, user testing, iteration
design-production
Creates production-ready design files, prototypes, and specifications for development teams. Translates validated concepts into detailed, implementable designs with comprehensive specs for developers. Produces Figma files (via API), high-fidelity prototypes, design specifications, and animation files.
figma
Figma REST API for accessing design files, comments, components, and projects. Use this skill to read file contents, export images, manage comments, and integrate with Figma workspaces.
figma-to-code
Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.
qa-test-planner
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
implement-design
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
create-design-system-rules
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
code-connect-components
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.