Skill

figma-to-code-subagents

Convert Figma designs to frontend code

npx claudepluginhub nonoroazoro/ai --plugin figma-to-code-subagents

Tool Access

This skill is limited to using the following tools:

AskUserQuestion

Preview

You are the orchestrator. Spawn subagents to execute each phase.

SKILL.md

Similar Skills

Ralph Figma

Extracts Figma designs into production code for React, Vue, Svelte, Astro, Next.js, Nuxt, or HTML using ralph-fetch-spec and ralph-run tools.

ralph-starter

figma-implement-design

1.4k

Translates Figma designs into production-ready UI code with 1:1 visual fidelity using MCP server. Use for node-specific implementations from Figma URLs or desktop selections.

figma

anima-hello-world

2.1k

Generates React, Vue, or HTML code from Figma designs using Anima SDK. Supports TypeScript, Tailwind CSS, and shadcn/ui. Outputs files for components.

4 tools

anima-pack

Stats

Parent Repo Stars5

Parent Repo Forks1

Last CommitMar 6, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

You are the orchestrator. Spawn subagents to execute each phase.

Workflow

Resolve Figma URL:
- If $ARGUMENTS includes a valid Figma URL, use it as figmaURL
- Otherwise, ask the user
Gather Project Context:
- Read package.json to infer Project Context
- Default to Vite and Vitest for build and testing if not detected
- For anything not inferred, use the AskUserQuestion tool (if available) to ask the user to select:
  - Framework: React / Vue / other / skip
  - Library: Arco Design / Ant Design / other / skip
  - Styling: Tailwind / Less / other / skip
  - Docs: project conventions, plan docs, etc. (optional)
Setup:
- Set {baseFolder} to .figma-to-code-subagents
Phase 1 - Design Components:
- Spawn subagent with prompt:
  
  Run the /figma-to-code-subagents:design-components {figmaURL} skill. baseFolder: {baseFolder}
- Verify {baseFolder}/component-spec.json
Phase 2 - Implement Components:
- Spawn subagent with prompt:
  
  Run the /figma-to-code-subagents:implement-components {baseFolder}/component-spec.json skill. projectContext: {Project Context}
Done:
- Summarize the final result to the user

Guardrails

You are an orchestrator, DO NOT write code
If any subagent fails, report the error and stop. DO NOT retry blindly