設計卓越
讓 AI 打造的應用程式看起來像人類親手製作。沒有通用模板，沒有明顯的模式。
<core_principle>
工藝標準
如果有人看得出來這是 AI 生成的，那我們就失敗了。
好的設計是無形的。使用者應該感覺到應用程式很專業， 而不是注意到它遵循了某個模板。 </core_principle>
<color_system>
色彩哲學
AI 色彩選擇的問題
AI 傾向選擇：
- 白色背景上的紫色漸層（Lovable 預設外觀）
- 過度飽和的強調色
- 單一介面中使用過多顏色
- 使用實色效果更好的地方卻用了漸層
我們的做法：克制
基礎調色板（預設）
/* 使用 Tailwind 的 slate 色階作為中性色 */
--background: slate-50 /* 頁面背景 */
--surface: white /* 卡片、模態框 */
--border: slate-200 /* 分隔線、邊框 */
--text-primary: slate-900 /* 標題 */
--text-secondary: slate-600 /* 內文 */
--text-muted: slate-400 /* 佔位符、提示 */
強調色（每個應用程式選一種）
/* 預設：藍色（專業、值得信賴） */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50
/* 依應用程式類型選擇： */
/* 金融/銀行 → 綠色（金錢） */
/* 健康/保健 → 青色（平靜） */
/* 餐飲/餐廳 → 橙色（食慾） */
/* 創意/設計 → 紫色（創造力） */
/* 緊急/警示 → 紅色（注意） */
規則
- 每個應用程式只能使用一種強調色，沒有例外
- 節制使用強調色——僅用於按鈕、連結、亮點
- 主要按鈕絕對不能使用漸層
- 背景為白色或接近白色，不要著色
- 深色模式：正確反轉，不要只是變成灰色 </color_system>
<typography_system>
排版規則
字型堆疊
/* 不要到處指定 Inter - 使用系統字型 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* 這樣在每個平台上看起來都很原生 */
字級縮放（Tailwind 類別）
頁面標題： text-2xl font-semibold (24px)
區塊標題： text-lg font-medium (18px)
卡片標題： text-base font-medium (16px)
內文： text-sm (14px)
小字/圖說： text-xs text-slate-500 (12px)
反模式
❌ 不要到處使用 font-bold
❌ 不要在一張卡片裡混合太多字體大小
❌ 不要對長文字使用全大寫
❌ 不要讓內文段落置中對齊
❌ 不要使用純黑色（#000）——使用 slate-900
良好模式
✅ 標題：使用 semibold 或 medium，永遠不要用 regular ✅ 內文：regular 粗細，良好的行高（1.5-1.6） ✅ 保持層級：每個元件最多使用 3 種字體大小 ✅ 大多數文字靠左對齊（置中版面中的標題除外） </typography_system>
<spacing_system>
間距與佈局
間距比例
一致使用 Tailwind 的預設比例：
4 (1rem/16px) - 小間距，行內元素
6 (1.5rem/24px) - 中間距，元件之間
8 (2rem/32px) - 大間距，區塊之間
12 (3rem/48px) - 特大間距，頁面區塊
頁面佈局
// 標準頁面容器
<div className="p-4 md:p-6 lg:p-8">
{/* 頁面標題 */}
<h1 className="text-2xl font-semibold mb-6">儀表板</h1>
{/* 內容區塊，保持一致間距 */}
<section className="mb-8">
{/* 區塊內容 */}
</section>
</div>
卡片內部間距
<Card>
<CardHeader className="pb-4"> {/* 減少預設內距 */}
<CardTitle>標題</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 帶垂直間距的內容 */}
</CardContent>
</Card>
反模式
❌ 不一致的內距（這裡 p-3，那裡 p-5） ❌ 留白太少（侷促感） ❌ 留白太多（脫節感） ❌ 同層級元素使用不同的間距大小 </spacing_system>
<animation_system>
動態與動畫
哲學
動畫應該：
- 感覺自然，不花俏
- 提供回饋，不是分散注意力
- 快速（150-300ms），不緩慢
- 細微，不戲劇化
標準轉場
// 懸停狀態 - 使用 transition-colors 或 transition-all
<div className="transition-colors hover:bg-slate-50">
// 卡片懸停 - 輕微上提
<Card className="transition-shadow hover:shadow-md">
// 按鈕懸停 - shadcn 內建，不要覆寫
<Button>已經有動畫</Button>
Framer Motion 模式
// 頁面轉場
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
// 列表錯開
<motion.div
variants={{
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}}
initial="hidden"
animate="show"
>
{items.map(item => (
<motion.div
key={item.id}
variants={{
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}}
>
{item.content}
</motion.div>
))}
</motion.div>
// 微互動 - 按鈕按壓
<motion.button whileTap={{ scale: 0.98 }}>
點擊我
</motion.button>
動畫時間
- 懸停效果：150ms
- 小型轉場：200ms
- 頁面轉場：300ms
- 複雜動畫：最多 400-500ms
反模式
❌ 彈跳效果（感覺廉價） ❌ 緩慢動畫（>500ms 感覺遲鈍） ❌ 每個元素都加動畫（令人不堪負荷） ❌ 到處是旋轉載入器（改用骨架螢幕） ❌ 戲劇化的進場動畫 </animation_system>
<component_patterns>
元件設計模式
卡片
// 乾淨卡片 - 無過度裝飾
<Card className="bg-white border shadow-sm">
<CardContent className="p-4">
{/* 內容 */}
</CardContent>
</Card>
// 不要：rounded-3xl、厚重陰影、漸層邊框
按鈕
// 主要動作
<Button>儲存</Button>
// 次要動作
<Button variant="outline">取消</Button>
// 危險動作
<Button variant="destructive">刪除</Button>
// 圖示按鈕
<Button variant="ghost" size="icon">
<Settings className="h-4 w-4" />
</Button>
// 不要：漸層按鈕、3D 效果、主要按鈕中放圖示（通常情況）
表單
// 乾淨表單佈局
<div className="space-y-4">
<div className="space-y-2">
<Label>姓名</Label>
<Input placeholder="請輸入姓名" />
</div>
<div className="space-y-2">
<Label>電子郵件</Label>
<Input type="email" placeholder="[email protected]" />
</div>
</div>
// 不要：行內標籤、浮動標籤（除非要求）、輸入框內放圖示
表格
// 乾淨表格
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead>姓名</TableHead>
<TableHead>狀態</TableHead>
<TableHead className="text-right">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-slate-50">
<TableCell>王小明</TableCell>
<TableCell><Badge>啟用</Badge></TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">編輯</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
// 不要：斑馬條紋（過時）、厚重邊框、內容置中
</component_patterns>
<anti_patterns_detail>
AI 生成紅旗
「Lovable 風格」（避免）
- 紫色/紫羅蘭色作為主要顏色
- 白色卡片上的漸層背景
- 到處是 rounded-3xl
- 標題中使用表情符號
- 「歡迎回來，使用者！👋」
- 通用的圖庫式插圖
「Bootstrap 風格」（避免）
- 厚重的投影
- 藥丸形狀的圓角按鈕
- 到處是藍色連結
- 等高的卡片組合
- 大型廣告看板風格的標題
「Material 風格」（除非要求，否則避免）
- 浮動動作按鈕
- 到處是凸起的卡片
- 所有元素上的漣漪效果
- 桌面版上的漢堡選單
什麼讓它看起來像「人類製作」
- 克制 - 並非每個功能都被突顯
- 層級 - 清楚的主要、次要、第三級
- 留白 - 有呼吸的空間
- 一致性 - 重複相同的模式
- 細微細節 - 不張揚的微小點綴
- 真實內容 - 沒有可見的佔位文字 </anti_patterns_detail>
<review_checklist>
設計審查清單
色彩檢查
- 僅使用一種強調色
- 白色背景上無漸層
- 無純黑色文字
- 足夠的對比度以確保可及性
排版檢查
- 每個元件最多使用 3 種字體大小
- 正確的層級結構（標題 semibold，內文 regular）
- 無全大寫段落
- 行高可讀（1.5 以上）
間距檢查
- 整體內距一致
- 區塊之間留有足夠留白
- 內容不感覺擁擠
- 行動版間距等比例縮放
動畫檢查
- 轉場細微（150-300ms）
- 無彈跳/彈簧效果
- 載入使用骨架螢幕，而非旋轉圖示
- 懸停狀態提供回饋
元件檢查
- 卡片無過度裝飾
- 按鈕遵循層級（主要/次要）
- 表單佈局乾淨
- 表格易讀且互動性好
最終檢查
- 使用者會知道這是 AI 製作的嗎？（應該要「不會」）
- 它看起來像真實產品嗎？（應該要「是」）
- 它與現代 SaaS 應用程式一致嗎？（應該要「是」） </review_checklist>