利用 AI 工具打造 UI 介面設計 SOP (實操版)

原始來源與檔名：利用AI工具打造UI介面設計SOP.md

來源：@binghe on X — 2026-04-06

NAPKIN | 餐巾纸

餐巾紙公式

高質感 UI 代碼 = (Claude 視覺簡報 -> Gemini 轉譯 Prompt -> Stitch 生成 Web 預覽) + Dribbble 參考圖 + Claude Code (SwiftUI/React 最終還原)

一句話

作者分享了非設計背景工程師如何利用 AI 寫出精美 UI 的 SOP：不要直接讓 Claude Code 寫代碼，而是先利用 Claude 生成「視覺情緒板」，交給 Gemini 轉化為前端生成工具 (Stitch) 的 Prompt，獲得初步代碼後，再配合 Dribbble 高質感參考圖，讓 Claude Code 在最終框架 (如 SwiftUI) 內完美還原。

餐巾紙草图

[ Non-Designer's UI Generation Pipeline ]
  1. Product Definition
     Claude (Web) -> Generates "Visual & Mood Brief"

  2. Prompt Translation
     Gemini -> Reads Brief -> Outputs exact "Stitch UI Prompt"

  3. Visual Prototyping
     Stitch (AI Studio) -> Generates HTML/CSS prototype
     (If ugly, feed Dribbble images to Gemini to tweak prompt)

  4. Final Engineering
     Download HTML/CSS + Dribbble Reference Images
     -> Feed to Claude Code
     -> Output Production Code (SwiftUI / React)

ROUND 1: SKELETON | 骨架掃描

• 核心問題: 對於不懂設計的工程師，直接讓 AI (如 Cursor, Claude Code) 生成的前端介面通常非常死板、缺乏「設計感」與「呼吸感」。
• 核心答案: 建立一個多 Agent 協作的渲染管線 (Rendering Pipeline)。將「邏輯實現」與「視覺探索」分開，先用視覺專用工具 (Stitch) 和參考圖 (Dribbble) 定義出高保真的視覺規範，再讓編程 Agent 將規範轉化為最終代碼。

ROUND 2: DISSECTION | 血肉解剖

• 跨模型能力協作:
  • Claude (Web) 負責產品思維與 PRD 撰寫。
  • Gemini 負責將 PRD 轉譯為對另一個 AI (Stitch) 友善的視覺提示詞。
  • Stitch 負責快速迭代 Web 視覺原型。
• 真·材質感的極限 (The Glassmorphism problem):
  • 作者發現 Web 技術 (CSS) 無法完美模擬 macOS 原生的「毛玻璃 (Dynamic Island)」質感。Web 設計稿只能達到 70% 相似。
  • 解決方案 (Short-circuit)：跳過 Stitch，直接去 Dribbble 下載 5-10 張帶有 macOS 玻璃質感的設計圖，連同開發文件直接餵給 Claude Code，強制其使用原生庫 (SwiftUI) 的材質 API 來實現。

ROUND 3: SOUL | 靈魂提取

• 深層洞見: AI 時代的「模版模式 (Template Pattern)」不再是代碼模版，而是「視覺對齊 (Visual Alignment)」。 人類工程師的職責不再是去調 CSS 的 padding 或 opacity，而是扮演藝術總監 (Art Director) 的角色：挑選對的參考圖、定義情緒板，然後讓 AI 在「邏輯」與「視覺」的交集中自動編譯出最終的 UI。

Multi-Modal Transformation Pipeline (Architectural Deep Dive)

LLM 在前端工程的職責解耦 (Separation of Concerns)

這篇實戰文章揭示了在 AI-Assisted UI 開發中，將職責解耦的極端重要性： 在傳統 MVC (Model-View-Controller) 架構中，我們將資料、視圖與邏輯分離。但在 AI 開發流中，作者建立了一個 “Prompt Pipeline”：

1. Conceptual Model (概念模型)：由 Claude Web 產出。
2. Visual Specs (視覺規範)：由 Gemini + Stitch 產出。
3. Implementation Code (實作代碼)：由 Claude Code + SwiftUI 產出。 這完全符合微服務架構中「Pipeline (管線與過濾器)」的設計模式。不要指望一個 Prompt 解決所有問題，而是將上一個 Agent 的 Output 作為下一個 Agent 的 Input。

多模態錨定 (Multi-Modal Anchoring)

為什麼直接讓 Claude Code 寫 UI 會很醜？ 因為「美學 (Aesthetics)」是很難用純文字 (Text-only) 來精確定義的。你告訴 AI “make it modern and apple-like”，AI 只能基於統計機率輸出平庸的結果。 作者採用的「餵 Dribbble 參考圖」策略，在架構上稱為多模態錨定 (Multi-Modal Anchoring)。 透過傳入高解析度圖片，強制覆蓋 LLM 內部的預設美學權重，讓 LLM 的 Vision Encoder 提取圖片中的 Margin, Corner Radius, Shadow, Gradient 參數，並將這些視覺特徵 (Visual Features) 硬編碼轉譯為 SwiftUI 的宣告式語法。這是目前 AI 輔助設計中最穩定的零樣本生成 (Zero-shot Generation) 技巧。