Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

figma-export

Estrellas2

Forks1

Actualizado3 de abril de 2026 a las 06:52

Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

Eva813

Eva813/skills-base

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·SOC 15-1255

SKILL.md

readonly

name	figma-export
description	Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.

Figma Export

從 Figma URL 導出指定 frame 的 PNG 截圖。

使用時機

需要取得 Figma 設計稿的靜態截圖
進行設計稿 vs 實作的比對前

前置條件

環境變數 FIGMA_ACCESS_TOKEN 必須設定
安裝 requests：pip install requests

使用方式

python 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=` 參數取得）

Figma URL 格式

支援以下格式：

https://www.figma.com/file/XXXXX/FileName?node-id=1-2
https://www.figma.com/design/XXXXX/FileName?node-id=1-2

替代方案

如果沒有 Figma Token：

請使用者手動從 Figma 匯出截圖
或用 Playwright 開啟 Figma URL 截圖（需要使用者已登入 Figma）

Más de este repositorio

mismo repositorio

ai-pm

Eva813/skills-base

AI PM 逆向工程規格產生器。當用戶提到「沒有 Spec」、「PM 沒給規格」、「只有 Figma 設計稿」、「從 Figma 推規格」、「API 還沒好先做規格」、「補規格文件」、「draft-spec」、「開發規格草稿」等情境時，立即啟動此 skill。根據 Figma 畫面結構反向推導並產生可交付工程師審閱的 `draft-spec.md`，涵蓋頁面結構順序、Node Coverage Ledger、UI 元件清單、元件拆分建議、互動行為說明、欄位與資料型別定義、待確認假設與開放問題。 **Figma 是唯一必填輸入**。若有 User Story 可增強規格理解；API 對應由後續 api-enrichment Skill 處理。凡是「無 Spec 開發」、「只有設計稿沒有 API」、「前端規格不完整」的任務，都應使用此 skill。只要畫面來自 Figma，就必須在 spec 階段先列出已確認 node、未覆蓋 node 與不可忽略的視覺骨架節點，不能只給高層元件摘要。

2026-04-032

api-enrichment

Eva813/skills-base

API 與數據規格補充 Skill。當完成 UI 切版預覽後（vue3-layout 斷點 B），需要補充 API、數據模型、State 結構時使用。根據 spec.md 中的「待定數據模型清單」+ OpenAPI 文檔，補充完整的 API 對應表、State 結構、Error 處理方案，產出 `enriched-spec.md` 供 logic-coder 實裝使用。若無 API 文檔，會主動產出「數據模型候選提案」讓使用者確認。觸發情境：「補充 API」、「確認資料格式」、「補完規格」、「有 Swagger 需要對齊」、「無 API 先補數據結構」。

2026-04-032

figma-implement-design

Eva813/skills-base

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

2026-04-032

pixel-diff

Eva813/skills-base

Pixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations.

2026-04-032

logic-coder

Eva813/skills-base

Vue 3 前端邏輯技能（邏輯 Agent）。接收 enriched-spec.md（含 API 對應表、State 結構定義、錯誤處理方案），將切版完成的純展示元件（Dumb Components）與 API / 狀態管理邏輯整合，產出可執行的容器層、services、composables。觸發情境包含：接續 api-enrichment 完成後的邏輯實作、「幫我串 API」、「實作資料邏輯」、「加上 loading / error 狀態」、「幫我寫 composable」、「實作 Pinia store」、提到 enriched-spec.md 或 component_paths handoff payload 的情境。

2026-04-032

vue-layout

Eva813/skills-base

Vue 3 + SCSS 切版技能（切版 Agent）— 像素級精確實現。從 Figma 設計稿生成 **1:1 視覺保真的** Vue 3 純展示元件（Dumb Components）。觸發情境包含：「幫我切版」、「根據 Figma 產出元件」、「根據 spec 建立 UI」、「幫我建 Vue 元件」、「切這個畫面」、「實現 Figma 設計」、「補切版」、有提到 Figma URL 或 Node ID 加上 Vue/元件/切版等字詞。保證顏色、間距、字號、圓角、邊框等像素級精確匹配，同時支援與規格流程集成（使用 `draft-spec.md` 或 handoff payload 增強理解）或無規格快速實現。只要上游提供了核准 node 清單，就必須先做 node-to-component mapping 與 coverage 自查，未覆蓋 node 不得宣稱切版完成。僅產出 props/emits 介面的純 UI 結構，不含 API 呼叫或業務邏輯。

2026-04-032

name	figma-export
description	Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.

Figma Export

從 Figma URL 導出指定 frame 的 PNG 截圖。

使用時機

需要取得 Figma 設計稿的靜態截圖
進行設計稿 vs 實作的比對前

前置條件

環境變數 FIGMA_ACCESS_TOKEN 必須設定
安裝 requests：pip install requests

使用方式

python 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=` 參數取得）

Figma URL 格式

支援以下格式：

https://www.figma.com/file/XXXXX/FileName?node-id=1-2
https://www.figma.com/design/XXXXX/FileName?node-id=1-2

替代方案

如果沒有 Figma Token：

請使用者手動從 Figma 匯出截圖
或用 Playwright 開啟 Figma URL 截圖（需要使用者已登入 Figma）