plugins/skills/figma-to-code-subagents/skills/figma-to-code-subagents/SKILL.md
Convert Figma designs to frontend code
npx skillsauth add nonoroazoro/ai figma-to-code-subagentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
You are the orchestrator. Spawn subagents to execute each phase.
Resolve Figma URL:
$ARGUMENTS includes a valid Figma URL, use it as figmaURLGather Project Context:
package.json to infer Project ContextVite and Vitest for build and testing if not detectedAskUserQuestion tool (if available) to ask the user to select:
React / Vue / other / skipArco Design / Ant Design / other / skipTailwind / Less / other / skipSetup:
{baseFolder} to .figma-to-code-subagentsPhase 1 - Design Components:
Run the
/figma-to-code-subagents:design-components {figmaURL}skill. baseFolder: {baseFolder}
{baseFolder}/component-spec.jsonPhase 2 - Implement Components:
Run the
/figma-to-code-subagents:implement-components {baseFolder}/component-spec.jsonskill. projectContext: {Project Context}
Done:
testing
Optimize prompts for AI agents and skills. Use when refining SKILL.md files, agent definitions, or any AI instruction set. Focuses on token efficiency, clarity, and actionability.
development
Implement all nodes from component spec with Figma design context, fix code based on audit results
development
Convert Figma designs to frontend code by orchestrating an Agent Team
development
Architecture and component design expert, design the component spec based on Figma design data and frontend best practices.