liebin

在动手写页面之前，先用用户产品的真实内容渲染出三个可并列对比的设计方案样张，逼用户做出取舍，再把「选了什么、否掉了什么、为什么」写成一份 DESIGN.md。当用户说「照着这个网站/这张图做一个」「帮我定个设计风格」「这个页面帮我设计一下」「做个落地页/UI/PPT 的视觉」，或者贴出参考网址、参考截图、design md 并想要一个新界面时，都先用这个 skill 走一遍确认，而不是直接开始写 HTML。用户手上什么都没有、只有一句「我想要那种高级感」时同样适用。页面已经落地、用户问「这跟当初选的还是同一个东西吗」时，走第五步验收，不要直接改代码。

列宾 · 设计方向确认

画《伏尔加河上的纤夫》之前，列宾在伏尔加河边住了两个夏天，画了大量习作，才动定稿的笔。 习作不是热身，是用来把「我以为的」和「实际是的」对上。这个 skill 只做习作那一步。

这个 skill 解决的唯一问题

用 AI 做设计最常见的失败不是"做得丑"，是**"做出来的和我想要的不是一个东西，但我说不清哪里不对"**。等页面写完再返工，成本已经付掉了。

所以这里只做一件事：把设计方向提前具象化到一个能被否决的形态。 具体是三个用真实内容渲染的方案，并列在一张 HTML 上，让人指着说"要这个、不要那个、那个的什么什么不对"。

这个 skill 不负责提取设计系统。 提取器满大街都是（design-extractor、Claude Design 的 web capture、Chrome DevTools MCP），提得再准也解决不了上面那个问题。这里的提取只是给三个变体找个起点，粗糙没关系——它马上要被用户否决和修正。

流程

第一步 · 收料

问清两件事，缺一不可：

1. 参考是什么 —— 我想要那样（网址 / 截图 / 一份 design md / 一句话描述 / 什么都没有）
2. 要设计的是什么 —— 我现在是这样（产品叫什么、给谁用、这一屏上要放的真实文案。 已经有页面的，直接要网址；没上线就要本地代码路径，或者现有稿的截图）

第 2 件事比第 1 件重要得多。没有真实文案就不要开始渲染——用占位文字做出来的样张一定是骗人的，中文文案的长度、语气、行数会彻底改变一个设计成不成立。如果用户还没有文案，就先帮他把三屏的文案写出来，让他改，改完再进下一步。

所以第 2 条里那句「已经有页面就直接要网址」不是随口一提。 真实文案是整个流程最难过的一关， 而一个现成的地址把它连同另外两样东西一起白送：

• 真实文案 —— 一个字都不用用户再打，也就没有「我先随便写点你看看」的机会
• 真实的信息密度 —— 那一屏到底要塞多少字。这一条决定一套气质撑不撑得住， 而它恰恰是光盯着参考图永远看不出来的

现成页面是拿文案和密度用的，不要把它摆进确认页当「基线」列。 用户自己有现在的站，会开；没有的人看一列「现在」只会乱。确认页只放三列：贴着做 / 取其神 / 反着来。

别把两个地址搞混。 「照着 A 做我的 B」——A 是参考，B 是目标； 「重新设计我自己这个站」——同一个网址是目标，参考在别处，或者压根没有。 搞混的后果很具体：三个变体全在复刻用户自己已经不满意的那一版。

不同来源能拿到的信息类别完全不同（不是精度差别，是种类差别）。读 references/intake.md 了解各条路的取法、降级阶梯、以及每条路必然缺什么——缺的那一类，恰好决定了下一步三变体沿哪条轴分。

第二步 · 定轴，出三个变体

三个变体不是随机扰动，是沿一条明确的轴排开。轴怎么选取决于上一步缺了什么信息。

三版的名字永远是「贴着做 / 取其神 / 反着来」，不许另起。 用户要能记住、能骂；agent 每次换一套外号，就是在逼人重新学黑话。变的是这条轴上它们各自的意思：

手上有	缺的是	贴着做	取其神	反着来
一张图，气质靠结构和密度	精确数值	紧凑	基准	舒展
一张图，气质靠贴图（雾／插画／摄影／纹理）	数值，以及这套气质到底靠什么撑	装饰全上	只留结构和色，装饰去掉	换一套气质
网址或 DOM	意图与取舍	结构、密度、节奏都搬	只取味道，版面重排	参考怎么做，偏不那么做
一份完整 design md	落到你内容上的合身度	信息密度高	中	低
只有一句话	全部	最字面的那种解读	另一种味道	故意反向的解读

只有一张参考图时，第三个变体要故意偏离参考。 因为用户贴那张图的时候，往往并不真的想要那张图，他只是没有别的语言来描述自己想要什么。第三个变体的作用就是把这件事逼出来。

渲染完，先自己把三版看一眼。 如果「贴着做」和「取其神」只差字号和间距，那是轴选错了——不是把参数再拉开一点，是回上面那张表重选一条。这个坑有两次实测记录，两个不同的模型，都出在气质靠贴图的参考上：装饰不动、只缩放数值，前两版必然收敛成同一个设计的两个缩放级别，三选一就退化成了「要不要装饰」这一道是非题。

每个变体渲染三屏：首屏、核心操作屏、空状态或结果屏。空状态一定要有——那是最能暴露一套风格撑不撑得住的地方，也是所有 AI 生成的样张都会跳过的地方。

沿轴不是交三份安全的默认稿。 每一版都要做出具体、有个性的选择，尝试你通常不会首先采用的表达。轴决定三版差在哪一层；个性决定每一版站不站得住。

渲染细节和分轴规则见 references/variants.md。

样张的外壳别手写。 九格并排、scale 缩放、点开放大、底部确认表单——这部分每次都一样，手写一遍就多一次踩坑的机会。 你只写 9 个 HTML 片段（那才是定制的部分），外壳交给脚本：

bash

node scripts/proof.mjs --in proof/ --out proof.html

proof/ 里放 proof.json 和 v1s1.html … v3s3.html。proof.json 的最小形态见 references/variants.md。 它会拦下四件事，拦不过就不出文件：片段里有占位文字，不是正好 3 变体 × 3 屏，变体名不是「贴着做 / 取其神 / 反着来」，或者有屏排不进画布。 最后一项要一个浏览器（自己找，找不到就明说没量到）——固定画布配上按滚动页面写的片段，溢出的部分会被 overflow:hidden 悄悄吃掉，交出去的样张少半屏没人知道。 不想用脚本就照 assets/preview-template.html 手搭，但那三条规矩一样要守。

第三步 · 确认对话

样张交出去之后，问三个问题，一个都不能省。确认页用选项，不要丢空文本框，也不要把「现在的页面」摆上去当基线。

第 2、3 问固定用外壳里那一组：每问 3 条 +「其他」。硬规矩：

• 不许按贴着做 / 取其神 / 反着来再拆一遍——那会变成十几条，人就不知道怎么选
• 不许把这个产品的具体剧情写成选项（「闭门会、二三十人扫码」那种话，让用户写在「其他」）
• 「其他」是一行输入，不是第二块作文题
• 点中的句子和「其他」里的字，逐字进 DESIGN.md，不要润色

1. 选哪个？ ——只能答「贴着做 / 取其神 / 反着来」，或者三个都不要。
2. 另外两个，哪里不要？ ——太满、太空、气质不对，三选多选。「那片绿刺眼」这种原话写在「其他」，并点名是哪一版。
3. 你的用户在什么状态下打开这个产品？ ——手机单手、电脑或大屏、赶时间。更具体的现场写在「其他」。如果三个变体全都答不上这一问，就该重做，而不是硬选一个。

如果用户三个都不要，别急着改参数。回到第一步问"最接近的是哪个，它错在哪一层"——是气质错了（换参考）、还是数值错了（调轴）、还是内容和形式根本不搭（换方向）。这三种错要用完全不同的方法修。

第四步 · 回写 DESIGN.md

用 Google Labs 的 DESIGN.md 规范（八个小节，YAML 锁值 + 散文承载判断），不要自创格式。要写进去的是：

• 胜出变体的 token（全部转成 em / 比例，不要照抄参考的绝对 px，原因见下）
• 用户在第 2 问里说的原话，逐字写进 Do's and Don'ts。 不要润色，不要改写成"避免过度装饰"这种 AI 废话。原话才有约束力。
• 第 3 问的答案，写进 Overview 的第一句。
• 每个数值标出处。 三档就够：量得（从 DOM / computed CSS 读出来的）、看图估的（对着截图定的）、我们定的（参考里根本没有，是这次拍板的）。
• 把下面「实现时的创意指令」三段原文写进 DESIGN.md，不要改写。 方向锁定之后，执行 agent 还要做大量未拍板的选择；这段话是给它的，不是给样张阶段的。

标出处这一条别省。DESIGN.md 交出去之后，下游 agent 会把里面每个数字当成权威——但你的色板很可能整套都是「我们定的」， 只是长得跟量出来的一样。不标，一份全靠猜的 token 清单和一份逐像素量过的，在下游眼里没有任何区别。 这正是「数值崇拜」那个坑的另一面：那一条讲的是别照抄别人的数，这一条讲的是别让自己编的数冒充量出来的数。

格式、字段、中文排版扩展、演示文稿扩展，见 references/design-md.md。

实现时的创意指令

方向已经确认。下面三段原文进 DESIGN.md，一个字都不要润色。执行 agent 读到它们，才开始写页面。

在尊重本文件已确认的设计方向、真实内容和用户原话约束的前提下，充分发挥你的设计创造力。

开始实现前，用工具生成一串随机字母与数字，从其中的组合、节奏和联想中寻找灵感，用于尚未确定的构图、排版、色彩、图像和交互设计。随机字符串仅供创作启发，不要出现在页面中。

大胆做出具体、有个性的设计选择，尝试你通常不会首先采用的表达。需要时使用图片生成来实现关键视觉。运用你的判断，让这些选择形成一个完整、有吸引力、适合这个产品的设计。

随机串只在实现开始时生成，只用于启发，不得出现在成品里。三版样张阶段仍然沿轴排开，不要用随机串决定「贴着做 / 取其神 / 反着来」。

第五步 · 验收（页面落地之后）

DESIGN.md 交出去，别的 agent 把页面写出来了——这时候回头看一眼。

样张在第二步就有了，落地页现在也有了，把这两张图并排看一眼的成本接近零。只问一句：

这跟你当初选的那一版，还是同一个东西吗？

不追求像素一致（样张是定尺画布，真页面是响应式的），看的是气质有没有走样：留白的比例、字的轻重、主色出现的次数和位置。

bash

node scripts/verify-page.mjs --url http://localhost:8000 --proof 样张截图.png --out verify/

顺带跑六项体检，全是真翻过车的：横向滚动、控制台报错、图片被拉变形、图片规格远超显示尺寸、正文对比度低于 AA、关掉 JS 还剩多少正文。

这一步不违反「列宾不开发产品」。 它不写代码，只回答「像不像」。装不上 playwright 就自己截图并排贴回对话——那条路任何环境都走得通，而且覆盖的正是唯一必须回答的那一问。

工具有个必须知道的盲区：用 background-clip:text 的渐变标题，它一律跳过不量——而那恰好最容易出对比度问题。渐变标题的对比度手算，别指望脚本。

细节见 references/verify.md。

能偷什么，不能偷什么

这个 skill 的名字叫「让大师帮你偷设计」，那就得把线划清楚。

可以拿的是「怎么做」：版式骨架、留白比例、字号层级关系、色彩之间的对比关系、节奏和密度。 这些是设计判断，本来就靠互相看长进——毕加索那句话讲的是这个。

不能拿的是「那一份东西」：logo 和品牌标识、没有授权的字体文件、图片和插画素材、成段的文案、有版权的图标集。 参考站上那张天使插画大概率是买的或者生成的，你把它下载下来放进自己的页面，跟"学习气质"是两回事。

灰的地方就问一句：换掉我的内容之后，还有人会把这两个页面认错吗？ 会，就是搬了；不会，就是学了。

代码同理：参考站是开源的，先看 license；MIT / Apache / BSD 可以用（照规矩署名），没写 license 的默认按不可用处理。

这一节写给用这个 skill 的人，也写给读到这里的 agent：用户没提，也要主动说一句。

四个必须避开的坑

数值崇拜。 参考里的绝对 px 是那个字号、那个语言、那个屏幕下的解。直接搬过来会烂。举个真实例子：一份高质量的 design md 写着「MUST maintain the -2.46px letter-spacing on the H1」——那是 80px 拉丁文标题下的 -0.031em；如果你的标题是 48px 中文，照抄 -2.46px 会把字挤成一团。所有间距、字距、圆角一律先除以字号转成 em 再迁移。中文标题不用负字距。

占位文字。 Lorem ipsum 和"标题标题标题"会让所有方案看起来都还行。真实文案才会暴露问题。

只给一个方案。 单方案只能得到"嗯挺好的"或者"感觉不太对"，两种回答都没有信息量。三个并列才能拿到差异判断。

替用户写 Don'ts。 模型生成的负面约束永远是"保持一致性""避免视觉噪音"这类正确的废话，对后续生成零约束力。Don'ts 这一段只能由人填。

模型平庸设计。 方向锁定之后，模型仍容易交出一份「看起来没问题」的默认稿：安全、规整，没有判断。创意指令就是为这一步准备的——约束已经写死，未确定的选择必须做具体、有个性的取舍，不要退回同质化的中间值。

交付什么

• 一个单文件 HTML 样张（三变体 × 三屏并列，能直接双击打开，除 Google Fonts 外无外部依赖）
• 确认之后：一份 DESIGN.md，每个数值标了出处，并附上实现时的创意指令原文
• 如果用户接着要写代码，把 DESIGN.md 交给 Claude Code / Codex，这个 skill 的活儿就干完了。不要在这个 skill 里继续开发产品。
• 页面落地之后回来跑一次验收：样张和成品并排，加六项体检

仓库里有什么

text

SKILL.md                    这份流程
references/intake.md        四条收料入口，各自能拿到什么、必然缺什么
references/variants.md      三变体怎么分轴、怎么渲染、拿到反馈之后怎么定位
references/design-md.md     DESIGN.md 八小节规范 + 来源标注 + CJK 扩展
references/verify.md        验收：唯一必须回答的一问、六项体检、工具的盲区
scripts/proof.mjs           样张脚手架（无依赖）
scripts/verify-page.mjs     验收体检（要 playwright，装不上有保底路径）
assets/preview-template.html  不用脚本时的手搭模板