mcpField
F
figma-reader

figma-reader

github.com/delexwDesign & UI262 installsUpdated 31w ago
Repository

About figma-reader

figma-reader is a skill for reading Figma design context through Figma MCP and saving a formatted blueprint. It accepts a Figma link, copied design prompt, or UI image, and guides the user when input or MCP access is missing.

Key features

  1. 01Checks for available Figma MCP tools
  2. 02Accepts links, prompts, or UI images
  3. 03Guides design selection and setup
  4. 04Formats design context as a blueprint
  5. 05Saves output to a chosen directory

Use cases

  1. 01Extracting design context from a Figma link
  2. 02Using a UI image to identify a Figma component
  3. 03Saving design notes for implementation

MCP support

Uses Figma MCP tools to read design context from a resolved Figma link. Checks tool availability before proceeding.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/delexw/claude-code-misc --skill figma-reader

After installing, type/figma-readerin Claude Code to confirm it loaded.

Bundled filesreferences/output-format.mdreferences/rules.md

Details

From the project README

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

  1. Pre-flight check: Use ToolSearch to detect if Figma MCP tools are available — follow references/rules.md
  2. If MCP is not available, use AskUserQuestion to guide setup or allow skip
  3. 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)
  4. 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

Comments

Markdown supported