The gap between "the AI produced something" and "the site is live" is where most projects stall. Here is a workflow that closes it, written for people using Claude, Cursor, v0, Lovable, Bolt, or anything else that takes text in and gives code out.
Build in sections, never whole pages
Asking for an entire landing page in one prompt gives you one large artifact you cannot steer. Something is always wrong, and fixing it means regenerating everything, including the parts that were fine.
Generate section by section — hero, features, pricing, FAQ, footer — and assemble. Each piece is small enough to judge at a glance and cheap enough to redo.
This also means you can source sections from different prompts and keep the ones that worked.
Fix the design tokens before generating anything
If each section is generated independently, each will invent its own palette, spacing rhythm, and heading sizes. Assembled, they read as five different sites.
Decide first — background, foreground, one accent, one radius scale, one font — then paste those values into every prompt. Six lines at the top of each prompt, unchanged:
Background #080808, foreground #ffffff, accent #A855F7.
Headings: font-weight 500, tracking -1px.
Body: 15px, line-height 1.65, color rgba(255,255,255,0.5).
Radius: 12px cards, 9999px buttons.
Max width 1200px, section padding 96px vertical.
This single habit does more for coherence than any amount of prompt refinement.
Give the model real content
Placeholder text ("Lorem ipsum", "Your Headline Here") produces layouts that break the moment real copy arrives, because the model sized everything for text that does not exist. A headline that fits beautifully at six words wraps to three lines at fourteen.
Paste your actual headline, your actual feature names, your actual pricing. If you do not have them yet, write them badly rather than not at all — bad real copy is closer to final than good fake copy.
Say what the section must not do
Negative constraints are underused and disproportionately effective:
- "No external font imports"
- "No animation library — CSS or IntersectionObserver only"
- "No icon library; inline SVG only"
- "Do not add a testimonial section unless I asked for one"
That last one is more relevant than it sounds. Models pad landing pages with invented social proof — fake testimonials, fake logos, fake numbers. If you ship those, you have published fabricated claims about your business.
Check three things every time
Before you accept a section:
- Narrow viewport. 360px wide. Most AI output is designed at desktop width and never tested below it.
- Long content. Double the length of the longest string. Does the layout hold?
- Keyboard. Tab through it. Are focus states visible? Is anything reachable only by mouse?
These three catch the large majority of what would otherwise reach production.
Then read the code
Not to review every line — to check for the things that are expensive to discover later: a CDN script tag, a 500 KB dependency for one effect, an image with no dimensions, a fixed pixel height that will clip translated text.
Every prompt in our library carries the constraints above baked in — named techniques, no invented social proof, reduced-motion handled, no surprise dependencies. Around 1,000 also ship with the finished source code, so you can skip the generation step when you would rather just have the implementation.
Browse the free prompts — no account needed.