mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zeekayandHanzo Dev
1776747704
An agent had no way to LEARN this design system. prompts/ was material for a human to paste, so every generated surface re-derived the rules from scratch — and got them wrong the same ways each time: 117 all-caps labels, 586 inline-styled buttons, 25 z-index literals, a menu painting with tokens nothing declares. So: skills/design-system/SKILL.md, one file, one author. It states the derivation chain (@hanzo/brand + @hanzo/logo -> @hanzo/design -> component) and the rule that follows from it — a component reads the token layer and never reaches past it; a missing token is a NEW TOKEN, not a local constant. Guidance nothing enforces is advice. scripts/lint.mjs is the gate the skill must run before returning, and it reads CONSUMER code, not just this repo: unresolved var(), raw colour, magic z-index, px font-size, non-eyebrow caps, literal-valued inline style, a second icon set, and the wrong package name. None of those fail loudly on their own. That is exactly why they ship. Run against this repo it found nine violations in the design system's OWN components — Dialog and Sheet hardcoded zIndex:80 and rgb(0 0 0 / .8) while publishing --z-modal to everyone else. Fixed at source, and the two scrims that disagreed are now one --surface-scrim token. npm test runs both gates. Also: every doc told agents to import @hanzoai/design. That package does not exist; the import resolves to nothing and an unresolved token layer paints nothing. It is @hanzo/design, in all ten places. Co-authored-by: Hanzo Dev <[email protected]>
1.6 KiB
1.6 KiB
prompts — make an AI build it Hanzo
Entry point is
skills/design-system/SKILL.md, not this folder. The skill is what chat, hanzo.app and Claude Code load; it points here for the long form and finishes by runninghanzo-design-lint. Everything below is the reference the skill cites.
Guidance an agent reads before generating a Hanzo surface. Two layers, no overlap:
| Layer | Lives | Answers |
|---|---|---|
| System (this folder) | prompts/ |
"How does anything Hanzo look and behave?" |
| Component (co-located) | components/**/*.prompt.md |
"How do I use this Button / Dialog / Card?" |
Read the system layer first, then pull the per-component prompt for each part you place.
| File | Use |
|---|---|
system.md |
Paste as the system prompt. The whole brand, compressed to one screen. |
rules.md |
The do / don't checklist. Grep it before you ship. |
pages.md |
Ready prompts for full sections — hero, feature grid, pricing, CTA. |
Everything here assumes one import gives you the tokens:
@import "@hanzo/design/styles.css";
So every rule below can be obeyed with a CSS variable, never a hardcoded hex.
The two prompts (one and one way)
system.md— the design LANGUAGE prompt: paste as a system prompt to make any model generate Hanzo-looking output (monochrome, true-black, token-only).studio-designer.md— the AGENTIC prompt Hanzo Studio's Design System designer hands the Hanzo agent stack to GENERATE/EDIT this repo's file tree with its file tools, grounded inguidelines/DESIGN.md. Usessystem.md's language rules.