2 min read
Design Spec Handoff
When you’ve designed something in Figma and want Claude to build it, use this template. Paste your design specs into your prompt — the more specific you are, the closer Claude gets on the first try. See the Figma to Code guide for the full workflow.
The Template
## Design Specs
### Colors
- Background: [hex]
- Surface/Card: [hex]
- Primary text: [hex]
- Secondary text: [hex]
- Accent/CTA: [hex]
- Border: [hex]
### Typography
- Headings: [font], [size]px, [weight]
- Body: [font], [size]px, [weight]
- Small/Caption: [font], [size]px, [weight]
### Spacing
- Page margins: [value]
- Section gap: [value]
- Card padding: [value]
- Element gap: [value]
### Components
- Border radius: [value]
- Shadows: [description or CSS value]
- Button style: [description]
### Layout
- [Describe the layout: grid columns, sidebar width, content max-width, etc.]
### Notes
- [Any specific details, interactions, or references]Filled Example
A dark-themed portfolio site with a 3-column project grid.
## Design Specs
### Colors
- Background: #0A0A0A
- Surface/Card: #161616
- Primary text: #F5F5F5
- Secondary text: #A0A0A0
- Accent/CTA: #6366F1
- Border: #2A2A2A
### Typography
- Headings: Inter, 32px, 700
- Body: Inter, 16px, 400
- Small/Caption: Inter, 13px, 400
### Spacing
- Page margins: 64px (desktop), 24px (mobile)
- Section gap: 80px
- Card padding: 24px
- Element gap: 16px
### Components
- Border radius: 12px for cards, 8px for buttons, 4px for inputs
- Shadows: none — using subtle borders for separation
- Button style: solid fill with accent color, white text, 48px height, 24px horizontal padding
### Layout
- Max content width: 1200px, centered
- 3-column project grid, 24px gap, cards collapse to single column on mobile
- Navigation: fixed top bar, logo left, 3 text links right
- Hero section: left-aligned headline with a short intro paragraph, no image
- Footer: single row, copyright left, social icons right
### Notes
- Cards should scale up slightly on hover (transform: scale 1.02) with a 200ms ease transition
- Navigation links should underline on hover
- Use the Inter font from Google Fonts
- Accent color (#6366F1) is only used for CTAs and links — not for decorative elements