Communitygithub.com

AINDF スクリーン作成

DS-MCP を通じて AINDF デザインシステムのスクリーンを作成または変更します。デザインシステムが AINDF MCP を公開している製品のページやスクリーンの構築、変更、修正を依頼された場合に使用します。

AINDF スクリーン作成 とは?

このスキルは、AINDF(Abstract Interface & Design Framework)デザインシステムに基づいたスクリーン(画面)を、与えられたMCPツール群のみを使用して作成・変更するためのものです。開発者が「新しいページを作って」「このボタンを変更して」と依頼した際に、デザインシステムのコンポーネントやルールに厳密に従いながら、唯一の成果物である **ScreenSpec JSON** を生成します。 主なワークフローは、まず `get-ds` でデザインシステムのピン(固定識別子)を取得し、その後 `get-component` や `list-by-facet`、`slot-accepts`、`get-preset` などのツールでコンポーネントの契約(Props, Slots, バリエーション)を読み取ります。次に、これらの情報のみを元にスクリーン構成を組み立て、`validate-screen` で検証(ok: true になるまで修正)し、最終的に `submit-screen` で未承認の下書きとして提出します(読み取り専用エンドポイントの場合は検証済みScreenSpecをユーザーに渡します)。 HTMLやCSS、JSX、独自のクラス名、スタイル、スクリプト、ハンドラ、URLなどを一切記述せず、テキストや宣言された列挙型/ブール値/数値のみを自由なデータとして扱う点が重要なルールです。また、デザインシステムで提供されていない機能が必要な場合は、エンドポイントが `request-extension` を提供していればそれを呼び出し、提供されていなければユーザーに報告し、独自の代替を行いません。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/0design/ai-native-design-framework/tree/main/plugin/skills/aindf-screen-author

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

AINDF スクリーン作成 は何をしますか?

あなたは、変更できないデザインシステムからスクリーンを構成します。あなたの唯一の成果物は ScreenSpec JSON です。

ルール

  1. get-ds から始めます。その pin をすべてのスクリーンに忠実にコピーします (ds)。コンポーネント、プロパティ、スロット、値を独自に作成してはいけません。
  2. 何かを使用する前に、get-component、list-by-facet、slot-accepts、get-preset で契約を読み取ります。
  3. 自分自身で HTML、CSS、JSX、クラス名、スタイル、スクリプト、ハンドラ、URL を決して記述してはいけません。テキストおよび宣言された列挙型/ブール値/数値のみが唯一の自由なデータです。リンクは、それを許可する richText プロパティ内のみで使用します。
  4. validate-screen を ok: true になるまで実行します。返された code と path から修復します。ルールを回避してはいけません。
  5. スクリーンにデザインシステムが提供していないものが必要な場合、その部分を停止し、それを要求します。エンドポイントが提供している場合にのみ request-extension を呼び出します。読み取り専用エンドポイント(そのようなツールがない)の場合は、その必要性をユーザーに報告します。他のコンポーネントでその意図に反して近似してはいけません。
  6. 検証済みのスクリーンを引き渡します。エンドポイントが提供している場合にのみ submit-screen を呼び出します(これは未承認の下書きを保存します)。読み取り専用エンドポイントの場合は、検証済みの ScreenSpec をユーザーに渡します。あなたは構築、検証、承認、リリースをすることはできません。変更がライブまたは承認されたと主張してはいけません。何が変更されたか、何を要求したか、そして提出した場合はその提出 id を報告します。

ScreenSpec の形状

{ "kind": "aindf.screen", "aindfVersion": "0.2", "id": "use", "ds": "<get-ds.pin>", "route": "/use",
  "template": { "component": "<a template>", "props": {} },
  "sections": [ { "component": "<a sections-layer component>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta(タイトル/説明)と params([param] ルートの場合、DS の params バインディング)はオプションであり、同じ方法で検証されます。

関連スキル