figma

Implement a UI component from a Figma design by iterating with visual diff feedback. Use when the user provides a Figma design reference and asks you to build or match it in code.

pulsemcp/mcp-servers+1 more

5mo ago

620

@dannykeane

MCP

figmanage

Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup.

Flowbite Mcp

MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS

mcpgithubai

themesberg/flowbite-mcp

5mo ago

@artemnovichkov

Compare Figma designs against implementation screenshots, identifying layout, typography, color, and sizing discrepancies. Generates a structured visual review table and an interactive HTML comparison page with swipe and side-by-side modes. Use when the user asks to compare design with preview, compare Figma with screenshot, check design implementation, or provides a Figma URL alongside a screenshot.

artemnovichkov/skills+1 more

Io.Github.A1245582339/Figma Designer

Give AI agents full read & write access to Figma — 50+ tools for design automation

mcpgithubai

a1245582339/figma-designer

5mo ago

@noemuch

design-workflow

Spec-first workflow for designers who use Claude Code to design in Figma. Covers components and full interfaces/screens. Use when a designer wants to: (1) write or review a component or screen spec, (2) generate a Figma design via MCP, (3) review and iterate on a design, (4) close or abandon work. Triggers: "spec", "design", "screen", "review", "done", "drop", "learn", "sync", "status", "setup", "workflow", "what's next", "new component", "new screen", or any design request.

noemuch/bridge+5 more

5mo ago

500

@duckduckgo

implement-design

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

duckduckgo/content-scope-scripts

5mo ago

640

@let-sunny

canicode

Analyze Figma designs for development-friendliness and AI-friendliness scores

let-sunny/canicode+4 more

5mo ago

@rogie

figui3

Guides development and maintenance of the FigUI3 web components library for Figma-style plugin UIs. Applies when adding or modifying `fig-*` custom elements, updating docs/demo pages, adjusting theme tokens, improving accessibility, or debugging component behavior in `fig.js`, `components.css`, `index.html`, and `README.md`.

figma-design-to-code

Implement or update project-consistent UI code from a Figma selection or nodeId using TemPad Dev MCP. Use when the user wants visible Figma UI recreated, ported, or integrated into the target project's framework, styling system, tokens, and existing components when available. Do not use for design critique, product invention, generic code review, or for guessing hidden states, responsiveness, or behavior not shown in design or project evidence.

chameleon-controls-library

Builds UIs with Chameleon web components (ch-*). Use when the user mentions Chameleon, ch- components, or needs enterprise UI patterns like grids, trees, chat, sidebars, accordions, combos, tabs, dialogs, or forms. Also use for: implementing a UI from Figma or images, vibe coding a UI, migrating an existing UI to Chameleon, or auditing Chameleon usage in an application.

lennix1337/Genexus18MCP+5 more