← ClaudeAtlas

design-guide-authoringlisted

Create or update a design guide or design system specification, usually DESIGN.md, for web or mobile interfaces. Use when asked to document visual direction, design tokens, typography, component patterns, or interaction guidelines for developers and agents. Ground the guide in the project's existing design and stack.
itsjavi/skills · ★ 1 · Web & Frontend · score 74
Install: claude install-skill itsjavi/skills
# Design Guide Generator This skill produces a single markdown document — usually `DESIGN.md` at the project root or under `docs/` — that serves as the source of truth for a project's visual and interaction design. The audience for that document is dual: - **Humans** designing, reviewing, or onboarding onto the product. - **LLMs and developers** who need a reference when generating new components, pages, or screens. A useful design guide is opinionated. It expresses a creative point of view (a "theme" or "north star"), explains _why_ the rules exist, and gives concrete primitives — colors, typography, spacing, component patterns — that someone (or some model) can apply without ambiguity. Generic, hedging guides get ignored. Specific, confident guides shape the product. ## Inputs The user may pass natural-language context. Read whatever they give and extract these fields: | Field | Examples | Notes | | ------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------