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
🚀 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
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.
👥 The Team
Design Manager
Orchestrates
Creative Director
Vision
Product Designer
Strategy
UX Designer
Flows
UI Designer
Visual
UX Researcher
Insights
Content Designer
Copy
Design System Lead
Tokens
Motion Designer
Animation
Social Media Designer
Social Visuals
Social Media Strategist
Campaigns
Social Media Copywriter
Captions
Growth/Analytics Specialist
Metrics
Email Designer
HTML Email
Email Copywriter
Subject Lines
Data Viz Designer
Charts
Dashboard Architect
Layouts
The skill loads only the references your task actually needs
🎯 Commands
| Command | What It Does |
|---|---|
/design <task> |
Full design workflow with team assembly |
/design-review <file or screenshot> |
Quality audit — accepts HTML, Figma URLs, or screenshots for visual AI critique (6 design principles scored 0–10) |
/design-system |
Generate, extract, or audit design tokens |
/figma <URL> |
Convert Figma designs to production code |
/figma-create <task> |
Build pages, wireframes, components in Figma |
/ux-audit <brief> |
Audit Figma file against a design brief |
/design-handoff |
Developer handoff docs (tokens, specs, APIs) |
/figma-responsive |
Generate mobile/tablet variants from desktop |
/figma-sync |
Detect design–code drift |
/design-present |
Interactive HTML presentation from Figma |
/brand-kit <color> |
Complete brand kit from 1–2 colors |
/component-docs |
Storybook-style docs from Figma components |
/figma-prototype |
Prototype connections between frames |
/site-to-figma <URL> |
Capture website → editable Figma design |
/ab-variants |
A/B test design variants |
/design-sprint |
Guided 5-phase design sprint |
/social-content <task> |
Social media visuals (posts, stories, reels, carousels) |
/social-campaign <brief> |
Campaign planning with strategy, calendar, and captions |
/social-analytics <type> |
Social analytics dashboards and performance reports |
/design-framework <fw> [file] |
Convert HTML designs to React, Vue, Svelte, Next.js, or Astro |
/email-template <type> for <brand> |
Production HTML email template (responsive, dark mode, cross-client) |
/email-campaign <type> for <product> |
Complete multi-email campaign sequence with copy and HTML templates |
/design-template <category> |
Production web template from gallery (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding) |
/chart-design <description> |
Accessible chart or data visualization — selects chart type, applies colorblind-safe palette, outputs HTML/CSS/JS |
/dashboard-layout <description> |
Complete dashboard — KPI cards, chart areas, filter bar, data table, sidebar, responsive |
/design-tutorial [track] |
Interactive guided tour — tracks: quick-start, ui, figma, social, email, data-viz, full |
/figma-component-library <description> |
Complete Figma component library — atoms, molecules, organisms with variants, auto layout, component properties |
/design <task> — Full Design Workflow
Assembles the right specialists and runs the complete workflow:
/design Create a 3-tier pricing page with monthly/annual toggle
/design Redesign the onboarding flow for better conversion
/design Build a real-time analytics dashboard
/design-review <file> — Quality Audit
Runs a structured 5-point audit on existing designs:
/design-review ./src/pages/checkout.html
Checks: Accessibility (WCAG AA) · Usability Heuristics · Visual Consistency · Content Quality · Motion Design
/design-system — Token Generation
Generate, extract, or audit design tokens:
/design-system Generate tokens from brand color #2563eb
/design-system Extract tokens from this Figma file
/design-system Audit existing code for hardcoded values
/figma <URL> — Figma to Code
Convert Figma designs to production-ready code:
/figma https://figma.com/design/abc123/MyApp?node-id=1-2
/figma-create <task> — Create Designs in Figma
Build pages, wireframes, components, and design systems directly inside Figma via the Desktop Bridge:
/figma-create Build a 3-screen wireframe for a saved content feature
/figma-create Set up a design system with color tokens and type scale
/figma-create Create a component set for Button with 4 variants
Requires the Figma Desktop Bridge plugin running in Figma Desktop.
/ux-audit <brief> — Audit Against a Design Brief
Audit a Figma file for compliance against a design brief — checks page structure, frame naming, sizes, styles, components, and content:
/ux-audit Check the Miles UX Design Challenge submission against the brief
/ux-audit Verify all required screens are present at 1440×900
/design-handoff — Developer Handoff Docs
Generate a complete developer handoff document from a Figma file — token maps, spacing specs, component APIs, and production-ready code snippets:
/design-handoff Generate handoff for the current Figma file
/design-handoff Export tokens as CSS variables and Tailwind config
Outputs: Markdown docs, CSS custom properties, Tailwind config, TypeScript types.
/figma-responsive <frame> — Responsive Variants
Generate mobile (375×812) and tablet (768×1024) variants from a desktop Figma frame:
/figma-responsive S3-A / Saved Redesigned
/figma-responsive Create mobile and tablet versions of the dashboard
Clones the source frame, adapts layout (grid reflow, sidebar collapse, nav simplification), and validates each breakpoint with screenshots.
/figma-sync — Design-Code Sync
Detect drift between Figma designs and code implementation — compare color tokens, typography, spacing, and components:
/figma-sync Check if Figma tokens match our Tailwind config
/figma-sync Compare design system styles against CSS custom properties
Outputs a sync report with drift score, per-token comparison tables, and optional patches for both Figma and code.
/design-present <type> — Design Presentation
Generate an interactive HTML presentation from Figma screens:
/design-present Create a walkthrough presentation of the dashboard screens
/design-present Build a pitch deck from the product mockups
/design-present Generate a case study presentation
Features: keyboard navigation, progress bar, annotations, zoom, dark/light mode, fullscreen.
/brand-kit <color> [mood] — Brand Kit Generation
Generate a complete brand kit from 1-2 colors and a mood:
/brand-kit #6366f1 premium
/brand-kit Generate a warm brand from #f59e0b
Outputs: 10-shade color palettes, secondary/accent colors, type scale, spacing scale, CSS custom properties, Tailwind config, JSON tokens, Figma styles, and a visual HTML reference page.
/component-docs — Component Documentation
Auto-generate Storybook-style documentation from Figma component sets:
/component-docs Document all components in the current Figma file
/component-docs Generate docs for the Button component set
Outputs: prop tables, variant grids, usage guidelines, code examples (HTML/React), rendered screenshots.
/figma-prototype — Prototype Connections
Create interactive prototype connections between Figma frames:
/figma-prototype Connect all screens in the onboarding flow
/figma-prototype Auto-detect bu