スキル自身の言葉で
design-consultationスキルは、シニアプロダクトデザイナーとして機能し、完全な設計システムを作成する設計相談スキルです。Web検索とビジュアル分析によってプロダクトの状況を調査し、タイポグラフィ（デフォルトではなく具体的なフォント）、カラーシステム（16進値によるCSS変数）、レイアウトアプローチ（コンポジション優先）、美的方向性を提案します。このスキルは、プロジェクトの設計に関する信頼できる情報源としてDESIGN.mdファイルを生成し、任意でシステムが実際の画面に適用された様子を示すAIモックアップも生成します。
このスキルはAsideブラウザ（ユーザーの実際のセッション）とヘッドレスフォールバックの両方をサポートし、セッションをまたいで持続する好みのプロファイルを維持し、Codexおよびクロードサブエージェント（Claude subagent）からの外部のデザイン視点を統合します。このスキルは厳格なフォームとしてではなく対話形式で動作し、すべての推奨事項の根拠を説明し、個々の最適な選択よりも一貫性を優先します。
生成されるもの
- 設計システムが実際の画面に適用された様子を示すAIモックアップです（gstack designerが利用可能な場合）
- タイポグラフィとカラーのサンプルをその場で確認できるHTMLプレビューページです（designerが利用できない場合のフォールバック）
- セッションをまたいで承認・拒否された設計上の選択を追跡する、持続的な好みプロファイルのJSONです
仕組み
- 01プロダクトのコンテキストを収集する
既存のDESIGN.md、PRODUCT.md、README、package.json、およびoffice-hoursの出力を読み込み、プロダクトを理解します。
- 02状況をリサーチする
要求があれば、AsideブラウザまたはWebSearchを使って5〜10件の競合プロダクトを見つけ、フルページのスクリーンショットを取得し、フォント、カラー、レイアウト、美的方向性を分析します。
- 03外部の視点に相談する
任意で、CodexとClaudeサブエージェントを並行して起動し、独立した設計提案を生成します。
- 04完全な設計システムを提案する
具体的なフォント名、16進のカラー値、CSS変数、レイアウトアプローチ、美的方向性を含む、明確な意見を持った提案を提示します。
- 05プレビュー成果物を生成する
AIモックアップ（gstack designerが利用可能な場合）で実際の画面に適用されたデザインシステムを表示するか、タイポグラフィとカラーのサンプルをライブで確認できるHTMLプレビューページを作成します。
- 06DESIGN.mdを書く
フロントマターのトークンと根拠セクションを備えた、オープンなDESIGN.md形式でプロジェクトのデザインの信頼できる情報源を作成します。