AI Guides › Workbench
By Nigel Guy · 8 min read
Ask an AI to build a website with no design brief and it fills every gap with a guess: a safe sans-serif, a soft gradient, cards with the same rounded corners, spacing that drifts from section to section. Typing "make it more premium" just gets you shinier guesses. Nobody has written the choices down.
The rule: write the look down once, in a DESIGN.md file, and put it inside a skill so it loads on every build. Then the AI has your fonts, colours and spacing to follow, and stops guessing.
DESIGN.md is a real format, not a nickname. Google's Stitch team published it as an open draft specification in April 2026. It's a Markdown file with exact design tokens (colours, type, spacing, corner radius, components) in YAML at the top and plain-language rationale below. It is still marked alpha, so expect small changes.
| Item | What it does | Cost at time of writing | Best for | Catch |
|---|---|---|---|---|
| Write your own (prompt below) | Claude drafts a DESIGN.md from screenshots of a design you like | Included in any Claude plan | A look you already have, or a client's brand | Screenshots only show what's on screen, so hover states and the type scale are partly guessed |
| VoltAgent awesome-design-md | Ready-made DESIGN.md files based on well-known public sites | Free, MIT licence | Starting from a known style | These are someone else's brands. Use one as a base, not as your finished identity |
| Google Stitch | Generates a DESIGN.md as part of its design projects, and imports one | Free through Google Labs at time of writing. Usage limits aren't published as fixed figures, so check the in-app counter | Designing visually first, then exporting | I couldn't confirm the exact export menu path from Google's own docs |
@google/design.md CLI |
Lints the file, compares two versions, exports tokens to Tailwind or W3C DTCG | Free, Apache 2.0. Needs Node.js | Catching broken token references and poor colour contrast | Checks structure and contrast only, not whether the design is any good |
| A Claude skill wrapping the file | Makes Claude read DESIGN.md whenever you build or restyle a page | Skills are listed on every Claude plan, Free included | Using the same look in every session | Claude.ai needs code execution on, and Claude Code isn't on Free |
Anthropic prices its plans in US dollars: Pro is listed at $20 a month and Max starts at $100 a month at time of writing. Check the £ figure at checkout, because it can include VAT.
You need a design you want to match (your own site, a brand guide or a VoltAgent file) and either Claude.ai with Code execution and file creation turned on, or Claude Code. The skill takes about five minutes. The DESIGN.md is the real work.
Your own: take three or four full-page screenshots of the design (desktop and mobile), attach them, and run this prompt. Fill in the bracketed parts.
You are a design-systems specialist writing a DESIGN.md file for an AI coding agent.
Context: the attached screenshots show a design I want to reuse. Brand name: [BRAND_NAME]. What it's for: [SITE_PURPOSE]. Any values I already know (hex codes, font names): [KNOWN_VALUES or "none"].
Goal: one DESIGN.md that another agent could follow to build new pages that look like they belong to this design.
Steps:
1. List what you can actually observe: colours, typefaces, sizes, weights, spacing rhythm, corner radius, shadows, button and card styles.
2. Mark each value as Measured (read from my inputs), Estimated (judged from pixels) or Missing.
3. Write YAML front matter with these keys: name, colors, typography, rounded, spacing, components. Use {colors.primary}-style references inside components.
4. Below it, write these ## sections in this order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts.
Rules:
- Never present an estimate as exact. Put "(estimated)" next to it.
- If a font can't be identified, suggest the closest free Google Font and say so.
- Ask me about anything you can't see, such as hover states, rather than inventing it.
Before answering, check: every component reference points to a token that exists, text and background pairs look readable, and the sections are in the order above.
Output: the full file in one Markdown code block, then a short list of the Estimated and Missing items.
Fill in: the brand name, what the site is for, and any colour codes or font names you already know.
Ready-made: open the VoltAgent repository on GitHub, pick a site's folder and copy its DESIGN.md. Then change the primary colour and fonts to your own before you use it for anything public.
If you have Node.js, run this in the folder holding the file:
npx @google/design.md lint DESIGN.md
It reports broken token references as errors, and flags weak colour contrast, a missing primary colour or sections in the wrong order as warnings. diff compares two versions after you edit.
A skill is a folder holding a SKILL.md file, plus any other files it needs. Put your DESIGN.md beside it:
house-design/
├── SKILL.md
└── DESIGN.md
Paste this into SKILL.md, changing the bracketed part:
---
name: house-design
description: Applies the [BRAND_NAME] visual system from DESIGN.md. Use whenever building, restyling or reviewing a website, landing page or web component.
---
You are working inside a fixed visual system. Before writing any markup or styles, read DESIGN.md in this skill's folder.
1. Take every colour, typeface, type size, weight, spacing step, corner radius, shadow and component style from DESIGN.md. Use its token names in CSS variables or Tailwind config.
2. Do not add values that are not in the file. If the job needs one (for example a warning colour), stop, say which token is missing, and ask me before choosing.
3. Follow the Do's and Don'ts section as hard constraints.
4. Before handing over, list any place where you departed from DESIGN.md and why.
Fill in: your brand name in the description. Keep the folder name and the name: line identical, lowercase and hyphenated.
Install in Claude.ai: go to Settings > Capabilities and check that code execution is on. Zip the house-design folder, then go to Customize > Skills, click +, then + Create skill, then Upload a skill. On Team and Enterprise plans, an owner has to enable Skills under Organization settings > Plugins & skills first.
Install in Claude Code: put the folder at ~/.claude/skills/house-design/ to use it in every project, or at .claude/skills/house-design/ inside one repository to share it through version control. If Claude Code was already running when you created the folder, run /reload-skills. After that, edits to the file load without a restart.
Use the house-design skill for this job.
Build a [SITE_TYPE, e.g. one-page portfolio] for [WHO_IT_IS_FOR]. Sections, in order: [SECTION_LIST, e.g. hero, about, selected work, contact]. Real copy to use: [PASTE_COPY or "use clearly marked placeholder text"].
Requirements:
- Every visual value comes from DESIGN.md. If you need something it doesn't define, ask me first.
- Responsive from 360px wide upwards. Check the layout at phone width and desktop width before you finish.
- Plain HTML and CSS unless I say otherwise: [STACK or "no framework"].
When done, give me: the files, the DESIGN.md tokens you used, and anything you had to approximate.
Fill in: the kind of site, who it's for, the sections, your copy and your preferred stack. In Claude Code you can type /house-design to call the skill directly instead of naming it.
client-a-design, client-b-design) so their looks never mix.