Figma plugins

Centralizes marketing operations: creates brand-consistent content, plans campaigns across channels, analyzes SEO and competitor positioning, and reports on performance metrics by connecting to analytics, design, CRM, and notification platforms.

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.

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

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.

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.

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.

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.

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

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.

Maintain persistent project context across Claude Code sessions with a knowledge graph, task tracking, and automated code generation. Manage project knowledge, preserve conversation state, orchestrate multi-step tasks, generate APIs/components/tests, and track efficiency with token optimization.

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.

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 a full development lifecycle from vision and feature ideation through structured implementation, automated code quality audits, expert review, TDD cycles, safe refactoring, and production readiness checks — all within a single CLI-driven workflow.

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.

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.

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.

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.

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 brand materials across Notion, Confluence, Google Drive, Box, SharePoint, Slack, Gong, and Granola, then generate LLM-ready brand guidelines and validate AI-generated content like sales emails and marketing copy for voice compliance.

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.

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.

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.

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

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.

Clone live webpages into Figma as editable design frames, preserving layout, colors, and fonts via Chrome DevTools, and run Figma plugin API scripts to create and modify shapes, slots, and properties in open design files.

Converts raw project inputs—client messages, transcripts, Jira data, Figma designs—into structured PM artefacts: charters, PRDs, sprint plans, roadmaps, risk assessments, and stakeholder updates. Chains multiple PM skills automatically to produce decision-ready documents across the full delivery lifecycle.

Integrates frontend design-to-code workflow with MCP connections for Figma, Sketch, MasterGo, Pixso, and Modao, plus 45 skills covering architecture, accessibility, testing, performance, security, migration, state management, and code quality—all reports auto-saved as Markdown.

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.

Code Forge orchestrates multi-agent, multi-model development workflows for Claude Code, combining AI agents (OpenAI Codex, Agent Teams) with automated testing, Figma-to-code conversion, Playwright E2E, startup validation, and voice input — all configured from a single profile.

Enforces a structured development lifecycle from planning to release: ingests tickets from Jira/Linear/Notion/Figma, grounds them in codebase context, produces TDD-first plans, runs pre-commit quality gates (tests, lint, SOLID checks), verifies Figma pixel-perfect implementation via browser automation, performs structured PR reviews with full context, and generates changelogs with semver bumps.

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.

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.

Aggregate tasks, updates, and notifications from email, meetings, Slack, issue trackers (Jira, Linear, Asana, ClickUp), CRMs, and design tools into a kanban board that auto-updates, so you never miss a task and can track progress across all your tools.

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.

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.

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.

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

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.

Automates learning and knowledge retention across Claude Code sessions with a defense gate and quizzes, and connects to a local Figma instance for design file access and collaboration.

Convert design specifications from Figma, Sketch, or Penpot into production-ready UI code for React, SwiftUI, Flutter, and Tailwind, while managing design tokens, optimizing assets, auditing accessibility, and detecting drift between designs and code.

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