4-block landing-page brief

Category: Vibe Coding Prompts

Generate a landing page using a defined design system.

Adapted and shared by Product with Attitude, with credit to Anthropic's support docs, superdesign.dev, aibestprompts.in, awesome-claude-design.

Prompt / skill content

Build a landing page for [product name]: [one-sentence pitch].

Use the attached DESIGN.md as the source of truth for color, type,
geometry, and component style. Do not invent new tokens.

Sections in order: hero, social proof, three-feature grid, pricing
teaser, secondary CTA, footer.

Tone: [pick one] confident · curious · honest · playful.

Audience: [one specific persona and their current situation].

Constraints (verbatim):
- No Inter, Roboto, Open Sans, or system-ui.
- No purple or indigo gradients on white.
- No centered three-rounded-card hero. Use asymmetric two-column
  or full-bleed hero with typographic hierarchy.
- No 0.1-opacity drop shadows on everything. One deliberate
  shadow if any, on the primary CTA only.
- No Lorem Ipsum. Use real, specific copy for MY product.
- No emoji feature icons. Use Lucide or the icons already in
  the codebase.
- Single accent color moment per viewport. Kill duplicates.

Generate the page. Then wait for feedback before regenerating.

Where to get it

Read the original resource.

More in Vibe Coding Prompts

Source Code: Valentine’s Day scratch card app — Sharing the full source code to the Valentine’s Day scratch card app so you can build your own. Copy it, tweak it, ship…
Vibe coding: Drag-drop form builder for webinars and workshops — Every creator wants to design forms for events and workshops. Google Forms is the only free option, but it seems limite…
Vibe coding: AI Rules Files Generator — Generate an AI rules file for your coding environment, with plain-language explanations and beginner-friendly product t…
Vibecoding x Cybersecurity: Survival Guide — The cybersecurity critiques of vibecoding are valid. So instead of debating them, I partnered with an expert to map the…
Prompt Pack: 100 Most Common UI Elements For Vibecoders — A Notion library of 100+ common UI elements with ready-to-use prompts for building interfaces with AI. Entries cover wh…
Animation Pack 001: Hero Section - Breathing Gradient — Make Your Hero Section Feel Alive A tiny motion system for modern landing pages - subtle animation, stronger perceived …
Animation Pack 001: Hero Section - Breathing Gradient — Make Your Hero Section Feel Alive A tiny motion system for modern landing pages - subtle animation, stronger perceived …
Vibe coding: Instantly Fix 401 Errors. An Automated Debug Loop That Runs 30+ Checks and Finds Root Cause — An automated debugging prompt for persistent 401 authentication errors, developed while troubleshooting Google OAuth. I…

← Back to Attitude Vault