スキル design-to-code

📦

design-to-code

Name: design-to-code
Author: MigoXLab

コンテンツリビジョン r1 中リスク ⚙️ 外部コマンド📁 ファイルシステムへのアクセス🌐 ネットワークアクセス

Figma デザインを React に変換

デザインの引き渡しでは、レイアウトの詳細やコンポーネント構造が失われがちです。このスキルは、再利用可能なプロンプトとヘルパースクリプトを使って、Figma から React への変換をガイドします。

対応: Claude Codex Code(CC)

⚠️ 50 不十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "design-to-code" from https://skillstore.io/skills/migoxlab-design-to-code.md and its manifest at https://skillstore.io/api/skills/migoxlab-design-to-code/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/migoxlab-design-to-code.md 署名済み manifest GET /api/skills/migoxlab-design-to-code/manifest 署名済み lockfile GET /api/skills/migoxlab-design-to-code/lockfile

テストする

「design-to-code」を使用しています。ヒーローコンテンツ、機能セクション、フッターを含むランディングページのフレーム。

期待される結果:

生成されたコンポーネント、アセット、統合ガイダンスを含む、構造化された React 実装計画。

「design-to-code」を使用しています。繰り返し使われるカード、チャート、ナビゲーションを含むダッシュボードデザイン。

期待される結果:

デザインから特定されたコンポーネントグループ。
繰り返し使われる UI パターンのために抽出された props。
リーフコンポーネントと親コンポーネントの順序付き生成タスク。

「design-to-code」を使用しています。アイコン、画像、繰り返し使われるリスト項目を含むモバイルアプリ画面。

期待される結果:

テキスト内容、画像参照、レイアウト階層を保持する生成済みコンポーネントタスク。

セキュリティ監査

中リスク

v4 • 2026/7/5 バージョン別レポートを開く

Most static findings are false positives from markdown fences, JavaScript template literals, and expected local workflow files. The remaining risks are limited to unvalidated local path inputs, generated code writes, and Figma token handling through an external helper.

スキャンされたファイル

671

解析済み行数

レビュー項目

誤検知を無視

確認済みのセキュリティ上の懸念 (2)

中

SKILL.md:58-60 scripts/coderio-skill.mjs:110-116

Sensitive Figma Token Passed To External Helper

The workflow asks users to provide a Figma token, then passes it into an imported coderio helper. The visible code does not show token handling inside that dependency.

The token flow is explicit in the documentation and script. There is no proof of exfiltration, but the token leaves local code boundaries through an external helper.

中

scripts/coderio-skill.mjs:282-287

Generated Protocol Paths Drive Project Writes

The save-code command reads component paths from protocol data and writes generated code into the project. The visible code does not validate the resolved output path.

The write path depends on protocol data generated earlier in the workflow. The helper may normalize paths, but this file does not show an explicit containment check.

機能レビュー項目 (2)

これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。

中

scripts/coderio-skill.mjs:192

Node.js fs operations

const propsJson = fs.readFileSync(propsJsonPath, 'utf-8');

The props file path is built from a CLI component name without visible validation. A crafted name could read an unintended local props file through path traversal.

中

scripts/coderio-skill.mjs:192

Synchronous file operations

const propsJson = fs.readFileSync(propsJsonPath, 'utf-8');

The props file path is built from a CLI component name without visible validation. A crafted name could read an unintended local props file through path traversal.

リスク要因

⚙️ 外部コマンド (46)

📁 ファイルシステムへのアクセス (37)

🌐 ネットワークアクセス (1)

SKILL.md:60

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/migoxlab-design-to-code/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/migoxlab-design-to-code/security.svg)](https://skillstore.io/skills/migoxlab-design-to-code?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/migoxlab-design-to-code?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/migoxlab-design-to-code/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/migoxlab-design-to-code.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

MigoXLab. (2026). design-to-code security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/migoxlab-design-to-code/audits/4

BibTeX形式の引用

@techreport{migoxlab-migoxlab-design-to-code-2026,
  author = {MigoXLab},
  title = {design-to-code security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/migoxlab-design-to-code/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-to-code security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "MigoXLab"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/migoxlab-design-to-code/audits/4"
identifiers:
  - type: other
    value: "skillstore:migoxlab-design-to-code:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

Figma フレームから構築

選択した Figma フレームを、生成されたコンポーネントとアセットを含む React プロジェクトに変換します。

デザイン引き渡しの準備

視覚的な構造、繰り返し使われるコンポーネント、props を実装準備済みのタスクに変換します。

プロトタイプ実装の高速化

承認済みのビジュアルデザインから、動作する Vite と Tailwind CSS のインターフェースを作成します。

これらのプロンプトを試す

1 つのフレームを変換

design-to-code を使用して、私の Figma フレームを React と TypeScript に変換してください。ワークフローに従い、レビューが必要なファイルを教えてください。

コンポーネントの props を抽出

生成されたサムネイルとプロトコルを使用して、繰り返し使われる各コンポーネントの props を抽出してください。ラベル、画像パス、順序は正確に保持してください。

順序付きコンポーネントを生成

タスクの順序に従って React コンポーネントを生成してください。各結果をヘルパーワークフロー経由で保存し、親コンポーネントの imports の整合性を保ってください。

出力をレビューして統合

生成されたコンポーネントについて、視覚的な再現性、安全でないパス、欠落しているアセットをレビューしてください。その後、ルートコンポーネントをアプリに統合してください。

ベストプラクティス

スコープを限定した Figma トークンを使用し、使用後はシェル履歴から削除します。
コミットまたはアプリケーション実行の前に、生成されたすべてのファイルをレビューします。
生成された成果物は、ドキュメント化された process ディレクトリと scripts ディレクトリに保持します。

回避

無関係なシークレットをプロンプトや生成されたワークフローファイルに貼り付けないでください。
コンポーネント生成後の視覚レビューを省略しないでください。
想定外の作業ディレクトリからヘルパーコマンドを実行しないでください。

よくある質問

このスキルは何を生成しますか?

Figma デザインデータとサムネイルから React および TypeScript コンポーネントの生成をガイドします。

Figma トークンは必要ですか?

はい。取得ステップには、対象ファイルにアクセスできる Figma personal access token が必要です。

ネットワークアクセスなしで動作しますか?

いいえ。Figma の取得ステップと依存関係のインストールにはネットワークアクセスが必要です。

完全なコードを自動的に作成しますか?

いいえ。ガイド付きワークフローを作成しますが、ユーザーは生成されたコードと視覚的な再現性をレビューする必要があります。

どのツールをサポートしていますか?

レポートには、Claude、Codex、Claude Code のワークフロー対応が記載されています。

中間ファイルはどこに保存されますか?

ヘルパーは、サムネイル、プロトコル、プロンプト、タスクファイルのためにローカルの process ディレクトリと scripts ディレクトリを使用します。

開発者情報

作成者

MigoXLab

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

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

参照

6425ec35f4ac137735cff58cd7877843bba23e3b

メンテナンスの新しさ

2026/7/20

利用状況

6 ダウンロード · 217 閲覧

ファイル構成

📁 scripts/

📄 coderio-skill.mjs

📄 package.json

📄 LICENSE.txt

📄 SKILL.md