98.8K+ダウンロード
使い方ガイドへスキップ
design-shotgun作者 Garry Tan

Design Shotgun スキル。

UI デザインのための Claude Code と Codex スキル：複数のデザインバリアントを並行して生成し、フィードバック用の比較ボードを開きます。

  • Web & UI
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
garrytan/gstack · design-shotgun/SKILL.mdSKILL.md
--- name: design-shotgun description: Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
2026年9月14日にアップストリームファイルから読み込まれた前付けとセクション見出し · 全52,851文字

01 できること

Claude CodeとCodexでdesign-shotgunスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

design-shotgunは、複数のAIデザインバリアントを並行して生成し、HTTP経由で提供される比較ボードに並べて表示し、構造化されたフィードバックを収集するビジュアルデザイン探索ツールです。永続的なテイストプロファイル（フォント、カラー、レイアウト、美観）を通じてセッションを超えてユーザーの好みを記憶し、実証済みの好みに基づいて新しい生成を偏らせます。

このスキルはアンチコンバージェンス（すべてのバリアントが異なるフォント、パレット、レイアウトを使用する必要があること）を強制し、セッションをまたいだ永続化のためにすべての成果物を~/.gstack/projects/$SLUG/designs/に保存します。新規の探索と過去のセッションへの再訪の両方に対応し、再生成、バリアント間での要素のリミックス、ユーザーが方向性を承認するまでの反復のためのフィードバックループを備えています。

生成されるもの

  • ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.pngに保存されたN個のバリアントPNG
  • ランダムなポートでHTTP経由で提供され、フィードバック収集UIを備えたHTML比較ボード（design-board.html）
  • 好みのバリアント、評価、コメント、日付を記録するapproved.jsonファイル。セッションをまたいだテイスト学習に使用されます
  • 次元ごとに信頼度で重み付けされた承認/拒否パターンを含む、更新済みのtaste-profile.json（スキーマv1）
プロンプト例を見る ↗

仕組み

  1. 01
    セッション検出とテイストの復元

    ~/.gstack/projects/$SLUG/designs/内で過去のセッションのapproved.jsonファイルを確認し、永続的なtaste-profile.json（週5%の信頼度減衰を持つスキーマv1）を読み込みます。

  2. 02
    アンチコンバージェンスを伴う並行バリアント生成

    並行実行のために、N個のエージェントサブエージェント（バリアントごとに1つ）を1つのメッセージで起動します。

  3. 03
    フィードバックループを備えたHTTP比較ボード

    $D compare --serveを実行してHTMLボードを生成し、ランダムなポートでHTTPサーバーを起動します。

  4. 04
    フィードバックの確認とテイストの更新

    好みのバリアント、評価、コメントを要約し、保存前にAskUserQuestionで確認します。

02 適合性を確認

design-shotgun Skillを使用するタイミング

この種の UI デザインの場合は、Claude Code または Codex で design-shotgun skill を使用してください。以下の適合性と制限は、skill 自体のファイルから取得されています。

適している場合

  • 開発中いつでも実行できる、ユーザーがまだ見ていないUI機能の記述に対するスタンドアロンのデザイン探索
  • ユーザーが「この見た目が気に入らない」と言い、既存ページの別の方向性を見たいときのビジュアルブレインストーミング
  • 同じ画面について選択を調整したり新しいバリアントを検討したりするために、以前のデザイン探索を再検討すること

境界を知る

  • 本番用のHTML/CSS実装を最終化すること（方向性を承認した後は/design-htmlを使用してください）
  • 比較を行わない単一バリアント生成（このスキルは並行して複数のバリアントを生成し、並べて比較します）

提供すべきもの

  • evolveパス用のスクリーンショットURLユーザーが「これが気に入らない」と言った場合、URLを尋ねてください。
  • バリアント数（デフォルト3、最大8）コンテキスト収集のAskUserQuestionで確認します。重要な画面ではバリアントを増やしてください。

03 スキルの内部

design-shotgunスキルがClaude CodeとCodexに与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. すべての成果物を~/.gstack/projects/$SLUG/designs/へ

    デザインモックアップ、比較ボード、approved.jsonは必ず~/.gstack/projects/$SLUG/designs/に保存してください。.context/、docs/designs/、/tmp/、プロジェクトローカルディレクトリには保存しないでください。

  2. テイストメモリーがデフォルトの生成にバイアスをかけます

    taste-profile.json（信頼度が週5%減衰するスキーマv1）を読み込み、各ディメンション（フォント、色、レイアウト、美観）ごとに承認/拒否された上位3件をまとめます。

  3. サンドボックス制限のため、まず/tmp/に生成してからコピーします

    常にPNGをまず/tmp/variant-{letter}.pngに生成し、その後最終的な~/.gstack/projects/$SLUG/designs/の場所にcpしてください。

  4. コンテキスト収集は最大2ラウンドまで

    DESIGN.md、PRODUCT.md、コードベースから推測した内容を事前に入力してください。不足しているコンテキストは1回のAskUserQuestionで尋ねてください。

  5. 保存前にフィードバックを確認

    フィードバックを受け取った後（HTTP POSTまたはAskUserQuestionフォールバック経由）、好みのバリアント、評価、コメント、方向性を含む要約を出力してください。

  6. DESIGN.mdがデフォルトの制約です

    DESIGN.mdが存在する場合、デフォルトでプロジェクトのデザインシステムに従ってください。

  7. 比較ボードが選択者であり、AskUserQuestionではありません

    ユーザーがどのバリアントを好むかを尋ねるのにAskUserQuestionを使用しないでください。比較ボードのUIが選択者です。

04 実際に使う

Claude CodeまたはCodexにdesign-shotgunをインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codexまたはあなたのエージェントにdesign-shotgunを追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-shotgun

design-shotgun/SKILL.md用の汎用skills CLI形式です。リポジトリは独自のパスを文書化している場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Explore design directions for the [dashboard homepage] where [enterprise SaaS users] land after login. I want to see 4 variants — one minimal/data-dense for power users, one with more guidance for first-timers, one that emphasizes recent activity, and one optimized for mobile-first. The existing dashboard in src/app/dashboard/ feels cluttered and users complain they can't find the export button. Edge cases: zero data state, 50+ recent items, and users who only use mobile.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • ボードが開く前に、ユーザーがターミナルで一度にすべてのバリアントを見られるように、生成された各PNGをインラインで読み込みます
  • 比較ボードが稼働していることを確認し、stderr出力からボードURLを解析します（BOARD_URL: http://127.0.0.1:N/boards/<id>/）
  • デザインディレクトリ内のフィードバックファイル（SubmitはfeedbackJSON、Regenerate/Remixはfeedback-pending.json）を確認します
  • $D check --image <path> --brief <brief> を使用して生成された各バリアントの品質チェックを実行します。チェックに失敗した場合は一度だけ再生成します

OpenDesignではdesign-shotgunをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link、その後上部バーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Garry Tan
Repository
github.com/garrytan/gstack ブランチ main
スキルファイル
design-shotgun/SKILL.md 検証時にコンテンツチェックサムを記録、コミット 71f6048
License
MIT LICENSE より。
リポジトリスター数
132,921 GitHub スナップショットは 2026-09-14 に garrytan/gstack リポジトリ全体から取得されました。このリポジトリにはこのカタログに掲載された 7 つのスキルが含まれています。design-shotgun の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. このスキルを呼び出すタイミングUI機能のための単独のデザイン探索、ビジュアルブレインストーミング、「見た目が気に入らない」場合
  2. 前置き（最初に実行）gstack-skill-startを実行し、STATUS行を読み取り、劣化モード、指示ブロック、セッション検出を処理します
  3. プランモードでの安全な操作プランモードで許可される操作：$B、$D、codex exec/review、~/.gstack/への書き込み、プランファイル、成果物用のopen
  4. プランモード中のスキル呼び出しスキルの指示は実行可能であり参考情報ではありません。AskUserQuestionはターン終了要件を満たします。ワークフロー完了後にExitPlanModeを実行します
  5. AskUserQuestionの形式ツールの解決はSESSION_KIND/CONDUCTOR_SESSIONで分岐します。呼び出しが利用不可または失敗した場合はプロースにフォールバックします。確認は必須の三点セットです
  6. 成果物の同期（スキル開始時）スキル開始出力は既に同期を実行済みです。GBrainのヒント、ARTIFACTS_SYNC行、一度限りの同意ゲートに基づいて対応してください
  7. モデル固有の振る舞いパッチ（claude）Todoリストの規律、重い操作の前に考えること、Bashより専用ツールを優先すること
  8. ボイスGStackのボイス：具体的で、ビルダー同士の対話のように、結論を先に、選択をユーザーの成果に結びつけ、締めは限定的に
  9. コンテキストの復元セッション開始時／コンパクション時：最近の成果物、決定事項、チェックポイント、タイムラインを復元します。RECENT_PATTERNが示す場合は次のスキルを提案します
  10. 文章スタイル専門用語は初出時に解説し、成果を軸に構成し、短い文で。EXPLAIN_LEVEL: terse、またはユーザーが簡潔さを求める場合はスキップします
  11. 網羅性の原則 — Boil the OceanAI によって網羅性のコストは低くなるため、フルカバレッジを推奨します。選択肢間でカバレッジが異なる場合は Completeness: X/10 を示します
  12. 混乱時のプロトコルリスクの高い曖昧さに対しては、STOPし、それを明示し、トレードオフを伴う2〜3の選択肢を提示して確認します
スキル自身による説明
「デザインショットガン：複数の AI デザインバリエーションを生成し、比較ボードを開き、構造化されたフィードバックを収集し、反復します。(gstack)」

SKILL.md からのフロントマター説明。完全なファイルは約 52,851 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

design-shotgunスキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルがバリアントを生成するために必要なもの（依存関係、APIキー、ローカルツール）は何ですか？

このスキルには~/.claude/skills/gstack/design/dist/designにあるdesignバイナリが必要です（DESIGN SETUPステップで確認済み）。このバイナリが画像生成と品質チェックを処理します。利用できない場合、このスキルはHTMLワイヤーフレームにフォールバックします。

比較ボードはランダムなポートでローカルHTTPサーバーを実行します（外部依存はありません）。テイストメモリとapproved.jsonファイルは~/.gstack/projects/$SLUG/designs/にローカル保存されます。

Design Shotgun

実際の UI デザインタスクで design-shotgun を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから design-shotgun をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を読んでください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/garrytan/gstack --skill design-shotgun

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応