GPT-6 Astra 发布大概两周了，到目前为止在所有基准测试里依然在各种乱杀。写代码、操控电脑、长链路 Agent 运行，我的推特信息流里全被它的演示刷屏。
但我真正关心的其实无聊得多：它到底能不能设计出一个看着不像 AI 做出来的网站？这才是我们甲方客户真金白银买单的东西，而我之前测过的所有模型在这点上全军覆没。
一句话总结：光靠它自己不行。单纯把 Prompt 写得天花乱坠也救不回来。你不可能靠 Prompt 把“审美”硬塞给模型，你必须直接带它开眼界，让它看看什么才叫好东西。
这篇长文的核心内容：
- 为什么全世界最顶级的代码模型，搓出来的网站依然一股浓浓的“AI 味”
- 第一回合：Astra 裸跑，到底翻车在哪几个细节
- 第二回合：直接把 60 万个真实上线网站塞给 Astra
- 扛下所有脏活的“调研专用 Prompt”，以及它吐出来的那份分析报告
- 我们 Agency 是怎么拿这套方案给客户落地的（Demo 视频里永远不会教你的实操）
- 压根没人提过的那些坑和局限
- 你今晚就能直接照抄落地的实操清单（Build Sheet）
为什么所有 AI 做出来的网站都长一个鸟样？
上周有个咨询客户跟我通电话，疯狂吐槽市面上那些千篇一律的套版网站。市面上能叫得出名字的 AI 建站工具他几乎试了个遍，但每次吐出来的东西都是换汤不换药：优雅的衬线体（Serif）、鼠尾草绿、悬浮的手机 Mockup，再加上文艺青年范儿的一行流大标题。
讲真，GPT-6 Astra 绝对是我用过写代码最猛的模型，但它依然改不掉这个臭毛病。所以问题根本不在模型，也不在 Prompt。大家写 Prompt 时都喜欢堆词：“高端、杂志风、编辑质感（editorial, magazine feel）”，然后花两三个小时跟生成结果死磕。这些全都是“主观审美词”。模型压根搞不懂旅游品牌、开发者工具或者银行金融各自要的“高级感”有什么区别。它只能去取所有自称“高级”的网站的公约数——而这个平均值，横竖都是那副死样。
巧的是同一周，我刷到了 Griffin Wooldridge 发的视频，刚好把这事儿给办了。致敬大佬，这套工作流就是顺着他的思路摸索出来的。他的逻辑简单粗暴：把 Astra 接入 Mobbin（一个收录了超过 60 万张真实上线 App 和网页截图的灵感库），让模型在真正动手敲代码前，先去深度学习真实优秀作品。先调研，再干活。
我看完脑子直接通了：这不正是困扰我客户的问题吗？当晚我就在自己的项目上测了一轮，效果好到离谱。思路归 Griffin，以下是我实操跑出来的完整过程、真实交付物，以及我们团队为了实操落地加进去的工程化细节。
前期准备
这次测试我拿了“TripGlide”来开刀，这是我几周前自己写的一个旅游预订 App。核心功能早跑通了，但一直缺个像样的 Landing Page。旅游类产品是最完美的试金石，因为在这个赛道里“视觉就是产品力本身”——没人会脑子抽了在一个巨丑的网页上下单订行程。
同样的业务背景、同样的模型、同样的需求文档（Brief），我跑了两遍：
- 第一回合：GPT-6 Astra 裸跑，直接在 ChatGPT 里调 Sites 功能从零手搓。
- 第二回合：GPT-6 Astra 挂上 Mobbin MCP，让它在动哪怕一行代码前，先去把 60 万张真实上线截图翻个底朝天。
免责声明：纯自来水，非商单。我们团队自己掏钱订 Mobbin 快一年了，MCP 本质上就是让模型替我进去翻图，省得我自己一张张肉眼筛。如果你不想花钱，文末也附了白嫖版方案。
第一回合：Astra 裸跑
这是我当时给它的原版 Prompt，一个字没改。中文是译本，复制英文才能拿去原样跑：
它跑了 10 分 13 秒，直接甩给我一个完整网站。需求里要的模块一个不落、全自适应、连图都配好了。它甚至还自作聪明地在上面标注：预订和支付只是预览，评价和价格表都是占位符。
乍一看还真挺像回事——但这就是最恶心人的陷阱。它不是垃圾模型做出来的灰不拉几的丑陋 Bootstrap 界面，它进化成了另一种模板：“AI 假高级感（AI premium）”。如果你看多了这类网页，一眼就能闻到那股味儿。
来看具体哪里翻了车。点开每一条：
这根本不是代码层面的问题，它的代码写得相当干净。核心症结在于：模型从未真正见识过“一个行业顶尖的旅游网站究竟在解决什么问题”，它只能硬猜，而猜出来的结果就跟满大街的 AI 模板撞了个满怀。
第二回合：给 Astra 喂进 60 万个真实上线网站
接入 Mobbin 只需要两分钟：
- 打开 ChatGPT 里的“Apps”，搜 Mobbin，添加并授权绑定。
- 账号必须是 Mobbin Pro 或以上，免费版不放开这个接口。
老实说一句：MCP 第一次握手经常报错，我当时 Astra 就提示挂掉了，连重试了两次才连上，中间还客客气气跟我道了个歉。大家用的时候要有心理准备。
最核心的骚操作来了：我压根没让它马上重新写代码。而是命令它：“先去调研，写份分析报告给我看”。
这一步就是绝大多数人踩坑的分水岭。很多人工具刚配好，反手就甩一句“帮我优化得高级点”，模型啥都没来得及看就提枪上阵，最后无非是从一种套路跳进另一种套路。这份报告才是真正值钱的资产，它强迫模型在敲下任何一行代码前，先向你交卷证明它真的“吸收”进去了。
那份报告究竟扒出了什么？
它去翻了包括旅游网站、垂直 App 和消费级品牌在内的 14 个真实界面，最后甩给我一份列了 28 项改动 的改版方案。
报告开篇第一句就把我看清醒了：
TripGlide 目前虽然把基础骨架搭对了，但通篇只是在靠「形式感的无脑堆叠」与「假大空的通用套话」去硬拗高端旅游的人设。
「形式感的无脑堆叠与假大空的通用套话」——这几个字简直把 AI 伪高级的遮羞布撕得一干二净。
报告对它上一版的产物进行了毁灭级的自我打脸：
- 谈 Hero 模块：太多眼熟的 Landing Page 组件在疯狂抢戏，整个版面缺乏一个核心聚焦点。
- 谈排版：一个原本不错的设计手法，一旦你在每个模块里无脑套用，它就会变成极度廉价的模板套路。
- 谈文案：滥用极端的对仗、零碎短句和过度修饰的伪情绪词，拼凑出了一种极其虚伪的工业化节奏。
- 谈目的地卡片：几乎提供不了任何有助于用户做决策的信息。「高山仰止，抚平浮躁」这种鬼话放在哪儿都行。
随后它把参考过的案例（KOBU 酒店页、Airbnb 发现页、Wanderlog 每日行程、TravelPerk 的 Hero 区块、KÖPPEN、Face Formula）拉通对比，总结出了顶尖设计都遵循的 6 条隐形铁律：
单一统领视觉
一个极具代表性的具体房源，或者一套真实的产品操作流来挑大梁，其他所有配角通通靠边站。
具象、落地、可消费的信息
标明真实的酒店名字、项目、日期、具体地点，别在那画大饼吹体验。
清晰直白的 CTA
预订、搜索、收藏，文案不绕弯子，位置恰到好处。
信息依附于图片呈现
旅游卡片不是摆设，是用来辅助决策的。
极端的「大」与「小」对比
大开大合的杂志感摄影大图，搭配密集严谨的实用元数据，各司其职。
拿真刀真枪的产品力说话
展示真实能用的交互截图，交代清楚产品怎么帮你解决问题。
它一句话锁死了新的设计路线：
TripGlide：旅行买手编辑部为你严选，即刻带你出发。
新方案全面转用垩白色（Chalk）底色、接近全黑的高对比深色文字、深橄榄绿的行为按键。大标题选了一款衬线体，实用数据信息统统换成无衬线体；斜体字严格收敛在关键位置克制使用，不再满屏乱飞。
改动清单刀刀见血：拔掉悬浮卡片、太阳 icon、经纬度、浮夸动效；严禁同一张阿玛菲重复出现；把 6px 文字放大到能读；重写 Hero，大白话讲清楚这 App 干嘛的。还主动提议删掉虚构好评和假价格表，因为「假评价根本提供不了背书价值」。
说实话，就冲这篇设计 Review 的水准，很多外包公司磨磨唧唧搞一周都交不出这种质量。
第二回合：彻底推倒重构
我只回了它几个字：
方案通过。严格对照报告清单，全量重构现有站点。
它大约跑了 11 分钟，直接把全新的代码部署到了原链接。它在结项总结里汇报：重构了杂志感版式、全套配图、字体排版以及具体目的地的行程面板，顺道彻底删除了捏造的评价和假价格表。
对照着之前的清单一核验，模型到底有没有把调研成果吃透，答案一目了然：
- Hero 模块聚拢：只保留一个核心焦点。手机变成一双手稳稳托着，下方「发现、规划、出行」三个 Tab 会联动。这是 TravelPerk 的解法，不是立在那里晃 5 度。
- 真实业务信息：「海景民宿・阿玛菲海岸波西塔诺」「已为你加入拉维洛」。上一版「开启你的专属旅程」进了垃圾桶。
- 视觉噪音归零：经纬度、闪光、小太阳蒸发。主按钮明牌写着「探索预览版」。
- 独立目的地数据：京都是 6 天二年坂与东山区；多洛米蒂是 5 天多比亚科。上一版点哪个都是阿玛菲。
讲点掏心窝子的（Demo 里绝对不会告诉你的瑕疵）
重构后的版本依旧没做到 100% 封神。那个「衬线 + 绿色斜体」的标题套路还是借尸还魂，在页面里顽固地冒头了三次。明明它自己在报告里刚痛批过这种套路，转头自己手写的时候又忍不住抄起了近道。如果这是给真实客户交付，这几个文案我绝对当场打回重写。
但把两版 Hero 放在一起直观对比：同样的模型、同样的需求、同样的产品，唯一的变量，只是模型在动手干活前眼睛到底看了什么。
第二回合跑完之后该怎么干？
无论哪次生成，最终产物永远会有瑕疵。千万不要犯这个致命错误：直接跟它讲「把文案改得别那么中二」，然后放任模型把整页代码重新跑一遍——这种改法永远是修好了 A，反手把原本完美的 B 搞崩溃。
推倒重构之后的微调，必须加上「围栏（Fence）」。你的指令格式必须永远保持这种定式：
这一句严丝合缝的围栏指令，杀伤力远超你最初需求文档里写的那堆花里胡哨的描述。
在 Agency 内部，我们究竟如何靠这套流程落地交活？
Griffin 的视频基本停留在 Before 和 After 的效果对比，纯做 Demo 这完全足够了。但要在 Agency 真正交付给甲方爸爸，我们在实操中加了以下防翻车机制：
动手前先喂 Design System
色板、文字梯级、间距规则、通用组件。先把一份凝练的规范 Doc 塞给模型读透。没有这层防护网，模型在调研阶段扒下来的模式很容易跟品牌原本的调性大打出手。
锁死页面做专项调研
用上面那套报告 Prompt。打死都不要发「帮我做高级点」这种废话，咬死「先调研、出报告、等我批」的工作流。
构建 → 移动端 Check → 针对唯一拉胯模块做二次调研
页面里必定有某个模块差点意思。针对这个具体模块单独再去捞一次案例，不要让整个页面的骨架跟着陪葬。
沉淀设计范式资产
把每次生成的修改清单按行业分类归档。下次再接同类型客户，直接把这套 Pattern 作为 Baseline 塞给它。第 4 步才是最恐怖的复利来源。
（Prajwal 会把每次跑出来的完整 Pattern 清单发到 newsletter The AI Head Start，旅游这一期当周发出。）
零成本白嫖版工作流
如果你暂时不想掏钱氪 Mobbin 会员，这套思路平替下来完全行得通，无非是肉身操作稍微慢一点：
- 在你所在的行业里，扒出 10 到 12 个你认为真正拔尖的标杆网站。
- 每个网站分别截下：Hero 模块、一个核心功能模块，以及 Footer。
- 把截图直接打包丢进对话框，用一模一样的调研 Prompt，把里面的「利用该 MCP」改成「深度拆解附件里给到的截图参考」。
- 后续动作完全一致。
虽然放弃了 60 万张截图的泛化深度，但你依然死死抓住了整套打法的精髓：动手敲代码前，逼它先去搞透调研。
必须要泼的冷水（避坑指南）
- 计费陷阱：Mobbin MCP 必须绑定 Pro 级以上账号，每次搜索都会扣 Mobbin 自己的 AI Credits，官方费率并不完全透明。
- MCP 链接脆弱：首次建连非常容易暴毙，多试两次是常态。
- 报告质量取决于 Prompt：你要是只发一句「分析下设计模式」，它就只会吐官话；必须用上面的四合一组合拳，才能逼出 28 条手术刀级方案。
- 推翻重来综合征：你让它微调一个像素，它恨不得把整页洗一遍。每一次微调必须加上模块围栏。
- 警惕过度抄袭：如果报告满篇复读某一个参考网站，敲代码前立刻命令它把采样范围拉宽。
- 找好图依然得靠人工：排版可以几分钟脱胎换骨，摄影素材往往跟不上。
- 适用场景限制：这套工作流目前是针对营销落地页摸索出来的。复杂 App 业务系统，老老实实以 Design System 为地基。
照抄即用的实战清单
把整套打法压缩成一条可以直接套用的标准 SOP。勾选会记在这台浏览器里：
已完成 0 / 8
把这套工程化动作配置好一次，直接复用到后续所有的 Landing Page 上。把沉淀下来的设计范式存好，你以后每次起手建站，起跑线就是拉满的「高阶审美」，而不是每次都在及格线边缘用 Prompt 盲人摸象。
客户同一周拿到了网站。工作流留在了 Agency。这就是整场实验。