Diff Brands
Side-by-side compare two brand DESIGN.md files — spot the axes where they differ (tone, palette saturation, type weight, motion, density). Use when a team wants to articulate how their brand differs from a competitor or aspirational reference.
Pick Tech Stack
Recommend a frontend/design-system stack from data/stacks/*.csv (16 stacks — React, Next.js, Vue, Svelte, Astro, SwiftUI, Flutter, shadcn, and more) with tradeoff analysis. Use when a team is starting a new product and needs to pick a stack that matches their team size, performance needs, and deployment target.
Interview Script
Create a structured user interview script with warm-up, core exploration, and wrap-up sections. Use when preparing for user research interviews to ensure consistent, insightful conversations.
Figma Component Audit
Scan a Figma file for inconsistencies against a chosen DESIGN.md — colors used off-style, text not linked to text styles, components detached, radius/spacing values off-scale. Use when a team wants to know how far a Figma file has drifted from its intended design system.
Affinity Diagram
Organize qualitative research data into an affinity diagram with themes, clusters, and insight statements. Use when synthesizing large amounts of qualitative data from interviews, observations, or surveys.
Pick Chart
Recommend the right chart type from the 25 options in data/charts.csv based on data shape (time series, categorical, distribution, comparison, relationship, hierarchy, flow) and an audience constraint. Use when a team is designing a dashboard or analytics screen and needs to avoid common chart-choice mistakes.
Extract Design Md
Generate a new DESIGN.md in the standard format from a URL or screenshot — extracts color system, typography, layout, motion, and signature details into the canonical template. Use when you want to add a brand to the reference library or to document an external brand you're inspired by.
Generate Tailwind
Convert a DESIGN.md (or generated W3C tokens.json) into a tailwind.config.js (or .ts) with colors, fontFamily, fontSize, spacing, borderRadius, boxShadow, and screens. Use when a team is starting a Tailwind-based project and wants a typed config pre-wired to their brand.
Apply Reasoning Rule
Retrieve the most relevant industry-specific design reasoning rule from the 161 rules in data/ui-reasoning.csv — each rule explains when to apply a pattern and why. Use when a team needs a defensible rationale for a design decision (not just "because it looks nice").
Match My Brand
Given a brief or screenshot, BM25-rank the 59 vendored DESIGN.md brand references and return the top 3 closest matches with rationale. Use when a team wants to borrow visual direction from a real-world brand rather than starting from scratch.
Compose Design System
End-to-end design-system compositor — one brief in, full system out (style + palette + typography + tech stack + tokens + shadcn config). Use when a team wants a production-ready starter design system from a single paragraph of intent, not a multi-day exploration.
Audit Against Rules
Audit an existing site or repo against applicable rules from data/ui-reasoning.csv + data/ux-guidelines.csv and produce a prioritized fix list. Use when a team wants a quick design review without pulling in a consultant.
Figma Handoff
Generate a dev-handoff spec from a Figma frame — measurements, colors/tokens used, typography, component tree, interaction notes — chaining into design-ops/handoff-spec. Use when a developer needs a complete implementation brief from a single Figma frame or component.
Pair Fonts
Pair heading + body (+ optional mono) fonts from the 57 vendored pairings in data/typography.csv, returning Google Fonts import URLs and a type-scale recommendation. Use when a team needs a font combination that already works, backed by real-world pairings.
Design Md To Figma
Convert a DESIGN.md into a Figma-importable style library JSON that a designer can load via the companion Figma plugin — paint styles, text styles, effect styles, and variables with light + dark modes. Use when the team wants a DESIGN.md (from code or a brand reference) to show up inside Figma as editable library assets.
Borrow Pattern
Pull one named pattern (hero, pricing, dashboard, empty state, command palette, settings, onboarding) from a chosen brand in design-refs/ — returns the structure, the tokens it uses, and a buildable React+Tailwind starter. Use when a team has picked an inspiration brand and wants to prototype a specific surface fast.
Match Ui Style
BM25-rank the 67 UI style systems in data/styles.csv against a product brief and return the top 3 with rationale and code hints. Use when a team needs to pick an overall visual language (Material, Glass, Neo-brutalist, Editorial, Swiss, etc.) for a new product.
Generate Radix Theme
Convert a DESIGN.md or tokens.json into a Radix UI theme config — generates 12-step color scales for each brand color using Radix's perceptual scale generator approach, plus the <Theme> props (accentColor, grayColor, radius, scaling). Use when a team is on Radix Themes (not just Radix Primitives) and wants a brand-tuned theme.
Generate Shadcn Theme
Convert a DESIGN.md or tokens.json into shadcn/ui-compatible CSS variables — emits a theme.css with :root and .dark blocks for all shadcn role variables (primary, secondary, accent, background, foreground, card, muted, border, destructive, ring) plus the tailwind.config.ts wrapper. Use when a team is on shadcn and wants to swap the default slate theme for their brand in one file.
Generate Tokens
Convert a DESIGN.md (or an in-memory design system from compose-design-system) into a W3C Design Tokens JSON file — colors, typography, spacing, radii, motion, shadows. Use when a team wants a framework-agnostic tokens.json that can be consumed by Style Dictionary, Tokens Studio, Figma, or codegen pipelines.
Pick Color Palette
Pick a WCAG-checked color palette from data/colors.csv (161 options) by product type and mood, returning full shadcn-style role assignments (Primary, Accent, Muted, Destructive, etc.) for light and dark modes. Use when a team needs a production-ready palette with contrast notes, not hand-picked hex values.