1 Curated Pixel Perfect Prompts

Pixel Perfect Prompts

Production recipes and workflows categorized under #pixel-perfect.

Bobo Wong
@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.

1:1 hero section recreation in Figma (Claude Code + Figma MCP) by Bobo Wong
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
·36.8k uses·View original