# 网页模型草图生成器

> 生成2-3个交互式网页模型变体，以便在确定单一方案前比较用户界面/用户体验设计方向。快速探索不同的视觉风格并收集反馈。

- Canonical: https://nanoskill.ai/zh/skills/html-mockup-sketcher
- Markdown: https://nanoskill.ai/zh/skills/html-mockup-sketcher.md
- Author: NousResearch
- Published: 2026-06-04T05:30:00.000Z
- Updated: 2026-07-21T18:34:02.819Z
- Language: zh-CN
- Source type: github
- Popularity signal: 2137

## Sources

- https://github.com/NousResearch/hermes-agent

## Install

```shell
npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch
```

## About

网页模型草图生成器是一项强大的技能，旨在帮助用户通过一次性网页模型快速探索和比较用户界面/用户体验设计方向。该工具不会让您局限于单一设计，而是生成2-3个交互式变体，并排比较不同的视觉风格。它非常适合早期设计探索，帮助您在投入大量开发工作之前可视化概念并收集反馈。

该技能专注于创建功能性、交互式网页模型，超越了静态图像。每个变体都是一个独立的网页文件，包含内联层叠样式表、系统字体和真实内容。关键是，模型包含基本的交互性，如可点击链接、悬停状态和至少一种状态转换，提供了更切实的用户体验。集成的浏览器工具允许进行视觉验证，确保模型干净无错误。

为了便于做出明智的决策，网页模型草图生成器提供了结构化的比较。每个变体都附带详细的\`README.md\`，概述了其设计原则、关键选择、权衡和最适合的用例。生成后，将生成一个比较表，总结不同设计维度上的差异，并附有主见分析，以帮助您选择胜出者、组合元素或进一步迭代。

## Key features

- **生成多个设计变体**: 同时生成2-3个不同的HTML模型变体，每个变体探索不同的设计立场（如密度、强调、美学、布局），以便进行并排比较。
- **交互式HTML模型**: 创建包含内联CSS、系统字体和逼真占位内容的自包含HTML文件。模型是交互式的，允许点击链接、悬停效果和至少一种状态转换。
- **使用浏览器工具进行视觉验证**: 利用集成的浏览器导航和视觉工具，对每个HTML模型进行可视化检查和验证，确保布局在演示前整洁、可读且无错误。
- **结构化的变体文档**: 每个HTML模型变体都包含一个\`README.md\`，详细说明其设计立场、关键选择（布局、排版、颜色、交互）、权衡取舍和理想用例，以便进行知情比较。
- **比较分析表**: 以比较表的形式展示所有生成的HTML模型变体，突出显示密度、主要操作可见性、可扫描性和整体感觉等关键维度的差异，并提供一个带有明确观点的摘要。

## Use cases

- **探索UI/UX设计方向**: 快速生成并比较多个HTML模型变体，在投入大量开发时间之前探索不同的用户界面和用户体验设计理念。
- **收集视觉概念的反馈**: 向利益相关者或用户展示交互式HTML模型，以收集关于各种视觉方向的早期反馈，帮助完善概念并做出知情的设计决策。
- **新功能的快速原型设计**: 创建可丢弃的HTML模型，快速构建新功能或屏幕的原型，专注于核心功能和视觉流程，而非生产就绪的代码。

## Result preview

查看由该代理技能生成的关于精品酒店网站的真实网页。

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg)

![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg)

## Result walkthrough

### 第1步：安装

将技能添加到您的代理中。

![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg)

### 第2步：描述您的网站

解释您要创建的网站的详细信息（例如风格、类型）。

![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg)

### 第3步：查看结果

查看并比较生成的网页模型。

![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg)

## Skill definition

# 草图

当用户想要在确定方向之前**先查看设计方向**时使用此技能——通过可抛弃的 HTML 模型来探索 UI/UX 创意。目的是生成 2-3 个交互式变体，以便用户可以并排比较视觉方向，而不是生成可交付的代码。

当用户说诸如“草图这个屏幕”、“让我看看 X 可能是什么样子”、“比较布局 A 与 B”、“给我 2-3 个关于这个 UI 的构想”、“让我看看一些变体”、“在我构建之前先制作模型”之类的话时，加载此技能。

## 何时不应使用此技能

- 用户想要生产级组件 — 使用 `claude-design` 或正确构建它
- 用户想要一个精美的一次性 HTML 制品（登录页、宣传页） — `claude-design`
- 用户想要一个图表 — `excalidraw`、`architecture-diagram`
- 设计已确定 — 直接构建即可

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

如果 `gsd-sketch` 作为同级技能出现（通过 `npx get-shit-done-cc --hermes` 安装），优先使用 **`gsd-sketch`** 以获得完整的工作流：持久的 `.planning/sketches/` 目录与 MANIFEST、前沿模式分析、跨过去草图的连续性审计，以及与 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 字体
- 通过 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 重置 + 系统字体堆栈** 以便快速开始：

```html
<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` 应回答：

```markdown
## 变体：{stance name}

### 设计立场
用一句话说明驱动此变体的原则。

### 关键选择
- 布局：...
- 排版：...
- 颜色：...
- 交互：...

### 权衡
- 强项：...
- 弱项：...

### 最适合
- 此变体实际服务的用户类型或用例
```

### 5. 正面对决

在所有变体构建完成后，将它们作为比较呈现。不要只是列出——**给出观点**：

```markdown
## 首页的三种构想

| 维度 | 平静编辑感 | 密集实用 | 俏皮分割 |
|-----------|----------------|-------------------|---------------|
| 密度   | 低            | 高              | 中        |
| 主要操作可见性 | 低 | 高 | 中 |
| 可扫读性 | 高 | 中 | 低 |
| 感觉 | 平静、可信 | 锐利、工具感 | 诱人、充满活力 |

**我的看法：** 密集实用适合高级用户，平静编辑感适合内容导向的观众。俏皮分割最弱——试图两者兼顾却都不彻底。
```

让用户挑选优胜者，或将两个合并为一个混合体，或要求再来一轮。

## 主题（当项目有视觉标识时）

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

```css
/* 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](https://github.com/gsd-build/get-shit-done))。完整的 GSD 系统提供了持久的草图状态、主题/变体模式引用和一致性审计工作流；使用 `npx get-shit-done-cc --hermes --global` 安装。

## FAQ

### 什么是HTML模型？

HTML模型是一种可丢弃的、交互式网页，使用HTML和基本样式（通常是内联CSS）构建，用于快速可视化和比较不同的UI/UX设计理念。它不用于生产环境，而是用于早期设计探索。

### 这个技能会生成多少个HTML模型变体？

该技能通常每次生成2-3个交互式HTML模型变体。目的是提供对比鲜明的设计立场供比较，而不是详尽列出所有微小变化。

### 我可以使用这个技能创建生产就绪的代码吗？

不能，该技能专为探索设计方向的'一次性'HTML模型而设计。对于生产就绪的组件或完善的制品，您应使用其他工具或技能，如\`claude-design\`。

### HTML模型有哪些交互功能？

生成的HTML模型是交互式的，即链接可点击，悬停效果真实，并且至少包含一种状态转换（例如，打开/关闭面板、筛选列表）。这比静态图像提供了更逼真的感觉。

### 这个技能如何帮助我比较不同的设计？

生成HTML模型后，该技能会提供一个比较表，突出显示各种设计维度（如密度、布局、美学）的关键差异。它还会提供一个带有明确观点的摘要，指导您的决策。

### 生成HTML模型需要提供哪些信息？

为了生成有效的HTML模型，您将被问及期望的'感觉'（形容词、氛围）、体现这种感觉的参考应用/网站，以及用户在屏幕上执行的最重要的'核心操作'。