Back to Skills
Design-to-code

design-to-code

Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust…

design-to-code is an Agent Skill — a folder with a SKILL.md and any helper scripts that a coding agent loads on demand. Drop it in your skills directory and the agent picks it up the next time the task matches.

Everything on this page — the summary, the category and the how-to — is written by HowToPrompts; the link below goes to the original project.

CategoryDesign-to-code
/skill add design-to-code

How to use it

  1. Copy the skill folder into your agent's skills directory, or run the add command above.
  2. Reload the agent so it re-scans available skills.
  3. Trigger it by describing the task — the agent loads the skill when it matches.
Compiled and written by HowToPrompts from public sources.

Related in Design-to-code

test-driven-developmentWrite the failing test first, then the code — enforced red-green-refactor.using-git-worktreesSpin up isolated git worktrees safely, with smart directory picks.academy-guideGuided walkthroughs that teach Claude's features step by step.algorithmic-artGenerate generative, code-driven artwork with tunable form and palette.brand-guidelinesApply a brand's voice, color and type consistently across everything you generate.canvas-designLay out clean poster and canvas graphics with balanced composition.claude-apiA working reference for the Claude API — models, pricing, streaming and tool use.discernment-nudgePrompt sharper judgment by flagging weak reasoning before it ships.doc-coauthoringCo-write long documents with structure, consistent voice and tight edits.docxRead, build and revise Word documents — tracked changes, comments and clean formatting kept intact.
← Back to Skills