Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →hashgraph-online/design-system
How to write and maintain a DESIGN.md in the 9-section Google Stitch format. Covers the 9-section structure, design token conventions, quality standards, integration with kits and build tasks, revision patterns, and collection import. Trigger phrases: "design system", "DESIGN.md", "visual design spec", "design tokens", "create design system", "import design system", "visual identity", "UI spec", "design language"
Passed 21 of 22 test cases with the skill, and 11 of 22 without it.
and 8 more in the full report
10 fixed11 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
What specific section in a DESIGN.md document provides quick references and example prompts to instruct AI agents on generating UI components compliant with the design system?
| Checked | Without skill | With skill |
|---|---|---|
| Output designates Section 9 (Agent Prompt Guide) for AI agent UI generation prompts. | Missed | Passed |
The instructions your model reads when the skill loads.
DESIGN.md is the visual equivalent of kits. It defines the project's visual language — colors, typography, spacing, components, responsive behavior — in a format AI agents can read and apply consistently. It is a parallel constraint layer that all Hunt phases consult.
| Document | Defines | Audience |
|---|---|---|
| CLAUDE.md | How to build the project | Coding agents |
| Kits | What must be true (behavior) | All agents |
| DESIGN.md | What it looks like (visual) | UI-building agents |
| Plans | How to build it (tasks) | Builder agents |
Without DESIGN.md, visual decisions scatter across kits, plans, and code:
DESIGN.md centralizes these decisions. Every agent reads it before writing UI code.
DESIGN.md follows the Google Stitch format — 9 sections that together define a complete visual language. Every DESIGN.md must contain all 9 sections.
The design philosophy, mood, and overall aesthetic. Use evocative, specific language — not generic terms like "clean and modern."
## 1. Visual Theme & Atmosphere
This is a warm editorial experience built on natural materials. Think: a well-curated
bookshop with soft overhead lighting and carefully chosen display shelves. The density
is low — generous whitespace signals confidence and clarity. Every element earns its
place; nothing decorative exists without functional purpose.
test cases passed, vs 11 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.