A virtual design team for Claude Code — 9 specialist roles, 16 commands, 5 agents
# Add to your Claude Code skills
git clone https://github.com/Adityaraj0421/design-studioInstead 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
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
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.
Design Manager
Orchestrates
Creative Director
Vision
Product Designer
Strategy
No comments yet. Be the first to share your thoughts!
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
| 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 WorkflowAssembles 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 AuditRuns 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 GenerationGenerate, 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 CodeConvert Figma designs to production-ready code:
/figma https://figma.com/design/abc123/MyApp?node-id=1-2
/figma-create <task> — Create Designs in FigmaBuild 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 BriefAudit 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 DocsGenerate 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 VariantsGenerate 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 SyncDetect 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 PresentationGenerate 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 GenerationGenerate 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 DocumentationAuto-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 ConnectionsCreate interactive prototype connections between Figma frames:
/figma-prototype Connect all screens in the onboarding flow
/figma-prototype Auto-detect bu