📖 Step 3: Design - UI Components & Patterns#90 / 291
Inspect (Zeplin)
Inspect (Zeplin)
📖One-line summary
A tool for extracting exact values (spacing, color, font) from a design.
✨Example
margin: 16px
24px
pad: 12px
Button
W:96 × H:36
font: 14px Bold#2563EBradius: 8px
⚡Vibe coding prompt examples
>_
Convert design properties extracted from the Figma Inspect panel into CSS. Carry over font, color, padding, margin, and shadow values exactly.
>_
Debug a layout issue spotted in browser DevTools. The spacing between elements is off by 2px from the design; find the cause.
>_
Share how to compare a design mock to the implemented screen pixel by pixel. Build an overlay comparison tool or auto-compare script.
Try these prompts in your AI coding assistant!