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

查看 12|回复 1
作者:pzhyy   
作为一个写了 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 ,你不是被替代的那一批,
    而是效率碾压别人的那一批。

    AI, stitch, Codex

  • Bootis   
    对比 claude Cowork 有什么优势
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部