@poistudioltd
Figma hero recreation
✦ClaudeFigma hero recreation
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.

Recreate this hero section in Figma exactly.
IMPORTANT: Install the Switzer font before running this prompt.
Download from http://fonts.google.com/specimen/Switzer
If Switzer is unavailable, use Inter as a fallback, but the output will not be 1:1.
---
FRAME
Name: Hero Section
Width: 1280px, Height: 1049px
Background: #FDFCF4
Clip content: true
---
NAVBAR
x=0, y=0, Width: 1280px, Height: 100px, no fill
Inner content container:
Width: 1128px
x: 76px (= (1280-1128)/2)
y: 24px
Height: 52px
Auto-layout: horizontal, space-between, align center
Left — Logo (auto-layout horizontal, gap 8px, align center):
- Black square: 16x16px, fill #000000, corner radius 3px
- "VANTAGE" — Switzer Regular, 16px, #000000
Center — Nav links (auto-layout horizontal, gap 40px, align center):
- "Features" — Switzer Regular, 16px, #000000, opacity 100%
- "Pricing" — Switzer Regular, 16px, #000000, opacity 60%
- "Reviews" — Switzer Regular, 16px, #000000, opacity 60%
Right — (auto-layout horizontal, gap 24px, align center):
- "Sign in" — Switzer Regular, 16px, #000000, opacity 60%
- Button "Sign up for free":
Padding: 24px left/right, 12px top/bottom
Fill: rgba(149,149,149,0.1)
Text: Switzer Regular, 16px, #000000
Corner radius: 12px
Stroke: 1px inside, rgba(0,0,0,0.08)
Sizing: HUG contents (do NOT set fixed width)
---
HERO IMAGE
x: 76px, y: 120px
Width: 1128px (= 1280 - 76 - 76)
Height: 643px
Corner radius: 16px
Fill: image fill from ~/Downloads/vantage-hero.jpg, scale mode FILL
Clip content: true
Fallback if no image: rectangle fill #CCCCCC
---
CONTENT BLOCK
x: 235px (= (1280 - 810) / 2)
y: 770px
Width: 810px (fixed)
Auto-layout: vertical, align center, gap: 32px
Sizing: HUG height, FIXED width
Headline:
"See Further. Think Deeper."
Cardo Regular, 64px, line height 115%, letter spacing -3px
Color: #000000, center aligned
Width: 810px, height: HUG
Subheading:
"Vantage combines AI pattern recognition with human perspective —
giving teams the clarity to act on what matters, before the moment passes."
Geist Regular, 18px, line height 170%, letter spacing -0.3px
Color: #1C1A1A, opacity 70%, center aligned
Width: 716px (fixed), height: HUG
Centered inside the 810px block
CTA Button:
Text: "Get Early Access"
Auto-layout horizontal, HUG both axes (NOT fixed width)
Padding: 19px left/right, 10px top/bottom
Fill: #000000
Text: Geist Medium, 16px, #FFFFFF
Corner radius: 12px
Stroke: 1.5px inside, rgba(0,0,0,0.1)
Drop shadows (add both):
shadow 1: x=0, y=11, blur=11, spread=0, rgba(0,0,0,0.09)
shadow 2: x=0, y=3, blur=6, spread=0, rgba(0,0,0,0.10)
Centered inside the 810px block