← Library

From the 6 Phases of Vibe Coding

Phase 2 — Corporate & Informational Sites

Multi-page sites for real businesses. Structure without stiffness, brand without bloat, and content that survives an SEO crawl.

Key takeaways

  • Sitemap before pixels. Draw the six pages you actually need — everything else is a subpage or a section.
  • Design tokens save you from yourself. Colors, spacing, and type as variables — never inline.
  • Every page needs a job. If you can't name the visitor state it changes, kill the page.
  • SEO is a byproduct of clarity. Real headings, real content, real internal links — not sprinkled keywords.

## Why Phase 2 exists

Phase 1 is a stunt. Phase 2 is a business. When a real company — a law firm, an agency, a niche SaaS, David''s own consultancy — needs a site, one heroic scroller doesn''t cut it. You need About, Services, a case-study index, a contact page, and enough structure that a new hire can add a page next month without breaking the design.

The trap is that "multi-page" mentally unlocks "add more pages." Resist. Six is the ceiling for most businesses.

The three moves that matter

Draw the sitemap on paper. Home, one credibility page (About / Team / Story), one offer page (Services / Product / Pricing), one proof page (Cases / Work / Portfolio), one narrative page (Journal / Blog / Insights), one conversion page (Contact / Book / Get Started). Anything else is a section on one of those.

Extract every visual decision to a token. Colors, spacing, radii, fonts — variables in one file. When the client says "make the blue less blue" you change one line. Vibe coders who skip this ship the first version fast and lose two weeks on the second.

Write the content before you design. Real headings, real body copy, real names. Lorem ipsum makes bad designs look fine and good designs look empty. If you can''t write it, you can''t ship it.

The mistakes I keep making

Building a stunning home page and three broken subpages. Reusing the hero pattern on every page (visitors register it as "the same page"). Hiding the CTA behind three clicks because it "felt too salesy." Forgetting the footer — the footer is a sitemap in disguise and most people navigate through it.

Prompt of record

> Build a *[business type]* site with these six routes: `/`, `/about`, `/services`, `/work`, `/journal`, `/contact`. Use one design system with tokens for color, spacing, and type. Each page has a hero, two to three sections, and a footer with sitemap + contact. Consistent nav across all pages. Semantic HTML, real headings, sitemap.xml, robots.txt, meta description per page. No stock photography.

Give an AI that prompt and you have Monday morning back.

Adapted from highcaliberai.com.