mcpField
D
design-consultation

design-consultation

github.com/podoデザイン・UI30171 回インストール4 日前に更新
リポジトリ

design-consultation について

design-consultationは、Garry Tanの手法に基づき、デザインシステムを一から構築するための体系的なプロセスです。初期段階のプロダクトチームが、ビジュアル言語、余白、タイポグラフィ、カラートークン、コンポーネントを整える際に役立ちます。

主な機能

  1. 01ビジュアル言語の確立
  2. 02余白とタイポグラフィ体系の定義
  3. 03カラートークンの設定
  4. 04コンポーネントライブラリの構築
  5. 05体系的な相談プロセス

活用シーン

  1. 01初期段階のプロダクト向けデザインシステムの作成
  2. 02基盤となるデザイントークンとコンポーネントの策定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill design-consultation

インストール後、Claude Code で/design-consultationを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

design-consultation

カタログ用スタブ — garrytan/gstack の一部（design-consultation）

判断ツリー

  1. スキル全体はすでにインストールされていますか？

    • f=~/.claude/skills/gstack/design-consultation/SKILL.md; [ -e "$f" ] && ! grep -qs "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 呼び出して続行します
    • pointer → 手順 2 に進みます

  2. インストール（skills CLI ではこのスキルをインストールできません）

    このスキルは gstack の一部であり、gstack の共有ツール（~/.claude/skills/gstack/bin/…）を呼び出すため、単一のスキルではなく gstack 自体をインストールしてください（CLI は gstack のルートルーターしか認識しないため、--skill design-consultation は失敗します。また、--full-depth を指定しても、コピーされた手順にはツールが含まれません）。./setup の実行には Bun が必要で、バイナリをビルドし、Chromium をダウンロードして、Claude の設定に Stop フックを登録します（./setup --no-timeline-stop-hook で無効にできます）。実行前にユーザーに確認してください。上流の README では、セットアップ後に CLAUDE.md に gstack セクションを追加するようエージェントにも指示しています。

    git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack && ./setup

ご注意

  • 必要なもの： Bun（セットアップでは 1.3.3 より古いバージョンは拒否されます。上流では 1.4.2 以降でテストされています）、Git、Claude Code
  • ライセンス： MIT
  • ダウンロードサイズ： 約 98 MB

インストール後の呼び出し

  • スキル名：design-consultation
  • トリガーフレーズ：「design consultation」、「design system from scratch」、「build design system」

機能

Garry Tan（Y Combinator の社長）による、ゼロから完全なデザインシステムを構築するアプローチです。体系的なコンサルテーションプロセスを通じて、ビジュアルランゲージ、スペーシングスケール、タイポグラフィシステム、カラートークン、コンポーネントライブラリを確立します。初期段階のプロダクトに適した、明確な意見に基づく体系的で実践的な手法です。

コメント

Markdown 対応