Product / Design / AI Coding
AI 做的 App 為什麼一眼被看穿：Vibe Coding 的平均美學、假互動與 edge-state 盲點
Google Share 連到 TechOrange 轉載 Business Insider：AI / vibe coding 工具讓非工程背景者能快速做 app，但許多 AI-coded apps 會露出三個 UI/UX 破綻：介面收斂到平均美學、畫面精美但互動不直覺、錯誤/空狀態/離線等 edge states 被省略。文章整理成 BigIntTech 與 Hermes 做 AI app prototype 時的設計 QA checklist：從美學 prompt 轉向 decision prompt，並用專業 UI/UX review 補上使用者情境。
2026年7月9日4 分鐘閱讀👁 7
Vibe Coding × UI/UX × Product Quality
AI 做的 App 為什麼一眼被看穿：三個 UI/UX 破綻
Vibe coding 讓 app prototype 變快，但也讓一批 AI-coded apps 顯得相似、漂亮但不好用。真正該補的不是更多陰影、圓角與漸層，而是使用者情境、互動真實性、錯誤狀態與 edge cases。
來源與查證：
- Google Share 原始連結
- TechOrange：為什麼 AI 做的 App 一眼就被看穿？
- Business Insider 原文：There are 3 telltale signs that you used AI to make your app
TechOrange 站台有 Cloudflare 阻擋，本文透過 Jina Reader 讀取；並回查 Business Insider 原文確認三項重點。
一句話重點：AI-coded app 最大問題不是「醜」，而是看起來完成、實際上只完成 happy path。一旦進入商業化或真實使用，就會在差異化、互動回饋與錯誤狀態上露餡。
三個一眼看穿的跡象
| 跡象 | 表面看起來 | 真正問題 | 修正方向 |
|---|---|---|---|
| 平均美學 | 米色/灰白背景、單一品牌色、無襯線字體、圓角、投影 | 設計收斂成統計平均值，缺乏品牌與產品個性 | 提供品牌限制、反例、視覺參考、使用者情境，而不是只說 clean / modern |
| 漂亮但不好用 | landing page 精緻、動畫與 hover 都很完整 | 底層功能還在 alpha；互動暗示與實際可點擊功能不一致 | 逐頁做 click path QA，檢查 affordance、可用性、資訊架構與 onboarding 節奏 |
| edge states 被省略 | happy path 很順 | empty state、error message、loading、offline、權限失敗、資料不足時沒有設計 | 把 edge-state design 列為 prompt 與驗收條件；文案要安撫與引導，不只顯示錯誤 |
1. 平均美學：演算法版 Uniqlo / Ikea
Business Insider 引述 Impeccable CEO Paul Bakaus 的說法：AI 生成設計常出現 beige / tinted backgrounds 與 sans-serif fonts，被形容為「algorithmic Uniqlo or Ikea」。這不是壞設計，但會變成一種安全、平庸、很像模板的樣子。
華盛頓大學 HCI 研究者 Donghoon Shin 也指出，vibe-coded products 會收斂到「single, statistically average aesthetic」。常見元素包括：
- 白色 / 灰色 / 米色為主的溫和配色
- 單一品牌強調色
- 標準無襯線字體
- 大量圓角、drop shadow、卡片式 layout
- 過度依賴 emoji、漸層、陰影讓畫面看似活潑
這也是很多 AI prototype 會被說成「AI slop」的原因：不是因為沒有完成，而是完成得太像所有模型平均看過的 SaaS landing page。