實測，用 AI (Stitch + Codex) 給產品做個官網
整理版優先睇
一個人用 Stitch + Codex 整官網，老程序員實測：AI 真係做到嘢
呢篇文章係一位寫咗 10 年代碼嘅老程序員，親身實測用 AI 工具幫自己產品 Tapero 整官網嘅經驗。佢半信半疑咁開始，跟住發現成個流程比想像中簡單好多，主要分三步：先用 ChatGPT 理清產品定位同結構，再用 Stitch 生成設計稿（大約做到 60% 滿意度），最後將設計稿交畀 Codex 寫代碼落地。佢嘅結論係：以前做產品至少需要設計師、前端、後端、測試，而家一個人加 AI 就夠，組合係 ChatGPT 構思→Stitch 起稿→Codex 負責落地。佢認為與其焦慮 AI 會搶飯碗，不如學做「識得開車嘅人」，成為效率碾壓別人嘅一批。
文章重點唔係教人點樣用工具，而係分享一個具體嘅實測案例，帶出 AI 當下嘅能力邊界同協作模式。作者強調「描述得越清楚，AI 發揮得越好」，而且 0 到 60 分比 60 到 90 分難，所以 AI 幫手拎到初稿已經好值錢。佢亦提醒讀者要懂得判斷 AI 生成嘅細節同調整方向，多輪對話先可以逼近想要嘅效果。
- 作者用 ChatGPT 構思產品定位同 Landing Page 結構，再生成畀 Stitch 嘅提示詞，強調「描述清楚先發揮得好」。
- Stitch 生成設計稿做到約 60% 滿意度，適合快速起稿揾方向，但細節有「AI 味」要接受。
- Codex 多輪對話後可以逼近期望效果，已經承擔到前端工程師一部分工作，但要不斷微調間距、背景動效等。
- 作者結論係：以前要設計師+前端+後端+測試，而家一個人加 AI 就夠，組合係 ChatGPT→Stitch→Codex。
- 面對 AI 焦慮，作者話與其擔心被取代，不如成為「識得開車嘅人」，用 AI 提升效率競爭力。
內容片段
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 friendlySections:
1. Hero section with headline: "Turn Your Browser Into an AI Worker"
- Subtext explaining automation via natural language
- CTA: Join Waitlist2. How it works (3 steps with icons)3. Use cases (automation, scraping, monitoring)4. Advantages (no-code, self-healing, powerful engine)5. FAQ6. Waitlist sectionVisual:
- Subtle animated background (floating particles, jellyfish-like glow)- Clean layout, large spacing一個老程序員嘅實測起點
作者寫咗 10 年代碼，成日聽人講 AI 可以寫 code 做設計，但一直都半信半疑。佢決定唔再聽人講，親手實測用 AI 幫自己產品 Tapero 整官網。
呢個實測嘅核心係：用 Stitch + Codex，一個人搞掂官網
佢首先梳理咗 Tapero 嘅核心點：係 AI Web Agent / 自動化工具，可以自動操作網頁、抓數據、填表單，目標用戶係唔識寫 code 嘅人，亮點係用自然語言生成 workflow。
實測流程：三步走，由構思到落地
- 1 先用 ChatGPT 幫手理清產品定位，輸出 Landing Page 結構（Hero / How it works / Use cases / FAQ 等），再生成畀 Stitch 嘅提示詞。作者話呢一步好關鍵，描述得越清楚，後面 AI 發揮得越好。
- 2 將提示詞輸入 Stitch，佢生成完整設計稿。作者感受係佈局 OK、風格基本在線，但細節有「AI 味」，整體約 60% 滿意度。佢話從 0 到 60 比從 60 到 90 難，所以呢 60% 已經好值錢。
- 3 最後將設計稿交畀 Codex，要求用 Next.js + Mantine UI + next-intl，支援 Light/Dark Mode，盡量還原設計。經過多輪對話微調（例如間距、背景動效），Codex 越改越接近想要效果。
作者特別強調，Codex 喺多輪對話之後可以逼近期望效果，已經承擔到「前端工程師」嘅一部分工作。
實測結果同感想：一個人加 AI 就夠
作者總結組合係：ChatGPT 構思 → Stitch 起稿 → Codex 負責落地。以前做產品要設計師、前端、後端、測試，而家一個人加 AI 就搞得掂。佢話呢件事令佢好震撼。
佢分享嘅流程同具體提示詞，其實揭示咗AI 協作嘅關鍵：你嘅描述能力同迭代能力，直接決定最終質素。唔怕開頭得 60 分，怕嘅係停喺度唔改。
作為一個寫咗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，你唔係被取代嗰批，
而係效率碾壓人哋嗰批。
作為一個寫了 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，你不是被替代的那一批，
而是效率碾壓別人的那一批。