企业官网建设流程全解析

很多用 Claude 生成网页的朋友应该都有过这种体验：提示词写得挺详细，需求也说得挺清楚，结果页面一出来，好看是好看，但总觉得哪儿不对劲。哪儿都对，就是有一股说不清道不明的“塑料味”——布局工整得过分，配色柔和得发腻，文案像翻译软件跑出来的，整个页面就像流水线上倒模出来的。这种“AI味”，放在真实产品里，用户一眼就能看出来，信任感先打五折。

我自己拿 Claude 搭过不少东西，包括内部工具页面、个人项目主页，甚至给朋友做过小型商业落地页。踩过的坑多了之后，我总结出一个结论：问题不在 Claude 本身，而在于我们让它“自由发挥”的空间太大了。它确实知道什么叫“好看”，但它理解的“好看”，是互联网上几百万个网页平均出来的结果。换句话说，AI 给你的是“最大公约数”，是“平均值”，而人类设计师的活儿，恰恰是在这堆平均值里凿出一点点“不平均”的东西。

这篇文章我就结合自己的实操经验，说说怎么把这股廉价感压下去。不是让你变成设计大师，而是给你几把趁手的工具，把 Claude 的输出从“AI 生成”往“真人制作”方向拽一把。

1. AI 味的根源：它太会“遵守规则”了

在聊解法之前，我先带你看清一个问题：AI 味到底从哪里来的？

1.1 模型训练的数据分布决定了它的“平庸”

Claude 生成网页的能力，来自海量训练数据。它见过几百万个官网、落地页、作品集页面，从中总结出了一套“标准答案”：头部通常是大号标题加一句副标题，中间是三张卡片放功能，再来一段数据、一个 FAQ、一个联系我们，尾部是版权信息加几个社交链接。这套结构本身没有问题，问题在于 Claude 没有“审美偏好”，它只会按照概率选择它认为“最稳妥”的组合。

这套“最稳妥”组合，在我们眼里就是“模板感”。因为真实的人类设计师会做决策，而 Claude 做的是“平均”。每次你觉得这个页面“AI 味很重”，其实就是它把所有元素都处理得太“正确”了：间距均匀、色彩协调、文案工整，但缺少“个性”和“张力”。

1.2 它不会打破自己立下的规则

人类设计师常常会为了视觉冲击力故意打破规则：比如标题超出容器一点、某个元素故意错位、某个色块面积大得出奇。这些“不守规矩”的地方，恰恰是设计的生命力所在。但 Claude 在训练中被灌输的信念是——不出错。于是它所有输出都老老实实地待在安全区里，而这正是廉价感的第一来源。

我做个类比：你让一个刚毕业的学生和一帮老设计师各做一个页面草图。学生交上来的作业往往整齐规范，但毫无记忆点；老设计师可能会把主视觉放大三倍，留白外加一笔手绘——这种“有人味”的操作，Claude 很难自己做到。

那问题来了：既然 Claude 自己做不到，我们怎么把它往这个方向逼？答案藏在“提示词的约束方式”和“后期手调”这两个动作里。

2. 五招去 AI 味：从搭建到细节的手动干预

下面这五招，是我这些天实测下来最有效的方向。每一招都对应着一个 AI 味的具体来源，你有针对性地把它压下去，页面质量立刻上一个台阶。

2.1 第一招：把平均布局改成“不对称构图”

Claude 生成页面的一个标志性特征是：网格工整。四个特性卡片整齐排成一排，每个卡片内的文字行数几乎一样，图片大小完全一致。这种均衡感是 AI 味的重灾区。真实设计的做法恰恰是打破均衡。

我自己常用的手法是这样：

• 在提示词里明确写“主视觉区域采用非对称布局，左侧对齐标题和主 CTA，右侧放一张大图，图片允许超出容器边界”
• 刻意让某一部分内容只占屏幕 1/3，另一部分占 2/3，制造视觉权重差异
• 让其中一个卡片明显比其他卡片更突出，比如背景色或者尺寸不同

操作层面，我的具体做法是给 Claude 一个“破坏公式”：

布局要求：打破网格系统。顶部 hero 区域采用两栏非对称布局，左栏占列宽的 2/3，右栏占 1/3。右栏内容不需要严格对齐左边距，可以轻微偏移。下方内容区不采用等宽卡片，使用不同高度的模块穿插排列，其中一个模块比其他模块宽 1.5 倍。

加上这类描述后，输出结果马上不一样了。Claude 不是不会做非对称，而是它默认了“均衡”是更优解，你要用指令帮它打破。

2.2 第二招：用“丑”的字体，用回真实品牌感

AI 生成网页的字体选择通常高度雷同：系统无衬线体加一套现代感字体，比如 Inter、Poppins、Playfair Display。这些字体本身没有错，但它们凑在一起，就成了“AI 品牌套餐”。真实网站很少这么整齐，因为品牌设计者会根据调性选择有个性的字体组合。

我在实操中摸索出一个小诀窍——别让 Claude 自己选字体，你直接指定一套不那么“标准”的组合。记住一个原则：不要所有字体都完美搭调，稍微有点“不和谐”反而更像真人做的。

比如这种组合：

字体：标题用衬线体（如 Fraunces），正文用无衬线体（如 IBM Plex Sans），引擎推荐小写英文配数字无衬线体（如 Space Grotesk），不用系统默认字体。

这样搭配出来的页面，传达的气质马上就变了。AI 味的字体组合特征是“和谐到无聊”，而真实设计会通过字体混搭制造记忆点。

另外字体加载方式也很容易暴露 AI 味——Claude 默认输出的@import字体方案经常同时加载好几套完整字体文件，导致页面加载很慢。我会手动把它换成preload加字体子集，或者直接用系统字体栈加一两个特色字体，配合font-display: swap。速度提升了，页面也更接近真实产品的观感。

2.3 第三招：色彩从“莫兰迪套餐”换成“有主张的配色”

AI 生成网页的配色也是一大重灾区：米白背景、柔和渐变、低饱和度的蓝紫绿——这种配色安全、温和，但真的是看多了审美疲劳。用一句同行的话说：你把世界上所有 AI 生成的网页截个图叠在一起，会叠出一片灰色的雾。

打破方法是直接把饱和度拉高，或者走另一个极端——做黑白高反差。我试验过的几个有效方向有：

• 纯黑白灰体系：页面只有两种颜色，大量留白，用字体粗细做层次，视觉效果非常“设计师”
• 强调色单色：主背景用米白，整个页面的强调色只有一个，比如亮橙色，标题、CTA、下划线大面积统一使用，极简且高级
• 复古撞色：比如深蓝色背景配亮黄色元素，这种搭配 Claude 默认绝对不会选，但实际效果很出挑

我的习惯是绕过 Claude 的默认配色，直接给它指定色值。举一个我实际用过的例子：

配色方案：背景 #F4F1EA（偏暖的白），主文字 #1A1A1A，强调色 #FF4D00（亮橙），链接下划线用同样的橙色。禁止使用渐变背景，禁用大写字母，标题可以用大号粗体衬线体。如果你觉得要加其他颜色，请删除强调色以外的所有彩色，保持极简。

加了这种约束之后，页面的视觉记忆点立刻就出来了，一点不糊。

2.4 第四招：文案去模板化，把“AI 腔调”换成“人话”

AI 味的文案有强烈的标识性：动辄“解锁潜力”“开启全新体验”“赋能未来”“让简单更简单”这类空洞口号。这些表述在页面里出现得越频繁，廉价感越重。Claude 生成网页时，如果提示词里你只说“写点说服力强的文案”，它十有八九会给你来一套万能话术。

我的处理流程分两步：

第一步，在提示词里直接立规矩：

文案要求：所有文案使用第一人称或第二人称口吻，不要用“我们提供”“我们致力于”“赋能”“解锁”“极致体验”这类词。每句话不超过 22 个汉字，删掉所有无法被验证的形容词。如果你想用“简单”“快速”“强大”这类词，请先停下来，用更具体的语言描述实际效果。

这招能明显把文案拽回人话。AI 写“简单快捷的支付解决方案”，你用这个指令，它就换成“打开手机，扫码，三秒到账”——信息量多了，AI 味少了。

第二步，生成后手动过一遍文案。这一步躲不掉，你不需要全部重写，但要留意几个高频“AI 标志词”：如果页面出现“释放潜能”“重新定义”“未来的”“无缝”“一站式”“赋能”，直接删。这些词不是不能用，是每十个 AI 生成的网页里有八个都在用，观众真的会条件反射地皱眉。

我也会在提示词里塞一句“你可以参考某类网站在真实场景中的表达方式，用更自然的口吻”，这样 Claude 就会试着往“非正式、对话感”方向靠，效果比让它写“商务感文案”强得多。

2.5 第五招：转身做“微调怪”，手动打破像素级完美

最后这招不需要动提示词，而是生成页面之后，你直接用编辑器手动做微调。这一招最能拉开差距，也最容易被忽略——Claude 给一个 80 分的页面，你用十分钟手调，能到 88 分。

我每次拿 Claude 生成页面之后，都会做这几件小事：

• 把某个标题的字号手工调大 20%，看看视觉冲击力是否更强
• 把某个区块的背景颜色从白改成很浅的灰，增加页面层次
• 把一个卡片的圆角从标准的 12px 改成 4px 或干脆直角，往往立刻没那么“原型感”
• 给页面加一点微妙的自定义细节，比如把某个按钮改成不对称形状，或者给某张图加一层微妙的杂色纹理

这些动作的目的，是打破 Claude 输出的“平均感”。AI 生成的页面每个元素都被处理得太干净了，加入一点不完美、一点意外的细节，观众会下意识觉得“这是真人做的”。

3. 实操经验与避坑指南

有了方向，下面说说我在实际操作中遇到的高频问题和好用的技巧。这些内容不是教科书上的，是一步步试出来的。

3.1 别做一页纸的需求，要做“角色分工”

我最初用 Claude 生成网页时，习惯写一大段长提示词，把布局、配色、文案、功能全塞进去。结果 Claude 处理的上下文越长，越是会捡着“最稳妥”的路径走，输出结果就越是模板化。

后来我改成“角色分工”法：

你是一位擅长品牌设计的视觉设计师。请先为这个页面确定一个核心视觉概念，然后告诉我这个概念如何体现在布局、色彩和字体选择上。在这个阶段请不要写任何 HTML 或 CSS，先做设计方案。

等它给出设计概念后，我再追加：

现在进入实施阶段。请按照你刚才的设计概念，生成完整 HTML 页面。注意：在实现过程中，页面结构不要用对称布局，文案不要用“我们”，所有设计决策都写明理由，放在注释里。

这样 Claude 的输出路径从“直接套用训练平均值”切换到“先思考再有执行动作”，出来的页面能明显感觉更有方向感。

3.2 用“反 AI 关键词库”在提示词里画红线

我自己整理了一个“反 AI 关键词库”，在写网页生成提示词时用avoid或禁止的方式明确排除掉。分享其中的核心关键词：

禁止使用的视觉元素：已被互联网过度使用的渐变背景、玻璃拟态、超大圆角卡片、悬浮阴影、通用 emoji 图形、加粗白色圆角按钮。禁止把所有模块做成相同大小的等宽卡片。尽量少用用户可见的动画，尤其禁止所有元素逐个淡入的效果。如果你需要在页面中加入过渡效果，只允许保留一个，用于单一交互场景。

借用这套禁令，往往能让页面从一个“万能模板”变成一个有个性的设计。反过来，如果你不给它设限，它就会把上一段我所列的“AI 标配”全都用上。

3.3 生成后必做的三轮手调

一个页面生成后，我通常要过三轮手动调整，才算真正“去 AI 味”完毕。

第一轮是“断舍离”。AI 喜欢堆信息：三个功能点不够，得加个数据面板；五个区块不够，得加十个。我通常会把不必要的区块整个删掉。删掉一个觉得“好像也没啥用”的部分，页面的呼吸感马上就有了。

第二轮是“改字重”。AI 生成的页面里标题和正文的字重往往区分度不够，我会把所有标题的font-weight调成 700 或者 800，正文保持 400，对比度拉大，视觉的第一眼抓力会完全不同。

第三轮是“加闲笔”。真实网站的页面通常会有一些“非功能”的东西：一句不正经的副文案、一个角落里的手工标注、一张打破版式的插图。这些“闲笔”是设计者个性的体现，也是 AI 最难生成的。我通常自己在页面里加一句“这页面的第一版是 AI 生成的，但后来我们全改了”，或者加一个手绘风格的小icon，这样整个页面瞬间有了人味。

3.4 别盲目追求高保真，先把“层级”定对

很多朋友用 Claude 生成网页时，经常在“好不好看”上纠结，其实我们在页面上遇到的很大一部分视觉问题，根源出在“层级”上——Claude 生成的页面里，标题、副标题、正文的字号差距不够大，没有主次关系，观众扫一眼不知道先看哪儿。

我的习惯是，在提示词里写清楚“视觉层级”：

层级要求：标题字号是正文的 3 倍以上，副标题是正文的 1.5 倍。为所有标题设计一个独特且一致的标识性元素（比如下划线偏移或引用块底色），让观众一眼就能看出主次。页面的第一个视觉焦点是主标题，第二个焦点是主 CTA 按钮，不要有其他元素抢夺注意力。

确定层级之后，其他一切颜色、字体的调整都是在为层级服务，页面整体感就会强很多。

4. 常见问题与排查技巧实录

下面是在实际使用 Claude 生成网页时，几个特别常见的问题，以及我自己验证过有效的应对方法，整理成一个速查参考。

4.1 生成了好看的页面，但代码乱成一团

Claude 生成的 HTML 代码最大的问题是“结构不干净”：div 嵌 div、样式重复定义、无用类名到处都是。这类问题的处理思路是——在生成后用格式化工具重排代码，再手动提取核心重构逻辑。

我通常的步骤是：

• 把生成的 HTML 丢进代码格式化工具里，强制统一缩进和换行
• 将重复的 CSS 定义合并，全局样式放进统一的位置
• 检查页面依赖的图片和字体是否本地化，避免全站依赖在线资源
• 删掉注释和冗长无关的说明代码（比如 Claude 总爱写“这里是介绍区块”之类的注释）

这样折腾完之后，代码体积能减少 1/3 甚至一半，后续维护也轻松得多。代码简洁度直接关系到后续加交互时的效率，别嫌麻烦。

4.2 页面在手机上很难看

Claude 生成的页面基本都会做响应式，但它的响应式是按“最常见断点”来的。真机上有时候效果就别扭——桌面端特别好看，一缩到手机宽度，字体小得看不清，按钮间距也乱了。

我的经验是，提示词里要明确写“移动端优先”：

响应式要求：优先设计移动端。所有模块在 375px 宽度下保证无横向滚动、按钮触摸面积不小于 44px、标题字号不小于 20px。在桌面端可以适当拓展信息密度，但不允许出现任何横向溢出。

同时，生成之后一定自己拿浏览器开发者工具把 375px、768px、1024px、1440px 四个尺寸各过一遍。这个动作花不了几分钟，但能避开大量真实用户可能会遇到的基础问题。

4.3 页面内容太“空”

AI 生成页面时，因为训练数据的原因，天然倾向于用大标题加少量卡片文字来撑版面，实际内容密度很低。文字少不是问题，问题是“没有一个实际的表达内容”。

我自己的补救方式，是把页面当成“给某一位具体读者写的一封信”去生成文案：

文字内容请模仿某开发者在自己博客上的自我介绍风格，不要用“我们”，用“我”。语气真诚，可以自嘲，可以提及具体的失败经历，甚至可以把这些经历作为设计素材放进页面里，比如“这个产品的第一个版本被我删掉重写了三次，剩下来的才是你看到的样子”。

加了这类提示词之后，文案就从一个塑料宣传页变成了有真实温度的自我介绍。

4.4 交互效果看着炫，实际用起来不顺手

Claude 生成的不少页面会默认带上大段 JS 动画效果：滚动淡入、鼠标拖拽、卡片翻转等等。炫是炫，但经常出问题——有些动画在移动端特别卡，有些交互逻辑有 Bug。

我给自己的规则是：生成的页面只保留一个最核心的交互。其他所有 JS 效果全部删掉，用普通静态内容代替。真正要加交互，自己在小簇代码里手写。这样页面干净利落，也更接近专业开发者的做法。

我最常见的一个场景是“收起到某一区块才播放动画”的效果，这类交互如果交给 Claude 实现，它经常写成固定延迟触发，内容还没滚动到屏幕前就播完了。遇到这种需求，我干脆手动把它改成IntersectionObserver实现，代码量不大，效果好得多。

5. 一些值得尝试的提示词模板

下面这几个提示词模板我从实践中沉淀下来，按需填内容就能用，也可以作为基础再扩展。

5.1 “反 AI 味”页面设计提示词

请为 [项目名称] 设计一个落地页。 设计要求： - 风格：有手作感和温度感，像一位独立开发者自己搭的个人主页，不以企业官网风格为目标 - 布局：非对称，不要把所有卡片做成同样尺寸，不同区块可以有完全不同的布局方式 - 色彩：只用 2-3 种颜色，其中只有一个强调色，避免大面积柔和渐变 - 字体：用一套有性格的衬线体和一套干净的无衬线体搭配，禁止用系统默认字体 - 文案：用第一人称写，避免“我们提供”“赋能”“极致体验”等模板话术，允许口语化表达 - 技术：纯 HTML + CSS + 少量原生 JS，响应式优先适配移动端，生成的代码不允许有没用到的 CSS 类

5.2 生成后立即执行的“人工去 AI 味”检查清单

页面生成之后，对照这个清单逐项过一遍，基本能清掉九成的 AI 味：

• [ ] 有没有任何一行文案让你觉得“这不是人话”，改掉它
• [ ] 有没有任何区块你觉得删掉也不可惜，删掉它
• [ ] 有没有三个以上卡片都用同样尺寸，打破或合并它们
• [ ] 有没有全部区块都居中排列，试着让某一块靠左落地
• [ ] 有没有使用“渐变背景”“玻璃拟态”等元素，一律去掉或换成纯色
• [ ] 有没有全站都是一个“基调”的动效，只保留最关键的一个
• [ ] 有没有任何 emoji、装饰图标，考虑该不该删或换成更克制的符号
• [ ] 页面标题的字号是否比正文大出 3 倍以上，不够就加大
• [ ] 有没有用通用引号或圆角按钮，改成直角或带描边的样式往往更有个性
• [ ] 最后一个动作，全局搜索一下“我们”“赋能”“解锁”，全删，换成真正的具体描述

这套清单跑完之后，页面基本就从“AI 生成的均值页面”转向“带着个人印记的真实网站”了。

6. 末尾说点实在话

估计有人会问：既然手动调这么多，那还用 Claude 干嘛？我的答案很简单——它是用来“起飞”的，不是用来“降落”的。AI 能在一分钟内搭好页面骨架，大大节省从零到一的时间，但把字符从 80 分推到 88 分这种活，恰好是靠人捡回来的。

我自己使用了很长一段时间的节奏是：用 Claude 快速生成一版草稿，然后花跟生成差不多的时间手动打磨布局、删区块、改文案。最后出来的页面既有 AI 的高效支撑，又有人藏进去的小心思。

还有个经验是：多准备一些“风格参考”描述，比如“像某个手工工作室的网站”“像某位设计师的个人作品页”，这类描述比“高端大气上档次”更能引导 Claude 输出不那么 AI 化的结果。

说白了，“AI 味”不是 AI 的问题，是我们没有限制它该往哪儿走。给它更明确的边界，再加上自己的一点手艺，页面自然就有了人的质感——这活儿不难，就是得多动手。