Skill

figma-reader

Reads Figma designs via MCP server, auto-detecting availability and prompting setup if needed. Outputs formatted blueprint from links or UI images in context.

Figma

design

npx claudepluginhub delexw/claude-code-misc

Configuration

Model: sonnet

Tool Access

This skill is limited to using the following tools:

ReadBashWriteEditmcp__figma__*

Preview

Read Figma design context via the Figma MCP server.

Supporting Assets

references/output-format.mdreferences/rules.md

SKILL.md

Similar Skills

figma-designer

Analyzes Figma designs via MCP server to generate PRDs with design tokens, typography, spacing, components, and pixel-perfect visual specs. Use for Figma links or screenshots.

2 files9 tools

charon-fan-agent-playbook

figma

17.6k

Fetches Figma design context, screenshots, variables, and assets via MCP server, translates nodes to React/Tailwind code adapting to project conventions. Activates for Figma URLs, node IDs, design-to-code, or MCP setup.

openai-skills-13

figma-implement-design

1.3k

Translates Figma designs into production-ready UI code with 1:1 visual fidelity using MCP server. Use for node-specific implementations from Figma URLs or desktop selections.

figma

Stats

Parent Repo Stars25

Parent Repo Forks5

Last CommitMar 14, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Figma Reader

Read Figma design context via the Figma MCP server.

Inputs

Raw arguments: $ARGUMENTS

Infer from the arguments:

DESIGN_INPUT: Figma link, design prompt copied from Figma, or attached UI design image (optional)

OUT_DIR: output directory, or .implement-assets/figma if not provided

Use OUT_DIR for all output paths below.

Execution

Pre-flight check: Use ToolSearch to detect if Figma MCP tools are available — follow references/rules.md

If MCP is not available, use AskUserQuestion to guide setup or allow skip

Resolve design input:

If DESIGN_INPUT contains a valid Figma link or prompt → use it directly
If DESIGN_INPUT is an attached UI image → show it for context, then use AskUserQuestion to ask the user to select the relevant component in Figma (see references/rules.md Design Input)
If DESIGN_INPUT is empty or not provided → use AskUserQuestion to ask user (see references/rules.md Design Input)

Read design: Use the Figma MCP tools to read the design from the Figma link resolved in step 3

Format the output per references/output-format.md
Save output: Run mkdir -p OUT_DIR via Bash, then save the full formatted output to OUT_DIR/blueprint.md using the Write tool

Figma Reader

Read Figma design context via the Figma MCP server.

Inputs

Raw arguments: $ARGUMENTS

Infer from the arguments:

DESIGN_INPUT: Figma link, design prompt copied from Figma, or attached UI design image (optional)
OUT_DIR: output directory, or .implement-assets/figma if not provided

Use OUT_DIR for all output paths below.

Execution

Pre-flight check: Use ToolSearch to detect if Figma MCP tools are available — follow references/rules.md
If MCP is not available, use AskUserQuestion to guide setup or allow skip
Resolve design input:
- If DESIGN_INPUT contains a valid Figma link or prompt → use it directly
- If DESIGN_INPUT is an attached UI image → show it for context, then use AskUserQuestion to ask the user to select the relevant component in Figma (see references/rules.md Design Input)
- If DESIGN_INPUT is empty or not provided → use AskUserQuestion to ask user (see references/rules.md Design Input)
Read design: Use the Figma MCP tools to read the design from the Figma link resolved in step 3
- Format the output per references/output-format.md
- Save output: Run mkdir -p OUT_DIR via Bash, then save the full formatted output to OUT_DIR/blueprint.md using the Write tool