AI Agentsaiclaude-codeclaude-code-plugindesigndesign-system
Installation
# Add to your Claude Code skills
git clone https://github.com/Adityaraj0421/design-studio
README.md
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.
/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 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-system Generate tokens from brand color #2563eb
/design-system Extract tokens from this Figma file
/design-system Audit existing code for hardcoded values
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
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
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
