shape

必須の事前準備

デザイン原則、アンチパターン、およびコンテキスト収集プロトコルを含む /impeccable を実行してください。先に進む前に、プロトコルに従ってください。デザインのコンテキストがまだない場合は、まず /impeccable teach を実行する必要があります。

---

コードを書く前に、機能の UX と UI を設計します。このスキルでは、推測ではなく発見を通じて実装を導く、構造化された成果物であるデザインブリーフを作成します。

対象範囲：設計計画のみ。このスキルではコードは作成しません。コードの品質を高めるための検討事項をまとめます。

出力：/impeccable craft、/impeccable、またはその他の実装スキルに引き継げるデザインブリーフ。

基本方針

AI が生成する UI の大半は、コードの品質が低いからではなく、検討を省いているために失敗します。「ユーザーは何を達成しようとしているのか？」と尋ねずに、「カードを並べたグリッドにしよう」とすぐに決めてしまうのです。このスキルではその流れを逆転させ、まず深く理解することで、実装を正確にします。

フェーズ 1：発見のためのヒアリング

このフェーズでは、コードを書いたり、デザイン上の決定を下したりしないでください。 ここでの唯一の目的は、後で優れたデザイン上の決定を下せるよう、機能について十分に深く理解することです。

回答に合わせて質問を調整しながら、会話の中で質問してください。すべてを一度に並べ立てず、自然な対話にしてください。推測できない点は、ユーザーに直接尋ねて明確にしてください。

目的とコンテキスト

• この機能は何のためのものですか？どのような問題を解決しますか？
• 具体的に誰が使いますか？（「ユーザー」ではなく、役割、利用状況、頻度を具体的にしてください）
• どのような状態になれば成功ですか？この機能が役立っていることを、どうすれば確認できますか？
• ユーザーがこの機能にたどり着いたとき、どのような心理状態ですか？（急いでいる？探索中？不安を感じている？集中している？）

コンテンツとデータ

• この機能では、どのようなコンテンツやデータを表示または収集しますか？
• 現実的な範囲はどのくらいですか？（最小、通常、最大。例：項目が 0 件、5 件、500 件）
• どのようなエッジケースがありますか？（空の状態、エラー状態、初回利用、ヘビーユーザー）
• コンテンツは動的ですか？何が、どのくらいの頻度で変化しますか？

デザイン目標

• ユーザーがここで行う、または理解するべき最も重要なことは何ですか？
• どのような印象にすべきですか？（速く効率的？落ち着きがあり信頼できる？楽しく遊び心がある？高級感があり洗練されている？）
• この機能が既存のプロダクト内のパターンと一貫しているべきですか？
• 目指す方向性を示す、プロダクト内外の具体例はありますか？

制約

• 技術的な制約はありますか？（フレームワーク、パフォーマンス予算、ブラウザーのサポート）
• コンテンツ上の制約はありますか？（ローカライズ、動的テキストの長さ、ユーザー生成コンテンツ）
• モバイルやレスポンシブ対応の要件はありますか？
• WCAG AA を超えるアクセシビリティ要件はありますか？

避けるべき目標

• これはどのようなものにすべきではありませんか？間違った方向性とは何ですか？
• これを誤った場合、最大のリスクは何ですか？

フェーズ 2：デザインブリーフ

ヒアリングの後、得られた情報を構造化されたデザインブリーフにまとめます。このスキルを完了とする前に、ユーザーに提示して確認を求めてください。

ブリーフの構成

1. 機能の概要（2～3文） これは何か、誰を対象としているのか、何を実現する必要があるのかを説明します。

2. ユーザーの主なアクション ここでユーザーが行う、または理解するべき最も重要なことを1つ示します。

3. デザインの方向性 どのような印象にするか、どのような美的アプローチが適しているかを説明します。.impeccable.mdに記載されたプロジェクトのデザインコンテキストを参照し、この機能でどのように表現するかを説明します。

4. レイアウト戦略 何を強調し、何を補足情報として扱い、情報をどのように流すかなど、空間的なアプローチを大まかに説明します。特定のCSSではなく、視覚的な階層とリズムについて説明してください。

5. 主な状態 この機能に必要なすべての状態を列挙します。デフォルト、空、読み込み中、エラー、成功、エッジケースを含めてください。それぞれについて、ユーザーが何を見て、どう感じる必要があるかを記します。

6. インタラクションモデル ユーザーがこの機能をどのように操作するかを説明します。クリック、ホバー、スクロール時に何が起きるか、どのようなフィードバックが得られるか、開始から完了までの流れを示します。

7. コンテンツ要件 必要なコピー、ラベル、空の状態のメッセージ、エラーメッセージ、マイクロコピーを記します。動的コンテンツとその現実的な範囲にも触れてください。

8. 推奨する参考資料 ブリーフに基づいて、実装時に特に役立つimpeccableの参考ファイルを列挙します（例：複雑なレイアウトにはspatial-design.md、アニメーション機能にはmotion-design.md、フォーム中心の機能にはinteraction-design.md）。

9. 未解決の質問 実装担当者が開発中に解決すべき未確定事項を記します。

---

推測できない点については、ユーザーに直接質問して明確にしてください。完了する前に、ブリーフの内容について明示的な確認を得てください。ユーザーが内容のいずれかに同意しない場合は、該当するヒアリングの質問を見直してください。

確認が取れたら、ブリーフは完成です。ユーザーはこれを/impeccableに渡すか、ほかの実装アプローチの指針として使用できます。ヒアリングから実装までを一度に進めたい場合は、このスキルを内部で実行する/impeccable craftを使用してください。