AI Guides › Step-by-step guides
By Nigel Guy · 6 min read
Most AI-built sites look AI-built because the tool was asked for "a modern website for a [business]" and filled every gap with its own defaults: the same hero, the same rounded cards, the same blue-to-purple gradient. It feels fine while it is happening, because something respectable appears in seconds. It fails when the client's own logo, colours and tone are nowhere to be found.
The rule: write the brand down as a file before any screen is generated, and make every tool read that file.
A note on scope. The workflow below uses three tools that can be connected to one another: Google's Stitch for design, Claude Code for building, and Vercel for publishing. The idea of a design-system file that agents read is verifiable in Stitch's own documentation. I could not confirm which specific trio the original social post had in mind, so this is a workflow I have checked against official docs rather than a copy of anyone's.
You need:
Stitch's docs describe DESIGN.md as a plain-text design system file that agents read, the design counterpart to AGENTS.md. It has two layers: YAML front matter holding exact tokens (hex colours, font properties, spacing, corner radii), and a markdown body explaining why.
Stitch offers three ways to make one: describe the vibe and let it generate, derive it from a URL or image of the existing brand, or write it by hand. For a client with an existing identity, derive from their site or logo, then correct it by hand. Check that:
The spec's section order is Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, Do's and Don'ts. Unknown extra sections are preserved, so add a "Voice" or "Photography" section if the brand needs it. Duplicate headings are rejected, so do not repeat one.
Create a project in Stitch, attach the design system, then generate the homepage and two inner pages. Ask for structure and content, not style; the style already lives in the file.
You are designing a website for [CLIENT_NAME], a [BUSINESS_TYPE] serving [AUDIENCE].
Use the attached design system exactly; do not introduce colours or fonts that are not in it.
Goal of this page: [PAGE_GOAL, e.g. get a visitor to book a call].
Sections in order: [SECTION_LIST].
Use this real copy where provided: [REAL_COPY]. Where copy is missing, write a clearly marked placeholder rather than inventing claims, prices or testimonials.
Before you finish, check that every colour and font used appears in the design system, and list any that do not.
Fill in the client name, page goal, section order and any real copy.
Stitch runs as a remote MCP server. In Stitch, open Settings, scroll to API Keys and choose Create API Key. Then, in a terminal, add it to Claude Code with the command from Stitch's docs:
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user
-s user stores the server for all your projects; Claude Code's docs also list -s project, which writes a .mcp.json you could commit. Do not use project scope with a real key in it. Stitch's docs say never to commit an API key to a public repository.
If you cannot store a persistent key, Stitch documents an OAuth route through the gcloud CLI, but its access tokens last roughly an hour and must be refreshed by hand, so the key is the simpler route.
Inside Claude Code, run /mcp and confirm stitch shows as connected. The documented Stitch tools include list_projects, get_project, list_screens, get_screen, generate_screen_from_text, edit_screens, generate_variants and design-system tools such as list_design_systems and apply_design_system.
You are a front-end developer building [CLIENT_NAME]'s website in [FRAMEWORK, e.g. Next.js or plain HTML/CSS].
1. Read the Stitch project [PROJECT_NAME]: list its screens and its design system.
2. Turn the design system's tokens into CSS variables (or a Tailwind theme) before writing any component.
3. Build the pages to match the screens: [PAGE_LIST]. Use semantic HTML and make them work at phone width.
4. Do not hard-code a colour, font size or spacing value outside the tokens. If a screen needs a value that is not a token, stop and ask me.
5. Ask me for any missing asset (logo file, photos) instead of generating a placeholder that looks real.
Before you report back, list every place you departed from the design system and why.
Push the repository to GitHub, import it at vercel.com/new, and deploy. Vercel gives each deployment a preview URL, so send the client the preview rather than a screenshot. Add the custom domain only after the client signs off.
DESIGN.md. Spot-check five.