design-studio

Generate A/B test design variants from an existing Figma screen — alternate layouts, CTA placements, color treatments, and copy variations.

Full WCAG AA accessibility audit on an HTML file — contrast ratios, keyboard navigation, semantic HTML, ARIA usage, touch targets, and label associations.

Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, component tokens, and Figma styles.

Define or audit a brand — positioning, visual identity system, voice and tone, and brand architecture.

Design a chart or data visualization — selects the right chart type, applies accessible color palettes, adds annotations, and outputs production-ready HTML/CSS/JS

Use this agent to run a comprehensive WCAG AA accessibility audit on a design. Trigger when reviewing designs for accessibility, checking contrast ratios, testing keyboard navigation, or validating semantic HTML. Also trigger proactively after building any user-facing UI. <example> Context: User just finished building a new page user: "Check if this page is accessible" assistant: "I'll run the accessibility auditor to do a comprehensive WCAG AA audit." <commentary> User explicitly asks for accessibility review, trigger the auditor. </commentary> </example> <example> Context: Assistant just built a component and wants to verify quality user: "Build me a signup form" assistant: "Here's the signup form. Let me also run an accessibility audit in the background." <commentary> Proactively audit new UI for accessibility issues. </commentary> </example> <example> Context: User wants to check WCAG compliance user: "Does this meet WCAG AA standards?" assistant: "I'll use the accessibility auditor agent to check against all WCAG AA criteria." <commentary> Specific WCAG compliance question triggers the specialist auditor. </commentary> </example>

Use this agent to run a structured 3-pass UX critique — heuristics, accessibility, and content quality. Trigger when the user wants a thorough pre-launch design review, when designs need a second opinion before stakeholder presentation, or when audit depth needs to exceed a single-pass review. <example> Context: User wants a thorough review before stakeholder presentation user: "Give me a thorough critique of this design before I show it to stakeholders" assistant: "I'll use the design-critic agent to run a 3-pass critique — heuristics, accessibility, and content." <commentary> High-stakes review request — use the structured multi-pass critic agent. </commentary> </example> <example> Context: User wants a second opinion on their design user: "Something feels off about this flow but I can't put my finger on it" assistant: "I'll use the design-critic agent to systematically audit the design across all dimensions." <commentary> Vague unease signals need for systematic review — use the critic agent. </commentary> </example> <example> Context: User is running a design sprint and wants quick but thorough feedback user: "Review this prototype for Friday's sprint demo" assistant: "I'll use the design-critic agent to run all 3 critique passes before your demo." <commentary> Sprint review with time pressure — critic agent gives structured, actionable output fast. </commentary> </example>

Use this agent to perform an automated UX heuristic review of Figma screens. Trigger when the user wants feedback on their design, a UX audit of screens, or a critique before presenting/submitting their work. <example> Context: User wants feedback on their Figma wireframes user: "Can you review my wireframes and tell me what's wrong?" assistant: "I'll use the design-critique agent to run a heuristic evaluation of your Figma screens." <commentary> User wants design feedback — trigger the critique agent to analyze screenshots against heuristics. </commentary> </example> <example> Context: User is about to submit a design challenge user: "Before I submit, can you do a UX review of my screens?" assistant: "I'll use the design-critique agent to evaluate your designs against UX best practices." <commentary> Pre-submission review — exactly what the critique agent is for. </commentary> </example> <example> Context: User has designed a new feature user: "I designed the settings page, can you critique it?" assistant: "I'll use the design-critique agent to analyze the settings page for usability issues." <commentary> Screen-specific UX feedback request — trigger the critique agent. </commentary> </example> <example> Context: User wants to compare two design options user: "Which of these two card layouts is better from a UX perspective?" assistant: "I'll use the design-critique agent to evaluate both layouts against usability heuristics." <commentary> Comparative evaluation — the critique agent can analyze both and recommend. </commentary> </example>

Use this agent to lint a Figma file for common design issues — inconsistent spacing, orphan colors, non-standard type sizes, missing auto-layout, detached styles, and accessibility violations. Returns a prioritized list of issues with auto-fix suggestions. <example> Context: User is building a design in Figma and wants a quality check user: "Lint my Figma file for design issues" assistant: "I'll use the design-lint agent to scan for inconsistencies and common problems." <commentary> Direct request for design linting — trigger the agent. </commentary> </example> <example> Context: User finished creating components and wants to verify quality user: "Check if my design system is consistent" assistant: "I'll use the design-lint agent to verify consistency across your design system." <commentary> Consistency checking is core to the lint agent's purpose. </commentary> </example> <example> Context: User about to hand off design to developers user: "Is my Figma file clean enough for dev handoff?" assistant: "I'll use the design-lint agent to identify any issues before handoff." <commentary> Pre-handoff quality check — lint agent catches issues developers would flag. </commentary> </example>

Use this agent to run visual QA on a design implementation — checking responsive behavior across breakpoints, token/design system compliance, interactive states, and motion quality. Trigger after building UI components or pages, or when the user wants to verify design quality. <example> Context: Assistant just finished building a page user: "Does this look good on mobile?" assistant: "I'll run the design QA agent to test at all breakpoints." <commentary> User asks about responsive behavior, trigger QA agent for comprehensive testing. </commentary> </example> <example> Context: User wants to verify design consistency user: "Check if this follows our design system" assistant: "I'll use the design QA agent to audit token compliance and visual consistency." <commentary> Design system compliance check triggers the QA specialist. </commentary> </example> <example> Context: Proactive quality check after building user: "Build a pricing page with 3 tiers" assistant: "Here's the pricing page. Let me run design QA to verify it looks right at all sizes." <commentary> Proactively check quality after building a visual component. </commentary> </example>

Assembles a virtual design team to produce production-quality UI, UX, visual, social media, email, and data output. A Design Manager staffs the right specialists (Product Designer, UX Designer, UI Designer, UX Researcher, Content Designer, Design System Lead, Motion Designer, Creative Director, Social Media Designer, Social Media Strategist, Social Media Copywriter, Growth/Analytics Specialist, Email Designer, Email Copywriter, Data Viz Designer, Dashboard Architect, Presentation Designer, Brand Strategist, Illustration Director, Video/Content Producer, AI Image Director, AI Video Director, AI Audio & Voice Producer, AI Prompt Engineer, Print Designer) based on the task scope. Trigger when the user asks to design, build, style, or prototype web pages, apps, components, dashboards, presentations, design tokens, or brand assets. Also trigger for Figma-to-code workflows, design system creation, responsive layouts, dark mode theming, accessibility audits, UX flows, wireframes, content strategy, animations, deployment, social media content, campaigns, Instagram, TikTok, LinkedIn, Twitter, YouTube, carousels, stories, reels, content calendars, hashtags, captions, social analytics, email templates, email campaigns, newsletters, email sequences, welcome emails, drip campaigns, email copywriting, HTML email, deliverability, charts, graphs, data visualization, bar charts, line charts, scatter plots, KPI dashboards, analytics dashboards, data tables, presentations, pitch decks, slide decks, keynote, powerpoint, google slides, investor deck, brand positioning, brand strategy, brand identity, brand audit, brand architecture, brand voice, illustrations, icon systems, icons, SVG assets, spot illustrations, style guide, video scripts, storyboards, video content, product demo video, explainer video, short-form video, reels script, youtube script, tiktok script, motion design, micro-interactions, page transitions, animation, CSS animations, Lottie, generate image, ai image, midjourney, dall-e, dall·e, ideogram, firefly, stable diffusion, gen video, ai video, runway, kling, sora, pika, luma dream machine, voiceover, voice gen, ai audio, elevenlabs, suno, murf, ai prompt, prompt refine, moodboard, gen-moodboard, prompt-refine, ai-generated image, ai-generated video, image generation, video generation, print layout, business card, pdf report, print design, print audit, preflight check, bleed, certificate design, brochure layout, print artifact, annual report print, invoice design, print flyer, chatbot, conversational UI, voice interface, chat widget, virtual assistant, dialog flow, visionOS, Vision Pro, spatial UI, depth hierarchy, WebXR, mixed reality, augmented reality, immersive, AR design, AR overlay, world tracking, spatial computing, GDPR, CCPA, compliance design, cookie consent, consent banner, HIPAA, PCI DSS, data deletion, data portability, accessibility compliance, ADA compliance, studio-init, studio-status, project memory, pipeline, run pipeline, competitor analysis, compare designs, competitive audit, design compare, extract tokens, token extraction, find my design tokens, map tokens, token audit, token coverage, UX critique, 3-pass review, multi-pass audit, thorough design review, design second opinion. Covers both quick visual tweaks and full product design — the Manager scales the team to match task complexity. <example> user: "Build me a landing page for a SaaS product" assistant: Activates UI Designer, Content Designer, Motion Designer, Design System Lead </example> <example> user: "Convert this Figma design to code" assistant: Routes to /figma command with Figma Workflow reference </example> <example> user: "Create wireframes in Figma for a task manager" assistant: Routes to /figma-create with UX Designer + Figma Creator </example> <example> user: "Create Instagram posts for our product launch" assistant: Activates Social Media Designer, Social Media Copywriter, UI Designer </example> <example> user: "Plan a social media campaign for Q2" assistant: Routes to /social-campaign with Social Media Strategist + Copywriter + Analytics </example> <example> user: "Create a welcome email sequence for new signups" assistant: Routes to /email-campaign with Email Designer + Email Copywriter </example> <example> user: "Build an HTML email template for our product launch" assistant: Routes to /email-template with Email Designer + Email Copywriter </example> <example> user: "Build a chart showing monthly revenue trends" assistant: Routes to /chart-design with Data Viz Designer </example> <example> user: "Design an analytics dashboard for a SaaS product" assistant: Routes to /dashboard-layout with Dashboard Architect + Data Viz Designer + UI Designer </example> <example> user: "How do I use this plugin?" or "What can you do?" or "Tutorial" or "Getting started" assistant: Routes to /design-tutorial — interactive guided tour with track selection </example> <example> user: "Build a complete component library in Figma for our design system" assistant: Routes to /figma-component-library with Figma Creator + Design System Lead + UI Designer </example> <example> user: "Design a pitch deck for our seed round" assistant: Activates Presentation Designer, routes to /presentation-design with investor deck structure </example> <example> user: "Define our brand positioning and visual identity" assistant: Activates Brand Strategist, routes to /brand-strategy with positioning framework </example> <example> user: "Create an icon system for our product" assistant: Activates Illustration Director, routes to /illustration-system with icon grid and style rules </example> <example> user: "Write a 60-second product demo video script" assistant: Activates Video/Content Producer, routes to /video-script with hook-problem-solution-CTA structure </example> <example> user: "Add micro-interactions and page transitions to our app" assistant: Activates Motion Designer, routes to /motion-design with duration/easing system </example> <example> user: "Generate an on-brand image for our product launch campaign" assistant: Routes to /gen-image with AI Image Director + AI Prompt Engineer </example> <example> user: "Create a moodboard for our new campaign direction" assistant: Routes to /gen-moodboard with AI Image Director + Brand Strategist </example> <example> user: "Generate a 15-second product video for Instagram Reels" assistant: Routes to /gen-video with AI Video Director + AI Prompt Engineer </example> <example> user: "Write a voiceover for our product demo video" assistant: Routes to /gen-audio with AI Audio & Voice Producer </example> <example> user: "This Midjourney prompt isn't working, can you fix it?" assistant: Routes to /prompt-refine with AI Prompt Engineer </example> <example> user: "Design a business card for our product" assistant: Routes to /print-layout with Print Designer — sets up bleed, safe zone, CMYK colors </example> <example> user: "Generate a 12-page annual report PDF for our SaaS product" assistant: Routes to /pdf-report with Print Designer — page geometry, master template, typography system </example> <example> user: "Lint my Figma file for design issues" assistant: Routes to /lint-design — design-lint agent scans for orphan colors, spacing violations, missing auto-layout, detached styles </example> <example> user: "Critique these screens before I present them" assistant: Routes to /design-critique — design-critique agent runs Nielsen's 10 heuristics + visual audit against the current Figma file </example> <example> user: "Score my design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Give me a design score for this page" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Rate this design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "How good is this design?" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Give me a score" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "What's the design quality score?" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Quantify this design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Run QA on this page before we ship" assistant: Routes to /design-qa <file> — design-qa agent checks responsive breakpoints, token compliance, interactive states, motion quality </example> <example> user: "Is this form accessible?" assistant: Routes to /accessibility-audit <file> — accessibility-auditor agent runs a full WCAG AA audit (contrast, keyboard nav, semantic HTML, ARIA) </example> <example> user: "Set up my project with brand colors and framework" assistant: Routes to /studio-init — interactive wizard writes .design-studio/project.json with brand, framework, and token format </example> <example> user: "What's the current project context?" assistant: Routes to /studio-status — displays .design-studio/ project memory, brand tokens, and recent decisions </example> <example> user: "Run the launch-prep pipeline" assistant: Routes to /pipeline run launch-prep — executes design → accessibility-audit → design-review → design-handoff in sequence </example> <example> user: "Compare our landing page to Stripe's" assistant: Routes to /design-compare — captures both URLs via Playwright, side-by-side layout and UX analysis </example> <example> user: "Analyze Figma's website for design patterns I can steal" assistant: Routes to /competitive-audit — captures site, extracts color palette, type system, UX patterns with rated recommendations </example> <example> user: "Design a customer support chatbot UI" assistant: Routes to /design-chatbot — Conversational Designer generates dialog flow, bubble UI spec, quick replies, error states </example> <example> user: "Design a voice interface for our smart home app" assistant: Routes to /design-voice-ui — Conversational Designer generates wake word flow, confirmation patterns, audio feedback spec </example> <example> user: "Design a visionOS productivity app" assistant: Routes to /design-spatial — Spatial Designer generates window type selection, depth hierarchy, ornament spec, spatial typography </example> <example> user: "Design an AR overlay for assembly instructions" assistant: Routes to /design-ar-overlay — Spatial Designer generates anchor strategy, tracking states, instruction cards, occlusion handling </example> <example> user: "Design our cookie consent flow for EU users" assistant: Routes to /design-gdpr — Compliance Designer generates IAB TCF cookie banners, privacy control center, data deletion flow </example> <example> user: "Audit our payment form for PCI compliance" assistant: Routes to /design-compliance --regulation pci — Compliance Designer audits card field isolation, CVV handling, error message standards </example>

1 hook across 1 event