[{"_1":2,"_83":-5,"_84":-5},"loaderData",{"_3":4,"_19":20},"root",{"_5":6,"_13":14},"env",{"_7":8,"_9":10,"_11":12},"PUBLIC_APP_ENV","production","PUBLIC_APP_FQDN","www.theadpharm.com","PUBLIC_TURNSTILE_SITE_KEY","0x4AAAAAADD1R3ybTHbU1ywg","preferences",{"_15":16,"_17":18},"sidebarWidth",240,"theme","system","routes/_app.insights.tag.$tag",{"_21":22,"_23":24},"tag","brand-design","posts",[25],{"_26":27,"_28":29,"_30":31,"_75":76,"_77":78,"_79":80,"_81":82},"slug","claude-code-stitch-brand-mockups","category","ai-and-tech","frontmatter",{"_32":33,"_34":35,"_36":37,"_28":29,"_38":39,"_45":46,"_48":49,"_50":49,"_51":52,"_53":54,"_55":56,"_62":63},"title","Brand-fidelity mockups in Claude Code and Google Stitch: what actually steers them off the AI default","description","Both tools default to the same generic AI aesthetic: Inter, purple-on-white, three-up icon cards. A practitioner playbook for steering each off it, and the cross-tool file doing most of the work.","publishedAt","2026-04-10","tags",[40,41,42,43,44,22],"claude-code","google-stitch","design-systems","design-md","ai-design-tools","authors",[47],"ben-honda","draft",false,"featured","provenance","ai-research-with-human-curation","ogEyebrow","AI & Tech","keywords",[57,58,59,60,61],"claude code design skill","google stitch design tool","design.md file","claude code brand mockup","stitch.withgoogle.com prompt guide","faq",[64,69,72],{"_65":66,"_67":68},"question","What's the one thing that makes the biggest difference for brand-fidelity AI mockups?","answer","Write a DESIGN.md file once. It's a markdown file that captures color tokens, typography, spacing, radii, shadows, and component patterns for your brand. Stitch reads it before every generation, Claude Code skills read it as project context, and Cursor and Gemini CLI read it too. One source of truth, multiple agents.",{"_65":70,"_67":71},"Why does specific copy beat lorem ipsum for AI-generated mockups?","Real copy length tells the layout how to behave. A hero h1 that has to carry six words behaves differently from one that carries sixteen. A pricing card grid that fits eight short bullets fits four long ones differently. Lorem ipsum hides those layout problems until production copy arrives. Both Claude Code and Stitch reward specific copy over placeholders for this mechanical reason, not a stylistic one.",{"_65":73,"_67":74},"When do I use Claude Code versus Google Stitch for brand mockups?","Claude Code generates real code with arbitrary motion, layout, and density; it rewards heavy upfront constraints in CLAUDE.md and skills, plus parallel exploration via subagents. Use it when the deliverable is a working page or the brand has a strong existing identity you can encode precisely. Stitch generates static screens with limited motion and Material-inflected defaults; it rewards lighter prompts and iterative in-canvas edits. Use it for early look-and-feel exploration, or for screens you'll hand off to a designer in Figma.","html","

\n
Both tools converge on the same generic AI aesthetic without explicit prohibition. Claude Code rewards heavy upfront constraints — a CLAUDE.md plus the right skills. Stitch rewards light prompts plus iterative in-canvas edits. The single most consequential 2026 primitive across both is DESIGN.md: write it once from your brand, and both tools read it before generating. Prefer concrete nouns over mood adjectives, real copy over lorem ipsum, and one change per iteration over kitchen-sink prompts.
\n

What the AI default actually looks like

Both Claude Code and Google Stitch sample from the statistical centre of design decisions on the open web. Anthropic has a name for it: distributional convergence, the term they use in the November 2025 frontend-design post to describe what happens when you give the model no aesthetic constraints. The default look: Inter as the body font, a white hero with a purple gradient, three-up feature cards with icon and headline and one-line description, hamburger nav on mobile, and a carousel of testimonials nobody asked for. Stitch lands in the same neighborhood by a different route. Its Gemini renderer defaults to Material Design 3, light mode, and generic SaaS, but the destination is the same.

The whole job, for both tools, is steering away from that centre. Almost everything below is a tactic for doing that.

Real copy beats lorem ipsum, for mechanical reasons

The first lever is the one most people skip. Real copy length tells the layout how to behave. A hero h1 that has to carry six words lays out differently from one that carries sixteen. A pricing card grid that fits eight short bullets fits four long ones differently. Lorem ipsum gives the layout a rhythm that doesn’t match production, and the layout problems hide until production copy arrives.

Anthropic’s official frontend-design skill doesn’t require copy as input, but it pushes the agent to commit to a specific purpose before touching code: who uses this, what problem does it solve. Practitioners almost universally extend that by handing Claude the actual brand copy. A widely-cited rule from Engr Mejba Ahmed’s CLAUDE.md template, never use Lorem Ipsum; generate realistic copy, has become a community default. Without it, placeholder text scatters through components like confetti.

For Stitch the calculus is slightly different. Direct Edits, added in the March 2026 update, let you click any text element and replace it without regenerating the screen. That makes it reasonable to seed Stitch with rough copy and refine the words inline afterward, the inverse of the Claude Code flow where copy is part of the generation prompt. Either way, the headline and primary CTA earn their specificity early. Vague prompts like “modern, clean fitness app” produce the centre. A specific noun like Japandi-styled tea store (the example Vincent Nallatamby uses in the official Stitch Prompt Guide) gets you a specific design treatment.

A useful rule of thumb: provide the copy that drives layout (hero, value prop, features, primary CTA) and let the tool fill in the rest, then edit. Trying to dictate every footer link and microcopy label is what produces 5,000-character prompts that overflow the context window. Stitch’s own product team recommends starting with plain language and complexifying screen by screen.

Constraints at the right altitude

Anthropic’s frontend-design post is explicit about this. Don’t hardcode every hex; don’t give vague high-altitude direction. The middle altitude is targeted language about specific design dimensions, with concrete examples and prohibitions. The cookbook’s TYPOGRAPHY_PROMPT is the exemplar: a prohibited list, then categorised alternatives, then a principle, then a quantitative rule.

\n
Never use: Inter, Roboto, Open Sans, Lato, default system fonts.\nImpact choices:
\n
\n
Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
\n
Editorial: Playfair Display, Crimson Pro, Fraunces
\n
Startup: Clash Display, Satoshi, Cabinet Grotesk
\n
Technical: IBM Plex family, Source Sans 3
\n
\n
Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.
\n
Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.
\n

This shape (prohibitions, categorised alternatives, a principle, numbers) is what every high-rated community skill copies. It works because it gives the model something specific to do and something specific not to do. “A nice sans-serif” is what doesn’t work; “anything except Inter, Roboto, Space Grotesk; pick from the editorial or technical shelves” is what does. Anthropic’s own warning is that even with prohibitions in place, the model will converge on Space Grotesk as a “safe distinctive font,” so add it to the prohibited list once you’ve seen it appear too often.

The same altitude applies to color, motion, density, and backgrounds. Pick a dominant color and a sharp accent rather than asking for “a cohesive palette.” Layer gradients or geometric patterns rather than defaulting to solid colors. Allow asymmetry and overlap rather than asking for “good spacing.” Each axis takes a single concrete commitment plus a prohibition list.

For brand mockup work, Anthropic recommends committing to a bold aesthetic direction up front rather than letting Claude explore freely. The frontend-design skill ships eleven directions to choose from: brutally minimal, maximalist chaos, retro-futuristic, organic / natural, luxury / refined, playful / toy-like, editorial / magazine, brutalist / raw, art deco / geometric, soft / pastel, industrial / utilitarian. The mechanism is pick an extreme. Moderate descriptions like “modern and clean” or “professional” describe the centre, which is the slop.

A what-works versus what-backfires cheat sheet, distilled from the community skills:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Works	Backfires
Specific hex codes for primary and accent	Mood words alone (“modern, clean, professional”)
Named fonts plus a “never use” list	”A nice sans-serif”
Reference URLs and screenshots in a `Reference/` folder	”Make it look like Stripe” without showing what about Stripe
A named aesthetic family (brutalist, editorial, RPG, solarpunk)	“Premium” or “high-end”
Quantitative spacing rules (padding ≥24px, max 3 font sizes)	“Good spacing”
Explicit “what NOT to do” list	”Be creative”
Single dominant color with a sharp accent	”Cohesive palette”

Reference images help, especially when paired with detail. Pasquale Pillitteri’s roundup of design skills suggests saving 2–3 screenshots from Mobbin, Dribbble, or Pinterest into a project Reference/ folder, then asking Claude to analyse the visual reference and adapt the style. For Stitch, image inputs only work in Pro / Experimental mode (a forum gotcha worth knowing about), and the team’s own guidance is that the image alone isn’t enough; pair it with detailed text describing every detail you want preserved.

Iterate one change at a time

The most reliably-reported failure mode in both tools is combining changes. The Stitch forum’s canonical example is a user named tempo, who got a complex factory dashboard layout to land on a first prompt, then asked for filter dropdowns, title alignment, and an icon all at once. The next generation forgot everything and started over. The fix is the same in both tools: short, focused prompts; one change per iteration.

Where the workflows diverge is in parallelism. Claude Code rewards parallel exploration via subagents. The pattern from the evanflow skill collection (design it twice; spawn three or more parallel sub-agents with radically different constraints; compare on depth, simplicity, efficiency) works because the subtasks have no dependencies between them. Three radically different aesthetic directions, generated in parallel and compared, is faster and cheaper than three serial iterations of one direction.

Stitch’s iteration is mostly serial, screen by screen, partly because of the credit system (the free tier is roughly 350 standard generations and 50–200 Pro generations per month) and partly because of the regeneration risk. The community guidance is to use Direct Edits and the Edit Theme panel (light/dark, accent color, corner radius, font swap) for everything that doesn’t require a new generation, and to save screenshots after every successful iteration as a safety net. Stitch can reset unexpectedly; if you’ve been iterating for twenty minutes and lose the canvas, you can feed a screenshot back into Pro mode as a reference image and recover roughly where you were.

For closing the loop on Claude Code’s own output, the Playwright MCP (installed with claude mcp add playwright npx @playwright/mcp@latest) lets the agent screenshot its own work, critique it against a reference, and propose adjustments. Julian Oczkowski’s design-review skill describes catching “sparse layouts, incorrect chart ordering, missing dark mode considerations, and accessibility gaps” autonomously this way. The same loop is what closes the gap between “shipped a draft” and “shipped a draft that looks like the brand.”

The cross-tool primitive that won 2026: `DESIGN.md`

Originally introduced by Stitch and now open-sourced, DESIGN.md is a markdown file capturing color tokens, typography, spacing, radii, shadows, and component patterns for a brand. Stitch reads it before every generation. Claude Code skills read it as project context. Cursor, Gemini CLI, and the Antigravity IDE all read it too. One file, four agents.

You can write DESIGN.md by hand, generate it from your brand URL inside Stitch (Gemini analyses the rendered output and extracts a design system; Atal Upadhyay’s hands-on review puts the extraction at roughly 80% accurate, so review and correct what comes out), or borrow one. The VoltAgent/awesome-design-md repo curates ready-made files for Linear, Notion, Supabase, Resend, Cohere, and dozens of other brands you can use as templates.

The “one source of truth, two agents” workflow has become the canon. Generate or write DESIGN.md once. Drop it into your Claude Code project’s .claude/skills/ folder. Drop the same file into your Stitch project. Both tools then generate against the same tokens, and the post-generation drift between them is the smallest it’s ever been. For a brand mockup specifically, this is the single most decisive piece of work you can do; almost everything else sits downstream of it.

A drop-in `CLAUDE.md` for brand mockup work

Synthesised from the community templates. Under 200 lines on purpose. The what NOT to do section is doing most of the work:

# Project: [Brand Name] Website\n \n## Brand Voice\n- Adjectives: [3–5 words]\n- Says: [3 phrases the brand uses]\n- Avoids: [3 phrases the brand never uses]\n- Headline length: ≤8 words / ≤60 chars\n \n## Design System\n- Primary: #XXXXXX\n- Accent: #XXXXXX\n- Heading font: [name]; Body font: [name]\n- Border radius: [values]\n- Spacing scale: [values]; Min container padding: 24px\n \n## Aesthetic Direction\n- Pick one: editorial / brutalist / minimalist-warm / etc.\n- Reference images in: ./Reference/\n \n## Anti-Slop Rules\n- Avoid Inter, Roboto, Open Sans, Space Grotesk\n- Avoid purple-gradient on white\n- No 3-up icon-card feature grids\n- No hamburger nav on mobile\n- Generate realistic copy, not Lorem Ipsum\n- Maximum 3 font sizes per page\n- Asymmetry and overlap preferred to grid-perfect layouts

The matching skills you want installed alongside it: Anthropic’s own frontend-design skill for aesthetic direction (reported at 277,000+ installs in third-party roundups as of March 2026), and Vercel’s web-design-guidelines as a quality gate that audits for accessibility and clarity.

A starting prompt for Stitch

Stitch wants less than Claude Code does. Nick Babich’s “Zoom-Out-Zoom-In” framework on UX Planet is the cleanest format I’ve seen. Context, then this specific screen’s goal and hierarchy, then expectations:

Context: [Product] for [target user]. [One-line problem statement.]\nVibe: [3 adjectives, e.g. \"warm, considered, restrained\"].\nAesthetic boundary: [Material / neumorphic / editorial / brutalist / soft].\nScreen: [name of this specific screen].\nGoal: [what this screen helps the user do].\nHierarchy: [top-to-bottom or left-to-right structure in 4–6 items].\nSpecifics: [brand name, primary color description, font feel, button style].\nImagery: [one sentence on what the page should reflect visually].

Two notes from the forum that save credits. Click the edit button on a design first, then describe your changes; Stitch responds more reliably in edit mode than from the main prompt bar. And use the Edit Theme panel for light/dark, accent, corner radius, and font swap before regenerating. Those changes don’t cost credits.

Where each tool earns its keep

Claude Code generates real code with arbitrary motion, layout, and density. It rewards heavy upfront constraints in CLAUDE.md and skills, and parallel exploration via subagents. Use it when the deliverable is a working page, when you want motion or density that Material defaults won’t reach, or when the brand has a strong existing identity you can encode precisely.

Stitch generates static screens with limited motion and Material-inflected defaults. It rewards lighter initial prompts plus iterative in-canvas refinement, and it shines when you’re comparing layout variants quickly. Use it for early look-and-feel exploration, for screens you’ll hand off to a designer in Figma, or as a first draft you’ll bring into a coding agent for finishing.

KunalxArora’s framing on Stitch holds for both: think of these as your first-draft generators, not your final brush. They build seventy per cent of the structure quickly, so you can spend your real attention on the refinement. Both still need an explicit anti-slop posture, an explicit voice, and a DESIGN.md they can read. Without those, you’ll get the centre, every time.

","rawMarkdown","\n> TL;DR: Both tools converge on the same generic AI aesthetic without explicit prohibition. Claude Code rewards heavy upfront constraints — a `CLAUDE.md` plus the right skills. Stitch rewards light prompts plus iterative in-canvas edits. The single most consequential 2026 primitive across both is `DESIGN.md`: write it once from your brand, and both tools read it before generating. Prefer concrete nouns over mood adjectives, real copy over lorem ipsum, and one change per iteration over kitchen-sink prompts.\n\n## What the AI default actually looks like\n\nBoth Claude Code and Google Stitch sample from the statistical centre of design decisions on the open web. Anthropic has a name for it: *distributional convergence*, the term they use in the [November 2025 frontend-design post](https://claude.com/blog/improving-frontend-design-through-skills) to describe what happens when you give the model no aesthetic constraints. The default look: Inter as the body font, a white hero with a purple gradient, three-up feature cards with icon and headline and one-line description, hamburger nav on mobile, and a carousel of testimonials nobody asked for. Stitch lands in the same neighborhood by a different route. Its Gemini renderer defaults to Material Design 3, light mode, and generic SaaS, but the destination is the same.\n\nThe whole job, for both tools, is steering away from that centre. Almost everything below is a tactic for doing that.\n\n## Real copy beats lorem ipsum, for mechanical reasons\n\nThe first lever is the one most people skip. Real copy length tells the layout how to behave. A hero h1 that has to carry six words lays out differently from one that carries sixteen. A pricing card grid that fits eight short bullets fits four long ones differently. Lorem ipsum gives the layout a rhythm that doesn't match production, and the layout problems hide until production copy arrives.\n\nAnthropic's official `frontend-design` skill doesn't require copy as input, but it pushes the agent to commit to a specific *purpose* before touching code: who uses this, what problem does it solve. Practitioners almost universally extend that by handing Claude the actual brand copy. A widely-cited rule from Engr Mejba Ahmed's `CLAUDE.md` template, *never use Lorem Ipsum; generate realistic copy*, has become a community default. Without it, placeholder text scatters through components like confetti.\n\nFor Stitch the calculus is slightly different. Direct Edits, added in the March 2026 update, let you click any text element and replace it without regenerating the screen. That makes it reasonable to seed Stitch with rough copy and refine the words inline afterward, the inverse of the Claude Code flow where copy is part of the generation prompt. Either way, the headline and primary CTA earn their specificity early. Vague prompts like \"modern, clean fitness app\" produce the centre. A specific noun like *Japandi-styled tea store* (the example Vincent Nallatamby uses in the official Stitch Prompt Guide) gets you a specific design treatment.\n\nA useful rule of thumb: provide the copy that drives layout (hero, value prop, features, primary CTA) and let the tool fill in the rest, then edit. Trying to dictate every footer link and microcopy label is what produces 5,000-character prompts that overflow the context window. Stitch's own product team recommends starting with plain language and complexifying screen by screen.\n\n## Constraints at the right altitude\n\nAnthropic's frontend-design post is explicit about this. Don't hardcode every hex; don't give vague high-altitude direction. The middle altitude is targeted language about specific design dimensions, with concrete examples and prohibitions. The cookbook's `TYPOGRAPHY_PROMPT` is the exemplar: a prohibited list, then categorised alternatives, then a principle, then a quantitative rule.\n\n> **Never use:** Inter, Roboto, Open Sans, Lato, default system fonts.\n> **Impact choices:**\n> - Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk\n> - Editorial: Playfair Display, Crimson Pro, Fraunces\n> - Startup: Clash Display, Satoshi, Cabinet Grotesk\n> - Technical: IBM Plex family, Source Sans 3\n>\n> **Pairing principle:** High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.\n>\n> **Use extremes:** 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.\n\nThis shape (prohibitions, categorised alternatives, a principle, numbers) is what every high-rated community skill copies. It works because it gives the model something specific to do *and* something specific not to do. \"A nice sans-serif\" is what doesn't work; \"anything except Inter, Roboto, Space Grotesk; pick from the editorial or technical shelves\" is what does. Anthropic's own warning is that even with prohibitions in place, the model will converge on Space Grotesk as a \"safe distinctive font,\" so add it to the prohibited list once you've seen it appear too often.\n\nThe same altitude applies to color, motion, density, and backgrounds. Pick a dominant color and a sharp accent rather than asking for \"a cohesive palette.\" Layer gradients or geometric patterns rather than defaulting to solid colors. Allow asymmetry and overlap rather than asking for \"good spacing.\" Each axis takes a single concrete commitment plus a prohibition list.\n\nFor brand mockup work, Anthropic recommends committing to a *bold aesthetic direction* up front rather than letting Claude explore freely. The frontend-design skill ships eleven directions to choose from: brutally minimal, maximalist chaos, retro-futuristic, organic / natural, luxury / refined, playful / toy-like, editorial / magazine, brutalist / raw, art deco / geometric, soft / pastel, industrial / utilitarian. The mechanism is *pick an extreme*. Moderate descriptions like \"modern and clean\" or \"professional\" describe the centre, which is the slop.\n\nA what-works versus what-backfires cheat sheet, distilled from the community skills:\n\n| Works | Backfires |\n|---|---|\n| Specific hex codes for primary and accent | Mood words alone (\"modern, clean, professional\") |\n| Named fonts plus a \"never use\" list | \"A nice sans-serif\" |\n| Reference URLs and screenshots in a `Reference/` folder | \"Make it look like Stripe\" without showing what about Stripe |\n| A named aesthetic family (brutalist, editorial, RPG, solarpunk) | \"Premium\" or \"high-end\" |\n| Quantitative spacing rules (padding ≥24px, max 3 font sizes) | \"Good spacing\" |\n| Explicit \"what NOT to do\" list | \"Be creative\" |\n| Single dominant color with a sharp accent | \"Cohesive palette\" |\n\nReference images help, especially when paired with detail. Pasquale Pillitteri's roundup of design skills suggests saving 2–3 screenshots from Mobbin, Dribbble, or Pinterest into a project `Reference/` folder, then asking Claude to analyse the visual reference and adapt the style. For Stitch, image inputs only work in Pro / Experimental mode (a forum gotcha worth knowing about), and the team's own guidance is that the image alone isn't enough; pair it with detailed text describing every detail you want preserved.\n\n## Iterate one change at a time\n\nThe most reliably-reported failure mode in both tools is combining changes. The Stitch forum's canonical example is a user named `tempo`, who got a complex factory dashboard layout to land on a first prompt, then asked for filter dropdowns, title alignment, and an icon all at once. The next generation forgot everything and started over. The fix is the same in both tools: short, focused prompts; one change per iteration.\n\nWhere the workflows diverge is in *parallelism*. Claude Code rewards parallel exploration via subagents. The pattern from the `evanflow` skill collection (*design it twice; spawn three or more parallel sub-agents with radically different constraints; compare on depth, simplicity, efficiency*) works because the subtasks have no dependencies between them. Three radically different aesthetic directions, generated in parallel and compared, is faster and cheaper than three serial iterations of one direction.\n\nStitch's iteration is mostly serial, screen by screen, partly because of the credit system (the free tier is roughly 350 standard generations and 50–200 Pro generations per month) and partly because of the regeneration risk. The community guidance is to use Direct Edits and the Edit Theme panel (light/dark, accent color, corner radius, font swap) for everything that doesn't require a new generation, and to save screenshots after every successful iteration as a safety net. Stitch can reset unexpectedly; if you've been iterating for twenty minutes and lose the canvas, you can feed a screenshot back into Pro mode as a reference image and recover roughly where you were.\n\nFor closing the loop on Claude Code's own output, the Playwright MCP (installed with `claude mcp add playwright npx @playwright/mcp@latest`) lets the agent screenshot its own work, critique it against a reference, and propose adjustments. Julian Oczkowski's design-review skill describes catching \"sparse layouts, incorrect chart ordering, missing dark mode considerations, and accessibility gaps\" autonomously this way. The same loop is what closes the gap between \"shipped a draft\" and \"shipped a draft that looks like the brand.\"\n\n## The cross-tool primitive that won 2026: `DESIGN.md`\n\nOriginally introduced by Stitch and now open-sourced, `DESIGN.md` is a markdown file capturing color tokens, typography, spacing, radii, shadows, and component patterns for a brand. Stitch reads it before every generation. Claude Code skills read it as project context. Cursor, Gemini CLI, and the Antigravity IDE all read it too. One file, four agents.\n\nYou can write `DESIGN.md` by hand, generate it from your brand URL inside Stitch (Gemini analyses the rendered output and extracts a design system; Atal Upadhyay's hands-on review puts the extraction at roughly 80% accurate, so review and correct what comes out), or borrow one. The [VoltAgent/awesome-design-md repo](https://github.com/VoltAgent/awesome-design-md) curates ready-made files for Linear, Notion, Supabase, Resend, Cohere, and dozens of other brands you can use as templates.\n\nThe \"one source of truth, two agents\" workflow has become the canon. Generate or write `DESIGN.md` once. Drop it into your Claude Code project's `.claude/skills/` folder. Drop the same file into your Stitch project. Both tools then generate against the same tokens, and the post-generation drift between them is the smallest it's ever been. For a brand mockup specifically, this is the single most decisive piece of work you can do; almost everything else sits downstream of it.\n\n## A drop-in `CLAUDE.md` for brand mockup work\n\nSynthesised from the community templates. Under 200 lines on purpose. The *what NOT to do* section is doing most of the work:\n\n```markdown\n# Project: [Brand Name] Website\n\n## Brand Voice\n- Adjectives: [3–5 words]\n- Says: [3 phrases the brand uses]\n- Avoids: [3 phrases the brand never uses]\n- Headline length: ≤8 words / ≤60 chars\n\n## Design System\n- Primary: #XXXXXX\n- Accent: #XXXXXX\n- Heading font: [name]; Body font: [name]\n- Border radius: [values]\n- Spacing scale: [values]; Min container padding: 24px\n\n## Aesthetic Direction\n- Pick one: editorial / brutalist / minimalist-warm / etc.\n- Reference images in: ./Reference/\n\n## Anti-Slop Rules\n- Avoid Inter, Roboto, Open Sans, Space Grotesk\n- Avoid purple-gradient on white\n- No 3-up icon-card feature grids\n- No hamburger nav on mobile\n- Generate realistic copy, not Lorem Ipsum\n- Maximum 3 font sizes per page\n- Asymmetry and overlap preferred to grid-perfect layouts\n```\n\nThe matching skills you want installed alongside it: Anthropic's own [`frontend-design` skill](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) for aesthetic direction (reported at 277,000+ installs in third-party roundups as of March 2026), and [Vercel's `web-design-guidelines`](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) as a quality gate that audits for accessibility and clarity.\n\n## A starting prompt for Stitch\n\nStitch wants less than Claude Code does. Nick Babich's \"Zoom-Out-Zoom-In\" framework on UX Planet is the cleanest format I've seen. Context, then this specific screen's goal and hierarchy, then expectations:\n\n```\nContext: [Product] for [target user]. [One-line problem statement.]\nVibe: [3 adjectives, e.g. \"warm, considered, restrained\"].\nAesthetic boundary: [Material / neumorphic / editorial / brutalist / soft].\nScreen: [name of this specific screen].\nGoal: [what this screen helps the user do].\nHierarchy: [top-to-bottom or left-to-right structure in 4–6 items].\nSpecifics: [brand name, primary color description, font feel, button style].\nImagery: [one sentence on what the page should reflect visually].\n```\n\nTwo notes from the forum that save credits. Click the edit button on a design first, then describe your changes; Stitch responds more reliably in edit mode than from the main prompt bar. And use the Edit Theme panel for light/dark, accent, corner radius, and font swap before regenerating. Those changes don't cost credits.\n\n## Where each tool earns its keep\n\nClaude Code generates real code with arbitrary motion, layout, and density. It rewards heavy upfront constraints in `CLAUDE.md` and skills, and parallel exploration via subagents. Use it when the deliverable is a working page, when you want motion or density that Material defaults won't reach, or when the brand has a strong existing identity you can encode precisely.\n\nStitch generates static screens with limited motion and Material-inflected defaults. It rewards lighter initial prompts plus iterative in-canvas refinement, and it shines when you're comparing layout variants quickly. Use it for early look-and-feel exploration, for screens you'll hand off to a designer in Figma, or as a first draft you'll bring into a coding agent for finishing.\n\nKunalxArora's framing on Stitch holds for both: think of these as your first-draft generators, not your final brush. They build seventy per cent of the structure quickly, so you can spend your real attention on the refinement. Both still need an explicit anti-slop posture, an explicit voice, and a `DESIGN.md` they can read. Without those, you'll get the centre, every time.\n","readingTimeMin",10,"url","/insights/claude-code-stitch-brand-mockups","actionData","errors"]