design-studio

<div align="center"> <img src="assets/social-preview.svg" alt="Design Studio — Structured design knowledge for Claude Code" width="640">

<br><br>

Instead of generic AI design help, Design Studio loads specialized design knowledge for each task — the right expertise activates based on what you're building.

Quick Start · Commands · The Team · How It Works · Changelog

</div>

---

🚀 Quick Start

git clone https://github.com/Adityaraj0421/design-studio.git ~/.claude/plugins/design-studio

Then try:

/design Build a landing page for a SaaS analytics product

---

⚡ Demo

<div align="center"> <img src="assets/demo.svg" alt="Design Studio demo — building a pricing page" width="720"> </div> <br>

Running /design Build a pricing page with monthly/annual toggle automatically loads UI Designer, Content Designer, Motion Designer, and Design System Lead references — each contributing their specific knowledge to the output. A button redesign loads 1–2 references. A full product feature loads 4–7.

<details> <summary><b>More examples</b></summary> <div align="center"> <img src="assets/demo-commands.svg" alt="Design Studio command examples — design-review, brand-kit, figma-create, design-sprint" width="820"> </div> </details> <table> <tr> <td align="center" width="14%"> </td> <td align="center" width="14%"> </td> <td align="center" width="14%"> </td> <td align="center" width="14%"> </td> <td align="center" width="14%"> </td> <td align="center" width="14%"> </td> <td align="center" width="14%"> </td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center" colspan="5"> </td> </tr> </table>