figma-generate-design目的、用途、および情報源

このスキルが何をするか

アプリケーションページ、ビュー、または複数セクションのレイアウトをFigmaに変換するタスクでは、このスキルをfigma-useと併用してください。トリガー: 'write to Figma'、'create in Figma from code'、'push page to Figma'、'take this'app/page「Figmaで構築する」、「画面を作成する」、「Figmaでランディングページを構築する」、「Figma画面をコードに合わせて更新する」。これは、ユーザーがコードまたは説明からFigmaでページ全体、画面、またはビューを構築または更新したい場合に推奨されるワークフロー スキルです。search_design_system を介してデザイン システム コンポーネント、変数、およびスタイルを検出し、それらをインポートし、ハードコードされた値の代わりにデザイン システム トークンを使用して、画面をセクションごとに段階的に組み立てます。

上流ワークフローの仕組み

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

要件とセットアップ

制限事項と品質チェック

このファイルからは、個別の制限に関する記述は選択されていません。これは、このスキルがあらゆる入力や環境において安全であることを意味するものではありません。ソースコード全体を確認し、ご自身で結果を検証してください。

まずは安全なトライアルから始めましょう

1. サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
2. エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
3. 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
4. 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。

スキルフォーマットとディレクトリの仕様 ↗

詳細は出典元をご覧ください。

• デザインシステムから画面を作成／更新する
• スキルの限界
• 前提条件
• generate_figma_design を使用した並列ワークフロー（Web アプリのみ）
• 必要なワークフロー
• ステップ1画面を理解する
• ステップ2デザインシステムを発見する — コンポーネント、変数、スタイル
• 2a: コンポーネントの発見
• 2b：変数（色、間隔、半径）を検出する
• 2c: スタイル（テキストスタイル、エフェクトスタイル）を検出する
• ステップ3まずページラッパーフレームを作成します
• ステップ4ラッパー内の各セクションを構築する
• setProperties() を使用してインスタンスのテキストを上書きします。
• ソースコードのデフォルト設定をよく読んでください。
• 手動で作成すべきものと、デザインシステムからインポートすべきもの
• ステップ5全画面表示を検証する
• ステップ6既存の画面を更新する
• 参考資料
• エラー回復
• ベストプラクティス

関連スキル

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

翻訳と範囲

この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。

この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。

ピン留めされたソース

原文を読む ↗

ソースを取得しました

2026-10-29T09:32:23Z

ソースコミット

49f948faa9258a0c61caceaf225e179651397431

ソースSHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9