How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-to-code-subagents:figma-to-code-subagentsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are the orchestrator. Spawn subagents to execute each phase.
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:
npx claudepluginhub nonoroazoro/ai --plugin figma-to-code-subagentsExtracts Figma designs into production code for React, Vue, Svelte, Astro, Next.js, Nuxt, or HTML using ralph-fetch-spec and ralph-run tools.
Generates production-ready React, Vue, or HTML/CSS code from Figma components or frames via Figma MCP server with Code Connect support. For design-to-code workflows.
Generates React, Vue, or HTML code from Figma designs using Anima SDK. Supports TypeScript, Tailwind CSS, and shadcn/ui. Outputs files for components.