NanoSkill
提交你的 Skill

网页模型草图生成器

作者NousResearch2KGitHub 星标GitHub

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

模型安全扫描通过
结果预览

完整 Demo

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

开始使用

完成第一个任务

  1. a simple demonstration of the first step in using HTML mockup
    01

    第1步：安装

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

  2. a simple demonstration of the second step in using HTML mockup
    02

    第2步：描述您的网站

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

  3. a simple demonstration of the third step in using HTML mockup
    03

    第3步：查看结果

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

安装指令

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

关于

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

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

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

核心功能

它的强大之处

  • 生成多个设计变体

    同时生成2-3个不同的HTML模型变体，每个变体探索不同的设计立场（如密度、强调、美学、布局），以便进行并排比较。

  • 交互式HTML模型

    创建包含内联CSS、系统字体和逼真占位内容的自包含HTML文件。模型是交互式的，允许点击链接、悬停效果和至少一种状态转换。

  • 使用浏览器工具进行视觉验证

    利用集成的浏览器导航和视觉工具，对每个HTML模型进行可视化检查和验证，确保布局在演示前整洁、可读且无错误。

  • 结构化的变体文档

    每个HTML模型变体都包含一个`README.md`，详细说明其设计立场、关键选择（布局、排版、颜色、交互）、权衡取舍和理想用例，以便进行知情比较。

  • 比较分析表

    以比较表的形式展示所有生成的HTML模型变体，突出显示密度、主要操作可见性、可扫描性和整体感觉等关键维度的差异，并提供一个带有明确观点的摘要。

使用场景

什么时候适合使用

  • 探索UI/UX设计方向

    快速生成并比较多个HTML模型变体，在投入大量开发时间之前探索不同的用户界面和用户体验设计理念。

  • 收集视觉概念的反馈

    向利益相关者或用户展示交互式HTML模型，以收集关于各种视觉方向的早期反馈，帮助完善概念并做出知情的设计决策。

  • 新功能的快速原型设计

    创建可丢弃的HTML模型，快速构建新功能或屏幕的原型，专注于核心功能和视觉流程，而非生产就绪的代码。

SKILL.md

草图

当用户想要在确定方向之前先查看设计方向时使用此技能——通过可抛弃的 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 重置 + 系统字体堆栈 以便快速开始：

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

## 变体：{stance name}

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

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

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

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

5. 正面对决

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

## 首页的三种构想

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

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

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

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

如果用户有现有的主题（颜色、字体、令牌），将共享令牌放在 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 安装。

常见问题