A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — powered by Naksha. Assembles specialist roles — UI designer, UX researcher, content designer, Figma expert, data viz, email, social, motion, presentation, brand strategy, illustration, video, conversational, spatial, compliance, and more — for any design task. 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency's design brain, inside your terminal.
npx claudepluginhub adityaraj0421/naksha-studio --plugin nakshaGenerate 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
Capture a competitor website with Playwright and extract its color system, typography, layout patterns, and 'steal this' recommendations.
Auto-generate component documentation from Figma — props, variants, usage guidelines, spacing specs, and code snippets in Storybook-style format.
Design and build a complete dashboard layout — sidebar navigation, KPI cards, chart areas, data tables, filter bar, and responsive behavior. Outputs production-ready HTML/CSS.
Audit a data visualization for chart type selection, accessible color palette, annotations, and anti-patterns. Optionally audits dashboard layout fit when context is provided. Outputs a scored checklist and corrected code.
Design an AR overlay interface — anchor strategy, world tracking UI, scan states, confirmation overlays, and occlusion handling.
Design a complete chatbot or conversational assistant UI — dialog flows, message bubbles, quick replies, typing indicators, error states, and accessibility.
Capture two websites with Playwright and produce a structured side-by-side design comparison — layout, color, typography, navigation, and 'steal this' recommendations.
Audit or generate regulation-specific UI patterns for HIPAA, PCI DSS, or ADA compliance. Use --regulation <hipaa|pci|ada> to target a specific standard.
UX heuristic review of Figma screens — evaluates against Nielsen's 10 heuristics, visual design quality, spacing, color, typography hierarchy, and interaction states.
Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCSS, Svelte 5, Next.js App Router, Astro. Native mobile: Flutter, React Native, SwiftUI, Jetpack Compose.
Design GDPR/CCPA-compliant consent flows — cookie banners, consent hierarchy, privacy controls, and data deletion request UI.
Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and production-ready code snippets.
Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker notes, and keyboard navigation.
Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token compliance, interactive states (hover, focus, active), and motion quality.
Review an existing design for quality — accessibility, usability, visual consistency, content, and motion. Accepts HTML files, Figma URLs, preview servers, or screenshots for visual AI critique.
Quantitative 0–100 design quality score across Accessibility, Usability, Visual Quality, and Token Compliance.
Design a spatial computing interface for visionOS, Vision Pro, or WebXR — depth hierarchy, window type, ornament placement, spatial typography, and interaction model.
Guided design sprint methodology — problem framing, ideation, decision matrix, rapid prototyping, and testing plan in a structured 5-phase workflow.
Generate design tokens, theme configuration, or extract a design system from existing code or Figma files.
Generate a production-ready web page from a curated template category. Pick a category (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, or onboarding) and get a fully-built, customized HTML/CSS template — brand colors, copy, and responsive layout included.
Interactive guided tour of Naksha — learn commands through real exercises, discover workflows, and get oriented in under 10 minutes
Design a voice interface — wake word flows, confirmation patterns, error recovery, screen companion layout (if hybrid), audio feedback guidelines.
Design anything — pages, components, apps, dashboards, presentations. Assembles the right design specialists for the task.
Full-spectrum email audit — technical rendering issues (Phase 1, Email Designer) and copy/strategy critique (Phase 2, Email Copywriter). Accepts pasted HTML or a description of an existing email.
Plan and write a complete multi-email campaign sequence — welcome flows, onboarding sequences, promotional campaigns, re-engagement, and launch sequences. Outputs a campaign brief, sequence map, and all email templates.
Generate a production-ready HTML email template — inline styles, table layout, bulletproof buttons, responsive, dark mode, and deliverability-optimized. Works across Gmail, Outlook, Apple Mail, Yahoo Mail.
Generate a complete component library in Figma from a design system config — atoms, molecules, and organisms with all variants, auto layout, and component properties
Create designs directly in Figma — pages, wireframes, components, design systems, hi-fi screens.
Create interactive prototype connections between Figma frames — link screens with transitions, define hotspots, and set up user flows.
Generate mobile and tablet variants from a desktop Figma wireframe — adapts layout, reflowing content for smaller breakpoints.
Detect drift between Figma designs and code implementation — compare tokens, spacing, colors, typography, and component structure.
Convert a Figma design to production code. Provide a Figma URL or select a node in Figma desktop.
Generate an AI audio brief — voiceover (ElevenLabs, Murf) or music/jingle (Suno), with tool selection, voice/music brief template, timing cues for video sync, and synthetic voice compliance note.
Generate a brand-aligned AI image — tool selection, full prompt (subject, style, lighting, camera, mood, negatives), variation prompts, and seed strategy. Works across Midjourney, DALL-E, Ideogram, Firefly, and Stable Diffusion.
Generate 3 AI moodboard directions for a concept or campaign — brand personality extraction, visual style definition, and 4–6 ready-to-paste image prompts per direction with rationale.
Generate video output in one of three modes: Remotion (programmatic React-based video), Gen-AI (shot prompt pack for Runway/Kling/Sora/Pika/Luma), or Remotion+Gen-AI (programmatic scaffold with AI footage embedded).
Design an illustration style guide, icon system, or SVG asset set for a product or brand.
Scan a Figma file for design quality issues — orphan colors, spacing violations, non-standard type sizes, missing auto-layout, and detached styles. Returns a prioritized lint report with severity levels and fix suggestions.
Design micro-interactions, transitions, and animation systems for UI components or full pages.
Run all naksha quality checks and report the plugin's health status.
Quick-reference for any Naksha command — browse by category or look up a specific command
Initialize Naksha project memory — sets up brand context, framework, and token format that persists across sessions.
Show current Naksha project memory — brand settings, framework, token format, and recent design decisions.
Generate a multi-page print-ready report or document layout with page geometry, master template, typography system, and CSS @media print + @page output.
Run multi-command design pipelines. Subcommands: run <name> [input], list, show <name>.
Design a complete presentation deck — pitch deck, product demo, or internal presentation — with slide system, layouts, and visual hierarchy.
Audit a print layout for bleed, safe zone, color mode, font embedding, and page break rules. Optionally audits brand consistency when brand context is provided.
Design a single print artifact (business card, flyer, certificate, brochure, invoice) with correct bleed, safe zone, CMYK color system, and print-ready HTML/CSS output.
Diagnose and optimize any AI gen prompt — annotated critique of weak tokens and missing modifiers, optimized prompt with explanations, and a cross-tool variant adapted for a second tool.
Capture a live website and recreate its layout in Figma as editable frames with auto-layout, styles, and proper layer structure.
Design a social media analytics dashboard, generate a performance report, or set up an A/B test framework with KPI tracking and funnel visualization.
Plan a social media campaign — strategy, content calendar, caption drafts, and KPI targets for multi-platform social campaigns.
Design social media visual content — posts, stories, reels, carousels — mobile-first, platform-exact dimensions. Exports PNG via Playwright. Supports AI-generated image backgrounds.
Audit a Figma file against a design brief — checks page structure, frame naming, sizes, styles, components, and content compliance.
Write a video script, storyboard, or content series plan for product demos, explainers, social video, or ads.
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>
Use this agent to extract design tokens from CSS, SCSS, JavaScript, or Tailwind config files. Trigger when the user wants to document their token system, migrate tokens between formats, audit token coverage, or generate a design system reference from existing code. <example> Context: User wants to document their CSS custom properties as a design system user: "Extract all design tokens from our CSS files" assistant: "I'll use the design-token-extractor agent to scan your CSS and map the full token system." <commentary> Token extraction from CSS — exactly what this agent handles. </commentary> </example> <example> Context: User wants to migrate from CSS variables to Tailwind user: "Convert our CSS custom properties to a Tailwind config" assistant: "I'll use the design-token-extractor agent to read the CSS vars and output a tailwind.config.js." <commentary> Token format migration — agent reads one format, writes another. </commentary> </example> <example> Context: User wants an audit of their token coverage user: "How complete is our design token system?" assistant: "I'll use the design-token-extractor agent to scan the codebase and report token coverage." <commentary> Token coverage audit — the agent scans, categorizes, and reports gaps. </commentary> </example>
Use this agent to create visual designs directly in Figma using the Desktop Bridge. Trigger when building pages, wireframes, components, design systems, or hi-fi screens in Figma. Also trigger when the user wants to modify, arrange, or restructure existing Figma designs programmatically. <example> Context: User wants to build wireframes in Figma user: "Create 3 wireframe screens in Figma for the onboarding flow" assistant: "I'll use the figma-creator agent to build the wireframe screens directly in Figma." <commentary> User wants designs created inside Figma, not as HTML. Trigger the Figma creator. </commentary> </example> <example> Context: User wants a design system set up in Figma user: "Set up our color palette and text styles in Figma" assistant: "I'll use the figma-creator agent to create the Figma styles and tokens." <commentary> Creating Figma-native styles (Paint Styles, Text Styles) requires the Desktop Bridge creator. </commentary> </example> <example> Context: User wants components built in Figma user: "Build a Button component set with Primary, Secondary, and Ghost variants" assistant: "I'll use the figma-creator agent to create the component set with all variants in Figma." <commentary> COMPONENT_SET creation with variants is a Figma-native operation. </commentary> </example> <example> Context: User wants to restructure pages user: "Add a new page called 'Prototypes' and move the frames into it" assistant: "I'll use the figma-creator agent to create the page and reorganize the frames." <commentary> Page creation and node reparenting are Figma-native operations. </commentary> </example>
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Complete collection of battle-tested Claude Code configs from an Anthropic hackathon winner - agents, skills, hooks, rules, and legacy command shims evolved over 10+ months of intensive daily use
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification
Comprehensive startup business analysis with market sizing (TAM/SAM/SOM), financial modeling, team planning, and strategic research