技能 design-to-code

🎨

design-to-code

Name: design-to-code
Author: MigoXLab

安全 🌐 網路存取⚙️ 外部命令📁 檔案系統存取

將 Figma 設計轉換為 React 程式碼

將 Figma 設計轉換為可直接用於生產環境的 React TypeScript 元件，確保像素級精準度。此技能運用 AI 自動化設計到程式碼的工作流程，產生乾淨且結構化的程式碼。

支援: Claude Codex Code(CC)

⚠️ 68 差

下載技能 ZIP

在 Claude 中上傳

前往設定 → 功能 → 技能 → 上傳技能

開啟並開始使用

測試它

正在使用「design-to-code」。 node scripts/coderio-skill.mjs fetch-figma https://figma.com/file/xxx figd_xxx

預期結果:

Figma data processed. Thumbnail saved to process/thumbnail.png

正在使用「design-to-code」。 node scripts/coderio-skill.mjs structure-prompt > structure.md

預期結果:

Generates detailed prompt for AI to analyze thumbnail and produce component hierarchy JSON

正在使用「design-to-code」。 AI analyzes thumbnail.png and generates component structure

預期結果:

JSON structure with frames, groups, and component hierarchy ready for props extraction

安全審計

安全

v1 • 2/13/2026

All 121 static findings are false positives. The skill is a legitimate Figma-to-React conversion tool that uses network (Figma API), filesystem (read/write project files), and external commands (Node.js scripts) as expected for its purpose. No credential exfiltration, no malicious code, no prompt injection attempts detected.

已掃描檔案

671

分析行數

發現項

審計總數

高風險問題 (5)

LICENSE.txt:60 LICENSE.txt:106 LICENSE.txt:140 LICENSE.txt:144-145 LICENSE.txt:185 scripts/coderio-skill.mjs:8 scripts/coderio-skill.mjs:116-118 scripts/coderio-skill.mjs:177 scripts/coderio-skill.mjs:184 scripts/coderio-skill.mjs:248 scripts/coderio-skill.mjs:254 SKILL.md:2 SKILL.md:3 SKILL.md:6 SKILL.md:8 SKILL.md:21 SKILL.md:37-39

False Positive: Weak Cryptographic Algorithm

Static scanner detected 'weak crypto' patterns in LICENSE.txt and code. These are false positives - pattern matches on license text words like 'sha' and 'hash', and code comments. No actual cryptographic operations in the skill.

scripts/coderio-skill.mjs:10 scripts/coderio-skill.mjs:104

False Positive: Windows SAM Database Access

Static scanner detected 'SAM database' patterns. These are false positives - pattern matches on 'SYSTEM' in 'INITIAL_AGENT_SYSTEM_PROMPT' variable name.

scripts/coderio-skill.mjs:161

False Positive: Certificate/Key Files Access

Static scanner detected 'certificate/key' patterns. This is a false positive - pattern match on component 'groups' variable which groups UI components, not certificates.

SKILL.md:15-157 scripts/coderio-skill.mjs:174-287

False Positive: Ruby/Shell Backtick Execution

Static scanner detected backtick usage as shell execution. These are false positives - backticks in SKILL.md are markdown code block delimiters, and in coderio-skill.mjs are string template literals for prompt generation.

scripts/coderio-skill.mjs:78 SKILL.md:158

False Positive: System Reconnaissance

Static scanner detected reconnaissance patterns. These are false positives - pattern matches on license text words.

風險因素

🌐 網路存取 (3)

LICENSE.txt:3 LICENSE.txt:195 SKILL.md:60

⚙️ 外部命令 (48)

📁 檔案系統存取 (19)

審計者: claude

品質評分

架構

100

可維護性

內容

社群

安全

規範符合性

你能建構什麼

前端開發者工作流程

快速將 Figma 模型的轉換為可運作的 React 元件，用於原型設計或正式開發。

快速原型製作

從設計檔案產生 React 程式碼範本，加速 MVP 開發。

設計系統實作

從 Figma 設計系統中擷取個別元件，轉換為可重複使用的 React 程式碼。

試試這些提示

簡易 Figma 擷取

Use the design-to-code skill to fetch my Figma design. The Figma file URL is [FIGMA_URL] and my access token is [TOKEN].

元件結構產生

Run the structure-prompt command, then analyze the attached thumbnail.png to generate the component structure JSON. Save the result to scripts/structure-output.json.

屬性擷取

Run list-components to see available components. Then for each component, run props-prompt [COMPONENT_NAME], analyze the thumbnail, and save the props to scripts/[COMPONENT_NAME]-props.json.

完整設計到程式碼管線

Execute the full design-to-code pipeline: 1) fetch-figma with my token, 2) generate structure and process, 3) extract props for all components, 4) generate code for each task using code-prompt and save-code.