{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}

Sketch

一次性 HTML 草图：2-3 个设计变体对比。

Skill 元数据

参考：完整 SKILL.md

Sketch

当用户想在敲定一个方向之前先看看设计方向——把一个 UI/UX 想法探索为可丢弃的 HTML 草图——时用本 skill。重点是生成 2-3 个可交互变体，让用户并排对比视觉方向，而不是产出可上线代码。

当用户说类似"sketch this screen"、"show me what X could look like"、"compare layout A vs B"、"give me 2-3 takes on this UI"、"let me see some variants"、"mockup this before I build" 时加载本 skill。

不要用本 skill 的时候

• 用户要生产级组件——用 claude-design 或正经构建
• 用户要打磨好的一次性 HTML 产物（落地页、deck）——claude-design
• 用户要图——excalidraw、architecture-diagram
• 设计已经锁定——直接构建

若用户装了完整 GSD 系统

若 gsd-sketch 作为兄弟 skill 出现（通过 npx get-shit-done-cc --hermes 安装），你可以用 gsd-sketch 走更完整的工作流：持久化 .planning/sketches/ 带 MANIFEST、frontier 模式分析、跨历史草图的一致性审计，以及与 GSD 其余部分的集成。本 skill 是轻量独立版——不带状态机器的一次性草图。

注意： 上游 GSD 项目（gsd-build/get-shit-done）在 GitHub 上已归档/不再维护。npm 包（get-shit-done-cc）仍能装，但当作归档的社区项目——本独立 sketch skill 是受维护的路径，无需额外东西。

核心方法

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

1. Intake（用户已给够则跳过）

生成变体前，先拿到三样东西——一次一个问题，不要一次全问：

1. 感觉。 "这应该是什么感觉？形容词、情绪、一种氛围。"——"calm, editorial, like Linear" 比 "minimal" 告诉你更多。
2. 参考。 "哪些 app、网站或产品抓住了你想象的感觉？"——真实参考胜过抽象描述。
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"
• 可交互：链接可点、悬停真实、至少一个状态转换（开/关、过滤、切换）。一张冻结静态图比一个潦草动画的 spike 还差。

在浏览器里打开。看着坏就修好再给用户看。

视觉验证变体——用 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 描述加截图路径——能抓到纯源码检视漏掉的布局 bug（例如悄悄失败的字体导入、塌掉的 flex 容器）。修好并重新导航，直到每个变体看着对。

默认 CSS reset + 系统字体栈，快速起步：

<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.

让用户选赢家，或把两个合成一个混合，或要求再来一轮。

主题（项目已有视觉识别时）

若用户有现有主题（颜色、字体、token），把共享 token 放 sketches/themes/tokens.css，在每个变体里 @import。token 保持最少：

/* 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;
}

别给一次性草图过度 token 化——三个颜色一个字体通常够。

交互门槛

草图在以下条件下算够可交互：

1. 点一个主动作且发生可见变化（状态变、弹窗、toast、导航佯动）
2. 看到一个有意义的状态转换（过滤列表、切模式、开/关面板）
3. 悬停可识别的 affordance（按钮、行、tab）

再多就是给一次性东西过度工程。再少就是一张截图。

Frontier 模式（选下一个画什么）

若草图已存在，用户问"接下来画什么？"：

• 一致性缺口——来自不同草图的两个赢家独立做了尚未组合的选择
• 未画的屏——被引用但从未探索
• 状态覆盖——快乐路径画了，但空/加载/错误/千条数据没画
• 响应式缺口——一个视口验证过；移动/超宽下行不行？
• 交互模式——静态布局有了；转换、拖拽、滚动行为没有

提 2-4 个命名候选。让用户选。

输出

• 在 repo 根建 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 仓库现已在 GitHub 上归档/不维护；get-shit-done-cc npm 包仍可安装（npx get-shit-done-cc --hermes --global）并附带持久化草图状态、主题/变体模式参考和一致性审计工作流，但当作归档的社区项目。