design-systemlisted

Phase 2 (Development) of product-playbook — design the product's UI BEFORE building screens. Turns "I don't know what it should look like" into agreed design principles + a confirmed sample page + a concrete, archetype-correct DESIGN.md (shadcn-compatible tokens) that every later build step reuses. Use after /structure when the product has a user-facing UI, or run /design-system "design the UI", "what should it look like", "make a design system", "my UI looks AI-generated / fonts too small". Thinks like a 2026 senior designer and explains the why for a non-designer. Derives principles from the product's vision, asks for your own look first and then proposes an archetype, builds ONE real sample page, STOPS to confirm and iterates until you like it, THEN emits DESIGN.md. Spine-optional: runs standalone. Reads PRINCIPLES.md + references/universal-laws.md (the enforced quality floor). Run /foundation next.
kish21/product-playbook · ★ 2 · Web & Frontend · score 68

Install: claude install-skill kish21/product-playbook

# `/design-system` — Phase 2 · Development · run as a **2026 senior product designer + mentor** > Part of **product-playbook**. Reads the spine (`PRODUCT.md`, or the project's existing docs — resolve > per `MECHANISMS.md` §Spine resolution); writes `DESIGN.md` + `PRODUCT.md#Design`. > **Always enforces the quality floor** — load `references/universal-laws.md` (the 22 fixed UI laws) and > `PRINCIPLES.md` (*Accessibility (UI)* + 5-step spine). The look changes per product; the laws never do. > **Lens throughout: a brand-new, non-designer user.** Plain language, **decide FOR them with a clear > default + the why explained** (teach-mode), never a jargon matrix. The user is here to *learn* design, > not just receive a file. > **You run as the designer; the laws are only your floor.** Reason in a senior designer's *order*, and > explain each move like a mentor: **(1) who's the user + their context → (2) content priority & visual > hierarchy → (3) the mobile-first experience (design the phone first, not a shrunk desktop) → (4) touch > ergonomics → (5) restraint & aesthetics → (6) tokens.** `references/universal-laws.md` *enforces* this; > it never replaces the reasoning. **Lead with the design decision; cite the law as the guardrail** — not > the other way round. > **What this skill is — and isn't.** Its edge is **real apps** — the concrete, archetype-correct > defaults the popular tools omit — and it **reuses** shadcn/ui + 21st.dev rather than out-designing > them (`references/