Design plugins

Access 50+ UI/UX styles, color palettes, font pairings, guidelines, and charts to plan, build, review, and optimize web and mobile interfaces across React, Next.js, Vue, Svelte, Tailwind, React Native, and Flutter.

Elevate frontend development with AI commands that polish, audit, critique, and optimize production-grade interfaces like websites, dashboards, components, and forms. Unlock expert reviews for UX, accessibility, performance, responsive design, theming, typography, motion, plus curated anti-pattern detection.

Generate accessible UI components, build design systems with tokens and patterns, audit WCAG compliance, review designs for usability and performance, and implement responsive layouts for web (React/Vue/Svelte/Tailwind) and mobile (iOS/Android/React Native) apps using specialized skills, commands, and expert agents.

Prototype and build optimized 2D/3D indie games in Godot and Unity by generating GDScript patterns for signals state machines scenes, C# scripts with URP/HDRP pipelines asset management profiling, principles for sprites tilemaps physics shaders lighting LOD core loops player psychology balancing progression, plus p5.js HTML/JS generative art sketches.

Design and build production-grade, immersive web UIs with 3D interactions using Three.js and React Three Fiber, scroll-driven animations via GSAP and Framer Motion, distinctive aesthetics, mobile-first apps for iOS/Android with React Native or Flutter, visual design manifestos, and prioritized UI/UX guidelines for accessibility and performance.

Build production-grade React and Next.js web apps with guided expertise in modern patterns, Tailwind v4 configs, distinctive designs, form friction reduction, performance rules, and SEO diagnostics. Streamline frontend development from components to audits.

Act as an editorial creative director to generate converting interactive portfolios for devs and creatives, p5.js generative art from algorithmic philosophies, refined marketing copy via clarity sweeps, visual design manifestos in Markdown/PDF/PNG, Python-powered brand voice and SEO analysis, and production-grade distinctive frontend UIs with DFII evaluation.

Design and implement Human Interface Guidelines-compliant UIs for iOS, iPadOS, macOS, visionOS, watchOS, tvOS using adaptive layouts, navigation patterns like sidebars and tabs, system experiences such as widgets and notifications, accessibility foundations, input handling for gestures and Pencil, and interaction patterns with feedback and undo support.

Generate distinctive production-grade frontend UIs for components, pages, or apps with bold aesthetics, unique typography, motion, and layouts that avoid generic styles, supporting HTML, CSS, JavaScript, React, or Vue.

Orchestrate creative AI image generation workflows: search a 1300+ curated design gallery for inspirations, craft batch prompts for parallel variations and concepts, auto-enhance short prompts, and generate images via MeiGen server with ComfyUI or OpenAI-compatible APIs.

Design and implement Domain-Driven Design (DDD) evented architectures for complex domains: model subdomains/bounded contexts/ubiquitous language, apply tactical patterns (entities/aggregates/domain events), build CQRS/ES systems with event stores/projections/sagas using TypeScript/Python on Postgres/Kafka/DynamoDB.

Generate SEO-optimized marketing content for blogs, emails, social media, and landing pages; plan drip campaigns with calendars, A/B tests, and objectives; audit websites, track competitors, ensure brand voice; create performance reports; connect remotely to tools like Ahrefs, HubSpot, Amplitude, Klaviyo, Canva for SEO data, analytics, CRM, and design.

Automate product management workflows: generate feature specs, PRDs, roadmaps, sprint plans, and stakeholder updates tailored to audiences. Synthesize user research into prioritized insights, review metrics with trends, and produce competitive briefs. Brainstorm ideas conversationally. Pull real-time data from 16+ tools including Jira, Linear, Amplitude, Notion, Figma, Slack via MCP integrations.

Streamline design-to-development workflows by critiquing and auditing Figma UIs for usability, accessibility, and WCAG compliance, generating handoff specs with tokens and breakpoints, writing UX copy for microinteractions, synthesizing user research into insights, managing design systems, and connecting directly to Figma, Jira, Linear, Slack, Notion, Asana, and more via MCP servers.

Conduct full product discovery cycles in your IDE: brainstorm ideas and experiments for new/existing products from PM/designer/engineer views, identify/prioritize assumptions and features, triage requests, generate interview scripts, summarize transcripts, and design metrics dashboards.

Use slash commands and skills to generate product strategy canvases (strategy, business model, lean, startup), market analyses (SWOT, PESTLE, Porter's Five Forces, Ansoff Matrix), value propositions, pricing strategies, and monetization plans in markdown for PM workflows, team alignment, and business validation.

Perform product market research workflows: generate user personas, behavioral segments, and customer journey maps from surveys, CSVs, or feedback; conduct competitive landscape analysis with competitor profiles and differentiation maps; run sentiment analysis on reviews for insights and recommendations; estimate TAM/SAM/SOM with growth projections; output markdown reports.

Connect to Excalidraw's remote MCP endpoint to generate, edit, export, and manage sketches and diagrams directly in your workflow with fast streaming support.

Generate AntV infographics from text prompts, notes, reports, or outlines by producing DSL code with template selection, theme application, and custom TypeScript/React components for items, layouts, and structures like lists, hierarchies, or geo charts.

Build crafted, consistent UI interfaces for dashboards, admin panels, and SaaS apps with persistent design systems. Initialize systems with intent-based styles, generate components using typography, navigation, and tokens; audit code for violations, extract patterns from React/Vue/Svelte files, critique and rebuild for better composition, spacing, and focal points.

Generate production-ready GPT-Image-2 prompts by selecting from a library of visual styles, industrial templates, categories, and scene tags. Input image intents to match templates and build structured prompts with subject, composition, visuals, and constraints for high-quality image generation.

Discover brand materials from Notion, Slack, Confluence, Gong, Figma, and more; distill into structured, LLM-ready guidelines; enforce consistent voice on AI-generated sales, marketing content like emails, proposals, and posts via generation, validation, and refinement.

Build performant Unity games with JEngine hot-update framework by chaining fluent async tasks as coroutine alternatives, pooling objects thread-safely to slash GC pressure, awaiting async modal dialogs for user input, extending editor with themed UIElements UIs, and coding zero-GC patterns like cooldowns and timers using modern C#.

Extract full design languages from any website URL into Tailwind configs, shadcn/ui CSS vars, Figma variables, React themes, DTCG tokens, and motion/voice specs. Generate WCAG audits, graded report cards, head-to-head battle pages, style remixes, theme recolors, brand guidelines books, and shippable design system bundles.

Generate editorial-quality technical and product diagrams—including architecture, flowcharts, sequences, ER models, timelines, and swimlanes—as standalone HTML files with inline SVG, customizable via style guide extracted from your brand website.

Connect to Figma's MCP server to automate design-to-code and code-to-design workflows: generate production UI code from Figma designs, create Figma files and screens from code or descriptions, build design systems with tokens and variables, maintain code connect mappings, and handle FigJam operations.

Generate, edit, and inpaint images via GPT Image 2 CLI skill, using a reference prompt gallery to match styles for UI mockups, diagrams, posters, research figures, anime, and Chinese typography workflows.

Build and deploy Vizro dashboards end-to-end via a enforced 2-phase workflow: gather requirements, design layouts and visualizations in YAML specs, implement Python code from examples and schemas, then run Playwright E2E tests with browser automation.

Generate Mermaid diagrams including flowcharts, sequence diagrams, ERDs, C4 architecture, state machines, and Gantt charts directly from natural language descriptions of systems, workflows, or specifications to create visualizations for technical documentation.

Build comprehensive brand foundations by following a proven 7-part strategy framework used by top agencies for Fortune 500 clients, guided step-by-step from Brand Truth discovery through positioning, messaging, and brand guidelines with targeted questions and structured outputs.

Run interactive frontend design wizards to research UI/UX trends from Dribbble and Coolors, analyze websites for inspiration via browser screenshots and extractions, curate Tailwind-compatible color palettes and typography pairings, create visual moodboards, review HTML for design principles and accessibility issues, and generate production-ready UI code.

Generate Mermaid diagrams to visualize and document software: class/domain models, API sequence flows, process flowcharts, database ERDs, C4 architecture, git graphs, Gantt charts, and more.

Generate 3-5 ASCII mockup variations for UI concepts like dashboards and forms. Review design rationales, select and modify versions interactively, then receive implementation blueprints with technology suggestions to prototype quickly.

Design beautiful, functional user interfaces, components, and design systems for rapid implementation in 6-day sprints. Generates Tailwind CSS classes with mobile-first layouts and reusable patterns ready for quick deployment.

Generate React, Vue, or HTML code from Figma designs using Anima SDK, automate pipelines with CI/CD via GitHub Actions, optimize API costs and performance with caching and throttling, debug errors, secure tokens, set up local dev loops with Vite previews, and deploy serverless APIs to Vercel or GCP.

Automate frontend workflows: generate Tailwind-powered landing pages and multi-page marketing sites from briefs with screenshots and videos; set up Tailwind v4 themes and install shadcn/ui components in React/Next.js apps; review visual designs, extract design systems, and audit React performance patterns.

Generate professional SVG PPT slides (1280x720 Bento Grid) from any topic via automated multi-agent workflow: research trends and materials from web/GitHub/YouTube/Reddit/X/Bilibili, plan Pyramid Principle outlines, draft content, review/optimize aesthetics and layout with Gemini, apply styles/brand colors/pages. Run /ppt-agent:ppt --style --brand-colors --pages.

Delegate UI/UX design workflows to specialized agents that conduct WCAG 2.1 AA/AAA accessibility audits on web apps, generate wireframes and prototypes, create design systems, and implement compliant UI components with ARIA attributes, keyboard navigation, focus management, and screen reader support.

Generate UX research artifacts like personas, empathy maps, journey maps, interview scripts, usability test plans, and diary studies. Analyze qualitative data from interviews, card sorts, and observations into affinity diagrams, themes, jobs-to-be-done, insights, and prioritized opportunities. Run full research cycles or targeted syntheses.

Generate scalable React design systems from design tokens, including atomic components, WCAG accessibility guidelines, theming capabilities, and documentation templates for consistent UI development.

Automate Lucidchart diagram creation and management in Node.js/TypeScript apps via API: import shapes/lines from .lucid/JSON/CSV, link data dynamically, export PNGs, handle auth/errors/rate limits/webhooks, with CI/CD setup, Docker deployment, local dev loops, debugging bundles, security checklists, and prod optimizations.

Build production-ready Figma API integrations to extract design tokens and assets into code pipelines, handle webhooks for real-time updates, manage authentication and rate limits, troubleshoot errors, and deploy to Vercel or Cloud Run with monitoring.

Generate and integrate web design assets directly into projects: accessible Tailwind color palettes with dark mode and WCAG checks, complete favicon packages with HTML tags and manifests, custom SVG icon sets, AI images via OpenAI/Gemini from descriptions, and image processing like resize/optimize/convert.

Convert Figma designs and screenshots into production-ready React or Svelte code components with built-in accessibility using a local Node.js MCP server integrated with Claude.

Build scalable design systems by generating tokens, component specifications, documentation templates, naming conventions, icon systems, and pattern libraries. Audit for WCAG accessibility, consistency, token coverage, and theming support using dedicated skills and commands.

Generate distinctive production-grade frontend UIs for components, pages, or full apps using React, Vue, HTML, CSS, and JavaScript, featuring bold aesthetics, unique typography, custom motion, and layouts that avoid generic AI-generated styles.

Generate and edit AI images using Google Gemini Nano Banana models orchestrated by Claude. It interprets intent, selects domain expertise, constructs optimized prompts via Google's 5-component formula, and handles text-to-image, editing, batch workflows, presets, and creative sessions. Trigger with /banana or auto on image requests.

Generate production-grade frontend code for visually strong landing pages, websites, apps, and components using Anthropic and OpenAI design skills. Produce bold aesthetics with unique typography, motion, and layouts in React or Vue, or premium prototypes featuring restrained compositions, image-led hierarchy, and tasteful motion in HTML/CSS/JS.

Generate structured design case studies, rationales, presentations, and UX copy for portfolios and stakeholders; create adoption strategies for design systems; audit design tokens in CSS code and Figma files for consistency, coverage, and gaps.

Optimize UI/UX components for mobile-first experiences by analyzing existing designs, adapting to touch-friendly layouts, ensuring theme consistency, accessibility, and performance on mobile devices.

Generate original PNG and PDF visual art from textual design philosophies, producing museum-quality posters, art pieces, designs, and other static visual works on relevant creation requests.

Convert Figma designs, screenshots, or UI specs into pixel-perfect, responsive code matching your project's components, layouts, styles, interactions, and responsiveness.

Generate AI images for artwork, logos, posters, and mockups by searching a 1300+ curated design gallery for references, auto-refining prompts, batching variations or parallel concepts, and delegating to specialized agents. Switch models and setup backends like MeiGen.ai, ComfyUI, or OpenAI APIs.

Design complete UI interaction flows by generating specs with state machine diagrams, micro-animations, gesture patterns, feedback mechanisms, loading states, and error handling strategies. Apply skills for animation principles, UX patterns, and commands like /design-interaction or /map-states to model complex components like forms, media players, or authentication.

Plan and validate UI/UX designs through prototyping strategies, usability test scenarios, heuristic evaluations, A/B experiments, accessibility audits, wireframe specs, user flows, and complete test plans.

Manage shadcn/ui components in React Tailwind projects: add new ones to your codebase, search and browse library, fix bugs and debug issues, customize styles, compose complex UIs, with project-aware context, official docs, usage examples, and enforced Tailwind forms best practices.

Streamline UI/UX design operations by facilitating structured critiques with feedback rounds and action items, generating developer handoff specs including measurements assets QA checklists and notes, planning 5-day sprints with schedules and testing criteria, establishing review gates and team workflows with roles cadences and Figma Git versioning strategies via skills and slash commands.

Shape product UX direction by generating competitive analyses, design briefs, principles, experience maps, metrics definitions, north-star visions, opportunity frameworks, and stakeholder alignments. Run commands to benchmark rivals, frame problems, and build complete strategies aligning teams on vision and roadmap.

Apply 10 pre-set or custom color and font themes to slides, documents, reports, and HTML landing pages for consistent professional styling across output formats.

Develop cross-platform Rust GUI apps with Makepad 2.0. Generate app boilerplates with Cargo.toml and hot reload, script UIs using Splash DSL for state, events, layouts, and themes, implement animations, shaders, and vector graphics, migrate from v1.x, optimize performance via batching and GC, and troubleshoot rendering bugs, zero-height issues, and WASM builds.

Analyze screenshots and UI images to catalog visual elements, detect layout issues in flex, grid, or CSS, document design details like spacing and colors, flag accessibility problems, and receive targeted implementation suggestions. Extract structured text from images, screenshots, or diagrams, preserving code formatting, hierarchy, and noting low-confidence areas.

Audit CSS, SCSS, and styled-components for WCAG color contrast ratios on text and UI elements, generating pass/fail reports with stats on worst offenders, then suggest AA-compliant color alternatives including hex swatches, updated ratios, color-blind checks, CSS overrides, and before/after previews.

Implement mobile-first responsive breakpoints using CSS Grid, Flexbox, Tailwind, and relative units for components or pages. Test designs across iPhone, iPad, Android, and desktop viewports in portrait/landscape orientations, capturing screenshots, detecting layout and accessibility issues, and generating comparison grids with detailed reports.

Generate complete frontend components with TypeScript types, accessibility, responsive styling, tests, and exports in detected React, Vue, or Svelte projects. Enhance components by applying project design system styles for base elements, interactions, dark mode, responsiveness, and accessibility, with structured summaries of tokens and breakpoints.

Generate Mermaid architecture diagrams from codebase components and relationships, with labeled data flows and legends, and produce technical design documents from system requirements covering overview, components, data flow, technology choices with rationale, and risks. Diagrams save to docs directory.

Rapidly prototype ideas by generating standalone, responsive HTML mockups per screen with inline CSS, minimal JS interactivity, and design annotations, or scaffolding minimal viable projects with structure, happy-path code, basic UI, single-run commands, file lists, and production notes.

Automate creation, editing, analysis, and visual review of Office documents: build Excel spreadsheets with formulas/charts, edit Word docs and PowerPoint slides preserving layout, generate/extract from PDFs, using rendered previews for validation.

Launch a local stdio MCP server via npx to access cssstudio for inspecting live web pages, prototyping interactions, designing, editing, previewing, and generating CSS directly in Claude Code. Enables browser automation workflows without secrets or remote setup.

Automate KiCad electronics design workflow: source components and datasheets from DigiKey, Mouser, LCSC, element14; analyze schematics/PCBs for EMC risks and SPICE simulations; generate BOMs, documentation, and fabrication files; prepare JLCPCB/PCBWay orders.

Design modular architectures from functional requirements and analyze codebases for modularity imbalances using the Balanced Coupling model. Produce design documents with module specs, integration contracts, test plans, and review reports detailing coupling issues, knowledge leakage, and recommendations.

Generate McKinsey-style PowerPoint decks (.pptx) from a brief: agent plans slide arc, selects from 40 templates (executive summary, BCG matrix, KPI dashboard, roadmap, org chart), builds file via Python script, and renders PNG previews.

Optimize UI/UX components for mobile-first experiences by analyzing and improving layouts for touch-friendliness, accessibility, performance, and design theme consistency in CSS, React Native, or Flutter projects.

Guide collaborative brainstorming sessions from ideas to validated plans: clarify concepts with one-at-a-time questions, explore 2-3 approaches with trade-offs, and incrementally validate designs before implementation.

Conduct lean UX research in rapid sprints by analyzing user behaviors, generating journey maps and personas, running micro-surveys and usability tests, and deriving actionable insights from analytics to validate design decisions and inform product development.

Delegate brand guideline creation to generate style guides, component libraries, color palettes, and usage docs, ensuring visual consistency and cohesive experiences across app platforms with Figma and Storybook.

Interactively select architecture paradigms for software systems via scenario matching, compare trade-offs for team size and complexity, generate ADRs, and receive tailored implementation plans with steps, deliverables, risks, and mitigations for client-server, CQRS, event-driven, hexagonal, microservices, and more.

Optimize UI/UX components for mobile-first experiences by analyzing design themes for consistency, adapting layouts for touch-friendliness, accessibility, and performance on mobile devices. Invoke the agent to refine desktop-focused components or align new features with your design system.

Apply Apple Human Interface Guidelines for iOS, macOS, watchOS, tvOS, visionOS, iPadOS apps in SwiftUI/AppKit/UIKit, Material Design 3 for Android in Jetpack Compose/XML, and WCAG 2.2 for accessible web UIs in HTML/CSS to build and audit platform-compliant interfaces.

Delegate specialized Instagram tasks to an expert subagent for visual content strategy, including generating content calendars, competitor analyses, optimized posting schedules, hashtag strategies, Reels scripts, and community engagement plans to boost growth via algorithm tactics.

Design beautiful, functional user interfaces, components, and design systems for rapid implementation in 6-day sprints using Tailwind CSS classes, mobile-first layouts, and reusable patterns.

Generate professional reveal.js presentations from prompts, incorporating themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling. Outputs standalone HTML and CSS files instantly, without any build step, for quick slide decks and slideshows.

Generate favicons, PWA app icons, and Open Graph social images from logos, text, or emojis, with automatic resizing, text-to-image conversion, WCAG validation, and HTML meta tag output for web projects.

Generate distinctive, production-grade frontend UIs for web apps, landing pages, dashboards, and components using HTML, CSS, Tailwind, and TypeScript. Enforces design tokens for creative, polished code that avoids generic AI-generated aesthetics.

Conduct lean UX research by analyzing user behaviors, creating journey maps and personas, running micro-surveys and usability tests, and validating design decisions to generate actionable insights for product features in rapid sprints.

Generate accessible, responsive UI design systems with color palettes, tonal scales, typography scales, spacing systems, layout grids, and visual hierarchies from brand inputs or descriptions. Use commands to design full screens, create type systems, produce palettes with dark mode variants, and audit responsiveness across breakpoints.

Establish and maintain brand guidelines for apps by generating style guides, component libraries, color palettes, and usage docs to ensure visual consistency across platforms and manage assets with Figma and Storybook integration.

Transform complex ideas, data, and concepts into captivating visual narratives including infographics, presentations, illustrations, and data visualizations for app onboarding, pitches, marketing, and feature explanations.

Generate UX/UI demos, design narratives, user journeys, project timelines, and RFP responses to support B2B enterprise sales and win deals using a specialized AI agent.

Delegate to whimsy-injector agent after UI/UX changes to automatically inject joy, surprise, and playful elements like micro-interactions, animations, and fun copy into onboarding flows, error states, loading spinners, and user profiles.

Import React/Tailwind components from your project into Subframe to design pixel-perfect UIs with AI variations and visual refinements, then implement them as code with business logic synced directly into your codebase using CLI setup and MCP connections.

Plan AI/ML products with structured canvases covering user problems, models, data, metrics, and ethics; synthesize insights from interviews, NPS, reviews into weighted briefs; design A/B experiments with sample sizes, stats analysis, recommendations; generate design briefs with goals, constraints, Figma links for handoffs.

Generate structured product discovery artifacts: interview guides with screeners and synthesis frameworks, JTBD job story maps across functional/social/emotional dimensions, risk-rated assumption maps from PRDs with validation ideas, and synthesized findings from user interview transcripts including themes, pains, quotes, and next steps.

Generate UX research plans with objectives, methodologies, screeners, discussion guides, and synthesis frameworks for user studies. Critique UI designs, Figma files, and wireframes using JTBD, Gestalt principles, and heuristics for prioritized improvements. Perform WCAG 2.2 accessibility audits on web, mobile, and desktop apps, yielding checklists, pass/fail results, and remediation steps.

Generate print-ready HTML documents for PDF reports, proposals, flyers, newsletters, fact sheets, annual reports, and presentations using organization branding configs and print CSS patterns. Launch interactive playground with local server and Playwright browser for live editing, layout verification via screenshots, and direct PDF export.

Generate long-form blogs, video scripts, social posts, emails, and content strategies. Produce SEO-optimized articles, repurpose content across formats, and maintain consistent brand voice for cross-platform publishing.

Design beautiful, functional UIs, components, and design systems for rapid implementation in 6-day sprints using Tailwind CSS classes, mobile-first layouts, and reusable patterns.