hi，大家好，我是seven。一个专注用AI赋能品牌的实践者。
这是《VibeCoding实战：不会写代码，也能做产品》系列拆解第6篇。
我做 BrandGEO 的时候，第一版功能全部跑通了。我发链接给一个做品牌的朋友，他打开看了几秒钟，问我：“这个是干什么的？”
ㅤ
我愣了一下。在这个产品上花了好几周，脑子里全是功能和流程。但他打开首屏看到的只有一个产品名和一张截图，没有任何一句话告诉他这东西能帮他做什么。
ㅤ
后来我加了一句「让AI开始推荐你」，效果立刻不一样了。
ㅤ
产品「能用」和「想用」之间，差的不是代码，是用户体验的基本功。
ㅤ
这篇把这三件基本功讲清楚：怎么起名、怎么写首屏和产品页面做得让人看一眼就懂、怎么让AI按照你喜欢的风格来做。这次我们主要说基于网页端的 APP 产品来说。
ㅤ
ㅤ ㅤ
01.首屏：你只有 3 秒钟
ㅤ
ㅤ
用户打开你的产品，你有大约 3 秒钟的时间。
ㅤ
3 秒内他不会决定「要不要注册」，他决定的是要不要继续往下看。如果看不懂这是什么，就走了。
ㅤ
首屏只需要回答一个问题：这个东西是干什么的。
ㅤ
怎么回答？三个要素就够了。
ㅤ
第一，产品名。
起名的原则不复杂：简短、好念、和功能有关联。比如伴聊是「陪伴 + 聊天」的缩写，口语化，好记，和功能直接挂钩。Say it 简短有力，但必须配一句话解释它是什么。
ㅤ
如果你想不出来，让 AI 帮你。但不要直接说“帮我起个名字”，这太模糊了。
给它上下文：
…
我的产品是 [产品类型]，核心功能是 [一句话描述]，目标用户是 [谁]。请给我 10 个产品名方案，要求简短好记、和功能有关联，中文和英文各 5 个。
AI 会给你一堆候选。你从里面选几个，然后马上做一件事：去 Namecheap搜一下对应的域名有没有被注册。不要先定了名字再发现域名被占了，来来回回很折腾。
ㅤ
我也把 7 年品牌命名经验整理成了一个 skill，开源在 GitHub，可以直接让 agent 安装使用：https://github.com/SevenAILab/brand-naming-studio-skill
ㅤ
第二，一句话说明。
不是广告语，是「一句话让人懂你是干什么的」。
ㅤ
好的一句话说明有三个特征：用用户听得懂的话说、体现使用场景或痛点、不超过 15 个字。
ㅤ
「让AI开始推荐你」好在哪？它用了用户的语言，是结果导向的真实用户场景。这比「GEO优化平台」有说服力一百倍。
ㅤ
不要追求高级，追求「听一遍就懂」。「基于大模型的智能内容解决方案」，这话信息量为零。改成「帮你 3 秒写出一条朋友圈」，立刻知道是什么了。
ㅤ
第三，一个行动按钮（CTA）。 告诉用户下一步做什么。「立即开始」「免费试用」「预约诊断」。
ㅤ
我做 sevenailab 的时候，CTA 是“预约免费报告”。放在首屏最显眼的位置，蓝底白字，圆角大按钮。文案直接告诉你下一步做什么：获得免费报告。
ㅤ
ㅤ
CTA 有两个常见问题。第一是不够显眼，按钮太小、颜色和背景太接近，用户找不到。第二是文案太弱，「了解更多」是最没转化力的 CTA 文案之一。换成「立即开始免费试用」或者「免费预约一次诊断」，效果可能差出几倍。
ㅤ
ㅤ
还有一个很多人不知道的细节：CTA 不止出现一次。首屏放一个，页面中段再放一个，底部再来一个。用户可能在任何位置决定「我要试试」，你要确保他随时能找到按钮。
ㅤ
ㅤ
容易忽略的一点：你做完首屏，先用手机打开自己看一遍。现在超过 80% 的用户是在手机上看你的产品页面。如果按钮太小点不到，或者一句话说明在手机上被截断了，前面做的事就白费了。
ㅤ
产品名让人记住你，一句话说明让人理解你，CTA 让人知道下一步做什么。三个缺一个，首屏就不完整。
ㅤ
ㅤ
ㅤ
02. ㅤLanding Page：第一版只做四件事
ㅤ
首屏之外，一个完整的产品着陆页有很多部件。我把常见的列了一份清单，一共 13 个：
ㅤ
ㅤ
- 1.顶部导航栏（Logo + 功能链接 + 登录按钮）
- 2.首屏标题区（产品名 + 一句话说明 + CTA）
- 3.产品特色功能（3-4 个核心卖点）
- 4.CTA 行动召唤（重复出现）
- 5.社会证明和用户评价
- 6.价格方案
- 7.常见问题 FAQ
- 8.产品核心优势
- 9.产品演示（截图 GIF 或视频）
- 10.使用流程图（3 步搞定）
- 11.联系我们
- 12.信任标志（合作伙伴 Logo、认证标志）
- 13.底部导航（法律链接、社交媒体）
ㅤ
ㅤ
你不需要13 个全做完。第一版只需要做最核心的 4 个：顶部导航栏、首屏标题区、产品特色功能、CTA。
ㅤ
像我我做BrandGEO的时候，第一版就四样东西：一个 Logo、一句话说明、三个服务卖点、一个预约按钮。看着简陋，但有人输入网站进行检测了。有人在用了才有理由继续做下去。
ㅤ
先上线一个骨架，再慢慢长肉。
ㅤ
ㅤ
ㅤ
03.风格：别让 AI 替你做审美决策
ㅤ
如果你用 AI 工具生成过产品页面，你应该能一眼看出AI味：深色或渐变背景、紫色主色调、圆角卡片、半透明毛玻璃效果、满屏渐变按钮。
ㅤ
这不是 AI 故意的。这是它的「默认审美」，一个通用 SaaS 模板风格。你不定义风格，它就给你这个。和你的产品气质可能完全不搭。
ㅤ
所以你需要主动定义风格。我把它拆成四个维度：
ㅤ
ㅤ
第一，参照网站。 找 1-3 个你觉得「味道对了」的网站，截图发给 AI，说「参考这个风格」。AI 能读懂截图里的设计语言：配色、字体比例、间距节奏、留白方式。如果效果不够精确，截更具体的部分：「参考这个卡片的阴影和圆角。」越具体越准。
ㅤ
第二，主色调。 选一个主色，一个辅助色，一个背景色。不确定就告诉 AI：「克制、专业、不要紫色。」不用给色号，给感觉就行。
ㅤ
第三，整体气质。 用比喻描述。「像咨询工作室」「像日本杂志」「像苹果官网那种极简」。用比喻比用技术术语有效得多。AI 对「像日本无印良品」的理解比对「设计要简约大方」精准十倍。
ㅤ
第四，不要什么。 排除法。「不要紫色渐变」「不要深色背景」「不要赛博风」。排除法帮 AI 避开默认模板。
ㅤ
比截图更精准的方法：用设计文件
ㅤ
截图参考有一个局限，AI 要「猜」你喜欢的是这个网站的哪个部分。现在有更精准的办法。
ㅤ
有一类工具专门把真实网站的设计系统导出成结构化的 Markdown 文件，包含配色、字体、间距、组件这些参数。
ㅤ
比如 getdesign.md 收录了 300 多套品牌设计系统。
ㅤ
styles.refero.design 收录了 2000 多套。refero 还提供了 MCP 工具，可以直接让你的 AI Agent 在写代码的时候调用真实产品的设计规范。
ㅤ
用法很简单：找到你喜欢的网站风格，下载它的 DESIGN.md 文件，丢给 Agent，告诉它「按照这个设计文件来做」。比截图精准得多，因为设计文件给的是参数，不需要 AI 去猜。
ㅤ
先看效果再写代码
ㅤ
如果你还没开始写代码，但想先看看产品做出来大概长什么样，可以用 Google Stitch（stitch.withgoogle.com）这类原型工具。
ㅤ
把需求文档丢进去，它会根据你的网站类型匹配设计系统，快速生成一份前端效果图。你在动手写代码之前就能对产品有一个直观的感知，确认方向对了再开工。
ㅤ
ㅤ
这三种方法可以配合使用：没动手时用原型工具确认方向，找到喜欢的网站后用设计文件精确还原，有了第一版后用截图法微调细节。
ㅤ
ㅤ
ㅤ
ㅤ
最后的话：打磨不是一次性的事
ㅤ
我做的几个产品里，没有一个是第一版就让我满意的。
ㅤ
sevenailab 第一版首屏只有产品名和一张大图，什么解释都没有。后来加了 slogan 和 CTA，预约量立刻变了。Say it 第一版风格用了 AI 的默认紫色渐变。后来用截图参考法重新定义了风格，整个产品的「气质」才对了。
ㅤ
打磨是一个持续的过程。每走一遍「修改 → 验收 → 上线 → 观察」的循环，产品就比上一遍好一点。
ㅤ
但打磨也有优先级。不要一上来就纠结字体和间距。先确保三件事：首屏三要素完整（产品名、一句话说明、CTA 够显眼）、风格是你定义的不是 AI 的默认模板。
ㅤ
这三件事做到了，你的产品就从「能用」跨进了「想用」的门槛。
ㅤ
ㅤ
另外，想了解更多关于vibecoding的实战心法，现在可以直接在「微信读书」看啦～
这里将我做了5个产品，260天的实践，10万字的VibeCoding心法，都放在这本书里了。
下一篇我们讲如何收到第一笔钱：定价支付与冷启动。
如果这篇文章对你有帮助，欢迎点赞转发，让更多人看到。
也欢迎在评论区分享你的想法和问题。我们下期再见～
✨️我是Seven。一个只讲AI实战干货的品牌人，带了解AI最新的实用方法✨️
👆️点击关注，不错过更多内容分享👆️
ㅤ