Back to prompts
✦ClaudeDesign
1:1 hero section recreation in Figma (Claude Code + Figma MCP)
Exact frame/navbar/type coordinates so Claude Code can rebuild a hero section 1:1 in Figma through the Figma MCP.
Loading the original X post…
Open original on XExact frame/navbar/type coordinates so Claude Code can rebuild a hero section 1:1 in Figma through the Figma MCP.
The prompt
✦Claude Code + Figma MCP
| 1 | Recreate this hero section in Figma exactly. |
| 2 | |
| 3 | IMPORTANT: Install the Switzer font before running this prompt. |
| 4 | Download from http://fonts.google.com/specimen/Switzer |
| 5 | If Switzer is unavailable, use Inter as a fallback, but the output will not be 1:1. |
| 6 | |
| 7 | --- |
| 8 | |
| 9 | FRAME |
| 10 | Name: Hero Section |
| 11 | Width: 1280px, Height: 1049px |
| 12 | Background: #FDFCF4 |
| 13 | Clip content: true |
| 14 | |
| 15 | --- |
| 16 | |
| 17 | NAVBAR |
| 18 | x=0, y=0, Width: 1280px, Height: 100px, no fill |
| 19 | |
| 20 | Inner content container: |
| 21 | Width: 1128px |
| 22 | x: 76px (= (1280-1128)/2) |
| 23 | y: 24px |
| 24 | Height: 52px |
| 25 | Auto-layout: horizontal, space-between, align center |
| 26 | |
| 27 | Left — Logo (auto-layout horizontal, gap 8px, align center): |
| 28 | - Black square: 16x16px, fill #000000, corner radius 3px |
| 29 | - "VANTAGE" — Switzer Regular, 16px, #000000 |
| 30 | |
| 31 | Center — Nav links (auto-layout horizontal, gap 40px, align center): |
| 32 | - "Features" — Switzer Regular, 16px, #000000, opacity 100% |
| 33 | - "Pricing" — Switzer Regular, 16px, #000000, opacity 60% |
| 34 | - "Reviews" — Switzer Regular, 16px, #000000, opacity 60% |
| 35 | |
| 36 | Right — (auto-layout horizontal, gap 24px, align center): |
| 37 | - "Sign in" — Switzer Regular, 16px, #000000, opacity 60% |
| 38 | - Button "Sign up for free": |
| 39 | Padding: 24px left/right, 12px top/bottom |
| 40 | Fill: rgba(149,149,149,0.1) |
| 41 | Text: Switzer Regular, 16px, #000000 |
| 42 | Corner radius: 12px |
| 43 | Stroke: 1px inside, rgba(0,0,0,0.08) |
| 44 | Sizing: HUG contents (do NOT set fixed width) |
| 45 | |
| 46 | --- |
| 47 | |
| 48 | HERO IMAGE |
| 49 | x: 76px, y: 120px |
| 50 | Width: 1128px (= 1280 - 76 - 76) |
| 51 | Height: 643px |
| 52 | Corner radius: 16px |
| 53 | Fill: image fill from ~/Downloads/vantage-hero.jpg, scale mode FILL |
| 54 | Clip content: true |
| 55 | Fallback if no image: rectangle fill #CCCCCC |
| 56 | |
| 57 | --- |
| 58 | |
| 59 | CONTENT BLOCK |
| 60 | x: 235px (= (1280 - 810) / 2) |
| 61 | y: 770px |
| 62 | Width: 810px (fixed) |
| 63 | Auto-layout: vertical, align center, gap: 32px |
| 64 | Sizing: HUG height, FIXED width |
| 65 | |
| 66 | Headline: |
| 67 | "See Further. Think Deeper." |
| 68 | Cardo Regular, 64px, line height 115%, letter spacing -3px |
| 69 | Color: #000000, center aligned |
| 70 | Width: 810px, height: HUG |
| 71 | |
| 72 | Subheading: |
| 73 | "Vantage combines AI pattern recognition with human perspective — |
| 74 | giving teams the clarity to act on what matters, before the moment passes." |
| 75 | Geist Regular, 18px, line height 170%, letter spacing -0.3px |
| 76 | Color: #1C1A1A, opacity 70%, center aligned |
| 77 | Width: 716px (fixed), height: HUG |
| 78 | Centered inside the 810px block |
| 79 | |
| 80 | CTA Button: |
| 81 | Text: "Get Early Access" |
| 82 | Auto-layout horizontal, HUG both axes (NOT fixed width) |
| 83 | Padding: 19px left/right, 10px top/bottom |
| 84 | Fill: #000000 |
| 85 | Text: Geist Medium, 16px, #FFFFFF |
| 86 | Corner radius: 12px |
| 87 | Stroke: 1.5px inside, rgba(0,0,0,0.1) |
| 88 | Drop shadows (add both): |
| 89 | shadow 1: x=0, y=11, blur=11, spread=0, rgba(0,0,0,0.09) |
| 90 | shadow 2: x=0, y=3, blur=6, spread=0, rgba(0,0,0,0.10) |
| 91 | Centered inside the 810px block |
What this prompt is good for
Visual direction
Moodboards, style guides, and design briefs
Marketing creative
Hero artwork and high-converting visual assets
Brand identity
Consistent aesthetics across typography and form
Rapid prototyping
Iterate variations in seconds with precision
