“AI 已经可以写代码、做设计了。”
但说实话,我一直是半信半疑的状态(停留在 Cursor 刚出来的那会儿)。
于是,今天我决定不看别人说,自己动手实测一把:
用 Stitch + Codex ,给我正在做的产品 Tapero,搞一个官网出来。
👉 想直接看效果的,可以去:tapero.io
我是怎么做的?
整个流程其实比我想象中简单很多,大致分 3 步走:
第一步、先让 ChatGPT 帮我“想清楚”
一开始,我没有急着动手画 UI 原型,而是先做一件很关键的事:
👉 把产品讲清楚
我先梳理了 Tapero 的几个核心点:
然后我把这些丢给 ChatGPT ,让它帮我输出:
👉 示例提示词(给 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 设计稿。
我的实际感受是:
整体来说,大概能做到:
👉 “60% 满意度”
但这 60% 已经很值钱了,因为:
从 0 到 60 ,比从 60 到 90 难太多了。
看看 Stitch 生成设计稿的效果:
没图床了!去看公众号「流光实验」
第三步、把设计稿交给 Codex 复刻
接下来是最关键的一步:
👉 把设计稿交给 Codex ,让它写代码实现
我给它的要求大概是:
👉 示例提示词(给 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:还不错,但需要你会“提示词工程”
Codex:非常强
👉 组合起来就是:
ChatGPT 构思 -> Stitch 起稿 -> Codex 负责落地
一点小感慨
以前做一个产品,你至少需要:
现在呢?
👉 一个人 + AI ,就够了。
这件事,我其实挺震撼的!
然后,现在很多人会焦虑、会担心:
AI 会不会抢走我们的工作?
但我更倾向于这样看:
AI 也是一样。
你可以选择焦虑,
也可以选择成为
👉 那个“会开车的人”。
学会用 AI ,你不是被替代的那一批,
而是效率碾压别人的那一批。

