上周我本来只想干一件小事，给 Shadow Card 和 Quick flomo 这两个小工具的详情页加上定价信息。
当时我没让 AI 直接去改代码，而是让它先出高保真 HTML。它借助设计 skill 先出了三个版本让我选择，最后我选择了两个版本结合起来，然后就是文案优化。
处理完，浏览器一刷新，黑白纸墨底色配 1px 细线，页面显得很干净、也比较有品味。
等我切回线上看首页，满屏深蓝渐变、青紫发光字和大圆角卡片，上面印着“Welcome to the Future”和“释放你的无限潜能”。单页改顺之后，首页这种模板感就变得很难忍受。我索性把整站全改了一遍。
改版前后长图对比
先看 Quick flomo 详情页的变化。
旧版页面用了深蓝渐变、青紫高亮和大圆角卡片，AI 味很浓，但读完不知道它具体解决什么阅读问题。
新版页面换成了黑白纸墨色、细线和留白，大标题直接写出“你读完的内容，应该留下来”。
再看首页完整长图。
旧版首页充斥着“探索未来”“释放无限潜能”这类大词，产品卡片信息很少而且中间有排版断层，用户看不到工具的具体用法。
新版首页把大标题定在“把想法，留成下一步”，右边写清楚工具和读者的关系。下方把 7 款微工具按编号、使用场景、上线状态和价格整齐排开。
老页面的问题
很多用 AI 生成的独立产品主页，容易堆满类似的元素。
- 视觉元素过满，喜欢深色渐变、青紫发光字和磨砂玻璃大圆角。
- 口号太大，满屏写着“赋能创作者”“连接未来”，不讲工具具体做什么。
- 功能罗列过长，把十几条技术参数塞在卡片里，像一份没人想读的说明书。
| 维度 | 旧版页面的特征 | 新版页面的处理 |
|---|---|---|
| 第一印象 | 宏大口号，像通用 AI 玩具 | 场景主张，说明每个工具只解决一件事 |
| 视觉语言 | 霓虹发光，深蓝底色，排版断层 | 纸墨黑白，1px 细线，编辑部留白 |
| 文案逻辑 | 抽象大词，如数字枢纽、创意伙伴 | 具体痛点与获得感，如读网页时保留重点并送回 flomo |
| 产品陈列 | 信息缺失，只有一两句套话 | 清单化呈现，标明免费或 Pro 定价与状态 |
访客打开网站是为了解决手头的具体麻烦。把多余的装饰拿掉，页面才能把事情讲清楚。
具体改法
整个改动分成三个阶段。
1. 原型先行，用独立 HTML 选型
如果直接跟 AI 说“改得高级一点”，它往往会加上更多的发光字和圆角。
我当时调用了 huashu-design 和 ui-ux-pro-max，在本地独立的 HTML 文件里让它同时生成几种不同风格的单页。
- 编辑部杂志风（Editorial），用大标题、黑白对比、1px 细线和杂志式留白。
- 权益账本风（Ledger），强化表格和参数清单。
- 极简目录风（Catalog），用卡片网格做分类。
我选了杂志风做骨架，价格部分参考账本风把参数列清楚。
在单独的 HTML 文件里看页面，调行高、字号和换行很方便。方向在浏览器里确定以后，再去改正式代码，中间省掉了反复修改业务组件的麻烦。
2. 重写文案，回答三个具体问题
老文案容易写成功能列表。这次改版要求每个产品页面在首屏回答三个问题。
- 读者什么时候会需要它。
- 它替读者完成了哪一步。
- 用完以后事情有什么变化。
Quick flomo 的旧文案是“flomo 剪藏 + AI 阅读助手”，新文案改成“你读完的内容，应该留下来。读网页时保留重点、出处与思考，把真正有价值的碎片送回 flomo”。
Shadow Card 的旧文案是“精美数字名片生成器”，新文案改成“交换联系方式时，让别人记住你。职位、项目或联系方式变了，对方手里的链接永远是最新的”。
专有名词也顺手做了统一，flomo 保持全小写，不写成大写。把场景立住，读者才会去看具体的价格和功能。
3. 全站系统化，沉淀通用规则与明确跳转
单页改顺之后，我把这套规则扩到了整个站点。
第一件事是提取全站通用的样式规则。
- 提取统一的纸墨色阶、1px 分界线和标题字号阶梯。
- 版式采用左边叙事、右边窄栏交代关系的双栏结构。
- 顶部导航、页脚和产品下拉列表做成通用组件，各页面只传入自己的文案和配置。
第二件事是理顺每个产品的转化路径。
- 免费小工具标明免费使用，按钮跳到 GitHub 或直接可用的网页。
- 付费插件标清 Free 和 Pro 的权益区别，按钮跳到 Chrome Web Store 或结算页面。
- 删掉以前所有“探索产品”“立即开始”这类模糊按钮，让每个点击都有确定的去向。
踩坑经验
这次改动也踩了几个坑。
第一是预览和生产要分开。本地单页 HTML 看着顺眼，不代表生产代码没有问题，一定要在独立分支里做验证。
第二是事实必须查真实代码。改版时不能只看旧门户写的数据，必须核对各个产品仓库的 README、数据库迁移和 Chrome Web Store 页面。价格和版本如果让 AI 猜测，很容易写出错误的数据。
第三是对比截图要用真实环境。采集改版前截图时，我一开始混用了本地草稿，后来把生产环境回滚到主分支，重新按标准视口截了全长图。真实的对比才有说服力。
可用的 Prompt
如果你也想改自己的产品主页，可以先把产品资料整理好，把下面这段话发给 AI。
先不要修改业务代码。
请先检查当前网站的页面结构、产品仓库 README、双语文案、真实价格与外部链接。
从用户场景出发，说明：
1. 这个产品在什么具体场景下帮用户解决什么麻烦；
2. 页面应该引导用户完成哪一个关键动作；
3. 指出当前页面存在的 AI 模板感，比如发光字、大圆角和空洞口号；
接着输出 2 到 3 个不同风格的单文件 HTML 高保真预览供我确认。
设计确认前，不要改动现有代码。
当然，也可以在 refero 等网站找到喜欢的设计风格，把对应的设计描述 design.md发给 AI 处理，避免风格和你预期偏差太大。
这次从加个价格表到改完整个网站，花了大半天。最管用的办法就是先把单页 HTML 做出来，把多余的发光装饰删掉，在浏览器里看顺了再动手。把产品具体替人省了什么麻烦写清楚，页面的质感自然就出来了。
p.s.可接 1v1 咨询和 skill & 工作流定制，欢迎联系。
