onfire7777 Design to Code (Restore Design Mockups)
Faithfully convert design mockups (Figma/Sketch/image) into frontend code, ensuring consistency in layout, spacing, typography, colors, and interactions.
Trigger Scenarios
- User says "design to code," "implement according to design," "slice images," or "convert design to code"
- Provides Figma/Sketch link, design screenshot, or annotations
- Needs to implement UI for a specific page/component
Execution Process
1. Analyze the Design Mockup
- Annotations: dimensions, spacing (padding/margin/gap), font size and line height, colors (including opacity), border radius, shadows, borders
- Hierarchy: component division, nesting relationships, reusable modules
- States: default / hover / focus / disabled / loading / empty / error
- Responsive: breakpoints, layout changes at different widths (grid, wrapping, hiding)
2. Align Design Tokens
- Map colors, font sizes, and spacing to existing project CSS variables or Tailwind configuration whenever possible
- If no existing tokens, use variable naming (e.g.,
--color-primary) during implementation for future unification
3. Implementation Priority
- Layout: Build skeleton with Flex/Grid to ensure alignment and spacing
- Typography: font family, size, weight, line height, color
- Visuals: background, borders, border radius, shadows
- Interaction States: hover/focus/disabled, etc.
- Responsive: breakpoints and flexible layouts
- Animations: add transitions/animations if specified in design
4. Self-Check for Fidelity
- Key dimensions match design mockup (allowing 1–2px difference)
- Fonts and colors match design
- Layout is reasonable and without misalignment at main breakpoints
- Interactive elements have clear state feedback
Output Conventions
- Use existing project tech stack (e.g., Next.js, Tailwind, SCSS, component libraries)
- Componentization: extract reusable parts into clearly named components
- Semantic HTML + appropriate ARIA (buttons, links, forms)
- Note any deviations from design and reasons (e.g., compatibility, accessibility) when necessary
Common Correspondences
| Design Mockup | Implementation Method |
|---|---|
| 8px grid | Spacing uses multiples of 8 (8/16/24/32) |
| Typography hierarchy | Corresponds to semantic classes like heading/body/caption or design tokens |
| Blur/Frosted glass | backdrop-filter + semi-transparent background |
| Multi-line truncation | line-clamp or -webkit-line-clamp |
| Safe area | padding combined with env(safe-area-inset-*) |