スキル 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データ処理完了。サムネイルをprocess/thumbnail.pngに保存

「design-to-code」を使用しています。 node scripts/coderio-skill.mjs structure-prompt > structure.md

期待される結果:

AIがサムネイルを分析してコンポーネント階層JSONを生成するための詳細なプロンプトを生成

「design-to-code」を使用しています。 AI analyzes thumbnail.png and generates component structure

期待される結果:

props抽出の準備ができたフレーム、グループ、コンポーネント階層を含むJSON構造

セキュリティ監査

安全

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取得

design-to-codeスキルを使用してFigmaデザインを取得します。FigmaファイルのURLは[FIGMA_URL]、アクセストークンは[TOKEN]です。

コンポーネント構造生成

structure-promptコマンドを実行し，接着したthumbnail.pngを分析してコンポーネント構造JSONを生成します。結果をscripts/structure-output.jsonに保存します。

Props抽出

list-componentsを実行して利用可能なコンポーネントを確認します。次に、各コンポーネントに対してprops-prompt [COMPONENT_NAME]を実行しthumbnailを分析し、propsをscripts/[COMPONENT_NAME]-props.jsonに保存します。

フルデザインからコードへのパイプライン

完全なdesign-to-codeパイプラインを実行します：1) fetch-figmaでトークン使用、2) structure生成と処理、3) 全コンポーネントのprops抽出、4) 各タスクのcode-promptとsave-codeでコード生成。

ベストプラクティス

AIに分析やコード生成を要求する際は必ずFigma thumbnail.pngを添付する
フェーズを順次順序で実行する：セットアップ → プロトコル → コード
次のフェーズに進む前にチェックポイントファイル（processed.json、protocol.json）が存在することを確認する

回避

AI分析ステップでのサムネイル添付をスキップする
props抽出が完了する前にコード生成を実行する
無効または期限切れのFigma APIトークンを使用する

よくある質問

このスキルを使用するには何が必要ですか？

Figmaアカウント、Figmaパーソナルアクセストークン、およびNode.js 18以上が必要です。このスキルはFigma操作用のcoderio npmパッケージを使用します。

Figmaトークンはどのように機能しますか？

トークンはfetch-figma実行時にユーザーが提供します。指定した特定のFigmaファイルにアクセスするためにのみ使用されます。トークンはスキルによって保存されません。

すべてのFigmaデザインを変換できますか？

ほとんどの静的なFigmaデザインは良好に変換されます。複雑なインタラクティブなコンポーネント、アニメーション、ネストされたプロトタイプは変換後に手動調整が必要な場合があります。

どのようなコードを生成しますか？

このスキルはViteプロジェクト構造とTailwindCSS V4を使用したReact TypeScriptコンポーネントを生成します。

なぜサムネイルを添付する必要があるのですか？

AIは視覚的なサムネイルを使用して、生のFigma JSONデータでは完全にキャプチャされない可能性があるスペーシング、レイアウトのニュアンス、テキストコンテンツを理解します。

ステップが失敗した場合はどうなりますか？

スキルは問題の詳細を示すエラーメッセージを提供します。一般的な問題には、無効なトークン、空のAIレスポンス、ステップの順序違いがあります。

開発者の詳細

作成者

MigoXLab

ライセンス

MIT

リポジトリ

https://github.com/MigoXLab/coderio/tree/main/skills/design-to-code/

参照

main

ファイル構成

📁 scripts/

📄 coderio-skill.mjs

📄 package.json

📄 LICENSE.txt

📄 SKILL.md