这一章讲的是前端 vibecoding 最常见的一类任务：从一个模板页面开始，逐步改成更像真实产品的官网。
这不是单纯“改好看”，而是要学会：
- 先让 AI 编程助手理解页面结构；
- 再让它按品牌、内容和用户目标去调整；
- 最后看它有没有把手机端、按钮、文案和层级一起做好。
学完这一章，你应该能把“做一个官网”拆成更小的任务，并且知道怎样让 AI 编程助手按目标推进。
如果还没有打开可用的 AI 编程工具，先按第一章从官网安装并完成第一个练习，再继续这一章。
本章可直接复制的提示词
你要做的事：把一个普通模板页面改得更像真实产品官网。
【可直接复制给 AI】
请帮我把当前首页改得更像一个真实 SaaS 产品官网。
要求：
1. 先不要大改，只告诉我最应该改的 5 个地方；
2. 每个地方都说明改完用户会看到什么变化；
3. 优先改标题、副标题、按钮、首屏信息和手机端观感；
4. 不要讲设计理论，直接给我修改建议和示例文案。
【说明】
- AI 会指出页面最该改的地方；
- 给出更像产品页面的标题、文案、按钮建议；
- 告诉你改完用户会看到什么变化。
不满意继续这样问：
请不要继续分析。
请直接把首页标题、副标题、按钮文案改成 3 套可选方案。
7.1 这一章不要再只写“帮我改好看”
页面改造是 AI 编程工具最容易出效果的地方，也是最容易翻车的地方。
很多新手会这样说：
帮我把这个页面改好看一点。
这句话看起来没问题，但实际很危险。
因为“好看”太空了。
AI 编程工具可能会猜：
加渐变
加阴影
加大圆角
加动画
加一堆卡片
把页面改成黑色风格
把按钮改得很花
顺手改了价格和文案
顺手改了全局组件
结果页面可能确实“变了”，但不一定更像产品。
真正好用的方式不是只给一句提示词，而是给 AI 编程工具一套“审美规则 + 参考组件 + 修改边界”。
这一章我们不再只靠提示词，而是加入几个现在很常见的开源项目和 Skill 思路：
Taste Skill：给 AI 编程工具补审美规则
shadcn/ui：给页面稳定组件基础
Magic UI：给页面增加动效和高级感
Launch UI：参考成熟落地页模块结构
Open Lovable：参考 AI 生成页面的改造方式
Dyad：参考本地 AI app builder 的产品页面思路
你可以把这一章理解成：
不用只靠“帮我改好看”，而是让 AI 编程工具按一套成熟前端审美流程改页面。
本章会讲 6 个真实场景：
首页像模板
Hero 没有产品感
按钮和卡片很廉价
Pricing 区域太乱
AI 生成页面太 slop
页面改完怎么验收
核心原则：
AI 编程工具负责改代码，Skill 负责审美规则，热门 UI 项目负责提供结构参考，你负责验收和控制边界。
7.2 先给 AI 编程工具一个“落地页审美 Skill”
如果每次都跟 AI 编程工具说：
页面要高级一点 按钮要好看一点 排版要舒服一点 不要太模板
它很容易理解偏。
更好的办法是做一个简单 Skill。
可以叫：
landing-page-taste
中文叫：
落地页审美 Skill
这个 Skill 的目的不是替你写完整页面，而是给 AI 编程工具一套固定的判断标准。
它告诉 AI 编程工具：
什么叫模板感
什么叫产品感
什么叫信息层级
什么叫按钮有行动感
什么叫移动端可读
什么叫不要乱编数据
Skill 内容示例
你可以创建一个 SKILL.md，内容如下：
# 落地页审美 Skill
当用户要求改首页、落地页、SaaS 官网、AI 工具页面、产品介绍页时，使用本 Skill。
## 目标
把模板感强、信息层级混乱、转化弱的页面，改成更清晰、更可信、更适合上线的产品页面。
## 工作流程
1. 先分析页面，不要直接修改。
2. 先判断页面属于哪种类型：SaaS、AI 工具、API 服务、个人产品、开源项目、课程页。
3. 检查首屏是否说清楚“给谁用、解决什么问题、为什么现在要点按钮”。
4. 检查 CTA 是否明确。
5. 检查页面是否有空话、套话、泛泛而谈。
6. 检查布局是否有层级：标题、说明、行动按钮、信任信息、功能区、FAQ。
7. 检查按钮、卡片、间距、圆角、阴影是否过度。
8. 检查移动端是否可读、可点、不卡片溢出。
9. 不编造用户数量、客户案例、收入数据、评价。
10. 修改前先给方案，用户确认后再改。
## 输出格式
- 页面类型：
- 当前最大问题：
- 最应该先改的区域：
- 建议参考的结构：
- 允许修改的文件：
- 不应该修改的文件：
- 改完后的验收方式：
## 禁止事项
- 不要编造客户案例。
- 不要编造用户数量。
- 不要改真实价格。
- 不要改支付逻辑。
- 不要改 API。
- 不要新增不必要依赖。
- 不要全站重构。
不做 Skill，也可以直接复制这段提示词
请作为“落地页审美顾问”帮我分析当前页面。
要求：
1. 先不要修改任何文件
2. 判断这个页面是 SaaS、AI 工具、API 服务、个人项目还是其他类型
3. 检查首屏是否说清楚产品价值
4. 检查 CTA 是否明确
5. 检查页面是否有模板感、空话、信息层级混乱
6. 检查移动端是否可能有问题
7. 不编造客户案例、用户数量、收入数据
8. 先输出改版方案，等我确认后再开始修改
输出格式：
- 页面类型：
- 当前最大问题：
- 最应该先改的区域：
- 建议参考的结构：
- 允许修改的文件：
- 不应该修改的文件：
- 改完后的验收方式：
7.3 案例一：首页像模板，用 Taste Skill 先诊断
第一个案例是最常见的：
首页能打开，但看起来像模板。
页面可能有这些问题：
标题很泛
副标题很空
按钮没行动感
首屏没有重点
功能卡片像复制粘贴
页面没有可信感
不知道产品到底解决什么问题
这类页面直接让 AI 编程工具改，很容易越改越花。
正确做法是先让 AI 编程工具做审美诊断。
第一步：先诊断，不修改
请使用“落地页审美 Skill”的标准，帮我诊断当前首页。
先不要修改任何文件。
请重点检查：
1. 首屏标题是否清楚表达产品价值
2. 副标题是否具体
3. CTA 是否有行动感
4. 页面是否有模板感
5. 功能区是否只是堆卡片
6. 是否缺少信任信息或使用场景
7. 移动端是否可能阅读困难
输出：
- 最影响转化的 5 个问题
- 每个问题的原因
- 对应改法
- 可能需要修改哪些文件
- 哪些文件不要动
第二步：让 AI 编程工具给 3 套方向
不要只让 AI 编程工具给一个方案。
你可以让它给三种路线：
请给我 3 套首页改版方向：
1. 稳重专业版
2. AI 工具感版本
3. 网红教程感版本
每套都包含：
- 首屏标题
- 副标题
- 主按钮文案
- 次按钮文案
- 适合的用户
- 页面模块顺序
先只输出方案，不要改文件。
这样你可以根据项目定位选方向。
如果是 API 服务站，可能选“稳重专业版”。
如果是 AI 工具教程页，可能选“网红教程感版本”。
如果是开源项目展示页，可能选“AI 工具感版本”。
第三步：确认后再修改
采用“AI 工具感版本”。
请开始修改首页，但限制如下：
允许修改：
- 首页页面文件
- 首页展示组件
- 首页文案相关数据文件
禁止修改：
- package.json
- API 文件
- 登录逻辑
- 支付逻辑
- 真实价格
- 真实用户数据
- 全局配置
要求：
1. 不新增依赖
2. 不编造用户数量
3. 不编造客户案例
4. 如果需要真实数据，用“待补充”
5. 修改完成后总结 diff
AI 编程工具可能会改什么
合理的改动可能包括：
改 Hero 标题
改副标题
改 CTA 文案
调整功能区顺序
增加痛点区
增加使用流程
增加 FAQ
优化卡片文案
调整移动端布局 className
不合理的改动包括：
改价格
改 API
新增支付逻辑
编造客户案例
重构整个项目
升级依赖
新增动画库
删除现有业务逻辑
验收方式
页面改完后，让 AI 编程工具生成验收清单：
请为这次首页改版生成验收清单。
要求分为：
1. 文案真实性
2. 首屏表达
3. CTA
4. 移动端
5. 无关文件
6. 构建命令
不要继续修改文件。
你自己至少检查：
页面有没有变清楚
按钮是否能点
移动端是否正常
有没有编造数据
git diff 是否只改相关文件
npm run build 是否通过
7.4 案例二：用 shadcn/ui 思路重做按钮和卡片
很多页面廉价感不是来自颜色，而是来自组件不统一。
比如：
按钮大小不一致
卡片圆角不一致
阴影过重
边框太乱
图标风格不统一
表单输入框和按钮不像一套
这时候不要让 AI 编程工具自己发明一套 UI。
可以让它参考 shadcn/ui 的思路：
可组合
可复制
可定制
样式统一
组件边界清楚
注意：这里不是让 AI 编程工具直接安装一堆组件。
而是让它按这种组件风格去整理页面。
推荐提示词
当前页面的按钮和卡片风格不统一，看起来比较廉价。
请先分析当前页面，不要修改文件。
请参考 shadcn/ui 的组件设计思路，帮我分析：
1. 按钮是否有统一 variant
2. 卡片是否有统一边框、圆角、间距
3. CTA 是否足够突出
4. 功能卡片是否信息过多
5. 是否有必要抽出统一的展示组件
注意：
- 不要直接安装 shadcn 组件
- 不要新增依赖
- 不要改业务逻辑
- 先只给分析和修改计划
让 AI 编程工具判断“该不该抽组件”
很多新手让 AI 编程工具一改页面，它就开始抽组件。
不是所有情况都需要抽组件。
你可以问：
请判断这次是否真的需要抽出新组件。
如果不需要，请只在当前页面内做最小修改。
如果需要，请说明新组件名称、用途、props，以及为什么值得抽出来。
最小修改版提示词
请按 shadcn/ui 的风格统一首页按钮和卡片。
允许修改：
- 首页页面文件
- 首页相关展示组件
限制：
1. 不安装新的 shadcn 组件
2. 不新增依赖
3. 不改 API
4. 不改价格或套餐数据
5. 保持现有设计系统，不要大换风格
目标：
- 按钮尺寸统一
- 卡片间距统一
- 边框和圆角统一
- 主 CTA 更突出
- 移动端卡片不溢出
翻车点
不要这样写：
帮我用 shadcn 重写整个页面。
这很容易变成大重构。
更好的写法是：
参考 shadcn 的组件一致性，只整理当前页面的按钮和卡片，不重写整个页面。
7.5 案例三：用 Magic UI 给页面加一点动效，但不要变成花活
有些页面不是结构差，而是太平。
比如：
首屏没有视觉记忆点
功能区很像文档
按钮没有反馈
卡片没有层次
页面没有一点点动感
这时候可以参考 Magic UI 这类动效组件库的思路。
但要注意：
动效是调味料，不是主菜。
很多新手让 AI 编程工具加动效，最后页面变成：
到处闪
到处飞
加载慢
移动端卡
像素材站
不像产品官网
所以这一节要教“克制地加动效”。
推荐提示词
当前页面比较平，缺少一点视觉记忆点。
请参考 Magic UI 这类现代动效组件的思路，但不要直接复制，也不要安装新依赖。
请先分析：
1. 哪个区域最适合加轻量动效
2. 哪些区域不应该加动效
3. 是否可以只用现有 CSS / Tailwind 实现
4. 动效是否会影响移动端性能
5. 最小修改方案是什么
先不要修改文件。
适合加动效的区域
通常适合：
Hero 背景弱动效
CTA hover
卡片进入效果
图标微交互
统计数字轻微强调
步骤流程高亮
不适合：
价格数字乱动
支付按钮乱动
表单输入框乱动
长文本段落乱动
移动端大面积动画
后台管理页面到处动画
修改提示词
请给首页增加非常克制的视觉动效。
允许修改：
- 首页 Hero 组件
- 首页功能卡片组件
要求：
1. 不新增依赖
2. 不引入动画库
3. 只使用现有 Tailwind / CSS
4. 动效要轻，不要影响阅读
5. 移动端减少或关闭复杂动效
6. 不修改业务逻辑
7. 修改后说明每个动效的目的
验收方式
动效改完后，不只看好不好看。
还要检查：
页面是否变卡
移动端是否抖动
按钮是否仍然容易点击
动效是否干扰阅读
是否影响首屏加载
是否新增了不必要依赖
翻车点
错误写法：
帮我加一些酷炫动效。
更好的写法：
只给首屏和功能卡片加轻量动效，不影响阅读，不新增依赖。
7.6 案例四：用 Launch UI 思路整理页面模块
有些页面不是丑，而是顺序乱。
比如一个 SaaS 页面可能是：
Hero
功能卡片
一堆说明
价格
又一堆功能
FAQ
按钮
用户看半天不知道：
这是什么？
适合谁？
能解决什么问题？
下一步点哪里？
这时候可以参考 Launch UI 这类网站组件模板的思路：不是只改单个按钮，而是整理页面模块结构。
推荐页面结构
一个更清晰的落地页通常可以是：
Hero：一句话说明价值
痛点区：用户现在遇到什么问题
解决方案：产品怎么解决
功能区：核心功能
使用流程：怎么开始
信任信息：为什么可信
Pricing：怎么购买或开始
FAQ：消除疑问
底部 CTA：最后行动
不是所有页面都必须有全部模块。
但这个顺序很适合让 AI 编程工具参考。
推荐提示词
当前页面模块顺序比较乱，用户看完不知道下一步做什么。
请参考成熟 SaaS 落地页的模块结构，帮我重新规划页面顺序。
先不要修改文件。
请输出：
1. 当前页面模块列表
2. 哪些模块重复
3. 哪些模块缺失
4. 推荐的新顺序
5. 每个模块的作用
6. 哪些模块这次不建议新增
限制：
- 不编造客户案例
- 不编造用户数量
- 不改真实价格
- 不改 API
让 AI 编程工具只做结构，不先写代码
先只输出页面结构方案，不要写代码。
要求：
- 每个模块用一句话说明目的
- 标出哪些模块沿用现有代码
- 标出哪些模块需要新增
- 标出哪些内容需要我提供真实素材
确认后再改
按这个结构改首页。
本次只允许做：
1. 调整现有模块顺序
2. 优化模块标题和说明
3. 新增 FAQ 模块
4. 新增底部 CTA 模块
禁止：
- 不新增客户案例
- 不新增虚假数据
- 不修改价格
- 不修改 API
- 不修改登录和支付
翻车点
页面模块不是越多越好。
错误做法：
帮我把所有 SaaS 官网模块都加上。
更好的做法：
只增加能提高理解和转化的模块，最多新增 2 个。
7.7 案例五：Open Lovable 生成的页面，还需要 AI 编程工具精修
现在很多人用 AI app builder 生成页面。
比如 Open Lovable、Dyad、v0、Lovable、Bolt 这类工具，能很快生成一个能看的页面。
但“能生成”不等于“能上线”。
AI 生成页面常见问题是：
看起来完整，但文案很空
模块很多，但没有重点
按钮很多，但不知道点哪个
移动端一般
代码结构不一定适合维护
组件命名可能很随意
有些数据是编造的
这类页面很适合交给 AI 编程工具做二次精修。
推荐提示词
这是一个 AI app builder 生成的页面。
它能运行，但我觉得还不能上线。
请先分析当前页面，不要修改文件。
请帮我做一次上线前审查：
1. 页面是否有模板感
2. 文案是否具体
3. CTA 是否明确
4. 是否有编造数据
5. 移动端是否可能出问题
6. 组件结构是否可维护
7. 哪些地方应该先改，哪些不值得改
请输出：
- 最高优先级的 5 个问题
- 每个问题的改法
- 是否需要改代码
- 是否需要我提供真实信息
让 AI 编程工具清理“AI 味”
AI 生成页面经常有一些味道：
Transform your workflow
Boost productivity
Unlock potential
Seamless experience
All-in-one platform
这些词很像模板。
你可以让 AI 编程工具专门处理：
请检查页面文案里的 AI 味和模板话。
要求：
1. 找出空泛文案
2. 改成更具体的产品表达
3. 不编造数据
4. 不改变产品定位
5. 不修改代码，先只输出文案替换建议
修改提示词
请基于刚才的审查，做一次最小改版。
允许修改：
- 页面文案
- 展示组件
- 移动端布局 className
禁止修改：
- API
- 登录
- 支付
- 数据模型
- package.json
- 真实价格
- 真实用户数据
要求：
1. 去掉模板话
2. 强化产品价值
3. 移动端更清晰
4. 不新增依赖
5. 修改后总结 diff
这个案例适合做教程标题
比如：
AI 生成的页面，离上线还差这 5 步
用 AI 编程工具去掉页面里的 AI 味
Open Lovable 生成页面后，我让 AI 编程工具精修了一遍
从能看，到能上线，中间差一个 AI 编程工具
这些标题适合后面做小红书、公众号、视频封面。
7.8 案例六：Pricing 区域不能乱改，价格是真钱
Pricing 是最容易被 AI 编程工具改坏的区域之一。
因为它不只是 UI。
它可能涉及：
真实价格
套餐权益
支付按钮
购买链接
限额说明
计费规则
用户转化
所以这一节一定要强调：
Pricing 可以优化展示，但不能乱改数据。
推荐提示词
当前 Pricing 区域信息层级比较乱，用户不容易选择套餐。
请先分析当前页面，不要修改文件。
请分析：
1. 推荐套餐是否突出
2. 价格是否容易扫读
3. 功能权益是否太长
4. CTA 是否清楚
5. 移动端是否会挤在一起
6. 是否存在真实价格或权益数据文件
限制：
- 不修改真实价格
- 不修改套餐权益
- 不新增支付逻辑
- 不编造新套餐
- 不修改 API
如果价格来自数据文件
很多项目会有：
src/data/pricing.ts
src/config/plans.ts
src/lib/pricing.ts
这类文件要谨慎。
你可以说：
如果 Pricing 数据来自单独数据文件，本次只允许读取，不允许修改。
本次只允许优化展示组件。
修改提示词
请优化 Pricing 区域的展示效果。
允许修改：
- Pricing 展示组件
禁止修改：
- 价格数据文件
- 套餐权益
- 支付逻辑
- API 文件
- package.json
目标：
1. 推荐套餐更明显
2. 价格更突出
3. 功能列表更易读
4. 移动端改为单列
5. 不改变任何真实价格和权益
验收方式
Pricing 改完一定要查：
价格有没有变
套餐名有没有变
权益有没有少
按钮链接有没有变
推荐套餐是否突出
移动端是否可读
是否新增了无关依赖
可以让 AI 编程工具自查：
请根据当前 diff 检查这次 Pricing 修改有没有影响价格、套餐权益、支付链接或 API。
只输出风险，不要继续修改。
7.9 本章通用模板
下面这些可以直接复制。
模板一：落地页审美诊断
请作为“落地页审美顾问”帮我分析当前页面。
要求：
1. 先不要修改任何文件
2. 判断页面类型
3. 检查首屏价值表达
4. 检查 CTA
5. 检查页面模板感
6. 检查信息层级
7. 检查移动端风险
8. 不编造用户数量、客户案例、收入数据
输出：
- 页面类型：
- 当前最大问题：
- 最应该先改的区域：
- 建议改版方向：
- 允许修改的文件：
- 不应该修改的文件：
- 验收方式：
模板二：用 Taste Skill 风格诊断页面
请按 Taste Skill 的审美方向，帮我检查这个页面是否有 AI 生成感。
重点检查：
1. 布局是否模板化
2. 排版是否无层级
3. 间距是否随意
4. 按钮是否没有主次
5. 卡片是否堆砌
6. 动效是否过度或缺失
7. 移动端是否可读
先只输出诊断结果，不要修改代码。
模板三：参考 shadcn/ui 整理组件风格
请参考 shadcn/ui 的组件一致性思路，检查当前页面按钮和卡片。
要求：
1. 不安装新组件
2. 不新增依赖
3. 不重写页面
4. 只判断按钮、卡片、间距、圆角、边框是否统一
5. 输出最小修改方案
模板四：参考 Magic UI 加轻量动效
请参考 Magic UI 这类现代动效组件的思路，给当前页面增加一点视觉记忆点。
要求：
1. 先不要修改文件
2. 不新增依赖
3. 不引入动画库
4. 只建议轻量动效
5. 移动端要克制
6. 不影响阅读和性能
请先输出动效方案。
模板五：AI 生成页面上线前审查
这是一个 AI app builder 生成的页面。
请帮我做上线前审查。
要求：
1. 检查模板感
2. 检查文案是否空泛
3. 检查 CTA 是否明确
4. 检查是否编造数据
5. 检查移动端风险
6. 检查组件结构是否可维护
7. 先输出问题清单，不要修改文件
模板六：Pricing 区域安全改造
请优化 Pricing 区域展示，但不要改任何真实数据。
限制：
- 不修改价格
- 不修改套餐权益
- 不新增支付逻辑
- 不修改 API
- 不修改 package.json
目标：
1. 推荐套餐更突出
2. 价格更易读
3. 功能列表更清楚
4. 移动端单列展示
5. 修改后检查是否影响价格和支付链接
7.10 本章总结
这一章的重点不是“让 AI 编程工具改好看”。
真正的重点是：
用 Skill 和热门 UI 项目的思路，给 AI 编程工具一套明确的审美和改造标准。
你可以这样理解：
Taste Skill：负责审美规则
shadcn/ui：负责组件一致性
Magic UI：负责轻量动效灵感
Launch UI：负责页面模块顺序
Open Lovable / Dyad：负责 AI 生成页面的二次精修场景
AI 编程工具：负责把这些思路落到代码里
新手最容易犯的错是：
只说“帮我改好看”
更好的方式是：
先诊断
再选方向
再限制范围
再修改
再验收
本章你要记住 6 条规则：
第一，不要一上来让 AI 编程工具重写页面。
第二，先用 Taste Skill 思路诊断“模板感”和“AI 味”。
第三，按钮和卡片可以参考 shadcn/ui 的一致性，但不要乱装依赖。
第四，动效可以参考 Magic UI，但一定要克制。
第五，AI app builder 生成的页面还要做上线前审查。
第六，Pricing 区域可以改展示，不能乱改价格和权益。
最终推荐工作流：
上传截图或打开页面
用落地页审美 Skill 做诊断
选择改版方向
限制可修改文件
让 AI 编程工具做最小改动
检查 diff
检查移动端
运行 build
人工确认文案和数据真实性
下一章可以继续讲：
接口又炸了时，如何把 401、403、404、429、请求地址、返回内容、API 文件和环境变量交给 AI 编程工具排查，并且结合热门开源 API 项目的错误处理方式，让 AI 编程工具不只是“猜原因”，而是按真实后端项目的流程定位问题。