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.

Audits and improves production frontend interfaces with real working code changes—covering UX review, visual hierarchy, accessibility, responsive behavior, theming, typography, layout, color, motion, micro-interactions, and design systems.

Make intentional visual design decisions for UI builds and redesigns — choose aesthetic direction, typography, and layout that avoid templated defaults.

Automatically generate C4 architecture diagrams (Context, Container, Component, Code) from your codebase via bottom-up analysis, producing Mermaid diagrams and documentation for system design, API interfaces, and deployment units.

Enforce premium, anti-generic frontend design patterns across your projects — brutalist, minimalist, editorial, and conversion-aware layouts with strict typography, color, spacing, and motion standards. Includes design audit/upgrade, image-to-code workflows, and architecture conventions for React/Next.js + Tailwind.

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.

Generate algorithmic art manifestos as p5.js sketches, build Godot 4 games with GDScript patterns, develop Unity games with optimized C# and URP/HDRP pipelines, and apply 2D/3D game development and design principles for indie game prototyping.

Design and build immersive web experiences with mobile-first, scroll-driven animations, 3D elements, and production-grade interfaces, guided by aesthetic principles and UX/UI best practices.

Drive creative direction with algorithmic design manifestos, generative p5.js art, brand voice optimization, and portfolio interfaces that convert visitors to clients.

Create videos programmatically by writing HTML, CSS, and JavaScript with HyperFrames. Generate talking-head captions, faceless explainers, motion graphics, slideshows, product launches, and website captures. Includes CLI for scaffolding, preview, and cloud rendering on AWS Lambda.

Frontend development bundle that optimizes forms for higher conversion, designs distinctive interfaces, enforces Next.js App Router best practices, applies 45 React performance rules, provides modern React patterns, diagnoses SEO issues, and configures Tailwind CSS v4 design tokens.

Enforce Apple Human Interface Guidelines across iOS, iPadOS, macOS, visionOS, watchOS, and tvOS apps — covering layout, navigation, system experiences, input handling, interaction patterns, and platform-specific UI design for native Apple platforms.

Implement Domain-Driven Design with tactical patterns (aggregates, entities, value objects), CQRS, event sourcing, and saga orchestration. Design bounded contexts, map integration contracts, and build event stores with read models for scalable, event-driven systems.

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.

Access design system tokens, components, and theme data from a local Open Design daemon via MCP, allowing coding agents to reference design values directly in generated code.

Audit designs for WCAG compliance, critique UI usability, generate developer handoff specs, manage design systems, synthesize user research, write UX copy, and connect to Figma, Notion, Slack, Asana, Jira, Linear, and Intercom to centralize design workflows.

Design and audit production-grade UIs with a craft-first workflow: define design tokens, spacing, depth, and patterns; extract a design system from existing code; audit against that system; detect and strip AI-generated visual slop; and run a strict multi-pass review for approval.

Bridge Figma designs with code by creating and maintaining design system components, variables, and styles directly from Claude, then translating them into TypeScript or SwiftUI code snippets. Also enables creating new Figma files (designs, FigJam boards, slides) and generating Mermaid diagrams from design context.

Generate, validate, and review CAD models, robot descriptions (URDF/SDF/SRDF), and fabrication files (STEP, DXF, G-code) from natural language or images, then slice for 3D printing and send print jobs to Bambu Lab printers or simulate in Gazebo.

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.

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.

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.

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.

Extract a complete design language from any website — DTCG tokens, Tailwind/shadcn/Figma vars, motion, voice — then grade consistency, generate brand guidelines, remix in six styles, pair two sites, recolor via OKLCH, rebuild and pixel-diff for fidelity scoring, and bundle a downloadable design system

Automatically discovers brand materials across Notion, Confluence, Google Drive, Box, SharePoint, Figma, Gong, Granola, and Slack, distills them into enforceable AI guardrails, and applies brand voice to sales and marketing content like emails, proposals, and pitch decks with compliance validation.

Generate editorial-quality technical and product diagrams (architecture, flowchart, sequence, etc.) as standalone HTML files with inline SVG, skinnable to match your brand.

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 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#.

Structures user research from assumption mapping to interview synthesis, helping product teams discover and validate customer needs through guided frameworks for interviews, journey maps, and jobs-to-be-done analysis.

Design, build, and test Vizro dashboards from concept to deployment using a structured 2-phase workflow that covers requirements, layout design, visualization selection, Python implementation, and Playwright-based testing.

Run an AI product manager workflow: design ethical AI reviews, structure product canvases for ML features, transform PRDs into design briefs for Figma, set up statistically rigorous A/B experiments, and synthesize multi-source user signals into actionable insight briefs.

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 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.

Run structured UX research plans, design critiques using JTBD and Gestalt principles, WCAG 2.2 accessibility audits, and design system health checks directly on UI projects.

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.

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 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.

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.

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 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.

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.

Apply clean code disciplines, refactoring transformations, design principles (deep modules, information hiding), DDD strategic modeling, Pragmatic Programmer meta-principles, and legacy code change algorithms to improve code readability, structure, and safety when modifying untested codebases.

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 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 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.

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.

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.

Build Android, Flutter, and web UIs following Material Design 3 guidelines with ready-to-use components, tokens, adaptive layouts, theming, and accessibility support.

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.

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 high-fidelity HTML design artifacts like prototypes, landing pages, UI mockups, and animations, with Playwright-powered browser rendering and screenshot verification for pixel-perfect output.

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.

Equips Claude Code with 61 marketing and GTM skills for founders: research competitors, generate launch assets, audit pricing/pages, draft outreach sequences, analyze app store reviews, and automate content creation across blogs, social, email, and video.

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.

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 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.

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.

Generate evidence-based lesson plans, curriculum maps, assessments, and scaffolds for any subject or age group — from explicit instruction sequences to inquiry projects — using pedagogical frameworks like UDL, backwards design, and cognitive load theory

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.

Generate AI images from prompts using MeiGen agents, search a curated gallery of 1300+ AI-generated images for visual inspiration, and orchestrate batch prompt creation for parallel image variations

Build, review, and debug iOS apps with Apple SDK expertise spanning SwiftUI, UIKit, SwiftData, animations, performance, testing, and iOS 26+ Liquid Glass design — all from within Claude Code or Codex.

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.

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.

Accelerate website creation and optimization with 103 structured skills spanning research, brand strategy, design, content, SEO, analytics, performance, security, and deployment—each providing expert-level prompts for tasks like auditing accessibility, fixing Core Web Vitals, conducting competitive analysis, running experiments, and managing incident response.

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

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.

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.

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.

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.

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.

Build and customize Shiny dashboards with modern Bootstrap 5 theming, including brand management, page layouts, cards, value boxes, navigation, sidebars, and dark mode support

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.

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.

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.

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.

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.

Run an interactive design workflow that interviews you about requirements, generates five UI variations matching your project's style, collects feedback, refines the best elements, and produces an implementation plan with cleanup of temporary files.

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.

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.

Generate AntV G6 v5 graph visualizations—network graphs, tree diagrams, flowcharts, and mind maps—with correct layout, interaction, and plugin configuration, while avoiding v4 API pitfalls.

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 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.

Assess and produce Tufte-principled data graphics: score existing charts against nine criteria, compute lie factor, detect chartjunk, and generate minimal-ink SVG/HTML charts with proper axes and direct labels.

Generate SEO-optimized long-form blogs, video scripts, social posts, and emails across platforms. Build content strategies, repurpose materials into new formats, and maintain consistent brand voice throughout.

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.

Assembles a virtual design team inside the terminal — UI, UX, brand, motion, social, email, data viz, print, and AI media — to produce production-quality designs across web, mobile, social, email, presentations, and print. Orchestrates multi-step design pipelines, audits accessibility and visual quality, generates code and Figma assets, and persists project memory for cross-session consistency.

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.

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.

Reference and apply building codes, accessibility standards, sustainability frameworks, and design guidelines across 10 countries. Generate architectural programs, calculate structural loads, daylight factors, and egress compliance via Python CLI tools.

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.

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.

Delegate Instagram growth and visual content strategy to an AI expert agent: create content calendars, perform competitor analysis, optimize posting schedules and hashtags, script Reels and Stories, and build community engagement plans.

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.

Generate SEO-optimized long-form blogs, video scripts, social posts, emails, and content strategies while maintaining consistent brand voice across formats. Build repurposing systems for multi-platform content workflows.

Automatically inject playful micro-interactions, delightful copy, and shareable moments into UI/UX after design changes, new features, or error states — turning standard interfaces into memorable experiences.

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.