创意速写

要解决什么问题

在定稿 Figma 或组件库之前，你往往需要在脑子里或对话里比较几种布局、信息层级或视觉方向。纯文字描述很难对齐「左边栏宽一点」和「卡片改成列表」到底差在哪；一次性做高保真原型又太重，改一版就要半天。

Creative Sketch（技能内名 sketch）面向的是这类可丢弃的探索：用几份独立的 HTML 页面/mockup，而不是生产代码，让你在浏览器里并排或快速切换，看 2～3 个方案谁更顺眼、谁更符合约束。

技能如何工作

核心承诺来自描述：Throwaway HTML mockups，2～3 个设计变体用于对比。

• 变体数量：通常产出 2～3 套方案，避免选项爆炸，又比单稿更有决策价值。
• 交付形态：HTML 为主，适合快速改结构、改文案、改粗略样式；与 wireframe、探索类标签一致，偏 prototype / exploration，不是设计系统落地。
• 使用方式：在 Agent 对话里说明页面目标、约束和你想对比的维度（例如导航形态、列表 vs 卡片、密度），由技能引导生成多份 mockup，便于你肉眼对比或截图评审。
• 关联场景：资料中与 spike（技术探针）、claude-design、popular-web-designs、excalidraw 等并列，适合「先草图、再细化」的链路里靠前的一步。

作者标注为 Hermes Agent（改编自 gsd-build/get-shit-done），许可 MIT，支持 linux / macos / windows。

适用边界与注意点

• 不要当生产前端：HTML 是 mockup，不应直接搬进仓库当正式实现，除非你愿意自己重构。
• 不是矢量协作白板：若需要手绘流程图、架构草图，更适合 excalidraw 一类技能；本技能侧重 UI 页面方向的 HTML 变体对比。
• 对比维度要事先说清楚：变体越多、目标越模糊，三稿可能都「差不多」；最好在提示里写清要变的 1～2 个轴（布局、信息架构、视觉风格等）。