Vibe Coding Workflows
A practical guide to building landing pages, one-pagers, and websites with AI tools. Answering all your questions, mapping every workflow variant, and giving you a clear starting path.
Clearing Things Up First
Your Questions, Answered
Claude Code vs. Claude Chat for starting projects. Is there a difference? Does one save quota?
They use the same underlying models and similar token costs. The real difference is output format. Claude Chat gives you conversation + artifacts (rendered previews). Claude Code creates actual files on your disk that you can immediately open, edit, and deploy. For websites and landing pages, Claude Code is better because you get real files in a real project folder, you can use skills like Impeccable, and you can iterate with file-level precision. Claude Chat is fine for early brainstorming, but once you want to build, move to Claude Code.
Should I use Claude's Plan mode? When?
Yes, but not at the very start. For a landing page, you don't need to plan before the first version. Just prompt and build. Use Plan mode (or the chat/think-first approach in Claude Code) after you have a v1 you like and before you start making structural changes or adding sections. For a multi-page website, use Plan mode before the first build to define page structure, navigation, and content hierarchy.
Do I really need 4-5 parallel builds? That seems excessive.
No, 2-3 is plenty for landing pages. Lazar's parallel build method is designed for apps with complex UX flows. For a one-pager or marketing site, try 2-3 variations max. One with a detailed text prompt, one with visual references. Compare, pick the winner, iterate from there. Don't spend more time choosing than building.
Do I need masterplan.md, user journeys, tasks.md, etc. for a landing page?
No. Lazar's full PRD system is for apps with backends, auth, databases, and multi-screen flows. For a landing page or simple website, a single design.md file covering your color palette, fonts, tone, and section layout is more than enough. Save the heavy planning for when you're building something with real functionality.
Should I try Claude Code, Codex, Lovable, Replit, AND Vercel for the same project?
Not all at once. Pick 2 tools max for your first comparison. Claude Code + one hosted tool (Lovable or v0/Vercel) is a good pair. Claude Code gives you full control and file access. Lovable/v0 gives you instant hosting and a visual preview. Once you know which workflow you prefer, stick with it for your next few projects. You'll learn more from depth than from breadth.
Should I vary the input style for every tool? (3 tools x 3 input styles = 9 attempts?)
No. Pick your best input (the most detailed one, with visual references) and use that same input across the 2 tools you're comparing. The goal is to compare tool quality, not to multiply experiments. You can always do a quick raw-prompt test later if you're curious, but start with apples-to-apples.
Design Pipeline
Google Stitch 2.0: What It Does and Where It Fits
Google Stitch (updated March 2026) is a free AI design tool from Google Labs. It generates high-fidelity UI designs from natural language prompts, screenshots, or sketches. It runs on Gemini models and exports to Figma, HTML/CSS, React, or a DESIGN.md markdown file.
The DESIGN.md Concept
This is the key feature people are excited about. Stitch can export a DESIGN.md file that captures your visual system in agent-readable markdown: color palette with hex codes, font choices and hierarchy, spacing rules, component patterns, and overall aesthetic direction. You then feed this file to Claude Code (or any coding agent) as a design constraint.
Two Ways to Use Stitch with Claude Code
Option A: Export DESIGN.md Recommended
Generate your design in Stitch, export the DESIGN.md file, place it in your project root, and reference it in your Claude Code prompt. Claude reads the design rules but still has creative freedom in layout and implementation.
Good balance of design consistency + Claude's coding strengths.
Option B: Stitch MCP Server Advanced
Connect Stitch as an MCP server so Claude Code can directly access the generated code and design context. This is more tightly coupled and means Claude sees ALL the code Stitch produced.
Risk: may over-constrain Claude. The Stitch code may not match what Claude would naturally produce, creating friction. Best for experienced users.
My take on the "Stitch first" workflow
For landing pages, Stitch is most useful as a mood board + design system generator. Feed it your screenshots from Mobbin/Dribbble, tell it the style you want (glassmorphism, brutalist, whatever), export the DESIGN.md, and hand that to Claude Code. Don't export the full code unless you specifically want Stitch's layout decisions, not just its visual language.
Design Quality
The Impeccable Skill: How It Actually Works
Impeccable is a Claude Code skill (by pbakaus) that enhances Claude's frontend design output. It has two parts:
1. The Background Skill (always-on)
Once installed, there's an enhanced frontend-design skill that loads automatically whenever Claude detects it's doing frontend work. It teaches Claude to avoid generic AI aesthetics (no Inter font, no purple gradients on white, no cookie-cutter layouts) and instead make bold, intentional design choices. You don't need to invoke it. It just works.
2. The 20 Slash Commands (on-demand)
These are explicit actions you trigger when you want them. The key ones for landing pages:
/polish
Final visual cleanup pass
/audit
Find design issues
/typeset
Fix font hierarchy and sizing
/overdrive
Push boring designs further
/normalize
Fix inconsistencies
/distill
Remove unnecessary complexity
/teach-impeccable
Run once to gather project design context
/motion
Add animations and interactions
Practical workflow with Impeccable
Install it globally (cp -r dist/claude-code/.claude/* ~/.claude/) so it applies to all projects. The background skill auto-activates. Then after your first build, run /teach-impeccable once to save your project's design context. From then on, use /polish as your final step before shipping, and /overdrive when the output feels too safe.
The Core Guide
3 Workflow Variants for Landing Pages
Sorted from simplest to most involved. All three are valid. Pick based on how much design control you want upfront.
Workflow A: Direct Build Start Here
Best for: Quick one-pagers, when you have a clear idea, when you want to learn fast.
1. Write a detailed prompt
Describe purpose, audience, sections, content, and style in one message. Include specific text (headlines, CTAs). Mention a design style by name if you have one (glassmorphism, brutalist, editorial, etc.). Optionally attach 1-2 screenshot references.
2. Build v1 in Claude Code
Let it generate the full page. Open in browser. Don't touch anything yet.
3. (Optional) Build v1 in Lovable with same prompt
Quick comparison. Takes 2 minutes. Helps you see which direction you prefer.
4. Pick the winner, iterate
Now prompt specific changes: "make the hero section taller," "swap to a dark theme," "use a different font for headings." One change at a time.
5. Polish with /polish and /typeset
If you have Impeccable installed, run these commands as the final pass before shipping.
Workflow B: Stitch-First Design Better Design Control
Best for: When you care deeply about visual quality, when you have reference screenshots, when you want to lock in a design system before building.
1. Collect visual inspiration
Browse
Mobbin,
Dribbble, or real sites you admire. Save 2-5 screenshots.
2. Feed into Google Stitch
Upload screenshots + describe your desired style. Let Stitch generate a design. Iterate in Stitch until the visual direction feels right. Then export the DESIGN.md file.
3. Place DESIGN.md in your project
Drop it into your project root. In your Claude Code prompt, say: "Read DESIGN.md for visual guidelines. Build a landing page for [description] following these design rules."
4. Build v1 in Claude Code
Claude now has your locked-in design system (colors, fonts, spacing) but creative freedom on layout and implementation. Best of both worlds.
5. Iterate + Polish
Same as Workflow A steps 4-5. Prompt specific changes, then run /polish.
Workflow C: Full Planning Mode For Multi-Page Sites
Best for: Multi-page marketing sites, sites with real content strategy, when you're building something that needs to be maintained.
1. Brain dump + refine (Claude Chat or ChatGPT)
Voice-dump or type everything you know about the project. Let the AI ask clarifying questions. Refine until you have a clear brief: pages, sections per page, content, audience, goals.
2. Create design system (Stitch or manual)
Either use Stitch to generate DESIGN.md, or write one manually. For a multi-page site, this is worth the investment.
3. Build v1 of homepage only
Don't build everything at once. Get the homepage right first. This sets the visual tone for all other pages.
4. Create lightweight planning docs
Now that you have a visual baseline, create: sitemap.md (page list + hierarchy) and design.md (locked-in styles from the homepage build). You do NOT need masterplan.md, implementation.md, user-journeys, etc. for a marketing site.
5. Build remaining pages one at a time
Prompt: "Read design.md and sitemap.md. Build the [About/Pricing/etc.] page matching the existing homepage style." One page per prompt. Review each before moving on.
6. Final pass: /audit then /polish
Run Impeccable's audit across the whole site, fix issues, then polish.
Right-Sizing the Process
When to Plan (and How Much)
The Lazar system (masterplan, implementation plan, design guidelines, user journeys, tasks.md) is designed for apps with backends, databases, and complex user flows. For static websites and landing pages, here's what you actually need:
ONE-PAGER
No planning docs needed. Just a good prompt.
Optionally: a DESIGN.md from Stitch if you want locked-in visuals.
MULTI-PAGE SITE (3-7 pages)
design.md + sitemap.md
Lock in the visual system after the homepage. Map out page structure. That's it.
WEB APP / COMPLEX SITE
Full Lazar system
masterplan.md, implementation.md, design.md, user-journeys.md, tasks.md, rules.md
Copy-Paste Ready
Starter Prompts
For Claude Code: Landing Page (Workflow A)
Build a landing page for [YOUR PRODUCT/SERVICE].
Audience: [who is this for]
Purpose: [what action should visitors take]
Tone: [professional/playful/bold/minimal/etc.]
Sections:
- Hero with headline "[YOUR HEADLINE]" and CTA "[YOUR CTA TEXT]"
- [Social proof / logos / testimonials]
- [Feature/benefit breakdown - describe 3-4 key points]
- [How it works / process steps]
- [Pricing or final CTA]
- Footer with [links you need]
Design style: [glassmorphism / brutalist / editorial / dark luxury / etc.]
Color palette: [primary color, accent, background preference]
Font preference: [if any, or "surprise me with something distinctive"]
Build this as a single-page HTML file with embedded CSS.
Make it responsive. No frameworks needed unless you think it helps.
Make the design feel premium and intentional, not generic.
For Claude Code: With DESIGN.md (Workflow B)
Read the DESIGN.md file in the project root for visual guidelines.
Build a landing page for [YOUR PRODUCT/SERVICE] following those design
rules strictly for colors, fonts, and spacing.
[Then include the same section/content details as above]
You have creative freedom on layout and animations,
but the visual system must match DESIGN.md exactly.
For Google Stitch: Generating DESIGN.md
Design a landing page for [brief description].
Style: [glassmorphism / dark luxury / editorial / etc.]
Mood: [the emotional feeling you want]
Color direction: [warm/cool/monochrome/vibrant]
I want to export a DESIGN.md from this to use in my coding tool.
Focus on establishing a strong, cohesive design system.
From the Trenches
Pro Tips
💡
Don't fix, restart. If the v1 is fundamentally off, don't burn tokens trying to fix it. Start a new chat/session with a revised prompt. This is the core of Lazar's parallel build insight, and it applies to Claude Code just as much as Lovable.
💡
One change per prompt. When iterating, ask for one thing at a time. "Make the hero section use a gradient background and increase the heading font size" is fine. "Redesign the whole page with new colors, different layout, add three sections, and change all the copy" is not.
💡
Screenshots beat descriptions. "Make it look like this" + a screenshot is worth more than 500 words of description. Claude Code accepts image attachments. Use them.
💡
Name your fonts. Don't say "modern font." Say "Use Space Mono for headings and DM Sans for body." Lazar says fonts are 60%+ of how your output looks. He's right. Browse
Google Fonts or
FontPair for inspiration.
💡
Code snippets > style names. If you find a component you love on 21st.dev or a Tailwind template site, export the code and include it in your prompt. Claude interprets code more precisely than style descriptions.
💡
Impeccable /overdrive for safe outputs. If Claude gives you something technically correct but visually boring, run /overdrive. It's designed specifically to push conservative designs into more interesting territory.
💡
Learn from agent output. When Claude Code builds your page, read what it says about its decisions, not just the code. This is how you develop design intuition over time. The agent's reasoning is a free design education.
Quick Reference
Which Workflow Should I Use?
→
I just want to build something fast and learn
Workflow A. Detailed prompt, build, iterate. Skip Stitch, skip planning docs.
→
I have strong visual opinions and reference screenshots
Workflow B. Run your references through Stitch first, export DESIGN.md, then build in Claude Code with those constraints.
→
I'm building a real multi-page marketing site
Workflow C. Brain dump, build homepage first, create lightweight docs, then build page by page.
→
I want to compare tools before committing
Take your best prompt (detailed, with references) and run it in Claude Code + Lovable. Same input, two outputs. Pick the winner.
→
I'm building an app, not a website
Use the full Lazar system from the podcast. masterplan.md, implementation plan, design guidelines, user journeys, tasks.md. That's what it was designed for.
Sources: Lenny's Podcast with Lazar Jovanovic, GrowthX "Master Lovable in 90 Minutes," Google Stitch 2.0 announcement (March 2026), Impeccable by pbakaus