design-mdlisted
Install: claude install-skill CodeWithJuber/forgekit
# DESIGN.md
The fix for "UI comes out inconsistent" is a single written source of visual
truth per project. `ui-workflow` says pick one direction — `DESIGN.md` is where
that direction lives so every session and screen obeys the same rules.
`forge taste <style>` writes a managed one from Forge's menu; hand-write it only
for a bespoke direction.
Create it at the start of UI work, or the first time output drifts. One file at
repo root; reference it from the project `CLAUDE.md` (`See @DESIGN.md for visual
rules`) so Claude loads it. Keep it tight: concrete rules and tokens, not
adjectives — "Primary #4F46E5, 8pt spacing scale, Inter", not "modern and clean".
## Template
```markdown
# DESIGN.md — <project>
## Direction
One sentence + 1-2 reference links/screenshots. The single aesthetic. Don't mix.
## Tokens
- Color: primary / bg / surface / text / border / success / warn / danger (hex)
- Type: font family; scale (e.g. 12/14/16/20/24/32); weights
- Spacing: base unit (e.g. 4px) + scale; radius; shadow levels
- Breakpoints: mobile / tablet / desktop widths
## Components
- Library: <project components / component system> — reuse, don't hand-roll
- Buttons/inputs/cards: variants + states (default/hover/focus/disabled) rules
- Density, alignment, and layout grid rules
## Do / Don't
- Do: <3-5 concrete rules>
- Don't: <3-5 concrete anti-patterns for THIS project>
## Accessibility baseline
Contrast ≥ 4.5:1 body; visible focus rings; labels on inputs; keyboard nav;
hit targets ≥