让 Claude 建站前先明确设计决策

给 Claude Code 一句「帮我做个现代风格的落地页」，页面通常能跑起来，却容易长成同一套样子：居中的首屏、柔和渐变、三张功能卡片。作者认为，问题在于你把视觉决策也交给了模型。

他的办法是把提示词写成一份简短的设计简报：先确定页面怎样说服访客，再交代字体、配色、布局和动效，最后约束实施与修改流程。对用 AI 写页面的前端来说，这套方法值得借鉴，因为它把模糊的审美要求变成了可以逐项检查的条件。

页面先证明什么，比先选颜色更重要

作者先确定页面的说服顺序，再开始谈样式。他用自由职业者的时间追踪应用举例：首屏证明上手快，前后对比区解释为什么能替代电子表格，包含 2 个档位的定价区说明价格可接受，最后展示其他自由职业者也在使用。

其中有一个很实际的约束：没有用户评价就留占位，不编造引言。

这相当于给每个区块安排任务。模型不必为了凑出一个完整网站，自动补上「为什么选择我们」「我们的使命」等通用内容。检查页面时，也能直接追问：这一屏究竟解决访客的哪个疑问？

接着才是视觉选择。作者建议主动确定标题与正文的字体搭配，并明确字号和行距。这段提示词解决的是字体层级含糊的问题：

Typography: a serif display font for headings, a clean sans for body.
Scale: 64 / 40 / 24 / 16px on desktop. Headings tight (line-height 1.1),
body relaxed (1.6). Max line length ~65 characters.

要看的是 Scale 这一行：它直接给出了桌面端的层级。标题行高 1.1、正文行高 1.6、每行约 65 个字符，则补上了阅读密度的要求。

配色也要限制用途。原文指定暖调米白背景、近黑文字，只允许一种强调色，并且只用于主要按钮和链接，禁止文字渐变。限制越明确，模型自由添加装饰的空间就越小。

把布局、动效和修改范围写成可检查的条件

「留白多一点」「加点动画」仍然需要模型猜。

作者给布局的条件很具体：12 列网格、最大宽度 1200px，桌面端区块上下内边距为 120px，移动端为 72px；首屏采用左侧文字、右侧产品视觉的排列，文字左对齐。他认为，不对称布局和充足留白能帮助页面摆脱模板感。

动效同样要点名对象与行为：首屏产品视觉随光标轻微倾斜，区块滚动出现时向上移动 16px，且只播放一次；按钮悬停过渡为 150ms，并遵守 prefers-reduced-motion。这个媒体查询用于识别用户减少动态效果的系统偏好。

动效要求写到具体元素和触发方式，才方便验收。

Claude Code 会直接在仓库里工作，因此设计简报还可以规定实现顺序。下面这段要求先集中定义设计变量，再用首屏作为检查点：

Process: put design tokens (colors, type scale, spacing) in one file
first and use them everywhere. Build the hero, stop, and show me
before building the rest.

要留意 Build the hero, stop：先确认首屏，可以在同一套风格铺满整页之前纠正方向。Design tokens 就是集中保存颜色、字号、间距等设计取值，后面更换强调色时，目标是修改一个定义，而不是到处找散落的值。

后续修改也要说明边界。例如只替换文案和图片，同时保留布局、字号层级、颜色与动效。作者提醒，「改成我的产品」这类宽泛要求，可能被模型理解为允许重新设计。

我的判断

我赞同作者把视觉选择提前、把修改范围写清楚。它把审美偏好转换成了验收条件，也让返工更容易定位：到底是信息顺序不对，还是字体、间距没执行到位？

但这些是作者的工作经验。原文没有提供对照页面、用户测试、转化率或返工次数，不能据此断言设计简报一定带来更好的业务结果。左文右图、衬线标题和大留白，也只是可选方向，不能当成所有产品的标准答案。

这些参数还有适用前提。约 65 个字符的行长放到中文页面里，需要重新检查阅读宽度；固定的区块间距也要结合内容长度。原文没有交代移动端字号层级，以及其他响应式规则。

相较于纯文字简报，已有设计系统、组件规范或明确的设计稿，通常能提供更具体的约束。团队已经有这些材料时，应让简报引用它们。

作者最后推荐了 MotionSites，称其提供适用于 Claude、Lovable、Bolt 和 Cursor 的可复制提示词，配有设计预览，也有免费内容。原文没有提供与自行编写简报的对照结果，把它看作参考素材更合适。

能拿来做什么

• 下次用 Claude Code 做产品落地页时，先列出访客需要依次相信的几件事，再为每个区块分配任务；没有真实评价时明确要求保留占位。
• 开工前确定字体层级、颜色用途、页面宽度和关键间距，并要求集中保存为 design tokens，方便后续调整。
• 先让模型完成首屏并暂停，检查视觉方向和实际内容的匹配程度，再继续构建其他区块。
• 每次追改都写清允许修改的对象；只换文案和图片时，同时列出需要保留的布局、字号、颜色与动效。