design-systems

Create an opinionated design system as a DESIGN.md file. Triggers on: "create a design system", "generate DESIGN.md", "design system for [description]", "new design system", "design system", or /design-systems:create. Generates a complete DESIGN.md with Creative North Star, Core Prohibitions, Anti-Moodboard, and full token definitions. Actively avoids AI slop patterns.

Apply a DESIGN.md design system to the project's existing CSS/style files. Triggers on: "implement the design system", "apply design system", "set up design tokens", "apply DESIGN.md", or /design-systems:implement. Reads DESIGN.md, detects the project's CSS framework, and updates style files with design tokens.

Audit UI code for design system compliance and AI slop markers. Triggers on: "review design system", "check design compliance", "audit UI code", "design system review", "check for AI slop", "design review", or /design-systems:review. Scans CSS, SCSS, JSX, TSX, Vue, and Svelte files against DESIGN.md rules and the AI Slop Instant Giveaways checklist.

Generate a self-contained HTML specimen page that renders the design system live. Triggers on: "generate specimen", "preview design system", "show design system", "specimen page", "visualize design system", or /design-systems:specimen. Produces a single HTML file with all tokens rendered as visual examples.