01
收集参考材料
你喜欢的网站、几张截图、已有的产品内容，或者只有一句「想要那种高级感」。真实文案最重要——没有它就先把文案定下来。
reference → content
列宾 Skill · 设计方向确认
让大师帮你「偷」设计。
「优秀的艺术家模仿，伟大的艺术家偷窃。」
good artists copy, great artists steal —
动手之前，先把方向做成三张能被否决的样张，全部用你的真实文案渲染。你选一张、骂另外两张，它把你的原话写成一份 DESIGN.md，交给你的 agent 去写代码。
preview.html — one file, three ways
三变体 × 三屏
I
照搬
首屏
核心操作屏
空状态
II
取气
首屏
核心操作屏
空状态
III
反手
首屏
核心操作屏
空状态
选哪个？另外两个，哪里不要？
→
Why Liebin · 为什么叫列宾
两个夏天的习作，换一张定稿。
studies first, then the canvas —
画《伏尔加河上的纤夫》之前，列宾在河边住了两个夏天，画满了习作，才动定稿的笔。习作不是热身，是把「我以为的」和「实际是的」对上。
Ilya Repin, 《伏尔加河上的纤夫》 1870–1873 · 131.5 × 281 cm
Russian Museum · images from Wikimedia Commons, public domain
The four steps · 四步
四步走完，就停。
then it hands over —
02
定轴出样张
三版只沿一条轴分化：密度、气质、节奏或构图。每版各自完整，不是换个颜色；第三版故意偏离参考。
3 variants × 3 screens03
让人否决
要你明确选一个，并记下另外两版哪里不对、你的用户会在什么状态下打开它。那句骂人的原话就是约束。
choice → raw words04
写成契约
把选中的方向、禁忌与规则回写进 DESIGN.md，你的原话逐字保留。此后，才轮到代码开始。
DESIGN.md → build
How to use · 怎么用
装上，攒一个任务包，丢给 Claude Code。
three moves, that's it —
I
装上
one command —
Claude Code
Codex
Cursor
Grok
Openclaw
Kimi Work
WorkBuddy
Hermes
DeepSeek harness
git clone https://github.com/ShaohuaDavidLee/Liebin.git ~/.claude/skills/liebin
重开一个 Claude Code 会话即可生效，或直接 /liebin 调用。Codex、Cursor、Grok、Openclaw、Kimi Work、WorkBuddy、Hermes、DeepSeek harness——把仓库放进项目里，让它读 SKILL.md 就行，不挑 agent。
II
攒一个任务包
paste, drop, download —参考网址、参考图、还有你要做的东西——填在这儿，打包成一个 zip。里面是一份 BRIEF.md 加你的参考图，列宾读它就能开工。
III
丢给你的 agent
then get out of the way —把 zip 解开丢进项目，说一句「读一下 SKILL.md，用列宾走一遍这个任务包」。你会拿到一张单文件 HTML 样张：三个变体、每个三屏，并列着让你挑。挑完回答两个问题——另外两个哪里不要、你的用户在什么状态下打开这个产品——它把你的原话逐字写进 DESIGN.md。
DESIGN.md 交付即完工。列宾不替你开发产品，接着让任何一个会写代码的 agent 拿这份文件去落地。
the skill stops here, on purpose —
Pitfalls · 四个坑
列宾帮你避开的四件事。
four ways this goes wrong —
i.
数值崇拜
参考里的 -2.46px 字距，是 80px 拉丁标题下的 -0.031em。照抄到 48px 中文标题上会挤成一团。所有间距一律转 em 再迁移，中文标题不用负字距。
ii.
占位文字
Lorem ipsum 和「标题标题标题」会让所有方案看起来都还行。中文文案的长度、语气、断行，会彻底改变一个设计成不成立。
iii.
只给一个方案
单方案只能换来「嗯挺好的」或者「感觉不太对」，两种回答都零信息量。三个并列，才能拿到差异判断。
iv.
替用户写 Don'ts
模型生成的负面约束永远是「保持一致性」「避免视觉噪音」这类正确的废话，对后续生成零约束力。Don'ts 这一段只能由人填。