Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
Exports Figma frames as PNG images via REST API from URLs. Use for obtaining design screenshots to visually compare with code implementations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-visual-reviewer:figma-exportThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
從 Figma URL 導出指定 frame 的 PNG 截圖。
從 Figma URL 導出指定 frame 的 PNG 截圖。
FIGMA_ACCESS_TOKEN 必須設定requests：pip install requestspython scripts/figma-export.py "<figma_url>" --output design.png [--scale 2] [--node-id <id>]
| 參數 | 必填 | 說明 |
|---|---|---|
figma_url | 是 | Figma 檔案或 frame 的 URL |
--output | 否 | 輸出檔名（預設 figma-export.png） |
--scale | 否 | 縮放倍數（預設 2，即 2x 解析度） |
--node-id | 否 | 指定 node ID（從 URL 的 node-id= 參數取得） |
支援以下格式：
https://www.figma.com/file/XXXXX/FileName?node-id=1-2https://www.figma.com/design/XXXXX/FileName?node-id=1-2如果沒有 Figma Token：
npx claudepluginhub mukiwu/muki-ai-plugins --plugin figma-visual-reviewerExports images, icons, and assets from Figma files via REST API. Renders nodes as PNG, SVG, JPG, or PDF for asset pipelines, icon sets, and frame previews.
Reads Figma design files, nodes, rendered images, and comments via the Figma REST API. Useful for extracting design tokens, implementing designs as code, and summarizing comments.
Parses Figma links, extracts design specs, and generates UI code via Figma MCP. Useful for design-to-code translation and design token extraction.