Claude Code + Sonnet 5 网页设计实战：18 分钟搭出拿奖级网站

有开发者测试后直呼：Sonnet 5 做网页设计，效率高得有点离谱。

他专门录了一条 18 分钟教程，展示如何把 Claude Code 和 Sonnet 5 配合起来，从一个模糊想法开始，搭出具有作品集水准的网站。

这套方法值得收藏。真正有用的地方，不是“让 AI 帮你写几段代码”，而是把 AI 当成一支随时待命的设计与开发团队。

你负责判断方向。

Claude Code 负责落地。

Sonnet 5 负责把页面做得更像一个真正的产品，而不是一张套了模板的网页。

一、别一上来就让 AI 写代码

很多人打开 Claude Code，第一句话就是：

帮我做一个好看的官网。

然后得到一个熟悉的结果：

蓝紫色渐变
三张功能卡片
一个大号按钮
标准导航栏
看起来像 AI 做的页面

问题不在模型能力，而在需求太空。

你需要先给它一个清晰的设计任务。

可以这样写：

我要做一个面向独立开发者的产品官网。

产品功能：帮助用户把会议录音自动整理成任务清单。
目标用户：每天参加大量会议的产品经理和创业者。
品牌气质：安静、专业、轻量，不要科技公司常见的炫酷蓝紫风。
视觉参考：编辑器界面、纸张、会议记录、精密工具。
页面目标：让访客在 10 秒内明白产品做什么，并愿意试用。

请先不要写代码，先输出：
1. 页面信息架构
2. 首屏叙事方案
3. 色彩和字体方向
4. 关键交互
5. 需要准备的图片或图标素材

这一步的价值很大。

你先让模型思考页面怎么讲故事，再进入开发阶段。这样能避开“代码写得很快，方向却完全跑偏”的情况。

二、让 Sonnet 5 先建立视觉方向

拿奖级网站通常不是靠堆效果。

它们有一个明确的视觉主线：

摄影作品集会围绕图片展开
音乐产品会强调节奏和沉浸感
工具类产品会强调清晰、稳定、可操作
高端品牌会控制颜色、留白和动效数量

可以要求 Sonnet 5 输出一份简短的设计规范：

基于上面的产品定位，制定一份可执行的网页视觉规范。

请包含：
- 主色、辅助色、背景色和文字色
- 标题、正文、按钮的字号和字重
- 页面最大宽度和常用间距
- 圆角、边框、阴影的使用规则
- 图片比例和裁切方式
- 动效应该出现在哪里

避免：
- 默认蓝紫渐变
- 大量玻璃拟态
- 无意义的发光效果
- 过多圆角卡片
- 复制常见 SaaS 模板

这里要盯住一个核心：每个视觉选择都要服务产品定位。

如果产品是会议记录工具，界面可以像一张干净的工作台。要是做成满屏霓虹光效，用户会觉得它像游戏启动页，信任感反而下降。

三、用 Claude Code 搭出第一版

设计方向明确后，再让 Claude Code 进入项目。

建议把任务拆成几段，不要把整个网站塞进一条指令里。

第一步：建立项目骨架

请根据设计规范建立网站项目。

要求：
- 使用现有项目的技术栈，不要擅自更换框架
- 先完成页面结构和响应式布局
- 组件保持清晰，方便后续修改
- 把颜色、字号和间距集中管理
- 暂时不添加复杂动画
- 完成后说明修改了哪些文件

第二步：完成首屏

现在只处理首页首屏。

目标：访客在 10 秒内理解产品用途。
要求：
- 标题直接说清楚产品价值
- 副标题补充使用场景
- 主按钮只有一个明确动作
- 加入一个能展示产品状态的真实界面
- 桌面端和移动端都要检查
- 不要添加与产品无关的装饰

第三步：补齐页面内容

继续完成首屏下方内容，包括：
- 使用流程
- 具体功能
- 产品界面展示
- 用户反馈
- 行动召唤区域

每个区块都要回答一个问题：
用户为什么现在就应该继续了解这个产品？
避免重复首屏文案，也不要用空泛的形容词。

这种拆分方式很适合实际开发。

你能随时停下来检查方向。哪里不对，改哪里。不会出现改一个按钮，却让整个页面结构重新失控的情况。

四、让 AI 像设计师一样自我检查

页面能跑起来，只完成了一半。

你还需要让 Claude Code 做一次专门的视觉审查。

请以资深网页设计师的身份检查当前页面，不要直接修改代码。

从这些角度列出问题：
- 首屏是否有明确焦点
- 标题是否太大或太空
- 页面区块之间是否缺少节奏
- 颜色是否过于单一
- 对比度是否足够
- 按钮是否容易找到
- 移动端是否出现溢出或拥挤
- 图片是否真正展示产品，而不是装饰
- 动效是否影响阅读

请按严重程度排序，并给出具体修改建议。

这一步特别重要。

很多 AI 页面的问题，肉眼看起来只是“不够高级”。拆开检查后，通常是这些细节出了问题：

首屏标题说了半天，用户仍不知道产品是什么
所有文字都是同样的灰色，层级很弱
卡片之间间距不一致
手机端按钮挤成一团
动画很多，却没有任何信息价值
图片用了抽象渐变，用户看不到产品本身

让模型先列问题，再动手修改，结果会稳定很多。

五、用截图驱动迭代

不要只在代码里想象页面效果。

每完成一个阶段，就运行项目并截图。桌面端看一次，手机端再看一次。

你可以把截图交给模型，配合这样的指令：

这是当前页面截图。请只根据截图判断视觉问题。

重点检查：
- 视觉焦点是否明确
- 内容是否太挤或太空
- 标题和按钮是否被其他元素抢走注意力
- 页面是否像真实产品，而不是设计稿
- 哪三个修改能带来最大改善

请给出具体到区块、字号、间距或颜色的建议。
不要一次提出超过 5 个修改项。

“只改三个地方”是一个很实用的限制。

一次改十几项，页面容易越改越乱。每轮只处理影响最大的几个问题，改完再看截图。视觉效果通常会在三到五轮内明显变好。

六、适合直接复制的完整工作流

你可以按这个顺序操作：

写清楚产品、用户和页面目标
让 Sonnet 5 输出信息架构
让 Sonnet 5 制定视觉规范
用 Claude Code 建立项目骨架
单独完成首屏
补充功能、流程和信任内容
运行项目并检查桌面端
检查移动端布局
用截图让模型找视觉问题
每轮只修复三个高优先级问题
检查按钮、链接、表单和加载状态
清理无用组件、重复样式和临时文案

这套流程的重点是“设计、实现、检查、修正”循环，而不是期待一条提示词直接生成成品。

七、常见避坑清单

1. 不要迷信“拿奖级”四个字

你对模型说“做得像 Awwwards 获奖网站”，它很可能只会增加动效、渐变和大标题。

更有效的说法是：

页面需要有明确的视觉记忆点，但所有装饰都必须服务内容。
请用一个核心视觉概念贯穿页面，不要堆叠热门设计元素。

2. 不要让 AI 凭空编造素材

没有真实产品截图时，页面很容易充满假图片和随机插画。

你可以明确要求：

暂时使用结构真实的产品界面占位，不要生成无法代表产品功能的抽象图片。
图片位置请保留可替换接口，并标注建议尺寸。

3. 不要只看桌面端

桌面端漂亮，手机端崩掉，这是 AI 做网页最常见的问题之一。

重点检查：

导航是否能正常收起
标题是否换行自然
图片是否撑破容器
按钮是否足够大
卡片是否变成难以阅读的长条
横向滚动是否意外出现

4. 不要一味追求动画

鼠标跟随、滚动视差、文字分裂动画，看起来很热闹，加载速度和可读性却可能一起下降。

保留能帮助用户理解状态的动效，比如：

页面切换反馈
表单提交状态
内容加载过程
产品操作演示

其余效果，能删就删。

5. 不要忽略可用性

视觉很强的页面，按钮点不动，依旧是失败作品。

发布前至少手动走一遍：

导航链接
主按钮
表单提交
错误提示
加载状态
键盘操作
手机端点击区域

结语：把时间花在判断上

Claude Code 和 Sonnet 5 可以大幅缩短网页制作时间。

但真正决定页面质量的，仍然是你的判断：产品要表达什么，用户先看到什么，哪些元素该删掉，哪些细节值得保留。

一条好提示词不能替你完成审美决策。

它能做的是，把你的判断快速变成页面，并让你拥有更多时间去反复打磨。

想学这套网页设计打法，18 分钟教程值得收藏。看视频时别只盯着最终效果，重点观察开发者如何拆需求、如何给模型反馈、如何根据截图连续迭代。那才是这套方法真正可复制的部分。