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.

Design and iterate production-grade frontend interfaces through live browser iteration, UX audits, visual refinement, and design system work.

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.

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.

Enforce award-winning UI/UX design taste in frontend projects, generating premium brand images, brutalist web interfaces, editorial layouts, and mobile app concepts while upgrading existing designs with strict typography, color, and spacing rules.

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

Write HTML and render it as video with animated compositions, captions, voiceovers, audio-reactive visuals, and website-to-video capture, all driven by a CLI dev loop and deployable to 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.

Generate competitive analysis briefs, brainstorm product ideas, plan roadmaps, write feature specs and PRDs, synthesize user research, plan sprints, review product metrics, and send stakeholder updates — all connected to tools like Linear, Jira, Asana, Notion, Slack, Figma, Amplitude, Pendo, and Intercom.

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 from Figma, manage design system tokens, synthesize user research, and write UX copy — all within a design-to-development workflow.

Audit and maintain a live design system across dashboards and tool UIs — extract tokens, check for spacing/color/depth violations, and regenerate patterns from existing code without writing CSS by hand.

Bridge Figma design files with Claude Code to create and update design system components, generate Figma files, translate designs to SwiftUI code, and build FigJam boards — all from natural language commands.

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.

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.

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.

Leverage a curated library of product management skills and commands to guide discovery, strategy, prioritization, and delivery—including customer journey mapping, PRD creation, roadmap planning, AI maturity assessment, and leadership coaching—all with structured frameworks and adaptive workflows.

Extract any website's complete design language — colors, typography, spacing, shadows, motion, and voice — and output DTCG tokens, Tailwind/shadcn/Figma variables, CSS, and a visual preview. Grade consistency, battle two sites, remix in six design vocabularies, recolor via OKLCH, generate brand guidelines, and rebuild pages for pixel-diff fidelity checks.

Generate and manipulate CAD models, robot descriptions, and fabrication files from natural language and Python code. Create parametric STEP/STL/3MF parts, slice meshes into printer-profiled G-code, validate URDF/SDF/SRDF robot descriptions, review DXF/STEP for SendCutSend orders, and search off-the-shelf CAD parts. Automate 3D printing workflows including Bambu Lab job submission.

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

Structure product discovery workflows by extracting hidden assumptions from PRDs, building customer journey maps, creating user interview guides, mapping Jobs-to-be-Done with opportunity scoring, and synthesizing interview transcripts into actionable research findings.

Synthesise multi-source user signals into weighted insight briefs with confidence ratings, design and evaluate A/B experiments with statistical rigor, structure AI/ML product decisions on a canvas, conduct ethical reviews of AI features with risk scoring, and transform feature briefs into ready-to-use design handoff docs for designers

Run structured UX audits and design reviews: generate WCAG 2.2 accessibility audits, critique UIs using JTBD and Gestalt frameworks, audit design system health, and produce research plans with discussion guides.

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.

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.

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.

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

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.

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

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.

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.

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.

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

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

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.

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.

Search a curated gallery of 1300+ AI-generated images for visual inspiration, then generate new images using MeiGen agents or OpenAI-compatible APIs with automatic prompt enhancement and batch variation support

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.

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.

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.

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.

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.

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.

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.

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 interactive UI design sessions: interview requirements, generate five distinct variations, collect feedback, iterate to a refined design, and produce implementation plans.

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.

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

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 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 product management artifacts—OKRs, PRDs, user stories, acceptance criteria, journey maps, prioritization frameworks, competitive analyses—across the full product lifecycle via 66 skill prompts and 5 sub-agents, linked into automated chains of discovery, definition, build, and iteration workflows for any AI coding agent.

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.

Guides structured software engineering via classic texts: research vague requests, build phased implementation plans with adaptive gates, then execute through build-review-commit cycles with agent dispatch. Covers design exploration, code auditing, refactoring, debugging, and test-first legacy modification.

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.

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

Assembles a virtual design team of 26 specialist roles (UI, UX, brand, motion, social, email, data viz, print, AI media) inside your terminal, enabling you to design, critique, audit, and generate production-ready assets across web, mobile, social, email, presentations, and print — all from Claude Code or compatible CLI tools.

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.

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.