claude-design-suite

# claude-design-suite > The canonical design-skills bundle for Claude Code, Cursor, Windsurf, Copilot, and Gemini — **12 plugins · 89+ skills · 59 brand design refs · 14 CSV databases · MCP server · Figma bridge · Onlook adapter**. <p align="center"> <img alt="plugins" src="https://img.shields.io/badge/plugins-12-7b61ff"/> <img alt="skills" src="https://img.shields.io/badge/skills-89%2B-22c55e"/> <img alt="brand refs" src="https://img.shields.io/badge/brand%20refs-59-eab308"/> <img alt="license" src="https://img.shields.io/badge/license-MIT-blue"/> </p> --- ## What you get | Layer | What's inside | |---|---| | **8 vendored design plugins** | `design-research` · `design-systems` · `ux-strategy` · `ui-design` · `interaction-design` · `prototyping-testing` · `design-ops` · `designer-toolkit` — 63 skills + 27 slash commands ([source](https://github.com/Owl-Listener/designer-skills)) | | **4 new plugins** | `design-generation` (CSV-backed generators) · `brand-intelligence` (DESIGN.md + shadcn/Radix) · `onlook-integration` (Next.js/Tailwind export) · `figma-integration` (Figma ↔ DESIGN.md) | | **CSV knowledge base** | 67 UI styles · 161 color palettes · 57 font pairings · 99 UX guidelines · 25 chart types · 161 reasoning rules · 15+ tech stacks ([source](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)) | | **Brand design library** | 59 real-brand `DESIGN.md` references across 9 categories — AI/LLM, dev tools, backend, SaaS, design, fintech, e-commerce, media, automotive ([source](https://github.com/VoltAgent/awesome-design-md)) | | **MCP server** | Exposes search + match + generators to Claude Desktop, Cursor, Cline via stdio/HTTP | | **Multi-platform CLI** | `npx claude-design-suite init --ai claude\|cursor\|windsurf\|copilot\|gemini` | | **Figma bridge** | Figma plugin + REST API client → `DESIGN.md` + W3C tokens | | **Onlook adapter** | Emit Next.js + Tailwind scaffolds [Onlook](https://github.com/onlook-dev/onlook) can open directly | --- ## Install ### Claude Code (recommended) ```bash # In any Claude Code project /plugin marketplace add realmpastai-web/claude-design-suite /plugin install design-research@claude-design-suite # ...or install them all: /plugin install-all@claude-design-suite ``` ### Any IDE (Cursor / Windsurf / Copilot / Gemini) ```bash npx claude-design-suite init --ai cursor # ← pick your IDE ``` This writes plugin references into your IDE's config (`.cursor/`, `.windsurf/`, etc.) so the skills are discoverable by your local AI. ### MCP (Claude Desktop, Cline, etc.) ```bash npx @realmpastai/claude-design-suite-mcp ``` Then add to `claude_desktop_config.json`: ```json { "mcpServers": { "claude-design-suite": { "command": "npx", "args": ["-y", "@realmpastai/claude-design-suite-mcp"] } } } ``` --- ## 90-second quickstart ```txt # 1. Match your brand to the closest of 59 references /brand-intelligence:match-my-brand "fintech dashboard, trust + speed" # 2. Pick a palette + typography from the CSV library /design-generation:pick-color-palette "Fintech" --mood trustworthy /design-generation:pair-fonts "tech, editorial" # 3. Extract a full DESIGN.md from any URL /brand-intelligence:extract-design-md "https://stripe.com" # 4. Emit shadcn theme + Tailwind config + W3C tokens /brand-intelligence:generate-shadcn-theme /brand-intelligence:generate-tailwind # 5. Scaffold an Onlook-ready Next.js project /onlook-integration:scaffold-onlook-project ``` --- ## Documentation map | Doc | Purpose | |---|---| | [CLAUDE.md](CLAUDE.md) | How Claude should chain these skills — **read this if you're building with the suite** | | [data/README.md](data/README.md) | CSV schemas for the 14-database knowledge layer | | [design-refs/_template/DESIGN.md](design-refs/_template/DESIGN.md) | Add a new brand reference | | [examples/](examples/) | 8 end-to-end recipes | | [CONTRIBUTING.md](CONTRIBUTING.md) | Add a skill / command / brand / CSV row | | [CREDITS.md](CREDITS.md) | Attribution for the 4 source projects this suite builds on | --- ## Plugin index | Plugin | Skills | Commands | Highlights | |---|---|---|---| | `design-research` | 10 | 4 | personas, empathy maps, interview scripts | | `design-systems` | 8 | 3 | component specs, tokens, a11y | | `ux-strategy` | 8 | 3 | IA, user flows, UX audits | | `ui-design` | 9 | 4 | colors, typography, layouts, dark mode | | `interaction-design` | 7 | 3 | microinteractions, state machines | | `prototyping-testing` | 8 | 4 | heuristic eval, a11y audits, A/B | | `design-ops` | 7 | 3 | handoff specs, critique, sprints | | `designer-toolkit` | 6 | 3 | portfolio, case studies | | `design-generation` | 8 | 4 | CSV-backed style/palette/font/chart pickers | | `brand-intelligence` | 8 | 4 | DESIGN.md extraction, shadcn/Radix theme gen | | `onlook-integration` | 5 | 3 | Next.js/Tailwind scaffold for [Onlook](https://github.com/onlook-dev/onlook) | | `figma-integration` | 5 | 3 | Figma ↔ DESIGN.md + tokens | --- ## License MIT — see [LICENSE](LICENSE). See [CREDITS.md](CREDITS.md) for upstream attribution.