Stats
Actions
Tags
From figma-reader
This skill should be used when the user provides a "Figma link", "Figma URL", "figma.com/design" URL, or asks to "read Figma", "analyze Figma design", "extract Figma layout", or wants to understand a Figma design for development context.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-reader:figma-readThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Extract structured page layout summaries from Figma design links with minimal context window usage. Designed for developers who need to understand UI layouts to inform development.
Extract structured page layout summaries from Figma design links with minimal context window usage. Designed for developers who need to understand UI layouts to inform development.
figma.com/design/...)When a Figma URL is detected, delegate to the figma-reader agent via the Task tool. The agent runs in an isolated context and returns only a concise summary, keeping the main conversation context clean.
Use /figma-read <url> [focus] to explicitly trigger extraction.
Figma URLs follow this pattern:
https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2
Extract:
fileKey: the segment after /design/nodeId: convert node-id query param from 1-2 to 1:2 formatfigma-reader agent (subagent_type: figma-reader)get_metadata first (lightweight), then get_screenshot if neededAlways delegate Figma data fetching to the agent. Never call Figma MCP tools directly in the main conversation - this defeats the purpose of context isolation.
npx claudepluginhub tim80411/ai-agent-extension --plugin figma-readerAnalyzes images, websites, and Figma files to extract design tokens, component inventory, and reconstruction notes. Outputs a design.md for replicating or auditing visual designs.
Bridges Designpowers specs and Figma in both directions: pushes visual decisions or code into Figma frames, pulls Figma files in for review or design-system source. Falls back to HTML prototype when Figma is unavailable.
Extracts UI/UX design data from Paper, Figma, Stitch, or local files and guides implementation with design-to-code workflow, responsive design, and design system alignment.