如果你最近让 Claude 帮你做过网页大概率会有这样一个困惑它能快速给出结构完整的页面但总感觉缺了点什么。布局不丑但没有记忆点配色不难看但也谈不上高级字体、间距、阴影都正常整页就是一股“模板味”。于是很多人得出一个结论AI 生成网站只能做快速原型想做出漂亮作品还是得靠人来调。这个结论基本是错的。问题不在 Claude 的能力上限而在大多数人的提问方式里缺少了一个关键部分——设计上下文。Claude 根本不缺审美缺的是你给它的约束。它默认生成的页面永远是最安全、最平均、最没有争议的那个版本而“漂亮”恰恰需要一些不平均、不默认、有张力的取舍。这篇文章不谈空理论就聊怎么把 Claude 从“一个能跑通的页面生成器”变成“一个有设计判断的构建伙伴”。我会先解释为什么 Claude 默认输出会平庸再给出一套可复制的设计系统提示词方法然后带你走一遍基于 Claude Code 的完整构建流程从项目初始化、设计令牌定义、深色 Bento Grid 作品集落地页到运行验证和常见问题排查。整篇文章的核心判断只有一句用 Claude 构建漂亮网站的关键不在模型而在你围绕模型搭起来的那套设计工程流程。1. 为什么用 Claude 构建网站“好设计”是稀缺能力先想一个问题同样是 Claude为什么有的人能生成接近生产环境质量的产品落地页有的人只能得到白底黑字居中排版的“1998 年官网”区别通常不在模型而在提示词里承载的信息量。当你只说“帮我做一个落地页”时模型会从训练数据里取一个“平均样本”常规的顶部导航、居中的 Hero、三张特征卡片、一个表单输入框、一个页脚。这个组合没有错但它为了适配所有场景会舍弃所有个性化表达。它不会主动引入大字号排版带来的视觉冲击不会冒险使用强对比的渐变背景也不会为了节奏感牺牲一部分信息密度。这不是模型笨而是你没有给它任何“为什么这样做”的判断依据。漂亮的设计本质上是一连串有约束的决策。色彩系统用什么色相、饱和度标题字体和正文字体怎么搭配卡片圆角取 8px 还是 24px阴影是轻是重页面是否需要强烈的视觉锚点。这些决策组合在一起才构成一个站点的“气质”。而 Claude 作为语言模型最擅长的恰恰是在约束下做选择。你只要把约束写清楚它输出的页面会立刻从“模板”跳到“设计稿”。下面这个对比可以直接体现代差对比维度普通提示词设计系统提示词色彩让 Claude 自由发挥默认得到中性色指定主色、强调色、背景色和文本色并说明比例字体系统字体无层次指定标题字体与正文字体的搭配原则间距默认 16px/24px节奏平庸定义间距刻度4/8/16/24/