codify-design-to-code
✓将 Figma/MasterGo 设计转换为前端组件代码。API 获取设计数据和截图，精准提取样式属性, 生成高质量、可维护的任意框架组件代码.适用于需要将设计稿转换为可用代码的场景.
Installation
SKILL.md
| 截图 | 视觉效果、颜色感知、间距比例、整体氛围 | 精确数值、层级结构、节点 ID | | 骨架 | 组件边界、布局方向、重复模式、节点层级 | 具体样式、颜色、字体大小 | | JSON | 精确 CSS 值、节点属性、资源 ID | 视觉上下文、设计意图 |
| 层级 ≤3 且 区域 ≤2 | A：Step 4 整体实现 | | 层级 >3 或 区域 >2 | B：必须阅读文档并执行 phased-workflow.md |
| 图标 | type: "ICON" | SVG | | 图片背景 | customStyle 含 url( ) | PNG | | 图片占位符 | RECTANGLE + object-fit: cover（无 url） | PNG |
将 Figma/MasterGo 设计转换为前端组件代码。API 获取设计数据和截图，精准提取样式属性, 生成高质量、可维护的任意框架组件代码.适用于需要将设计稿转换为可用代码的场景. Quelle: chenaey/codify-dev-skill.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/chenaey/codify-dev-skill --skill codify-design-to-code- Quelle
- chenaey/codify-dev-skill
- Kategorie
- *Kreativität
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist codify-design-to-code?
将 Figma/MasterGo 设计转换为前端组件代码。API 获取设计数据和截图，精准提取样式属性, 生成高质量、可维护的任意框架组件代码.适用于需要将设计稿转换为可用代码的场景. Quelle: chenaey/codify-dev-skill.
Wie installiere ich codify-design-to-code?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/chenaey/codify-dev-skill --skill codify-design-to-code Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/chenaey/codify-dev-skill
Details
- Kategorie
- *Kreativität
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01