跳到主要内容

Sketch（草图）

一次性 HTML 原型：2-3 个设计变体以供比较。

技能元数据​

来源捆绑（默认安装）
路径skills/creative/sketch
版本1.0.0
作者Hermes Agent（改编自 gsd-build/get-shit-done）
许可证MIT
平台linux, macos, windows
标签sketch, mockup, design, ui, prototype, html, variants, exploration, wireframe, comparison
相关技能spike, claude-design, popular-web-designs, excalidraw

参考：完整 SKILL.md​

信息

以下是 Hermes 在触发此技能时加载的完整技能定义。这是技能激活时代理所看到的指令。

Sketch（草图）

当用户希望在确定最终方案之前查看设计方向——即以一次性 HTML 原型的形式探索 UI/UX 想法时，使用此技能。其目的是生成 2-3 个交互式变体，以便用户可以并排比较视觉方向，而不是生成可交付的代码。

当用户说出类似“草绘这个屏幕”、“给我看看 X 可能是什么样子”、“比较布局 A 和 B”、“给我这个 UI 的 2-3 个方案”、“让我看看一些变体”、“在我构建之前先做个原型”等话语时，加载此技能。

何时不使用此技能​

  • 用户想要一个生产级组件 —— 使用 claude-design 或正确构建它
  • 用户想要一个精致的独立 HTML 制品（落地页、演示文稿）—— claude-design
  • 用户想要图表 —— excalidraw, architecture-diagram
  • 设计已锁定 —— 直接构建即可

如果用户安装了完整的 GSD 系统​

如果 gsd-sketch 作为兄弟技能出现（通过 npx get-shit-done-cc --hermes 安装），请优先使用 gsd-sketch 以获得完整的工作流：包含 MANIFEST 的持久化 .planning/sketches/、前沿模式分析、跨历史草图的一致性审计，以及与 GSD 其余部分的集成。此技能是轻量级的独立版本——无需状态机制的一次性草绘。

核心方法​

intake  →  variants  →  head-to-head  →  pick winner (or iterate)

1. 需求采集（如果用户已提供足够信息则跳过）​

在生成变体之前，获取以下三点信息——每次问一个问题，不要一次性全部询问：

  1. 感觉。 “这应该给人什么感觉？形容词、情绪、氛围。”——“平静、编辑风格、像 Linear”比“极简”能告诉你更多信息。
  2. 参考。 “哪些应用、网站或产品符合你想象的感觉？”——实际的参考胜过抽象的描述。
  3. 核心操作。 “用户在此屏幕上做的最重要的一件事是什么？”——所有变体都应很好地服务于这一目标；如果做不到，它们就只是装饰。

在提出下一个问题之前，简要复述每个答案。如果用户一开始就提供了所有三点信息，则直接进入变体生成阶段。

2. 变体（2-3 个，绝不只给 1 个，很少超过 4 个）​

一次性生成 2-3 个变体。每个变体都是一个完整的、独立的 HTML 文件。不要描述变体——要构建它们。重点在于比较。

每个变体应采取不同的设计立场，而不仅仅是不同的像素值。三个良好的变体轴心：

  • 密度： 紧凑 / 宽松 / 超密集（选择两个对比鲜明的极端）
  • 强调： 内容优先 / 操作优先 / 工具优先
  • 美学： 编辑风格 / 实用主义 / 趣味活泼
  • 布局： 单列 / 侧边栏 / 分屏
  • 基础形式： 卡片式 / 纯内容 / 文档风格

选择一个轴心并从中展开。如果两个变体仅在强调色上不同，那是浪费精力——用户无法区分它们。

变体命名： 描述其立场，而非编号。

sketches/
├── 001-calm-editorial/
│   ├── index.html
│   └── README.md
├── 001-utilitarian-dense/
│   ├── index.html
│   └── README.md
└── 001-playful-split/
    ├── index.html
    └── README.md

3. 制作真实的 HTML​

每个变体都是一个单一的自包含 HTML 文件：

  • 内联 <style> —— 无需构建步骤，无外部 CSS
  • 系统字体或通过 <link> 引入的一个 Google Font
  • 可以通过 CDN 使用 Tailwind (<script src="https://cdn.tailwindcss.com"></script>)
  • 逼真的虚构内容——真实的句子、真实的名字，而不是“Lorem ipsum”
  • 交互式：链接可点击，悬停效果真实，至少有一个状态转换（打开/关闭、过滤、切换）。冻结的静态图像比粗糙但带动画的图像更糟糕。

在浏览器中打开它。如果看起来有问题，在展示给用户之前修复它。

可视化验证变体——使用 Hermes 的浏览器工具。 不要只编写 HTML 然后希望它能正确渲染；加载每个变体并查看它：

browser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="Does this layout look clean and readable? Any visible bugs (overlapping text, unstyled elements, broken images)?")

browser_vision 返回页面上实际内容的 AI 描述以及截图路径——能够捕捉到纯源代码检查所遗漏的布局错误（例如静默失败的字体导入、折叠的 flex 容器）。修复并重新导航，直到每个变体看起来都正确为止。

用于快速开始的默认 CSS 重置 + 系统字体栈：

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  }
</style>

4. 变体 README​

每个变体的 README.md 需回答以下问题：

## Variant: {stance name}

### Design stance
One sentence on the principle driving this variant.

### Key choices
- Layout: ...
- Typography: ...
- Color: ...
- Interaction: ...

### Trade-offs
- Strong at: ...
- Weak at: ...

### Best for
- The kind of user or use case this variant actually serves

5. 直接对比​

在所有变体构建完成后，以对比形式展示它们。不要仅仅罗列——要给出观点：

## Three takes on the home screen

| Dimension | Calm editorial | Utilitarian dense | Playful split |
|-----------|----------------|-------------------|---------------|
| Density   | Low            | High              | Medium        |
| Primary action visibility | Low | High | Medium |
| Scan-ability | High | Medium | Low |
| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic |

**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither.

让用户选择一个胜出者，或将两个变体组合成混合方案，或要求进行下一轮迭代。

主题化（当项目具有视觉标识时）​

如果用户已有现有主题（颜色、字体、令牌），请将共享令牌放入 sketches/themes/tokens.css，并在每个变体中通过 @import 引入它们。保持令牌最小化：

/* sketches/themes/tokens.css */
:root {
  --color-bg: #fafafa;
  --color-fg: #1a1a1a;
  --color-accent: #0066ff;
  --color-muted: #666;
  --radius: 8px;
  --font-display: "Inter", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, sans-serif;
}

不要为一次性草图过度使用令牌——通常三种颜色和一种字体就足够了。

交互性基准​

当用户可以执行以下操作时，草图即具备足够的交互性：

  1. 点击主要操作并发生可见的变化（状态变更、模态框、提示消息、导航示意）
  2. 看到一个有意义的状态转换（过滤列表、切换模式、打开/关闭面板）
  3. 悬停在可识别的交互元素上（按钮、行、标签页）

超过此范围则属于对一次性草图的过度工程化；少于该范围则只是一张截图。

前沿模式（选择下一个要绘制的内容）​

如果已存在草图且用户询问“接下来我应该绘制什么？”：

  • 一致性缺口——来自不同草图的两个胜出变体做出了独立的选择，尚未整合在一起
  • 未绘制的屏幕——已被引用但从未探索过的界面
  • 状态覆盖——已绘制正常路径，但未覆盖空状态/加载状态/错误状态/大量数据（如 1000 条项目）状态
  • 响应式缺口——仅在一个视口下验证过；在移动端或超宽屏下是否依然成立？
  • 交互模式——存在静态布局，但缺少过渡动画、拖拽或滚动行为

提出 2-4 个命名的候选方案。让用户进行选择。

输出​

  • 在仓库根目录创建 sketches/（如果用户使用 GSD 约定，则为 .planning/sketches/）
  • 每个变体一个子目录：NNN-stance-name/index.html + README.md
  • 告知用户如何打开它们：macOS 上使用 open sketches/001-calm-editorial/index.html，Linux 上使用 xdg-open，Windows 上使用 start
  • 保持变体的一次性属性——如果你觉得需要保留某个草图，应将其提升为正式的项目代码，而不是作为资产进行归档

单个变体的典型工具序列：

terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "<!doctype html>...")
write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="How does this look? Any obvious layout issues?")

对每个变体重复上述步骤，然后展示对比表格。

归属​

改编自 GSD (Get Shit Done) 项目的 /gsd-sketch 工作流 — MIT © 2025 Lex Christopherson (gsd-build/get-shit-done)。完整的 GSD 系统提供持久化的草图状态、主题/变体模式参考以及一致性审计工作流；可通过 npx get-shit-done-cc --hermes --global 安装。