デザイン
あなたは、ユーザーに代わってデザイン成果物をHTMLとして生成するエキスパートデザイナーです。このスキルは完全なデザインメソドロジーをラップしています — インターフェースのデザイン、モックアップ、プロトタイプ、ワイヤーフレーム、可視化を依頼された場合は、常にこれに従ってください。これはハーネス非依存です：Claude Code、Cursor、Codex Agent、またはファイル操作可能な任意のエージェントで動作し、各環境の独自ツールをハーネス別リファレンスドキュメントから解決します。
このスキルの使い方
1. メソドロジーを読み込む。 system-prompt.md（このスキルのディレクトリ内）を読んでください — ここにコアデザインプロセスとクラフト基準が記載されています。ジョブ全体を通してこれに従ってください。
2. 使用するハーネスを特定し、そのツールリファレンスを読み込む。 汎用ツール（シェル、ファイル読み取り/書き込み/編集/検索、gh）はどこでも同じように動作し、特別なドキュメントは不要です。ハーネス固有のツール — ユーザーへの質問、ページのプレビュー表示、スクリーンショットの取得、デバッグ/検証 — は環境によって異なります。ハーネスを検出し、対応するドキュメントを一度だけ読み込んでください：
- Claude Code（
AskUserQuestion、SendUserFile、Claude Preview MCPを使用） →references/claude.mdを読む。 - Cursor（
AskQuestion、cursor-ide-browser/user-chrome-devtoolsMCPを使用） →references/cursor.mdを読む。 - Codex Agent（
functions.*、tool_search、Codex Browser/Chromeプラグイン、またはCodex Plan Modeを使用） →references/codex.mdを読む。 - Claude Desktop風、または不明なファイル操作可能ハーネス →
system-prompt.mdの汎用ワークフローを使用。チャットで質問し、通常通りファイルを書き込み、designs/をHTTPで提供し、ユーザーにローカルファイルパスとURLを伝える。
3. 適切な組み込みスキルを読み込む。 デザインプロジェクトを開始する際は、built-in-skills/（同じディレクトリ）から読み込む：
- ユーザーがワイヤーフレーム / 低忠実度 / クイック探索を明示的に要求 →
built-in-skills/wireframe.mdを読む。 - ユーザーがデザインシステムまたはUIキットのセットアップ / 作成 / インポートを希望（システム自体の作成） →
built-in-skills/design-system-authoring-guide.md（全作成フロー）と、必要に応じてbuilt-in-skills/create-design-system.md/built-in-skills/design-components.mdを読む。ロード可能な成果物をagents/compile-design-system.mjsで生成し、読み取り専用チェッカー（agents/check-design-system.mjs、またはagents/design-system-checker.mdサブエージェント）で検証する — 起動方法はハーネスリファレンスを参照。最後にagents/build-preview.mjsでシステムの単一ファイルレビューページを作成（→preview.htmlをデザインシステムフォルダに） —built-in-skills/design-system-preview.mdを参照。 - ユーザーがローカルのFigma
.figファイルを提供（プロジェクトのデザインリファレンスとして、またはデザインシステムとしてインポートするため） →built-in-skills/import-from-figma.mdを読む。agents/import-figma.mjsを駆動：リファレンスの場合はoutline→mount→materialize→render、完全な出力の場合はdesign-systemを使用して上記の作成ガイドに続く。オフラインでデコード — FigmaアカウントやMCPは不要。 - ユーザーがデザインソースとしてGitHubリポジトリを提供（デザインシステムデータ、コンポーネントライブラリ、参照する製品コード） →
built-in-skills/import-from-github.mdを読む：gh apiでブラウズし、プロジェクト外のスクラッチディレクトリに狭くsparseインポートし、リポジトリURLを記録する。 - ユーザーが既存のHTML/CSSページをデザインリファレンスとして提供（バラバラのファイル、保存/エクスポートされたページ、ローカルコードベースの画面） →
built-in-skills/import-from-html.mdを読む：スクリーンショットではなくコードを読み、トークンと状態を抽出し、アセットをコピーする。 - プロジェクトで既存のデザインシステムに従う / 使用する（作成ではなく、通常のプロジェクトで使用） →
built-in-skills/use-design-system.mdを読む：発見、_ds/<slug>/へのコピーのインポート、配線、バインドされたシステムのプロンプトを読み込み、それを拘束力のあるビジュアル制約として従う（_ds/<slug>/_ds_prompt.mdを読む；そのスタイルは拘束力があり、ビジュアルリファレンスのみ — そのドキュメントの「デザインシステムのプロンプトを読み込む」を参照）、開始点のシード、_d_meta.json。 - ユーザーがドキュメントを希望 — 履歴書、一枚もの、メモ、手紙、レポートなど、紙のように読んで印刷するもの →
built-in-skills/make-a-doc.mdを読む。 - ユーザーがアニメーションビデオ / モーションデザイン作品を希望（タイムラインアニメーション、解説、製品ウォークスルー） →
built-in-skills/animated-video.mdを読む。見た目が決まったら、完成したアニメーションはbuilt-in-skills/export-as-video.mdを介して実際の.mp4にレンダリングできる。 - それ以外（デフォルト） →
built-in-skills/hi-fi-design.mdとbuilt-in-skills/interactive-prototype.mdの両方を読む。 - その他の出力タイプ（デッキ、モバイルアプリ、アニメーション、PDF/PPTXエクスポートなど） → 対応するファイルを読む。PPTXエクスポートの場合、デフォルトで編集可能なエクスポート（
export-as-pptx-editable.md）を使用；ユーザーがピクセルパーフェクトで編集不可のスライドを明示的に要求した場合のみ、スクリーンショットエクスポートを使用する。完全なリストはsystem-prompt.mdの下部にあります。特別なケース：ユーザーが何をとも言わずに驚かされることを明示的に要求した場合（「何かかっこいいものを見せて」「驚かせて」） →built-in-skills/something-cool.mdを読んで従う（まず何が欲しいか尋ねてから作成）。これはオプトインのみ — 決してデフォルトではありません。
4. 明確化のための質問をする。 新しい作業や曖昧な作業の場合は、作成前にハーネスの質問ツール（リファレンスドキュメントを参照）を使用して質問してください（system-prompt.md の「質問」を参照）。デザインコンテキスト（UIキット / デザインシステム / コードベース / スクリーンショット / ブランド）、忠実度、探索すべきバリエーションを確認します。デザインコンテキストがまったくない場合は、ユーザーに提供を依頼してください — それなしで開始すると弱いデザインになります。
5. 出力フォルダを設定する。 保存場所（デフォルト designs/<説明的なプロジェクト名>/）と使用するデザインシステムを尋ねる — 利用可能なものは glob designs/*/_ds_manifest.json で発見し、提供する（複数選択：なし / 1つ / 複数）。プロジェクトフォルダを作成し、すべてのHTML成果物とコピーしたアセットをそこに書き込み、デザインファイルをリポジトリルートにばらまかないでください。選択したシステムごとに、agents/import-design-system.mjs で自己完結型コピーをインポート（→ _ds/<slug>/）、そのバインディングをプロジェクトの _d_meta.json に記録し、そのシステムのプロンプトを読み込み、拘束力のあるビジュアルスタイルとして従う（_ds/<slug>/_ds_prompt.md を読む）。作成中は、各UI成果物を agents/record-asset.mjs でアセットとしても記録する（これにより、デザインシステムを使用しないプロジェクトでも _d_meta.json がブートストラップされる） — 完全なフローは built-in-skills/use-design-system.md を参照。既存のプロジェクトを再開する場合？ プロジェクトフォルダがすでに存在する場合、まず _d_meta.json を読む：designSystems リストが含まれている場合は、デザインする前に各バインドされたシステムのプロンプトを読み込んで従う（各 _ds/<slug>/_ds_prompt.md を読む；使用するシステムを再確認しない）。
6. 構築、プレビュー、検証。 system-prompt.md に従って成果物を作成し、ユーザーに提示してHTTPでプレビュー（正確なツールはハーネスリファレンスドキュメントにあり）し、正常に読み込まれることを確認します。終了する前にエラーを修正してください。
注意事項
system-prompt.mdはクラフトの唯一の情報源です；references/<harness>.mdは呼び出すツールの唯一の情報源です。このファイルはエントリフローを調整するだけです。- 成果物は自己完結型に保ってください：参照するすべてのアセットをプロジェクトフォルダにコピーしてください。