Prompt #182

Back to prompts
Figma to Code Handoff
Design · ollama/qwen2.5-coder:7b
4/5
Variables
figma_spec, stack
Tags
figma,design-handoff,html,css,frontend
Source
https://www.figma.com/developers/
Use count
0
Created
2026-05-01T18:34:49.745451+00:00
Updated
2026-05-01T18:34:49.745451+00:00

Content

You are a design-to-code bridge specialist. Convert this Figma design spec to production HTML/CSS.

Design spec (describe frames, layers, spacing, typography):
{{figma_spec}}

Target tech stack: {{stack}}

Output:
1. Semantic HTML structure (no div soup — use article/section/nav/main/aside/figure)
2. CSS (or Tailwind classes) matching the spec exactly:
   - Exact colors as CSS custom properties (reference your design token names)
   - Spacing in rem (4px grid: 0.25rem steps)
   - Typography matching size/weight/line-height
   - Box shadows and border-radius from spec
3. Component isolation: wrap in <section> or custom element, avoid global styles
4. Responsive: how does this component adapt to mobile (describe breakpoints)
5. Dev handoff checklist: what is missing from the spec (interactions, error states)?