← ClaudeAtlas

design-md-visual-systemlisted

Use when writing or auditing Genre-A UI DESIGN.md visual systems for coding agents: YAML tokens + prose (Signature Treatments, Defaults, Do/Don't, CJK, Iteration, Known Gaps). Extract from real CSS/HTML or a gold template; lint and optionally export via npx @google/design.md. Not for brand/OG/image briefs (Genre B — use design-brief skills instead).
lizliz404/agent-skills · ★ 0 · Web & Frontend · score 78
Install: claude install-skill lizliz404/agent-skills
# DESIGN.md Visual System (implementation-grade) Persistent design contract for coding agents — the design-side peer of `AGENTS.md`: machine tokens plus the judgment tokens alone cannot carry. ## Genre gate (read first) Liz has **two different documents** both sometimes called DESIGN.md: | Genre | Job | Skill | |---|---|---| | **A — Visual system** | Machine tokens + prose so a coding agent can *implement* UI/slides/landings without inventing taste | **This skill** | | **B — Brand / distribution brief** | Product identity, audience, motion/OG/favicon briefs for *image* AI | `design-brief-authoring` / `design-brief-for-image-gen` | If Liz says 「写 DESIGN.md」without context: ask which job, or infer from target (slide template / landing system → A; favicon·OG·生图 → B). **Do not** ship a thin vibe paragraph and call it done. **Do not** replace a good B-doc with A or vice versa — split into two files if both jobs exist. **Gold corpus (bundled):** `references/gold-corpus/<template>/design.md` — all 34 templates, structure-verified (lint profile + refresh in `references/gold-corpus/README.md`). External sources: the `beautiful-html-templates` tool (`templates/*/design.md`); public mirror `github.com/zarazhangrui/beautiful-html-templates`. Primary reference: `references/gold-corpus/soft-editorial/design.md` (+ `signal`, `monochrome`, `bold-poster`, `grove` for contrast). Google format + CLI: `npx -y @google/design.md` (`lint` / `export` / `spec`) — upstream spec lives at `go