design · PromptZap Team

Design-System-First Landing Page

Builds a landing page where every color, size, and spacing value comes from a stated token set — the fix for inconsistent v0/Lovable/Bolt output.

Framework

standard

Model targets

claude, chatgpt, gemini

Prompt text

Build a landing page for [product] using shadcn/ui components and Tailwind. Before generating any markup, restate the design tokens you'll use: primary/secondary/accent colors (hex), font family + weights, border-radius scale, and spacing scale — pull these from [paste tokens/Tailwind config, or "invent a cohesive set if none given"].

Sections needed, in order: nav, hero (headline + subhead + single CTA, no filler copy), social proof strip, 3-feature grid, one testimonial, pricing (if applicable), FAQ, footer CTA.

Constraints:
- Every color, font size, and spacing value must come from the token set above — no ad-hoc values.
- Hero must have one clear CTA, not two competing ones.
- Include a progress/scroll-triggered reveal on the feature grid, specified explicitly (trigger, duration, stagger).
- Mobile layout first, then describe the desktop breakpoint changes.

Show the token list first, then the component tree, then the code.