跟Claude 學習怎麼寫Prompt 提升UI 設計質量 在Claude 部落格「Improving frontend design through Skills」中，詳細講述如何利用Claude Skills，突破AI 生成前端代碼時普遍存在的“平庸化”問題，構建出更具個性和專業感的用戶界面，其中“Prompting for better frontend output”這個段落，值得重新看幾遍，如何寫幾遍讓你學習的技巧。 1. 底層邏輯：對抗“統計上的平庸” · 現況：LLM 是基於機率預測下一個Token 的。在海量的訓練資料中，設計得平平無奇的網頁數量遠多於獲得Awwwards 大獎的網頁。因此，當你要求智能體「寫一個網頁」時，它在機率上會自然滑向那個「最擁擠、最平庸的平均值」。 · Prompt 的戰略意義：Prompt 的本質不只是下指令，而是「透過約束條件，強制將智能體的預測分佈推向邊緣」。 · 你不能只說“要好看”，因為智能體對“好看”的定義是基於大眾平均水平的。 · 你必須提供“離群值特徵”，例如指定極簡主義（Minimalism）、野獸派（Brutalism）或特定的藝術風格，迫使智能體放棄那些高機率但無聊的預設選擇。 2. 視覺工程化：將「好品味」翻譯成具體指令詳細拆解瞭如何將模糊的「設計感」轉化為智能體可執行的程式碼邏輯。高水準的Prompt 需要涵蓋以下具體的工程維度： A. 排版系統(Typography)：從“能看”到“有性格” · 預設陷阱：智慧體習慣使用單一字體族（如全站Sans-serif），這很安全，但缺乏層次。 · 進階Prompt 策略： · 強製字體配對：明確要求「Header 使用襯線體（Serif）以傳遞權威感/優雅感，Body 使用無襯線體（Sans）以保證易讀性，Code/Data 使用等寬字體（Mono）以體現科技感」。 · 微調參數：不僅選字體，還要控製字間距（Tracking）和行高（Leading）。例如，要求智能體“在標題上使用緊湊的字間距（tracking-tight），在正文使用寬鬆的行高（leading-relaxed）”，這種細節是區分業餘與專業的關鍵。 B. 空間與佈局(Layout & Spacing)：用留白構建奢華感· 預設陷阱：AI 生成的介面往往「太擠了」。它試圖在有限空間內塞入所有信息，導致界面像90 年代的門戶網站。 · 進階Prompt 策略： · 留白即功能：指示智能體「將留白（Whitespace）視為一種設計元素，而不僅是間隔」。要求使用誇張的Padding（如Tailwind 的p-12 或py-24）。 · 網格的破壞與重建：鼓勵智能體使用不對稱佈局（Asymmetrical Layouts）或錯位網格（Bento Grids），打破死板的12 柵格系統，創造視覺動線。 C. 色彩與深度(Color & Depth)：拒絕純色塊· 預設陷阱：直接使用高飽和度的純色（如# 0000FF）或完全扁平化的設計。 · 進階Prompt 策略： · 物理質感：不要只定義顏色，要定義「光」。要求智能體使用微妙的漸變（Subtle Gradients）、**內陰影（Inner Shadows）和背景模糊（Backdrop Blur）**來模擬毛玻璃、金屬或紙張的質感。 · 語意化色彩：定義一套基於HSL 或OKLCH 的色板，並明確用途（Primary, Muted, Accent, Destructive），確保配色和諧且符合無障礙標準。 3. 感性維度的參數化：Vibes 的精準描述文章中最具啟發性的部分－如何讓不懂美感的程式碼產生器理解「Vibe」。 · 問題：如果你告訴智能體“做一個復古網站”，它可能會做出一堆亂七八糟的像素畫。 · 解決方案：你需要將形容詞「翻譯」為CSS 屬性的集合。文章提倡在Skill 中建立一種「風格字典」： · 想要「賽博朋克」？ Prompt 應包含：霓虹綠/粉紅配色+ 黑色背景+ 故障藝術（Glitch）動效+ 等寬字體。 · 想要「高階SaaS」？ Prompt 應包含：深藍色/灰色配色+ Inter字體+ 極細的邊框（1px borders） + 微互動（Micro-interactions）。 · 智能體的角色轉變：透過這種方式，智能體不再是一個單純的“程式設計師”，而是一個配備了特定風格指南（Style Guide）的“UI 設計師”。 4. 為什麼這不只是“提示詞”，而是“Skill”？ 文章強調將這些Prompt 封裝為Skill，這意味著： · 重複使用性：你不需要每次都寫出幾百字的排版要求。 · 上下文隔離：這個Skill 就像是獨立的插件。當需要寫前端時，智能體調用這個Skill，它的「大腦」中就臨時加載了由Anthropic 專家精煉過的400 個Token 的設計知識庫。 · 工具鏈整合：這個Skill 還可以強制綁定特定的技術棧（如React + Tailwind + Lucide Icons + Shadcn UI）。這意味著智能體在設計時，已經知道它有這些高品質的元件庫可以調用，從而避免了「重複造輪子」帶來的粗糙感。 總結深入來看，這揭示了AI 輔助開發的未來方向：我們不再直接為最終結果編碼，而是在為「產生結果的過程」編碼。 透過精心設計的Prompt 和Skills，我們將人類的高級美學偏好「注入」到智能體的生成過程中，從而打破概率的詛咒，讓AI 產出既有工業級代碼質量，又具備人類設計師靈魂的界面。 部落格地址
