make-awesome-dslisted

Generate a complete, brand-specific design system (tokens + DESIGN.md + previews) for a company, product, brand, or app, grounded in the AwesomeDesignSystem method. Use when the user asks to "create a design system", "define our brand's design language", "set up design tokens", "establish a visual identity / style guide", or wants a reusable token + component foundation for a new or existing product. Produces an authored, non-generic system with an OKLCH palette, a distinctive type pairing, and the three dials set.
Yu-aimaker/AwesomeDesignSystem · ★ 1 · Web & Frontend · score 67

Install: claude install-skill Yu-aimaker/AwesomeDesignSystem

# MakeAwesomeDS — author a brand's own design system Turn a brand brief into a real, opinionated design system that an AI or a team can build from. The output is **authored, not averaged**: it commits to a point of view. ## 0. Ground yourself in the method Read the taste layer + token contract from the knowledge base (two levels up): - `../../design-system/00-philosophy/principles.md` and `human-not-ai.md` (the standard) - `../../design-system/foundations/tokens.md` (the token contract to instantiate) - `../../design-system/foundations/color.md` + `typography.md` (palette & type method) Pull others (`spacing-layout`, `motion/*`, `patterns`) only as needed. ## 1. Establish the brief (ask or infer ≤4 things) Brand/product name · what it does · audience · the feeling it should evoke. Then **declare a direction**: Purpose · Tone (pick an extreme) · Constraints · Differentiation, anchored to two named references. Set the dials: `DESIGN_VARIANCE` (default 8), `MOTION_INTENSITY` (6), `VISUAL_DENSITY` (4). Record the rationale — a system without a "why" drifts to slop. ## 2. Build the foundations 1. **Color** — choose ONE dominant brand color, derive an OKLCH tonal scale (even-L steps, taper chroma at the ends), add 1 sharp accent + semantic success/warning/danger. Map to the semantic `--color-*` contract. Provide light + dark (adjust L/C, don't invert). 2. **Type** — pick a distinctive display + a legible body (+ mono). Never default to Inter-only. Define the fluid `