📝 本篇僅分享個人使用各家 AI 開發工具製作 Landing Page 的實測心得，並非商業合作或廣告。
前言
作為我的智慧型手機 App 開發第一彈，我正在開發一款名為「Sumineko」的應用程式，功能非常簡單，就是讓使用者能在手機角落無限隨機「邊做事邊看」貓咪影片。🎬 參考影片：這是我開發中的 App 畫面，作為 LP 設計的參考素材。
為了將這款 App 上架到官方應用商店，需要在網路上準備隱私權政策頁面，既然如此，我就想說順便製作本 App 的 Landing Page (LP)。
因此，本文將使用代表性的 LLM 和 AI 寫程式服務來製作 LP 的基礎，並以獨斷和偏見來比較其成果。
選手介紹
| 選手 | 特色 |
|---|---|
| v0（v0 Agent） | Vercel 的 Agent 工具。從 Prompt 到 UI 實作、除錯提供一條龍支援。 |
| bolt.new （Claude Sonnet 4.5） | 基於瀏覽器的 Claude Agent。透過對話形式高效建構 Next.js 應用程式。 |
| Lovable | 支援多種 AI 模型的構建器。可直觀地生成與編輯 React+Supabase 應用程式。 |
| Gemini 3.0 Pro | Google 最新的高性能模型。透過多模態輸入快速生成精緻的網頁。 |
| Opus 4.5 | Anthropic 的最強模型。利用長文本上下文，細緻地處理複雜的 Web 應用程式設計。 |
| GPT 5.2 | OpenAI 最新模型。與 GPT-5.1 相比，「給出正確答案的機率」提升 1.8 倍，「程式碼準確度」大幅提升，幻覺減少 30%。 |
⚠️ 關於權宜上的同等對待
雖然純 LLM（Gemini 3.0 Pro, Opus 4.5, GPT 5.2）與內建 LLM 的開發支援系統（bolt.new, v0, Lovable）在系統架構上有所不同，但本文為求方便將其視為同類，旨在主觀比較使用相同 Prompt 生成網頁結果的優劣。因此，請注意本實驗並不嚴謹。
Prompt (提示詞)
準備了以下 2 種模式，輕鬆驗證其即興能力以及對需求的忠實對應能力。- 僅記載最低限度需求的「全權委託模式」
- 描述了相對詳細需求的「指示魔人模式」
全權委託模式
主要是只明確寫出「Sumineko」的簡單概要和必要區塊，設計和文案等都交給 AI 發揮的模式。# Landing Page Creation for "Sumineko" (Corner Cat)
## Request
Design and implement a landing page (Top page only) for the smartphone app "Sumineko".
**You have full creative freedom** regarding the layout, color palette, typography, and copywriting. Please build what you consider to be the **most attractive and modern** design for this product.
## Product Concept
- **App Name**: Sumineko (Corner Cat)
- **Core Value**: A "healing" app that lets users watch cat videos in a Picture-in-Picture (PiP) window while multitasking on their phone.
- **Vibe**: Relaxing, Minimal, Cute but sophisticated.
## Technical Stack
- Next.js 15 (App Router)
- Tailwind CSS
- TypeScript
- Lucide React (for icons)
## Essential Sections (Skeleton)
Please include the following three sections. The order and presentation are up to you.
### 1. Hero Section
- Create a catchy headline and sub-headline that conveys the app's appeal.
- Include "App Store" and "Google Play" buttons (UI only).
- Use a placeholder or CSS art for the main visual.
### 2. Experience / Demo Section (Critical Logic)
This section must adapt based on the user's device:
- **On Desktop (PC)**: Display a mock "Video Player" and a "Start Picture-in-Picture" button to let users simulate the experience in the browser.
- **On Mobile**: Display a message like "Experience the demo on PC" and guide them to the App Store buttons instead.
### 3. Collection Section
- Introduce the feature where users can "collect" the cats they have watched.
- visualize this "collection" aspect (e.g., a grid of cat placeholders, a list, etc.).
## Assets & Copy
- **No assets provided**: Use placeholders (e.g., `via.placeholder.com` or CSS shapes) for all images and videos.
- **Copywriting**: Please write engaging English copy for headings and descriptions based on the product concept.
## Goal
Surprise me with a high-quality, polished UI that balances "Healing/Cute" with "Modern Web Design."指示魔人模式
除了「Sumineko」的概要和必要區塊外，還詳細指示了每個區塊的結構、文案以及配色等設計層面的「指示魔人」模式。内容較長，此處省略。如需確認，請訪問 https://yukapero.com/zh-TW/blog/ai_comparison_on_frontend 查看。成果
v0（v0 Agent）
全權委託模式採用了超王道的 UI 設計，配色非常保守，給人的印象是說好聽是穩健，說難聽就是中規中矩中的中規中矩。
可能因為圖片、影片和圖示等都是暫時的替代品，所以更加凸顯了簡陋感。
如果放入實際素材，或許這種樸素感反而能恰到好處地襯托出截圖和影片等要素。
另一方面，指示魔人模式雖然忠實遵守了 Prompt 的內容，但整體設計同樣也比較保守。
沒有將文字加粗來強調，給人一種好壞參半的平淡印象，與全權委託模式的感覺差異不大。
bolt.new （Claude Sonnet 4.5）
全權委託模式採用以橘色為基調的柔和且生動的設計與配色，視線會自然被橘色的文字和圖片吸引，給人一種洗鍊的印象。
雖然是細節，但在 Hero Section，也就是不用捲動就能看到的位置，有著「Experience the magic（來體驗魔法吧！）」這樣能引起興趣、不著痕跡的宣傳要素，也是減少使用者流失的好巧思。
不過雖說是暫定要素，Hero Section 的手機設計以及 Collection Section 要素的扁平感，讓人感覺有點過時、廉價且帶有業餘感。
另一方面，指示魔人模式雖然對 Prompt 確實非常忠實，但也因為太過忠實，感覺扼殺了 bolt 的優點。
整體來說絕不算差，但與全權委託模式相比顯得太過單調。
這並不是 bolt 的問題，而應該視為我準備的 Prompt 水準太低，直接反映在了成果上。
Lovable
全權委託模式方面，首先映入眼簾的是臉部崩壞的貓咪插圖。
因為我沒有提供素材，它很親切地幫我準備了，但那種像是幼兒園小孩畫的超現實設計讓人忍不住發笑。
不過這些終究只是暫時幫忙準備的，如果忽略這些臉部崩壞貓去看不分設計，背景裡到處都有貓咪，想強調的部分也確實用了棕色或橘色的強調色來突顯，其實並不差。
指示魔人模式方面，在非常忠實於指示的同時，將想強調的字串加粗並配合 App 改用柔和的字體，或是將 PiP 切換按鈕用 Prompt 中未特別指明的橘色來強調，隨處可見巧思。
Gemini 3.0 Pro
全權委託模式好壞參半的是缺乏玩心，整體設計/配色相當緊湊扎實，與其說是療癒系 App，給人的印象更像是商務用的 App 或工具。
雖然這只是我的偏見，但要說很有 Google 風格的話確實很有 Google 風格。
關於設計方向雖然明顯與 App 不搭，但如果暫且不論這點，整體感覺品質非常高。
給人一種「我是照著網頁設計教科書做的！」的印象，沒有怪癖，感覺可以放心地委託它。
雖然是細節，但 PiP 和瀏覽器等暫定插圖的重現度也很高呢。
因為很容易想像完成後的樣子，這是一個不起眼但令人開心的點。
指示魔人模式與其他 AI 一樣忠實於指示，雖然被 Prompt 設計指示的水準低落所拖累，但在細節上，它即興加入了讓手機圖片或 Collection 畫面形象稍微傾斜、帶有動感的設計，成為非常好的點綴。
此外，在 Footer 悄悄行走著的貓也很時髦呢。
Opus 4.5
全權委託模式整體設計明亮多彩且可愛，可以看出它將「貓咪療癒 App」這個主題性確實地反映在設計中。
Header 也採用具有透明感的現代設計，非常時髦。
散落在背景的圖示、標題的漸層、多彩的配色等，在富含玩心的同時，設計上也具有一致性，是不會讓人感到不協調的優秀設計。
另一方面，指示魔人模式若與全權委託模式相比，完全扼殺了 Opus 4.5 的優點，一下子變成了無聊的設計。
與 bolt 一樣，看起來像是 Prompt 的水準低落直接反映在了形式上。
GPT 5.2
全權委託模式的設計和配色方向與 Opus 相似，隨處使用多彩的漸層作為點綴，氣氛明亮。
如果是像我這樣的外行想用這種多彩漸層，無論如何都會顯得有廉價感，但它給人的印象是整理得非常漂亮且妥當。
其他模型大多使用貓的表情符號或照片來表現暫定素材，但 GPT 5.2 似乎完全不使用這類東西。
此外，在 Hero Section 上也顯現出與其他模型的顯著差異。
整個 Hero Section 被表現為卡片元素，手機的形象不是長方形而是以正方形表現。
但是手機畫面下部的要素超出範圍，或者下載連結所在的行與 App 的宣傳文案要素並列放置，顯得有些雜亂，即使是設計外行也能感覺到若干違和感。
指示魔人模式與 Opus 或 bolt 等一樣，變成了無聊的設計。
如同前面多次提到的，這應該也是好壞參半地忠實於 Prompt 的表現。
但是 Lovable 加上了橘色作為強調色，或是配合 App 改用柔和字體，Gemini 則刻意讓要素傾斜等，都有一些表現上的巧思很亮眼，但在 GPT 5.2 上完全沒看到這類東西。
充滿獨斷與偏見的總評與總結
喜歡的 AI 排行榜
根據這次得到的結果，我將依照喜歡的 AI 順序排列並附上理由。順帶一提，我在設計方面是大外行，並沒有專業知識，所以這純粹是基於外行人的直覺和體感所做的評價。
| # | 選手 | 理由 |
|---|---|---|
| 1名 | Gemini 3.0 Pro | 無論是隨便指示還是詳細指示，都能感受到設計上的洗鍊感與安定感。總之只要拜託 Gemini，就能最強烈地感受到它能產出綜合水準以上的成果，所以第一名。 |
| 2名 | Opus 4.5 | 在全權委託 Prompt 中能很好地解讀 App 的意圖，並以高品質反映在設計上，非常出色。但若 Prompt 品質較低，成果品質會比 Gemini 下降得更明顯，這點需要注意。 |
| 3名 | GPT 5.2 | 整體品質很高，讓人感到非常有潛力，但對於全權委託模式下 Hero Section 的設計還是感到一絲不安。 |
| 4名 | bolt.new (Sonnet 4.5) | 除了全權委託模式中部份要素的廉價感外，與 Opus 4.5 相同即興能力很高，但感覺會因 Prompt 不同而扼殺 bolt 的優點，這點需要注意，所以第四名。 |
| 4名 | Lovable | 果然還是很在意臉部崩壞貓。雖然只是暫時的替代素材或許不該在意，但如果暫定圖片太過粗糙，會很難想像完成後的樣子，所以我個人不得不扣分。不過指示魔人模式的完成度即使與其他 AI 相比也不遑多讓。 |
| 5名 | v0(v0 Agent) | 整體來說中規中矩、樸素且無聊。即興能力低，而且感覺強烈受到使用者 Prompt Engineering 水準低落的影響，對於設計很講究的人來說，似乎需要相當小心地使用。正因為它是我過去曾暫時愛用的工具，所以感到有點遺憾。 |
雖然之前主要使用 Claude Code (Max Plan) 和 Cursor，但這結果讓我強烈覺得跳槽到 Antigravity 或許也是個選擇。
沒設計品味的人最好不要在 Prompt 裡管太多
看結果大家應該都有感覺，在指示魔人模式中，雖然部分模型可見巧思，但基本上都變成了樸素且無聊的成果。特別是因為配合 App 內的主題色，將配色限定為棕色系，這似乎更加劇了設計的單調感。
AI 好壞參半基本上都會忠實於指示，這或許是理所當然的，但沒設計品味的人應該不要勉強自己去深入涉足細節的設計部分來設計 Prompt。
對於不太懂的領域，在某種程度上全權委託，AI 應該會依照該領域的最佳實踐來進行判斷。
雖然這樣一來難免會出現「好像在哪看過這個」的感覺，但感覺比外行人隨便亂弄要好得多。
真正的地獄現在才開始
這次的成果只不過是起點，以此為基礎，需要多次與 AI 磨合方向性，逐漸接近自己理想的 UI/UX 的過程。我的情況是明明沒品味卻對 UI 莫名講究，所以這個過程特別花時間。
考慮到這點，比起第一發的成果，AI 的思考時間之短（試錯週期的短暫）、Bug 率之低、準確汲取指示意圖並連結到實作的能力等，其實更為重要。
若從這個觀點來看，排行榜的順序可能會與上述完全不同。
所以，僅看本結果就判斷優劣無疑是言之過早，希望這僅供參考，請務必親自嘗試看看。
作者：Yukapero｜來自日本的獨立開發者，喜歡用 AI 工具做各種實驗。
個人網站：yukapero.com
