实测，用 AI (Stitch + Codex) 给产品做个官网

作为一个写了 10 年代码的老程序员，这几年听得最多的一句话就是：

“AI 已经可以写代码、做设计了。”

但说实话，我一直是半信半疑的状态（停留在 Cursor 刚出来的那会儿）。

于是，今天我决定不看别人说，自己动手实测一把：

用 Stitch + Codex ，给我正在做的产品 Tapero，搞一个官网出来。

👉 想直接看效果的，可以去：tapero.io

我是怎么做的？

整个流程其实比我想象中简单很多，大致分 3 步走：

第一步、先让 ChatGPT 帮我“想清楚”

一开始，我没有急着动手画 UI 原型，而是先做一件很关键的事：

👉 把产品讲清楚

我先梳理了 Tapero 的几个核心点：

• 是什么：AI Web Agent / 自动化工具
• 能做什么：自动化操作网页、抓数据、填表单
• 目标用户是谁：不会写代码的人也能用
• 有什么亮点：用自然语言就能生成 workflow

然后我把这些丢给 ChatGPT ，让它帮我输出：

• Landing Page 的结构（ Hero / How it works / Use cases / FAQ 等）
• 每一块该放什么内容
• 再进一步，帮我生成 Stitch 用的提示词

👉 示例提示词（给 Stitch ）：

Design a modern SaaS landing page for a product called "Tapero".

Style:
- Minimal, futuristic, soft gradients
- Jellyfish-inspired color palette (blue, purple, soft glow)
- Light & dark mode friendly

Sections:
1. Hero section with headline: "Turn Your Browser Into an AI Worker"
   - Subtext explaining automation via natural language
   - CTA: Join Waitlist
2. How it works (3 steps with icons)
3. Use cases (automation, scraping, monitoring)
4. Advantages (no-code, self-healing, powerful engine)
5. FAQ
6. Waitlist section

Visual:
- Subtle animated background (floating particles, jellyfish-like glow)
- Clean layout, large spacing

这一步其实非常关键：

👉 你描述得越清楚，后面 AI 发挥得越好。

第二步、用 Stitch 生成设计稿

接下来就是把提示词丢进 Stitch 。

它直接帮我生成了一个完整的 Landing Page 设计稿。

我的实际感受是：

• 布局：OK ，有产品感
• 风格：基本在线
• 细节：有点“AI 味”，但能接受

整体来说，大概能做到：

👉 “60% 满意度”

但这 60% 已经很值钱了，因为：

从 0 到 60 ，比从 60 到 90 难太多了。

看看 Stitch 生成设计稿的效果：

没图床了！去看公众号「流光实验」

第三步、把设计稿交给 Codex 复刻

接下来是最关键的一步：

👉 把设计稿交给 Codex ，让它写代码实现

我给它的要求大概是：

• 技术栈：Next.js + Mantine UI + next-intl
• 支持 Light / Dark Mode
• 尽量还原设计稿结构和风格

👉 示例提示词（给 Codex ）：

Build a landing page based on the provided design.

Tech stack:
- Next.js (App Router)
- Mantine UI
- next-intl (i18n support)

Requirements:
- Responsive layout
- Light & dark mode support
- Clean component structure
- Reusable sections (Hero, Features, FAQ, Waitlist)

Style:
- Soft gradients (blue / purple)
- Subtle background animation (floating glow / particles)
- Modern SaaS aesthetic

Output:
- Full project structure
- Components split by section
- Clean, readable code

然后就是不断对话、微调：

• “这个间距不太对”
• “这里再高级一点”
• “背景动效弱一点”

多轮下来，它真的能越改越接近我想要的效果。

总结一下

这次实测下来，我的真实评价是：

• Stitch：还不错，但需要你会“提示词工程”
  • 大概做到 60%
  • 适合快速起稿、找方向
• Codex：非常强
  • 多轮对话之后，可以逼近我想要的效果
  • 已经能承担“前端工程师”的一部分工作了

👉 组合起来就是：

ChatGPT 构思 -> Stitch 起稿 -> Codex 负责落地

一点小感慨

以前做一个产品，你至少需要：

• 设计师
• 前端
• 后端
• 测试

现在呢？

👉 一个人 + AI ，就够了。

这件事，我其实挺震撼的！

然后，现在很多人会焦虑、会担心：

AI 会不会抢走我们的工作？

但我更倾向于这样看：

• 汽车出现的时候，马车夫确实失业了
• 但司机这个职业也随之出现

AI 也是一样。

你可以选择焦虑，

也可以选择成为

👉 那个“会开车的人”。

学会用 AI ，你不是被替代的那一批，

而是效率碾压别人的那一批。