アクティベーション契約

ユーザーが平易な言葉でUIデザイン、モックアップ、画面、ランディングページ、ビジュアルの方向性を依頼した場合、または design/ 配下のアートボードを反復する場合、デフォルトでこのスキルを使用します。プロジェクトのスタックでプロダクションコードを実装するためには使用しないでください。

/gentle:design コマンドは省略可能なショートカットです。すべてのアクションは、このスキルと gentle_design ツール（list、open、stop、implement、handoff）を介して、平易なリクエストからも動作します。

ハードルール

すべてのアートボードは1つの自己完結型HTMLファイルとします。CSS、JS、SVGはインライン化し、システムフォントスタックのみを使用。外部URL、CDN、リモートフォント、画像、スクリプトを参照しないでください。
対象ユーザーに合わせた現実的なコンテンツを使用し、ダミーテキストやプレースホルダー名は使用しないでください。
アクセシブルなマークアップ：セマンティック要素とランドマーク、WCAG AAのコントラスト、可視フォーカススタイル、モーションに関しては prefers-reduced-motion を尊重。
design/system.md が存在する場合は、最初にそれを読み、そのトークンとコンポーネントルールのみを使用。アートボードを完了する前に「デザインシステム同期」のセルフチェックを実行。
明確化の質問は最大1回、かつ概要に目標またはコンテンツが欠けている場合のみ行う。
反復編集は対象のアートボードのみに影響します。他のアートボードを決して書き換えないでください。

決定ゲート

状況	アクション
新しい概要	N個のはっきり異なる方向性（デフォルト3つ、または要求された数）を新しい `design/<slug>/` に作成
1つのアートボードへのフィードバック	そのファイルのみ編集。マニフェストエントリを維持し、トレードオフが変更された場合は更新
「保存して別のアプローチを試す」	次の `NN` で新しいアートボードを追加。以前のものは保持し、マニフェストに追加
ユーザーが値（スペーシング、色、タイプスケール）を調整したい	アートボードにスライダーやコントロールを追加。さらに、選択した値をプロンプトとしてコピーする「プロンプトとしてコピー」ボタンを追加
新しい概要に対して `design/<slug>/` がすでに存在する	新しいスラッグを選択。他のデザインを決して上書きしない
メッセージにデザインコメントが含まれている、またはユーザーが適用を依頼した	以下の「キャンバスコメント」に従う
`/gentle:design sync`、またはユーザーがプロジェクトのデザインシステムの取得を依頼した	以下の「デザインシステム同期」に従う
ユーザーがデザインの表示、停止、一覧表示、またはアートボードの実装を依頼した	`gentle_design` ツール（`open`、`stop`、`list`、または `implement`（`<slug>/<artboard>`））を呼び出す。`implement` が返すハンドオフテキストに従い、`action "handoff"` で進捗を報告：開始時は `status: "in_progress"`、完了時は `status: "implemented"`、実行中のアプリがある場合は `previewUrl` にそのループバックURLを設定

デザイン前

新しい概要ごとにこのゲートを実行：gentle_design ツールを action: "list" で呼び出し、以下を確認：

`list` の報告	アクション
`system.exists` が false で `designSources` が存在する	最初に「デザインシステム同期」を実行。プロジェクトのデザインシステムを同期したことを1行でユーザーに伝え、その後デザイン
`designSources` がない	同期をスキップし、自由にデザイン
`system.staleSources` が存在する	それらのソースを指定し、`design/system.md` が古い可能性があることを伝え、デザイン前にもう一度同期することを提案。ユーザーの承諾がある場合のみ再同期し、古いトークンを黙って使用しない

実行手順

概要を把握：目標、レイアウト、コンテンツ、対象ユーザー。
gentle-ui-design をロード：その SKILL.md と、概要の対象ユーザー、プライマリジョブ、成功条件に一致する参照のみを読みます。このスキルが成果物を担当し、そちらがUX品質を担当します。
概要からケバブケースのスラッグを選択。
方向性は色だけでなく、構造またはビジュアル戦略が異なるようにします。各方向性に、それが取るトレードオフのラベルを付けます。
アートボードごとに design/<slug>/NN-<name>.html を作成（01-…、02-…、ケバブケースの名前）。
design/<slug>/design.json を作成：

{
  "title": "料金ページ",
  "brief": "学生向けノートアプリの料金ページ",
  "feature": "odd/tasks/pricing-page.md",
  "artboards": [
    { "file": "01-comparison-table.html", "title": "比較表", "tradeoff": "情報量が多くスキャンしやすい、感情的な訴求は弱い", "width": 1440, "height": 900 },
    { "file": "02-single-plan-hero.html", "title": "シングルプランヒーロー", "tradeoff": "焦点が強く絞られる、プラン間の違いが隠れる", "width": 1440, "height": 900 }
  ]
}

width/height はアートボードの意図するビューポートをCSSピクセルで設定。変更のたびにマニフェストをファイルと同期。フィールド：title、brief、オプションの feature、artboards[]（file、title、tradeoff、width、height）。
ODDリンク：デザインが追跡対象のODD機能（現在の作業に対する既存の odd/tasks/<feature>.md）に由来する場合、feature にそのパスを設定し、そのドキュメントの ## Log に design/<slug>/ とそのアートボードを追記。そのデザインのアートボードが実装に引き渡された場合、Logエントリには選択されたアートボード（引き渡されたもの、list が Chosen として報告）と、残りが代替であることも記載。小規模な追跡対象外の作業の場合は feature を省略し、デザインを単独で保持。リンクのために機能ドキュメントを作成しない。
UXセルフチェック：完了したアートボードごとに、gentle-ui-design の構成・フィードバック（階層、密度、フィードバック）およびアダプティブインターフェース（狭い画面、入力アクセス、状態）のガイダンスに照らしてチェックし、報告前にすべてのギャップを修正。
アートボードの作成または変更後、ユーザーが禁止しない限り、gentle_design ツールを action: "open" とスラッグで呼び出す。キャンバスタブが既に開いている場合は、新しいタブを開く代わりにそのタブを更新するため、変更のたびに呼び出す。返されたURLを報告。

デザインシステム同期

プロジェクトソースの読み取りのみ行い、編集は決してしない。ソース：CSSカスタムプロパティ（:root、@theme、[data-theme]）、Tailwind設定またはv4 @theme、コンポーネントライブラリフォルダ、既存のトークンファイル、およびそれらが宣言するフォント。
design/system.md を作成：色（トークン名、値、使用法）、タイポグラフィ、スペーシング、半径、シャドウ、コンポーネントルール。各エントリはソース path を指定。ソースで見つかった値のみを記録。
design/system.html を作成：1440px幅の自己完結型アートボードで、それらのトークン（スウォッチ、タイプスケール、スペーシング、半径、シャドウ）とコアコンポーネントをレンダリング。同じ外部URL禁止ルールに従う。キャンバスにはすべてのデザインの最初のボードとして表示。
デザインソースが存在しない場合は、その旨を伝え、ユーザーが受け入れるための最小限のスターターシステムを提案。プロジェクトトークンとして発明された値を提示しない。
セルフチェック：design/system.md が存在する状態で完了したすべてのアートボードについて、アートボードが使用する色とフォントファミリをリストアップし、システムトークンと比較。報告前にすべての逸脱を修正。

キャンバスコメント

キャンバスからのコメントは design/<slug>/comments.json に保存。セッションでは各コメントIDを指定したメッセージとしても受信。

gentle_design_comments ツール（action: "list"、オプションの slug と file）で開いているコメントを読み取る。ツールがない場合は、design/<slug>/comments.json を読み取り、status が "open" のエントリを使用。
各コメントを適用するには、その file のアートボードのみを編集。selector と excerpt を使用して要素を見つける。コメントに screenshot がある場合は、最初にそれを確認。それはコメントメッセージに添付されるか、読み取りツールで design/<slug>/<screenshot> を開く。ユーザーが見たもの、多くの場合、静的なアートボードには表示されない一時的なアニメーションやトランジション状態を示す。
適用した各コメントをツール（action: "resolve"、slug、ids）で解決済みとしてマーク。ツールがない場合は、status を "resolved" に、resolvedAt を現在のISO時刻に設定し、他のすべてのエントリとフィールドはそのまま保持。適用しなかったコメントは開いたままにし、理由を説明。

ファイルアクセスのみのエージェント向けのファイル形式：

{
  "version": 1,
  "comments": [
    { "id": "k3x9p2ab", "file": "02-bold.html", "selector": "body > header > h1", "excerpt": "Ship faster", "comment": "見出しを短くしてください。", "createdAt": "2026-10-26T10:00:00.000Z", "status": "open", "sentAt": null, "resolvedAt": null },
    { "id": "m7q2w9cd", "file": "02-bold.html", "selector": "#cta", "excerpt": "Start", "comment": "ホバートランジション中にボタンが跳ねます。", "screenshot": ".screenshots/m7q2w9cd.png", "createdAt": "2026-10-26T10:05:00.000Z", "status": "open", "sentAt": null, "resolvedAt": null }
  ]
}

screenshot はオプション。デザインフォルダからの相対パス（.screenshots/ 下）。ユーザーが画像を添付した場合のみ存在。

エントリを削除したり、順序を変更したりしないでください。ファイルを有効なJSONに保ってください。キャンバスは解析できないファイルを上書きすることを拒否します。

出力契約

返すもの：スラッグ、各アートボードファイル（タイトルとトレードオフ）、このターンで変更されたファイル、このターンで解決されたコメントID、および未解決の質問。手順10のキャンバスURL。または、開かなかった場合は /gentle:design open <slug> でキャンバスを表示できることを記載。同期の場合は、読み取ったソースパス、グループごとのトークン数、システムが提案されたスターターかどうかを返す。「デザイン前」からの自動同期後は、実行したことを伝え、同様に報告。

参照

プロジェクト内の design/system.md（存在する場合） — 従うべきデザイントークン。
gentle-ui-design スキル — すべてのアートボードと組み合わせるUX品質ガイダンス。

Gentle UI デザイン