design-consultation

design-consultation の概要

design-consultation は、ラフなプロダクトアイデアを完成度の高いデザイン方針へとまとめるための design-consultation skill です。システムレベルの美観、タイポグラフィ、色、余白、レイアウト、モーション、そして DESIGN.md というソース・オブ・トゥルースまで扱います。新規プロダクト、新しい UI 面、あるいは場当たり的な見た目調整の指示ではなく、一貫した出発点が必要なチームに特に向いています。

何に最も向いているか

デザインシステムの判断が必要なときに design-consultation を使ってください。単なるページモックアップではなく、設計の方向性そのものを決めたい場合に適しています。特に、まだ確立したビジュアル言語がない新しいインターフェースに取り組む創業者、プロダクトビルダー、エージェントに有効です。

向いているケースと向いていないケース

リポジトリの文脈を踏まえたデザイン提案とプレビュー成果物が欲しいなら、この skill はかなり相性が良いです。一方で、すでに確立したデザインシステムを持つ既存サイトに最初に持ち込む方法としては適していません。この skill 自体も、そうしたケースでは /plan-design-review を使うよう案内しています。

汎用プロンプトと何が違うのか

design-consultation の価値は、ワークフローに対して明確な方針を持っている点にあります。プロジェクトの文脈を参照し、デザインのソース・オブ・トゥルースを作り、プレビューページまで生成できます。そのため、単発の「もっと見栄えを良くして」という指示よりも、実行に移しやすい結果が得られます。

design-consultation skill の使い方

skill を正しくインストールする

gstack の流れに沿って design-consultation install を使います。通常は次のコマンドです。
npx skills add garrytan/gstack --skill design-consultation

インストール後は、skill フォルダが存在することと、エージェントが SKILL.md を参照できることを確認してください。このページが重要なのは、この skill が frontmatter のトリガーと preamble の挙動に依存しているためです。

最初に入れるべき入力をそろえる

design-consultation usage を最大化するには、プロダクト概要、対象ユーザー、そしてデザインシステムに関わる制約を伝えてください。たとえば、既存ブランドカラー、アクセシビリティ目標、トーン、プラットフォーム、新規開発かリデザインか、などです。「アプリをデザインして」とだけ伝えると、どうしても一般的な出力になります。

入力例としては次のようなものが有効です。

• 「金融チーム向けの B2B 分析ダッシュボードのデザインシステムを作ってください。精密で信頼感のあるトーンにし、高コントラストで情報密度は高めに。既存ブランドはありません。DESIGN.md とプレビューページが必要です。」

振る舞いを左右するファイルを読む

実務的な design-consultation guide としては、まず SKILL.md を読み、その次に SKILL.md.tmpl を確認してください。テンプレートを見ると、この skill がどのように生成され、どの部分を再利用する前提なのかが分かります。新しいシステムを依頼する前に、リポジトリ内に既存の DESIGN.md があれば必ず目を通してください。既存の判断があれば、適切な提案は変わるからです。

文脈を保つワークフローで進める

最も安定する流れは、まずプロダクトの目的を伝え、次にデザインシステムの判断を依頼し、そのうえで生成された DESIGN.md とプレビュー出力を求める、という順番です。リポジトリに既存のデザインメモがあるなら、最初から共有してください。そうしないと、skill が矛盾する選択肢を勝手に作ってしまうことがあります。design-consultation for Design Systems では、見た目の好みを足すことより、システムの境界条件を明示することが品質向上につながります。

design-consultation skill の FAQ

これは新規プロダクト専用ですか？

基本的にははいです。design-consultation が最も強いのは、システムをゼロから定義したいときです。既存サイトでは、新しい土台を古い判断の上に無理やり重ねるより、skill 自体の案内どおり plan ベースのデザインレビューを使うほうが適しています。

使うのにデザインの専門知識は必要ですか？

いいえ。曖昧な目的を構造化されたデザイン方針に変換してくれるので、初心者にも有用です。もちろん文脈は必要ですが、タイポグラフィのスケールや余白システムを事前に理解している必要はありません。

AI に直接プロンプトするのと何が違いますか？

直接のプロンプトでも見栄えのよい案は返ってくるかもしれませんが、整合性が欠けることがあります。design-consultation skill は、再現性のあるプロセス、リポジトリを踏まえた文脈、そして他のエージェントも再利用できるデザインのソース・オブ・トゥルースが欲しい場合に向いています。

導入を妨げる典型的な要因は何ですか？

主な要因は入力不足です。対象ユーザー、プロダクトの種類、アクセシビリティ要件、既存の DESIGN.md があるかどうかを省くと、skill は不足分を補おうとして、一般的なデザイン助言に寄ってしまうことがあります。

design-consultation skill を改善する方法

抽象的な形容詞を増やすより、制約をはっきり伝える

design-consultation usage を改善するには、システムを形作るビジネス上・インタラクション上の制約を具体的に伝えてください。「モダンでエレガント」よりも、「高密度な管理画面、データ量が多い、素早い把握が必要」のほうが有効です。具体的な制約があれば、色、余白、階層の判断も良くなります。

適切なソース資料を共有する

リポジトリにプロダクトブリーフ、既存のデザインメモ、スクリーンショットがあるなら、出力を依頼する前に渡してください。何もない状態で設計するより、既存の内容と新しい方向性を突き合わせられるときのほうが、この skill は最も効果を発揮します。

曖昧さを減らす成果物を依頼する

最適な design-consultation guide の依頼は、単に「デザインシステムを作って」ではありません。実装に必要な判断をまとめて求めてください。たとえば DESIGN.md、タイポグラフィのスケール、カラー・トークン、モーションルール、プレビューページです。そうすると、結果を実装しやすく、レビューもしやすくなります。

1回目の出力をもとに調整する

最初の回答で、トーン、アクセシビリティ、密度、コンポーネントの印象にズレがないか確認してください。そのうえで、「コントラストを上げる」「もっと落ち着いた雰囲気にする」「余白を減らす」「エンタープライズ向けダッシュボードにより適した方向へ寄せる」といった具体的な修正で詰めるほうが、最初からやり直すより効果的なことが多いです。