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

このスキルが何をするか

Figmaのデザインを本番環境に対応したアプリケーションコードに変換します。1:1視覚的な忠実度。Figma ファイルから UI コードを実装する場合、ユーザーが「デザインの実装」、「コードの生成」、「コンポーネントの実装」と言及した場合、Figma URL を提供した場合、または Figma 仕様に一致するコンポーネントの構築を依頼した場合に使用します。Figma キャンバスへの書き込みは、use_figma、 使用figma-use。

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

get_design_context(fileKey=":fileKey", nodeId="1-2")

要件とセットアップ

制限事項と品質チェック

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

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

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

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

• 概要
• スキルの限界
• 前提条件
• 必要なワークフロー
• オプションA：Figma URLから解析する
• オプションB：Figmaデスクトップアプリの現在の選択範囲を使用する（figma-desktop MCPのみ）
• ステップ2: デザインコンテキストの取得
• ステップ3: 視覚的な参照をキャプチャする
• ステップ4必要なアセットをダウンロードしてください
• ステップ5プロジェクト規約に翻訳する
• ステップ6： 成し遂げる1:1視覚的パリティ
• ステップ7Figmaとの照合
• 構成要素の構成
• 設計システム統合
• コード品質
• 例1ボタンコンポーネントの実装
• 例2ダッシュボードレイアウトの構築
• 常に文脈から始める
• 段階的検証
• 文書の逸脱
• レクリエーションよりも再利用を優先する
• デザインシステムファースト
• 問題：Figmaの出力が途中で途切れる
• 問題点：実装後にデザインが一致しない
• 問題: アセットが読み込まれない
• 問題：デザイントークンの値がFigmaの値と異なる
• 設計実装の理解
• その他のリソース

関連スキル

• 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

63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad