Figma Design To Code
Turns your Figma selections into production code that matches your actual project setup. It reads your existing components, design tokens, and styling conventions first, then translates the design evidence from TemPad Dev MCP into framework-appropriate markup. The skill is opinionated about evidence: it won't guess hidden states or invent behavior not shown in the design, and it asks you to decide when multiple valid approaches exist. Works best when your project already has clear conventions in AGENTS.md or similar docs. The workflow is fetch design truth, read local patterns, implement the smallest safe change. Supports JSX, Vue, and Tailwind projects with proper token and asset handling.
- skills.sh installs
- 377
- GitHub stars
- 654
- last updated
- Aug 21, 2026
Install
$ npx -y skills add ecomfe/tempad-dev --skill figma-design-to-code --agent claude-codeInstalls into .claude/skills of the current project.
Files
Implement Figma design in code
Turn visible Figma evidence into the smallest project-native implementation that preserves the intended result. Keep that result focal: project files, TemPad output, rules, and tool calls are evidence for the implementation, not deliverables to reproduce mechanically.
Require TemPad Dev MCP to provide trustworthy design evidence for the current
selection or exact node IDs inside the user's established scope. Never
reconstruct the design from memory, screenshots alone, or get_structure
metadata.
Evidence and authority
Use each source only for what it can establish:
- The user sets scope, requirements, prohibitions, and missing product or implementation decisions.
- The project sets framework, file placement, component boundaries, styling, tokens, assets, dependencies, and verification conventions.
- TemPad Dev sets visible structure and rendered design facts.
Follow project instruction files for concerns outside Figma-to-code translation. Do not add policy for routing, analytics, i18n, CMS, or other orthogonal systems.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/ecomfe/tempad-dev
- Categories
- Git & Pull Requests, Code Review & Quality, AI & Agent Building, Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Git & Pull Requests
cross-evalalirezarezvani/claude-skills/cs:cross-eval <memo> — Multi-model consensus on a board memo or strategy brief. Claude + Codex + Gemini cross-review with graceful degradation. Use when a high376skills.sh installs
tooluniverse-structural-variant-analysismims-harvard/tooluniverseStructural variant (SV) clinical interpretation: deletions, duplications, inversions, translocations, complex rearrangements. Applies ACMG-adapted criteria with374skills.sh installs
ln-633-test-value-auditorlevnikolaevich/claude-code-skillsScores each test by portfolio value and returns KEEP/DELETE/MERGE/REWRITE. Use when pruning test-suite cost.372skills.sh installsln-740-quality-setuplevnikolaevich/claude-code-skillsSets up linters, pre-commit hooks, and test infrastructure. Use when adding code quality tooling to a project.372skills.sh installs
schema-markupdavila7/claude-code-templatesWhen the user wants to add, fix, or optimize schema markup and structured data on their site. Also use when the user mentions "schema markup," "structured data,371skills.sh installs
azure-devopssanjay3290/ai-skillsManage Azure DevOps projects, work items, repos, PRs, pipelines, wikis, test plans, security alerts, variable groups, environments/approvals, branch policies, a369skills.sh installs