我要來分享，今天我開始了一個新的專案，我會用怎樣的工具、用什麼樣的方法，在極短的時間之內，快速建構一個高質感的網站設計。

Vibe Coding 在沒經驗的情況下，很容易弄出「一眼就知道是 AI 製作的網站」。
AI 特別鍾愛那種好比說：

1. 紫色漸層
2. 對比度超級高的色彩與文字
3. 奇怪的元素
4. 意義不明的 emoji

所以我要來分享，今天我開始了一個新的專案，我會用怎樣的工具、用什麼樣的方法，在極短的時間之內，快速建構一個高質感的網站設計。

這邊分享幾個我的例子

• Fig It 應用

• 線上課程

• IOS 原生 App，防偷窺 App

Ray貓 。 吳睿誠 (@ray.realms) on Threads

快速 Vibe Coding 一個很酷的可能沒什麼用的iPhone App

Threads

這邊我會很簡單地替目前的每種方法打一個分數，去一步步引導出我目前覺得最好的方法，所有的評分都是基於我本人的客觀感覺。

所以我並不會直接跳過所有東西，你可以自己挑選覺得適合的，在最低的成本情況下，尋找能滿足自己需求的來使用。

前言，先從最簡單的開始：先來介紹幾個 Agent Skill

首先，如果你不知道 Agent Skill，這個 2026 年最重要的 AI 概念，請先去看這篇文章。

Agent Skill 實戰攻略，從入門到進階，提升你的 AI 生產力

如果你對 AI 的認知還停留在「每次開新對話都要重新貼上背景資料跟規則提示詞」，那你正浪費許多自己的時間與生產力。 今天，我會用一篇文章快速帶你實戰 Agent Skill，帶你理解如何使用以及如何快速提升自己的生產力。 讓我先來舉一個簡單的例子，假設我們想弄一個專門做「會計對帳」的 ChatGPT，就必須把對帳軟體的完整使用說明書、每日流程（例如：今天有什麼帳要對、怎麼查詢來源資料、遇到特例如何處理等）全部寫進提示詞裡。這就像是在交代新進的實習生，給他一份鉅細靡遺的 SOP。 在過去，這看起來只是一個很普通的長篇提示詞，我們只是把流程用文字記錄下來。每次需要 AI 做這件事，我們就得把這段落落長的提示詞翻出來，重新複製貼上給它。 但 Agent Skill 最大且最核心的改變，在於它可以替這份提示詞加上「說明（Description）」，告訴 Agent **只有在特定情境下，才需要去讀取這個 Skill**。 這就像是在查閱百科全書，書中雖然有上萬個條目，但你可以先看目錄找到需要的內容，而不用把上萬頁全部翻完才找到目標。Agent

Ray 貓的部落格Ray 貓

透過 Skill 其實就可以快速讓 Claude Code 或者 Codex 具備基礎 50 分的設計能力，至少它不會弄出那種一眼就知道是 AI 做的東西。

• 首先是 Anthropic 的專門針對 UIUX 設計的 Skill
  https://github.com/anthropics/skills/tree/main/skills/frontend-design
• 再來是 Vercel 的設計 Skill，不過值得一提的是，整個 Skill 在設計上更專注在可訪問性、使用者體驗與性能等等的最佳實踐
  https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines
• 提供數十種 UI 樣式與設計的 Skill，不過因為不少人使用，被戲稱為新版本的 AI 感網站
  https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

但我個人覺得目前還是有很多問題，它仍然有一種不真實感。而且仍存在 AI 為了增加整個網頁設計的複雜度或者是真實感，反而會錯用很多意義不明的 emoji。但事實上，正是這些意義不明的 emoji 反而缺少一種「人感」，進而讓整個網站的設計與人類產生一種疏遠。

美感方面我打個 50 分，但操作容易度我給 60 分

Lovable

Lovable，去年就已經是非常熱門的一個 Vibe Coding 工具。
Lovable 的成長非常超出我的想像。

最早 Lovable 的重點只有「美感」，它可以讓 AI 設計出高質感、好看的網站。

而如今，Lovable 已經是一個完整的全端 Vibe Coding平台。有著一整套相當成熟的生態，現在已經完全可以透過 Vibe Coding 打造出既有前台又有後台、資料庫，而且安全性相當足夠的一整套系統。因為整個 Lovable 其實已經針對安全性做了特殊調整與設計，對於新手極為友善。
但缺點也很明顯：我覺得它很貴，不過如果是不差錢又想做一些生產力工具的話，我很推薦。

美感方面我打個 70 分，但操作容易度我給 90 分，但對錢包不友善。

Gemini 3

我會特別把 Gemini 3 或 Gemini 3.1 這個模型拉出來的原因，是因為我發現 Gemini 在美感方面相對於 Claude Code 或 Codex 來說優秀很多。

在 Claude Code 或 Codex 如果沒有 Skill 領導下，就會做出一坨詭異網站的情況下，Gemini 完全不需要依靠 Skill，就可以有相當優秀的設計能力。

我覺得很適合作為一個打設計底的模型。

美感方面我打個 60 分。

設計模板庫

今天也可以順便分享一個別人設計好的設計模板庫，上面提供了 100 多個設計好的模板。

這些設計都有完整的提示詞，你可以直接把它們複製貼上給 AI，然後快速將裡面的設計複製到你自己的網站裡面去。

美感方面我打個 60 分，操作容易度我給 80 分。

Design Prompts - AI-Powered Design Style Explorer

Explore 31+ stunning design styles rendered from the same data. Get AI-ready prompts to recreate any aesthetic in your own projects.

Design PromptsDesign Prompts

我自己的工作流

基礎起手式：Google Stitch 的 70 分優雅打底

我自己很常使用 Google Stitch。無論是手機版還是電腦版 UI，它都有一個無可取代的優勢：「視覺可視化」。

它背後由 Gemini 3.1 Pro 驅動，而我剛剛提到 Gemini 的一大優勢就是能產出的品質極高的設計。以下是它在工作流中無可取代的兩個特點：

• 內建極佳的視覺品味： 比起用其他的 Agent Skill 去「逼迫」Coding Agent 硬生生刻出好看的網站，Google Stitch 本身就內建了現代俐落的美感。在視覺品味的基準線上，它直接暴打許多原生的 Coding Agent，幫你省去大量微調設計系統的時間。
• Figma 式的視覺化界面： 這是它最迷人的地方。所有生成好的網頁會直接平鋪在你面前，讓你能一次預覽並逐一調適。操作手感甚至比 Figma 更直覺——你只需要點選介面，用簡單的繪圖工具圈選想修改的地方，並透過聊天視窗下指令，AI 就會直接把局部改寫成符合你需求的樣貌。

經過幾輪輕鬆的對話與修改後，你可以直接將最終成果匯出成 HTML 檔案。

核心橋樑：Claude Code 的無損轉譯

拿到 HTML 後，接下來才是重頭戲。

根據我的實測，這份 HTML 檔案可以直接丟給 Claude Code，請它幫忙建構出 React 網頁，效果出奇地好。但更驚人的是，當我將它丟給 Claude Code，要求轉譯成 iOS 的 SwiftUI 或是跨平台的 Flutter 時，原本擔心美術風格會大走鐘，結果卻發現完全不會。

Claude Code 的跨語言轉譯能力極強，它能在幾乎「無損」的情況下，將 HTML 的美術風格完美平移到 SwiftUI 或 Flutter 的視覺介面上。

我的標準工作流：

先用 Google stitch 快速生成並確認 UI 介面
匯出 HTML
呼叫 Claude Code 將其轉譯為手機 App 或網頁的正式程式碼。

美感方面我打個 70 分，但操作容易度我給 70 分。

如何邁向 80 分以上的頂級質感

當然，Google Stitch 也有它的極限。它能給你的設計品質大約落在 70 分之間——好看、優雅，但平庸，少了那麼一點「靈魂」。

以目前的 AI 技術來說，UI 要真正達到登峰造極的 80 分以上，依然高度依賴人類的品味與從零開始的設計能力。但這並不妨礙我們用一些「邪修」的方式來彎道超車。

既然 Claude Code 的無損轉譯能力這麼強，我們完全可以直接去「借用」那些由頂尖設計師與開發者手刻出來的優秀開源/付費網頁設計庫，並將它們轉譯到我們自己的 Web 或 App 中。

以下是我個人極度推薦，且經常在實戰中搭配 Claude Code 使用的數個寶藏網站：

以下都是免費的

1. React Bits (reactbits.dev)這是一個極具現代感、排版俐落的 React 組件庫。優秀的動態設計與視覺質感，無需多言，我甚至很建議直上 Pro 方案，直接拿它的原始碼丟給 AI 去轉譯或融合，能瞬間拉高整個產品的專業度。