figma-create-design-system-rules目的、用途、および情報源

このスキルが何をするか

ユーザーのコードベースに合わせて、カスタムデザインシステムルールを生成します。「デザインシステムルールを作成」​​、「プロジェクトのルールを生成」、「デザインルールを設定」、「デザインシステムガイドラインをカスタマイズ」などのユーザーからの指示があった場合、またはFigmaからコードへのワークフローに関するプロジェクト固有の規約を確立したい場合に使用します。Figma MCPサーバーへの接続が必要です。

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

- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`

要件とセットアップ

制限事項と品質チェック

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

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

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

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

• 概要
• デザインシステムルールとは何ですか？
• 前提条件
• このスキルを使うタイミング
• 必要なワークフロー
• ステップ1デザインシステムルール作成ツールを実行します。
• ステップ2コードベースを分析する
• ステップ3プロジェクト固有のルールを生成する
• ステップ4ルールを適切なルールファイルに保存する
• ステップ5検証と反復
• 必須ルール（必ず含める）
• 推奨ルール（非常に重要）
• オプションルール（プロジェクト固有）
• 例1: React + Tailwind プロジェクト
• 例2: Vue + カスタムCSSプロジェクト
• 例3デザインシステムチーム
• シンプルに始めて、繰り返していく
• 具体的に述べてください
• ルールを実行可能なものにする
• 重要なルールには「重要」を使用してください
• 理由を記録しよう
• 問題点：エージェントがルールに従っていない
• 問題点：規則が互いに矛盾している
• 問題点：ルールが多すぎるとレイテンシが増加する
• 問題点：プロジェクトの進化に伴い、ルールが時代遅れになる。
• デザインシステムルールの理解
• その他のリソース

関連スキル

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-new-fileopenai/skills

翻訳と範囲

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

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

ピン留めされたソース

原文を読む ↗

ソースを取得しました

2026-10-29T09:32:23Z

ソースコミット

49f948faa9258a0c61caceaf225e179651397431

ソースSHA-256

1f4d7e16ba5325a80da32e2e6bde0ea850ba9287f35f4675d51d55d2f0dc6e2a