claude

figma

Figma design-to-code suite built on the OFFICIAL Figma MCP server (https://mcp.figma.com/mcp). Vendors Figma's own eight Agent Skills from openai/skills and wires each one to a purpose-built subagent: figma-context-extractor (absorbs the large get_design_context / get_variable_defs / get_screenshot payloads and writes an exact figma-spec.md), figma-asset-fetcher (downloads real icons and images from the MCP asset endpoint — never generates SVG or substitutes an icon pack), figma-design-system-mapper (resolves Figma variables and components against the project's real tokens and component library), and figma-visual-verifier (renders the built screen in Chrome, diffs computed styles against the spec, and fails the task on any drift). The always-on figma-fidelity rule forbids invented assets, rounded spacing and guessed colours, and figma-verify-parity gates completion on a PASS verdict. Replaces the legacy REST-based f-* flow, which had no rendered reference, no real asset export, and no verification loop.

0 on GitHubby phantien133v1.0.0MIT AND Figma-Developer-Terms (see skills/*/LICENSE.txt)updated 2 months agoworkflow
/

Plugin figma from marketplace dotclaude in phantien133/dotclaude. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (9)

  • figma-code-connect-components

    Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code impl

  • figma-create-design-system-rules

    Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma

  • figma-create-new-file

    Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteb

  • figma-generate-design

    Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in

  • figma-generate-library

    Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT

  • figma-implement-design

    Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma ca

  • figma-use

    **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requ

  • figma-verify-parity

    Verify that an implemented screen matches its Figma design 1:1 by rendering it in a real browser and diffing computed styles and assets against the Figma spec. Use after implementing UI from Figma, before opening a PR, or whenever someone says the build "looks a bit off" from the design.

  • figma

    Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

Subagents (4)

  • figma-asset-fetcher

    Downloads every icon, image, vector and illustration referenced by a Figma spec from the Figma MCP asset endpoint into the project, and writes an asset manifest. Use before or during any Figma-driven UI implementation. Never generates or approximates an asset.

  • figma-context-extractor

    Pulls design context, metadata, variables and screenshots from the official Figma MCP server and writes a compact, exact design spec to disk. Use whenever a task needs Figma data — the raw MCP payloads stay in this agent's context, the caller only gets a file path and a short summary.

  • figma-design-system-mapper

    Maps Figma variables, text styles and components onto the project's existing design tokens and component library, and reports which Figma values have no equivalent. Use before implementing a Figma design so the implementer reuses real components instead of rebuilding them with hardcoded values.

  • figma-visual-verifier

    Renders the implemented UI in a real browser, screenshots it, and compares it against the Figma reference screenshot to produce a concrete defect list (spacing, colour, font size, border, radius, background, icon, asset). Use after any Figma-driven UI implementation, before calling it done.

View source on GitHub

More from phantien133/dotclaude

All 31 plugins →

Full-stack NestJS + Next.js development workflow — TDD, Figma design integration, browser verification, and doc governance. Combines the full w-task workflow suite (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the f-* Figma skill suite and Chrome DevTools MCP for localhost UI verification. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. DEPRECATED as of v0.4.0 — superseded by `nextjs-combo`, which is the maintained successor (official Figma MCP suite, Figma subagents, visual parity gate, infra security review). v0.4.0 only extends the `figma` preset so existing installs keep working with w-task's engine-aware Phase 3; no further features will land here. v0.5.0 is likewise a compatibility bump only — it installs the two skills workflow v3 added (`w-codegraph`, `w-acceptance-verify`) so existing installs keep working with the updated w-task. New work belongs in `nextjs-combo`.

48 skills · 8 commands · 11 agents

0

Full-stack NestJS + Next.js development workflow. Combines the w-task state machine (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the official Figma design-to-code suite: figma-context-extractor absorbs the MCP payloads into an exact figma-spec.md, figma-asset-fetcher downloads real icons and images instead of generating them, figma-design-system-mapper resolves Figma values against the project's own tokens and components, and a Phase 3.4 visual parity gate blocks the task until computed styles match the design. Includes Chrome DevTools MCP for localhost verification, the cloud-infrastructure security review checklist, and the terraform MCP server for IaC. Supersedes the deprecated `nestjs-nextjs` preset. v1.1.0 workflow v3: a CodeGraph fast path (`w-codegraph`) lets Phases 0b/2/4 query a code knowledge graph instead of grepping the tree; Phase 4c splits its non-run outcomes and waits out a busy browser MCP before asking the operator rather than self-recording a skip; new Phase 5b (`w-acceptance-verify`) traces every ticket requirement to evidence and compares the UI against the Figma export, fixing findings in at most three committed and re-documented iterations; and Phase 6.3 commits and pushes the final task state into the PR so a finished run never leaves a dirty tree. Requires workflow.yaml v3 — `/w-setup` migrates.

48 skills · 8 commands · 11 agents

0

Full-stack NestJS + Next.js development workflow — TDD, Figma design integration, browser verification, and doc governance. Combines the full w-task workflow suite (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the f-* Figma skill suite and Chrome DevTools MCP for localhost UI verification. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. DEPRECATED as of v0.4.0 — superseded by `nextjs-combo`, which is the maintained successor (official Figma MCP suite, Figma subagents, visual parity gate, infra security review). v0.4.0 only extends the `figma` preset so existing installs keep working with w-task's engine-aware Phase 3; no further features will land here.

46 skills · 8 commands · 11 agents

0

Full-stack NestJS + Next.js development workflow. Combines the w-task state machine (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the official Figma design-to-code suite: figma-context-extractor absorbs the MCP payloads into an exact figma-spec.md, figma-asset-fetcher downloads real icons and images instead of generating them, figma-design-system-mapper resolves Figma values against the project's own tokens and components, and a Phase 3.4 visual parity gate blocks the task until computed styles match the design. Includes Chrome DevTools MCP for localhost verification, the cloud-infrastructure security review checklist, and the terraform MCP server for IaC. Supersedes the deprecated `nestjs-nextjs` preset.

46 skills · 8 commands · 11 agents

0

Extends developer with the w-task workflow skill (v2 with browser verify) — adds Phase 4c browser-based localhost verification between TDD green and commit. Claude starts the local dev server, uses Chrome DevTools MCP (evaluate_script + screenshots) to verify UI changes at localhost only, then gates on developer review before committing. Requires chrome-devtools-mcp and project.dev_server_command in workflow.yaml. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. v0.4.0 adds the f-setup command (required by f-extract/f-implement — they read .claude/figma.yaml); previously missing so /f-extract could not be configured. v0.5.0 extends the `figma` preset — official Figma MCP suite, four Figma subagents and the always-on figma-fidelity rule — and picks up w-task's engine-aware Phase 3 with its new 3.4 visual parity gate. The f-* skills stay installed as the REST-server fallback. v0.6.0 workflow v3: adds the CodeGraph fast path (`w-codegraph`) for Phases 0b/2/4, splits Phase 4c's non-run outcomes so a browser MCP held by another session waits and then asks the operator instead of being marked skipped, adds Phase 5b acceptance verification (`w-acceptance-verify`) with a bounded fix-commit-redocument loop, and makes Phase 6.3 commit and push the final state into the PR. Requires workflow.yaml v3 — `/w-setup` migrates.

35 skills · 8 commands · 10 agents

0

Full-stack NestJS + Next.js development workflow — TDD, Figma design integration, browser verification, and doc governance. Combines the full w-task workflow suite (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the f-* Figma skill suite and Chrome DevTools MCP for localhost UI verification.

37 skills · 8 commands · 7 agents

0

Similar plugins

superpowers

claudecodex

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

15 skills · hooks

obra/superpowers 316,836

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

diagram-design

claudecodex

Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.

1 skill · 7 commands

cathrynlavery/diagram-design 66,757

daisyUI Blueprint MCP server - (Needs paid license)

saadeghi/daisyui 42,821

Backend API design, GraphQL architecture, workflow orchestration with Temporal, and test-driven backend development

9 skills · 1 command · 8 agents

wshobson/agents 42,461

Zero-dependency HTML presentation generator with safe presets, bold template-library styles, PPT conversion, and anti-AI-slop design philosophy.

1 skill

zarazhangrui/frontend-slides 32,274

Maintain figma?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins31 plugins