·codify-design-to-code
*

codify-design-to-code

chenaey/codify-dev-skill

Figma/MasterGo 設定は、API を介して設定データと図を取得し、サンプル形式の属性を正確に抽出して、大量で保存可能な任意のフレームワーク コードを生成します。設計原稿を利用可能なコードに変換する必要がある場合に適しています。

5インストール·0トレンド·@chenaey

インストール

$npx skills add https://github.com/chenaey/codify-dev-skill --skill codify-design-to-code

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 を介して設定データと図を取得し、サンプル形式の属性を正確に抽出して、大量で保存可能な任意のフレームワーク コードを生成します。設計原稿を利用可能なコードに変換する必要がある場合に適しています。 ソース: chenaey/codify-dev-skill。

原文を見る

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/chenaey/codify-dev-skill --skill codify-design-to-code
カテゴリ
*クリエイティブ
認証済み
初回登録
2026-02-01
更新日
2026-02-18

クイックアンサー

codify-design-to-code とは?

Figma/MasterGo 設定は、API を介して設定データと図を取得し、サンプル形式の属性を正確に抽出して、大量で保存可能な任意のフレームワーク コードを生成します。設計原稿を利用可能なコードに変換する必要がある場合に適しています。 ソース: chenaey/codify-dev-skill。

codify-design-to-code のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/chenaey/codify-dev-skill --skill codify-design-to-code インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/chenaey/codify-dev-skill

詳細

カテゴリ
*クリエイティブ
ソース
skills.sh
初回登録
2026-02-01

関連 Skills

なし