figma

Use this skill when creating data visualizations, selecting the right chart type, or generating chart code. Trigger phrases: 'build a chart', 'visualize this data', 'create a graph', 'plot these numbers', 'which chart should I use for'. Not for building interactive dashboards, designing UI components, or creating infographics with design tools like Figma.

datavisualizationchartsgraphs

NickCrew/Claude-Cortex+18 more

11d ago

130

@AnimaApp

MCP

Anima MCP Server

Connect AI coding agents to Anima Playground, Figma, and your design system.

mcpgithubai

AnimaApp/mcp-server-guide

19d ago

@pulsemcp

implement-figma-design

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

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

19d ago

@artemnovichkov

design-compare

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

19d 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

18d 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

18d ago

640

@let-sunny

canicode

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

let-sunny/canicode+4 more

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