figma-generate-design
このスキルは、アプリケーションページ、ビュー、または複数セクションのレイアウトをFigmaに変換する必要があるタスクの際に、figma-useと組み合わせて使用します。トリガー:「write to Figma」「create in Figma from code」「push page to Figma」「take this app/page and build it in Figma」「create a screen」「build a landing page in Figma」「update the Figma screen to match code」。ユーザーがコードまたは説明からFigmaでフルページ、スクリーン、またはビューを構築または更新したい場合の推奨ワークフロースキルです。search_design_systemを通じてデザインシステムのコンポーネント、変数、スタイルを検出して取得し、ハードコードされた値の代わりにデザインシステムトークンを使用しながら、セクションごとにスクリーンを段階的に組み立てます。
description の原文を見る
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.
SKILL.md 本文
デザインシステムからスクリーンを構築/更新
このスキルを使用して、プリミティブをハードコーディングされた値で描画するのではなく、公開されたデザインシステムを再利用する(コンポーネント、変数、スタイル)ことで、Figma に完全ページスクリーンを作成または更新します。重要な洞察:Figma ファイルはおそらく、コードベースの UI コンポーネントとトークンに対応するコンポーネント、色/スペーシング変数、テキスト/エフェクトスタイルを持つ公開デザインシステムを備えています。16進数カラーを持つボックスを描画する代わりに、それらを見つけて使用します。
必須:use_figma 呼び出しの前に、必ず figma-use もロードしてください。このスキルには、記述するすべてのスクリプトに適用される重要なルール(色範囲、フォント読み込みなど)が含まれています。
このスキルの一部として use_figma を呼び出すときは、常に skillNames: "figma-generate-design" を渡してください。 これはロギングパラメータです。実行には影響しません。
スキルの境界
- このスキルは、成果物がデザインシステムコンポーネントインスタンスで構成された **Figma スクリー
...
詳細情報
- 作者
- openai
- リポジトリ
- openai/skills
- ライセンス
- 不明
- 最終更新
- 2026/5/12
Source: https://github.com/openai/skills / ライセンス: 未指定