mcpField
P
plan-design-review

plan-design-review

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

plan-design-review について

plan-design-reviewは、実装前のデザイン計画をレビューするgstackのスキルです。計画の完成度を評価し、7つの観点から不足を探すことで、チームの議論と計画の更新を支援します。

主な機能

  1. 01デザイン完成度のスコア
  2. 027つの観点による計画レビュー
  3. 03不足点の議論と計画の更新
  4. 04任意のビジュアルモックアップ
  5. 05任意の第三者デザイン意見

活用シーン

  1. 01コーディング前に製品計画をレビュー
  2. 02不足している操作状態を特定
  3. 03アクセシビリティとレスポンシブ対応の課題を議論
  4. 04計画用のモックアップを作成

インストール

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

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

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

同梱ファイルstub.yaml

詳細

plan-design-review

カタログの概要 — garrytan/gstack の一部（plan-design-review）

判定フロー

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

    • f=~/.claude/skills/gstack/plan-design-review/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 plan-design-review は失敗します。サブパス形式の npx skills add garrytan/gstack/plan-design-review ではツールを含まず、手順だけがインストールされます）。./setup では Bun が必要で、バイナリをビルドし、Chromium をダウンロードして、Claude の設定に Stop フックを登録します（./setup --no-timeline-stop-hook でオプトアウトできます）。実行する前にユーザーに確認してください。上流の README では、セットアップ後に gstack のセクションを CLAUDE.md に追加するようエージェントにも指示しています。

    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。任意：モックアップ用の gstack design バイナリと OpenAI API キー、外部のデザイン意見を得るための Codex CLI
  • ライセンス： MIT
  • ダウンロードサイズ： 約 98 MB。

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

  • スキル名：plan-design-review
  • 起動フレーズ：「plan design review」、「design plan review」、「review ux plan」、「check design decisions」、「AI slop detection」

機能

実際に稼働しているサイトではなく、計画をデザイナーの視点でレビューします。エージェントは計画のデザイン面での完成度を 0〜10 の尺度で評価し、10 点ならどのような状態かを説明したうえで、7 つの観点（情報アーキテクチャ、インタラクションの状態、ユーザージャーニーと感情の流れ、AI 生成の粗雑さのリスク、デザインシステムとの整合性、レスポンシブ対応とアクセシビリティ、未解決の決定事項）を順に確認します。それぞれの不足点についてユーザーに質問し、受け入れた決定事項を、コードを書く前に計画へ追加します。オプションで視覚的なモックアップをレンダリングし（gstack の design バイナリと OpenAI API キーが必要です）、外部の意見を求めて独立したデザイン評価を受けることもできます。

README に記載されている、知っておくべき gstack の動作：外部レビューはデフォルトで有効になっており、レビューのプロンプトと関連する計画またはコードが 2 つ目のモデルプロバイダー（自身のログインを使った Codex）に送信されます（gstack-config set codex_reviews disabled で無効にできます）。GitHub に対する更新確認はデフォルトで実行されます。使用状況のテレメトリーはオプトインで、一度だけ確認されます。

使用しない場合

  • 稼働中の UI をレビューまたは修正する場合 — design-review-garrytan を使用してください
  • デザインシステムを一から構築する場合 — design-consultation を使用してください
  • gstack のツール（Bun、バイナリ、Chromium、Stop フック）をインストールしたくない場合

コメント

Markdown 対応