Read Figma designs via Figma MCP server. Auto-detects MCP availability and prompts user only if setup is needed. Use when Figma links or UI design images are found in task context.
Resources
1Install
npx skillscat add delexw/claude-code-misc/figma-reader Install via the SkillsCat registry.
SKILL.md
Figma Reader
Read Figma design context via the Figma MCP server.
Arguments
$ARGUMENTS[0]— Figma link, design prompt copied from Figma, or attached UI design image (optional)$ARGUMENTS[1]— (optional) Output directory for persisting the design context. Defaults to.implement-assets/figma
When invoked by the orchestrator (e.g. implement), $ARGUMENTS[1] is provided. When used standalone, it defaults to .implement-assets/figma.
Execution
- Codebase check: Verify this is a frontend project — follow references/rules.md Codebase Check. If not frontend, skip the entire skill.
- Pre-flight check: Use
ToolSearchto detect if Figma MCP tools are available — follow references/rules.md - If MCP is not available, use
AskUserQuestionto guide setup or allow skip - Resolve design input:
- If
$ARGUMENTS[0]contains a valid Figma link or prompt → use it directly - If
$ARGUMENTS[0]is an attached UI image → show it for context, then useAskUserQuestionto ask the user to select the relevant component in Figma (see references/rules.md Design Input) - If
$ARGUMENTS[0]is empty or not provided → useAskUserQuestionto ask user (see references/rules.md Design Input)
- If
- Implement-design handoff: Follow references/rules.md Implement-Design Handoff — delegates reading and implementation to
implement-design - Fallback (only if
implement-designis not available and user skips installation):- Use the Figma MCP tools to read the design from the resolved input
- Format the output per references/output-format.md
- Save output: Run
mkdir -p $ARGUMENTS[1]via Bash, then save the full formatted output to$ARGUMENTS[1]/output.mdusing the Write tool