Claude Code Landing Page Builder
Using Claude Code to scaffold, design, and iterate on a complete marketing landing page from a single prompt — including Tailwind layout, copy, and responsive design.
Goal
Determine how far a single Claude Code session can take you from blank canvas to a deployable landing page without switching tools or leaving the terminal.
Context
Claude Code is Anthropic's agentic coding CLI that reads your codebase, proposes changes across files, runs tests, and commits code. This experiment treats Claude Code as a pair programmer for a full design-to-code workflow — no Figma, no manual scaffolding. The session started with a one-line brief: build a SaaS landing page for a fictional developer tool called 'Stackr'.
Prompt used
Build a production-ready Next.js landing page for a developer tool called "Stackr" — a CLI that auto-generates API documentation from TypeScript source. Include a hero, features grid, pricing table (3 tiers), and a footer. Use Tailwind CSS, dark mode by default, and add subtle Framer Motion entrance animations. Keep the copy technical but accessible. No placeholder images.
Implementation notes
Claude Code created 14 files in a single session: the Next.js app scaffold, Tailwind config, 6 reusable components, and all page sections. It independently installed Framer Motion, wrote a custom hook for scroll-triggered animations, and validated the responsive layout by listing all breakpoints. The entire session took 23 turns and approximately 4 minutes of active generation.
Result
A fully functional, visually complete landing page with all requested sections. The Framer Motion animations were correctly gated behind a prefers-reduced-motion check without being asked. The pricing table included a recommended-tier highlight. Estimated equivalent manual development time: 2-4 hours.
What worked
- Single prompt generated a coherent multi-file structure
- Claude spontaneously added accessibility improvements (aria-label, reduced-motion)
- Component naming was consistent across the session
- The generated copy was on-brand for a developer tool without any examples provided
What failed
- The initial mobile nav required two revision prompts to get right
- Framer Motion stagger timing needed manual tweaking for the features grid
- Claude did not add og:image or Twitter card meta tags without being asked
Next iteration
Test the same prompt with Claude Code's --plan flag to compare planned vs. reactive generation. Also explore using a CLAUDE.md project brief to reduce revision cycles.