realmpastai-web/claude-design-suite
Plugin Claude Code
The canonical design-skills bundle for Claude Code: 12 plugins, 89+ skills, 59 brand design-refs, 14 CSV databases, MCP server, Figma bridge, Onlook adapter.
realmpastai-web/claude-design-suite
Instructions file
Claude Code instructions for realmpastai-web/claude-design-suite, covering claude context — claude-design-suite, where things live, core invariants, chaining patterns (recipes) and build a brand from scratch.
realmpastai-web/claude-design-suite
Plugin Claude Code
Brand reference & theme generation: match-my-brand, extract DESIGN.md, diff brands, borrow patterns, generate W3C tokens, Tailwind config, shadcn/ui theme, Radix UI theme.
realmpastai-web/claude-design-suite
Command
Find the 3 closest brand DESIGN.md references for a brief.
realmpastai-web/claude-design-suite
Command
Emit a Radix UI theme config with 12-step color scales.
realmpastai-web/claude-design-suite
Command
Emit a shadcn/ui theme.css (light + dark) + matching tailwind.config.ts.
realmpastai-web/claude-design-suite
Command
Emit W3C design tokens JSON from the current design system or a specific DESIGN.md.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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 props (accentColor, grayColor, radius, scaling). Use when a team is on Radix Themes (not just Radix Primitives) and wants a brand-tuned theme.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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…
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Plugin Claude Code
CSV-backed design generators: match UI style, pick color palette, pair fonts, pick chart type, apply reasoning rule, pick tech stack, compose full design system, audit against rules.
realmpastai-web/claude-design-suite
Command
Audit a URL / screenshot / repo against the 161 reasoning rules + 99 UX guidelines. Prioritized sev-1/2/3 fix list.
realmpastai-web/claude-design-suite
Command
One-shot full design system from a 1-paragraph brief. Chains match-ui-style → pick-color-palette → pair-fonts → pick-tech-stack and emits a MASTER.md.
realmpastai-web/claude-design-suite
Command
Pick a WCAG-checked color palette from 161 options. Returns full shadcn role table for light + dark.
realmpastai-web/claude-design-suite
Command
Recommend a frontend tech stack from 16 options with tradeoff analysis.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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").
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.
realmpastai-web/claude-design-suite
Skill Claude CodeCodex
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.