跳转到使用指南
design-shotgun作者 Garry Tan

Design Shotgun Skill.

一个用于 UI 设计的 Claude Code 和 Codex skill:并行生成多个设计变体,并打开对比面板以收集反馈。

  • Web & UI
  • UI 代码
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-09-14 的上游文件读取的前言和章节标题 · 完整 52,851 字符

01 功能说明

design-shotgun Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

design-shotgun 是一款可视化设计探索工具,能并行生成多个 AI 设计变体,将它们在通过 HTTP 提供的对比看板中并排展示,并收集结构化反馈。它通过持久化的 taste profile(字体、颜色、布局、美学风格)在多个会话之间记住用户的偏好,并让新生成的方案偏向已验证的偏好。

该 skill 强制执行反趋同规则(每个变体必须使用不同的字体、配色方案和布局),并将所有产物保存到 ~/.gstack/projects/$SLUG/designs/ 以实现跨会话持久化。它同时支持全新探索和重访之前的会话,并具备反馈循环,可用于重新生成、跨变体混搭元素,以及持续迭代直到用户认可某个方向。

它产出什么

  • N 个变体的 PNG 文件保存至 ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
  • 通过 HTTP 在随机端口上提供的 HTML 对比看板,带有反馈收集 UI(design-board.html)
  • approved.json 文件,记录首选变体、评分、评论及日期,用于跨会话的品味学习
  • 更新后的 taste-profile.json(schema v1),按维度记录带置信度权重的已认可/已拒绝模式
查看示例提示词 ↗

工作方式

  1. 01
    会话检测与品味恢复

    检查 ~/.gstack/projects/$SLUG/designs/ 中来自先前会话的 approved.json 文件,并读取持久化的 taste-profile.json(schema v1,置信度每周衰减 5%)。

  2. 02
    具备反趋同机制的并行变体生成

    在单条消息中启动 N 个 Agent 子代理(每个变体一个),以实现并发执行。

  3. 03
    带反馈循环的 HTTP 对比看板

    运行 $D compare --serve 以生成 HTML 看板,并在随机端口上启动 HTTP 服务器。

  4. 04
    反馈确认与品味更新

    汇总首选变体、评分和评论;在保存前通过 AskUserQuestion 进行确认。

02 找到适合场景

何时使用 design-shotgun Skill

在 Claude Code 或 Codex 中使用 design-shotgun skill 处理此类 UI 设计工作。下面的适用场景和限制取自该 skill 自己的文件。

适合场景

  • 在开发过程中的任意时间点,针对用户描述但尚未见过的任何 UI 功能,进行独立的设计探索
  • 当用户说“我不喜欢现在的样子”时,为现有页面做视觉头脑风暴,展示替代方向
  • 重新审视之前的设计探索,调整选择或为同一屏幕探索新的变体

了解边界

  • 定稿可用于生产的 HTML/CSS 实现(确认方向后请使用 /design-html)
  • 不进行对比的单一变体生成(该 skill 会并行生成多个变体以便并排比较)

需要提供的信息

  • 演进路径的截图 URL如果用户说“我不喜欢这个”,请询问其 URL。
  • 变体数量(默认 3 个,最多 8 个)在上下文收集的 AskUserQuestion 中询问。重要屏幕可使用更多变体。

03 Skill 内部

design-shotgun Skill 给 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 所有产物均存放至 ~/.gstack/projects/$SLUG/designs/

    设计稿、对比板和 approved.json 必须保存到 ~/.gstack/projects/$SLUG/designs/,绝不能保存到 .context/、docs/designs/、/tmp/ 或项目本地目录中。

  2. 审美记忆默认会使生成产生偏向

    读取 taste-profile.json(schema v1,置信度每周衰减 5%),并按维度(字体、颜色、布局、美学)汇总每个维度排名前三的通过/拒绝条目。

  3. 因沙箱限制,先生成到 /tmp/ 再复制

    始终先将 PNG 生成到 /tmp/variant-{letter}.png,然后再 cp 到最终的 ~/.gstack/projects/$SLUG/designs/ 位置。

  4. 上下文收集最多两轮

    预先填充从 DESIGN.md、PRODUCT.md 和代码库中推断出的信息。在一次 AskUserQuestion 中询问缺失的上下文。

  5. 保存前先确认反馈

    收到反馈后(通过 HTTP POST 或 AskUserQuestion 回退方式),输出包含首选变体、评分、评论和方向的摘要。

  6. DESIGN.md 是默认约束

    如果 DESIGN.md 存在,默认遵循该项目的设计系统。

  7. 对比板是选择器,而不是 AskUserQuestion

    不要使用 AskUserQuestion 询问用户偏好哪个变体。对比板 UI 才是选择器。

04 投入使用

在 Claude Code 或 Codex 中安装 design-shotgun

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 design-shotgun 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

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

针对 design-shotgun/SKILL.md 的通用 skills CLI 形式;该仓库可能会记录自己的路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

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 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 依次内联读取每张生成的 PNG,让用户在终端中先一次性看到所有变体,然后再打开对比板
  • 验证 comparison board 是否在运行,并从 stderr 输出中解析 board URL(BOARD_URL: http://127.0.0.1:N/boards/<id>/)
  • 检查设计目录中的反馈文件(feedback.json 用于 Submit,feedback-pending.json 用于 Regenerate/Remix)
  • 对每个生成的变体使用 $D check --image <path> --brief <brief> 运行质量检查;如果检查失败,重试生成一次

在 OpenDesign 中从其 SKILL.md 链接导入 design-shotgun:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Garry Tan
Repository
github.com/garrytan/gstack 分支 main
Skill 文件
design-shotgun/SKILL.md 验证时记录的内容校验和;commit 71f6048
License
MIT 来自 LICENSE。
仓库星标数
132,921 GitHub 快照拍摄于 2026-09-14,针对整个 garrytan/gstack 仓库,该仓库在本目录中包含 7 个 skill。这不是 design-shotgun 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 何时调用此 skill针对 UI 功能的独立设计探索、视觉头脑风暴、「我不喜欢现在的样子」
  2. 前言(先运行)运行 gstack-skill-start,读取 STATUS 行,处理降级模式、指令块、session 检测
  3. Plan Mode 下的安全操作在 plan mode 中允许:$B、$D、codex exec/review,写入 ~/.gstack/、plan 文件,为产物打开
  4. Plan Mode 期间的 Skill 调用Skill 指令是可执行的,而非参考资料;AskUserQuestion 满足回合结束条件;工作流完成后执行 ExitPlanMode
  5. AskUserQuestion 格式工具解析依据 SESSION_KIND/CONDUCTOR_SESSION 分支;调用不可用/失败时使用文字回退;强制性确认三元组
  6. 产物同步(skill 启动时)Skill 启动输出已运行同步;根据 GBrain 提示、ARTIFACTS_SYNC 行、一次性同意机制执行操作
  7. 特定模型行为补丁(claude)待办清单纪律,重操作前先思考,优先使用专用工具而非 Bash
  8. 语气GStack 语气:具体、建造者对建造者、先给出重点、将选择与用户结果关联、结尾有边界
  9. 上下文恢复在 session 开始/压缩时:恢复最近的产物、决策、检查点、时间线;如 RECENT_PATTERN 暗示某个 skill,则建议使用
  10. 写作风格首次出现的术语加注释、以结果为导向的表述、短句;如果 EXPLAIN_LEVEL 为 terse 或用户要求简洁,则跳过
  11. 完整性原则——涸泽而渔AI 让完整覆盖变得低成本;建议全面覆盖;当各选项覆盖范围不同时,标注完整性:X/10
  12. 困惑处理协议面对高风险歧义时,停下来,明确指出问题,提出 2-3 个带权衡的选项,然后询问
Skill 自身的描述
"Design shotgun:生成多个 AI 设计变体,打开对比面板,收集结构化反馈并迭代。(gstack)"

来自 SKILL.md 的 front-matter 描述。完整文件约 52,851 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-shotgun Skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

该 skill 需要哪些资源才能生成变体(依赖项、API 密钥、本地工具)?

该 skill 需要 ~/.claude/skills/gstack/design/dist/design 中的 design 二进制文件(在 DESIGN SETUP 步骤中检查)。该二进制文件负责图像生成和质量检查。如果不可用,该 skill 会回退到 HTML 线框图。

comparison board 在随机端口上运行本地 HTTP 服务器(无外部依赖)。Taste memory 和 approved.json 文件本地存储在 ~/.gstack/projects/$SLUG/designs/ 中。

Design Shotgun

在真实的 UI 设计任务上运行 design-shotgun。

下载 OpenDesign,从 SKILL.md 链接导入 design-shotgun,粘贴上面的提示词,在结果之前先阅读计划。

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

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows