Figma plugins

Audit designs and live pages for WCAG accessibility compliance, critique UI usability, generate developer handoff specs from Figma, manage design systems, synthesize user research, and write UX copy. Connects to external tools like Gmail, Asana, Slack, Intercom, Calendar, Jira, Linear, Notion, and Figma API.

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.

Extract any website's design language (colors, typography, spacing, motion) into DTCG tokens, Tailwind config, shadcn/ui themes, Figma variables, and CSS. Grade accessibility, battle two sites, remix into 6 design vocabularies, recolor via OKLCH, or package a full design system bundle.

Automatically discover brand materials across Notion, Google Drive, Confluence, Gong, Slack, and other enterprise platforms, then distill them into enforceable AI content guidelines. Generate brand-aligned sales and marketing content (emails, proposals, decks) with automatic validation for voice, tone, and terminology consistency.

Structured AI product reviews, experiment design, design handoff briefs, and multi-source signal synthesis for senior PMs working on complex or AI-powered products.

Run UX research, design critiques, and accessibility audits from within Claude — generate research plans with discussion guides, critique designs using JTBD and Gestalt principles, and audit UIs for WCAG 2.2 compliance with prioritized remediation.

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.

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.

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.

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.

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

Execute the complete website lifecycle using 102 structured skills covering brand strategy, design systems, accessibility audits, SEO, performance optimization, experimentation, content strategy, and deployment across research, build, and audit phases.

Code, review, and document Qt C++ and QML projects with AI-assisted linting, deep-analysis agents, and live Qt API lookups via an MCP server. Generates QML components from Figma, runs performance profiling, and produces unit tests and reference documentation.

Assembles a virtual design team of 26 specialist roles with 62 commands to handle the full design workflow — UX research, UI design, design systems, brand strategy, data viz, motion, email, social media, presentations, print, AI media, and accessibility audits — all from the terminal.

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.

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.

Orchestrates AI-assisted development workflows with persistent session context, a project knowledge graph, and automated quality detection. Generates code, tests, API endpoints, and database migrations; manages task documentation and SOPs; and monitors token efficiency.

Delegate brand management to generate style guides, component libraries, color palettes, and usage docs ensuring visual consistency across app platforms. Maintain brand assets and evolve identity while accelerating development workflows.

Enforce an inclusive design workflow from discovery through handoff: research, strategy, critique, accessibility audits, usability testing, and design-debt tracking, all managed by specialized agents and skills that produce accessible, production-ready UI specs and prototypes.

Generate tasteful, context-aware HTML/CSS designs, slide decks, wireframes, interactive React prototypes, UI kits, and brand systems in Claude Code. Preview via local server, tweak with floating panel, and export self-contained handoff folders with specs and assets for dev implementation.

Generate complete design systems with CSS tokens for typography, colors, spacing, and elevation; React components like buttons; Markdown documentation; and governance rules to build consistent component libraries and enforce UI standards across teams.

Orchestrate autonomous AI coding agents to fetch specs from Figma designs, GitHub issues, Linear tickets, or Notion pages; generate structured plans; iteratively implement code in React/Next.js/Vue/Svelte/Astro/HTML or Node/Python/Rust/Go projects; validate with tests/lints; commit changes; create/update PRs/tasks.

Audit design system tokens, components, and Figma files for compliance, drift, accessibility, and health; generate CI/CD pipelines, codemods for migrations, governance rules, onboarding docs, release notes, benchmarks, and interactive reports to enforce consistency across design and code.

Generates Figma UI components from design specs via MCP, enabling design-system-compliant output. Bridges Figma to code by compiling CSpecs into scene graphs and executing them through the Bridge plugin API.

Run deterministic UX audits, generate production-grade UI components and design systems, and enforce brand-fidelity and accessibility — all offline with zero LLM calls. Includes a 7-axis design synthesizer, anti-pattern linter, motion auditor, microcopy editor, and design thinking workshop facilitator.

Connect to Figma's MCP server with authentication to access design files, components, prototypes, and UI tools directly in your editor, enabling design context retrieval and code generation from Figma designs.

Enforce design system compliance in Figma by validating component usage, auto layout, token binding, and running preflight checks before AI-generated designs are built.

Decode Figma's binary Kiwi wire protocol from WebSocket frames to extract full scenegraphs, SVGs, and CSS properties, bypassing REST API rate limits. Inspect and explore Figma designs deeply to implement code from them without quota restrictions.

Guides the entire development lifecycle from ideation to shipped code: turns rough ideas into validated specs, implements with TDD and quality gates, audits code health, reviews architecture and security, tests UI flows, and prepares for launch.

Compare Figma designs pixel-by-pixel against live web pages to detect visual regressions, generate diff overlays and stats, and use AI to classify differences as bugs, drifts, or acceptable before merge or deployment.

Generate App Store and Google Play promotional screenshots in Pencil (.pen) format using a 5-agent team. Input app details, target users, and tone; agents plan compositions up to 10 shots, design iPhone-sized visuals with UI mockups/captions/overlays, write bilingual headlines/subtexts, validate specs like safe areas/contrast ratios, and review for compliance with scores and fixes.

Manage design operations through dashboards that aggregate data from GitHub, Notion, Figma, and Vercel; generate accessibility audits, brand-consistent design variations, competitor analysis reports, and content briefs; and configure team tools via MCP/API integrations.

Transform Figma into a design-token and component-documentation engine: export tokens to DTCG, CSS, Tailwind, or TypeScript; lint designs for WCAG 2.2 accessibility and design-system quality; generate component markdown docs, changelogs, and code-drift reports; manage variables, libraries, and version history from the CLI.

Generate 5 custom UI design variations directly in Pencil prototypes via parallel agent teams analyzing your app codebase, domain, personas, competitors, and style guidelines. Teams of designers, reviewers, copywriters, and testers build, evaluate, and refine screens simultaneously for rapid comparison, A/B testing, and design exploration.

Orchestrate a full software sprint cycle with 15 AI specialist agents—from product strategy and architecture through build, review, QA, security audit, and shipping—with human-in-the-loop checkpoints and session persistence for pause-and-resume.

Design production-ready UI with OpenPencil via op CLI commands, batch design DSL scripts, or MCP tools. Structure designs using PenNode JSON schema with semantic roles, typography scales, color systems, spacing guidelines, and reusable component patterns for scalable frontend interfaces.

Automate product management workflows by generating PRDs, OKRs, outcome-focused roadmaps, user stories, sprint plans, retrospectives, stakeholder maps, prioritization analyses, pre-mortems, release notes, meeting summaries, test scenarios, and realistic fake datasets directly from ideas, tickets, specs, or designs in your IDE.

Manage compound engineering projects with structured beads for planning, research, implementation, and shipping, orchestrated by multi-agent workflows with persistent knowledge memory that automatically captures and recalls lessons across sessions.

Implement pixel-perfect frontend UIs from Figma designs, screenshots, or prompts using design pattern memory for React/Vue/Angular projects. Generate prototypes, brand icons, component architectures, and perform fidelity reviews with Playwright tests while documenting patterns and sessions.

Connect Claude Code to external services like Linear, GitHub, Notion, Slack, Vercel, Figma, Amplitude, and Nx via MCP servers to query issues, send messages, manage deployments, access designs, and analyze analytics. Automate daily standups from GitHub/Linear data, refine tasks into actionable plans, orchestrate CI/CD pipelines with Docker, Kubernetes, Terraform across AWS/GCP/Azure, and setup authentication workflows.

Orchestrate full developer workflows: implement tasks via TDD in isolated git worktrees, safely migrate Android/Kotlin code (Views→Compose, RxJava→coroutines, Java→Kotlin, to KMP), generate/execute test plans and exploratory QA on web/mobile apps, create/manage GitHub/GitLab PRs through CI/CD monitoring, reviews, and fixes to merge-ready state.

Break large projects into spec-driven phases and 2-4 hour sessions of 12-25 tasks for AI-assisted development. Plan sessions, implement/validate tasks, audit tooling/CI/infra/Docker, manage git/docs/security, and carry forward insights across phases.

Automate full greenfield project lifecycle zero-config: from AI-assisted product discovery, brand naming, competitive analysis, architecture vision, use cases, visual/interactive prototyping, expert debates, stress testing (pre-mortems, interviews, PR/FAQ), to scaffolding buildable React/Svelte/Tauri apps with dev environments, visual regression testing, and issue tracking integration.

Run Drupal/WordPress project workflows from Claude: accessibility audits, code quality checks, Figma-to-CMS code generation, PR creation, performance analysis, security scanning, QA test plans, and automated client communications with PM tool integration.

Sync design tokens between your codebase and Figma variables. Detect drifts with reports, mandate approvals before writes, apply safe deltas only, and persist audit trails for reliable bidirectional updates.

Discover, create, and enforce brand voice guidelines across enterprise platforms. Search Confluence, Google Drive, Slack, and sales call tools for brand materials, synthesize structured LLM-ready guidelines, then validate AI-generated sales and marketing content against those voice and tone rules.

Obtain creative direction for websites, apps, products, brands, and dashboards—defining purpose, story, emotional experience, and bespoke AI-generated visuals—then implement pixel-perfect UIs from Figma designs, mockups, or specs by extracting exact dimensions, colors, typography, shadows, and assets for zero-deviation code reproduction.

Clone live webpages into Figma files by capturing layout, colors, fonts, and text positions via Chrome DevTools, then run Figma plugin API scripts to create and manipulate shapes, properties, and data in open design files.

Audit designs for WCAG 2.2 AA accessibility, enforce brand-driven visual design, generate dev-ready handoff specs with component inventory and design tokens, and plan token-efficient batch iterations for AI design tools.

Select and compare AI agent protocols (MCP, A2A, ACP) while accessing cross-cutting guidance across the full software lifecycle—architecture, design systems, infrastructure-as-code strategy, security, testing, and compliance—to make informed technology and architecture decisions.

Streamline product management execution in agile workflows: generate PRDs, OKRs, outcome-driven roadmaps, user stories, job stories, sprint plans, retrospectives, stakeholder maps, prioritization analyses, pre-mortems, release notes, test scenarios, and dummy datasets directly from ideas, transcripts, or specs.

Automate Figma-to-Jira design handoff: analyze frames against epics/Confluence/Google Docs for scope categorization and behavior questions, post Q&A as pinned comments, generate/refresh shell stories, and write full Gherkin user stories with AC/NFRs.

Build, debug, and verify modern WordPress sites using the Roots Sage + Acorn stack in Lando — scaffold ACF blocks and Livewire components, manage Eloquent models and migrations, implement Tailwind design systems from Figma specs, run visual regression tests with Playwright, and automate deployments with migration safety checks.

Integrates with Figma, Sketch, MasterGo, Pixso, Modao, and MockPlus to convert designs to frontend code, then provides skills for code review, accessibility auditing, testing, performance optimization, documentation sync, and automated reporting in Markdown.

Provides a complete development workflow for Claude Code, from shaping unstructured ideas into PRDs and validating product concepts, through planning and architecture design, to phased implementation with browser-based QA verification and automated feedback loop improvements.

Transforms raw project inputs—meeting transcripts, stakeholder messages, Jira data, or feature requests—into actionable PM artefacts: charters, PRDs, roadmaps, sprint plans, decision logs, budget reports, and stakeholder updates. Orchestrates a multi-skill pipeline that synthesizes discovery findings, identifies risks, runs release readiness assessments, and produces audience-specific communications, all within an isolated project workspace.

Guides frontend design and development through a structured AI-driven workflow: from requirement analysis and design research to visual asset generation, code implementation prompts, and quality reviews. Includes visual rules audits, design system documentation, i18n guidance, incremental change routing, and motion animation prompts.

Generate structured design case studies, rationales, stakeholder presentations, UX copy, adoption strategies, and token audits across Figma and CSS to document decisions, communicate impact, and ensure consistency.

Enforce rule-proof spec-driven development by creating specs that define constraints, running tests to generate proofs, tracking coverage via sync_status, and detecting drift when code diverges from specs.

Enforce a structured development lifecycle with automated quality gates, documentation generation, PR review, and testing workflows that integrate with GitHub, Jira, Figma, and Notion.

Streamline design operations with structured critique frameworks, developer handoff specs, design sprint planning, QA checklists, and team workflow setup. Automate generation of handoff packages, sprint plans, and team rituals to improve collaboration between designers and developers.

Build scalable design systems by generating design tokens, UI component specifications, documentation templates, icon systems, naming conventions, pattern libraries, and token-based theming supporting light/dark modes. Audit code for WCAG 2.2 accessibility compliance with remediation steps and evaluate full systems for consistency, completeness, token coverage, and issues.

Automate lean project management in Claude Code: plan/decompose Linear/Jira tasks, implement with React/NestJS/frontend/backend agents, sync progress across tools, manage git branches/commits/PRs, run verifications/tests/reviews, track states via 19 commands/agents/hooks.

Multi-agent orchestration system that structures AI development with guardrails, adversarial code reviews, budget controls, and automated workflows for requirements analysis, implementation, testing, and deployment across frontend, backend, and DevOps domains.

Audit and improve visual design of websites, UIs, and documents against 11 research-backed principles including layout, typography, color, hierarchy, whitespace, and accessibility — with WCAG 2.2 AA checks, VisAWI scoring, and actionable fix suggestions.

Automate full DevOps workflows for React, Next.js, Spring Boot, and Flutter projects: analyze codebases and impacts, design architectures/APIs/UI, implement step-by-step, generate tests/QA checklists, refactor smells, perform structured reviews, create docs/reports/PPTs, package for deployment, manage Git issues/worktrees, and troubleshoot bugs.

Convert Figma designs into pixel-perfect frontend pages or components via MCP, with Playwright QA verifying exact visual, copy, and structural fidelity.

Generate pixel-perfect Flutter screens or widgets from Figma design URLs by extracting exact values via Figma MCP for 1:1 code translation into your existing Flutter project.

Run agentic workflows to transform abstract design problems into evidence-based UX briefs: initialize workspace, ingest context from Slack/emails/docs, dispatch parallel agents for research, competitive UX mapping, audits with accessibility checks, ideation synthesis, outputting DESIGN-BRIEF.md ready for Figma.

Manage Azure DevOps projects end-to-end: requirements, planning, execution, reviews, bug fixes, and PR management using composed agent skills and MCP tools.

Converts Figma, Sketch, and Penpot designs into production-ready code for React, SwiftUI, Flutter, and Tailwind, with design token extraction, WCAG accessibility audits, asset optimization, and drift detection between design files and codebase.

Connect Claude to a local Figma Desktop instance to inspect design files, prototypes, and collaboration data directly from the dev environment.