figma-design-to-code

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.

TemPad can establish visible hierarchy, layout, spacing, typography, color, effects, token references, exported assets, and codegen unit context. It cannot establish unevidenced states, responsive behavior, business logic, navigation, validation, analytics, or project conventions. Treat get_structure as hierarchy and geometry evidence only, never as missing style truth.

Workflow

1. Establish the implementation envelope

Read only local evidence that can change this implementation, in this order:

1. applicable AGENTS.md or equivalent instructions;
2. relevant design-system, token, component, and asset guidance;
3. the nearest comparable implementation and reusable primitives;
4. framework, styling, and check configuration needed for this task.

Determine the target file or component boundary, framework, styling method, token and asset paths, reuse candidates, dependency constraints, and narrowest relevant checks. Inspect Tailwind version and theme scales only when the project actually uses Tailwind-compatible tooling.