叫 AI 做一個 Landing Page，結果常常又是置中標題、紫色漸層、三張同尺寸卡片。問題未必是 AI 不會寫 CSS，而是「有質感」這種要求太抽象，模型只能回到最常見的版型。這篇 Taste Skill 教學會帶你從零安裝、看懂 3 個設計旋鈕，再用一段可直接改寫的提示詞完成實戰；最後也會說清楚它不適合哪些專案，以及安裝第三方 Skill 前該檢查什麼。
讀完你會做到 3 件事：只安裝真正需要的核心 Skill、把模糊的審美要求改成可調參數、讓 Agent 在動手前先交代設計方向與不能破壞的限制。
先說結論：Taste Skill 是規則書，不是魔法濾鏡
Taste Skill ＝ 設計總監的規則書 ＋ 3 個旋鈕 ＋ 出貨檢查表。
目前標準核心不是新模型、前端框架或可 import 的元件庫，也不會替網站自動套上一層「高級感」。它是一份會被 AI Coding Agent 載入的 SKILL.md 指令：先讀 brief、推導視覺語言，再限制版面、字體、色彩、動態與可及性，最後逐項檢查成品。真正寫程式、改檔案、跑測試的仍是 Codex、Claude Code 或其他支援 Agent Skills 的工具。
如果你還不熟悉 Skill 在 Agent 系統裡扮演的角色，可以先看 AI Agent Harness 是什麼；想進一步理解如何把規則、工具與驗證串起來，則可接著讀 如何建立 AI Agent Harness。
Taste Skill 到底怎麼運作？四步拆解
1. 先讀 brief，而不是立刻堆元件
核心 Skill 先判斷頁面種類、讀者、品牌資產、內容量與技術限制。若是重設計，它還要求先盤點現有 design tokens、導覽、路由、表單、SEO 與 analytics，避免視覺變漂亮，轉換流程卻壞掉。
2. 用一行 Design Read 定義方向
Agent 必須先把判斷濃縮成一行 Design Read，例如：「溫暖的編輯型咖啡品牌；大留白、非對稱圖文、低強度動態。」這一步很重要，因為你可以在寫程式前就發現方向不對，而不是等整頁做完才重來。
3. 調整 3 個設計旋鈕
- DESIGN_VARIANCE：控制版面有多規整或多實驗。低值偏置中、穩定；高值可以有更明顯的不對稱與視覺驚喜。
- MOTION_INTENSITY：控制畫面從接近靜態，到有更多轉場、物理感與敘事型動態。
- VISUAL_DENSITY：控制每一屏是像藝廊般留白，還是像駕駛艙般承載大量資訊。
目前官方核心檔的基準值是 8／6／4，但它同時要求依 brief 覆寫，所以別把預設值當成最佳答案。銀行官網、婚禮攝影與開發者工具，本來就不該共用同一組數字。
4. 套用規則，最後跑 pre-flight
接下來才進入字體、色彩、版面、圖像、動態、深色模式與可及性規則。完成後，Agent 要逐格檢查手機版、焦點狀態、對比、prefers-reduced-motion、圖片品質與既有功能。這不等於網站自動通過 WCAG 或效能門檻，但比只說一句「做得好看」多了可驗收的條件。
Taste Skill 教學：安裝核心 Skill
先確認電腦已有 Node.js 與 npx，再進入你的專案資料夾。截至 2026-07-28，Taste Skill 倉庫共有 13 個 Skill；新手先裝核心的 design-taste-frontend 就好，不要一次把不同美學方向全部塞進 Agent。
步驟一：先列出可安裝項目
npx skills add https://github.com/Leonxlnx/taste-skill --list步驟二：只安裝目前的核心 Skill
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend"如果你要明確指定 Codex，可以加上 --agent codex；只有在不希望或無法使用 symlink 時，才需要用 --copy 強制複製。本文實測的 Vercel skills CLI 會依 frontmatter 名稱建立 design-taste-frontend 目錄，而不是沿用原始倉庫的 taste-skill 資料夾名；手動複製時也應使用與 frontmatter 相同的目錄名。
步驟三：確認、更新與移除
# 查看已安裝 Skill
npx skills list
# 更新目前專案
npx skills update design-taste-frontend -p -y
# 移除
npx skills remove design-taste-frontend -y官方 CHANGELOG 把目前預設核心稱為 v2 experimental，截至 2026-07-28 仍在調整，也尚無 GitHub tag 或 release。若既有流程依賴舊版，可把安裝名改成 design-taste-frontend-v1。正式專案更新前，先看 Git diff，再決定是否接受新的硬規則。
Taste Skill 教學實戰：先審方向，再讓 Agent 寫 code
以下用咖啡訂閱 Landing Page 示範。重點不是照抄產業，而是把讀者、視覺語氣、保留項目與驗收條件一次交代清楚。
請使用 design-taste-frontend Skill，先不要改程式。
這是一個咖啡訂閱服務的 Landing Page，
讀者是重視產地與沖煮品質的新手。
風格：編輯感、溫暖、克制。
保留既有 logo、路由、SEO、表單欄位與 analytics 事件。
沿用目前的技術棧，不要自行改成 Next.js。
先輸出一行 Design Read，
並說明 DESIGN_VARIANCE、MOTION_INTENSITY、
VISUAL_DENSITY 的數值與理由。
我確認後再實作。
完成後檢查 mobile、鍵盤焦點、CTA 對比、
prefers-reduced-motion 與 Skill 的 pre-flight。第一次回覆只應包含方向與旋鈕，而不是一大坨程式碼。你確認後，再讓 Agent 實作一個區塊、截圖、修正，最後才擴到整頁。這種「先審 brief，再審畫面」的節奏，通常比一次生成全站更容易控制。
若你還在選工具，可比較 Claude Code 與 Codex 的差異；若常把 Claude、Claude Code、Cowork 混在一起，這篇 三者角色比較會更容易建立正確預期。
最適合的 3 種情境，以及不該硬用的地方
- 從零做行銷頁：Landing Page、作品集、品牌敘事網站，需要明確視覺方向與節奏。
- 既有網站重設計：想換視覺，但必須保留路由、導覽、表單、SEO 與追蹤事件。
- 有參考圖的 image-to-code：先用 moodboard 或截圖說清楚方向，再讓規則約束實作。
相反地，官方核心目前把 dashboard、密集後台、資料表、多步驟表單、code editor、原生手機 App 與即時協作 UI 列為 out of scope。這些產品更重視資訊架構、狀態管理與操作效率，硬套「反模板」規則反而可能降低可用性。
它也不是完全技術棧中立。作者主張規則可跨框架使用，但目前核心範例與預設明顯偏 React／Next.js、Tailwind v4 與 Motion。Vue、Svelte 或既有 CSS 系統可借用版面、層級與 anti-template 原則，但需要人工改寫框架 API，不是即插即用；提示詞務必寫明「保留現有技術棧」。
新手最容易踩的 6 個坑
- 以為安裝等於自動變好看：Skill 提供約束，成品仍取決於 brief、模型、既有程式與多輪檢查。
- 沒有明確點名：不同 Agent 的隱式觸發不一致，重要任務請在提示詞直接寫出
design-taste-frontend。 - 一次裝滿 13 個：極簡、粗獷、高級視覺等規則可能互相拉扯；一次選一個主要方向。
- 忘了保留條件：重設計前寫清楚不能動的 URL、導航、表單欄位、品牌資產、SEO 與 analytics。
- 忽略 context 成本：截至 2026-07-28，核心檔共 1,206 行，規則很多；長對話壓縮後，不要假設每條細節都還在。必要時重新明確呼叫並重跑 pre-flight。想進一步管理上下文，可看 Claude 節省 token 的方法。
- 把第三方 Markdown 當成零風險：Skill 會進入 Agent 的決策層，而 Agent 可能有改檔、連網與安裝套件的權限。專案內安裝、先讀內容、檢查更新差異，也不要把私密 brief 或截圖交給未核准的外部工具。
換句話說，Taste Skill 比較像一位立場鮮明的設計 reviewer，不是客觀真理。品牌規範、法規、可及性、效能與使用者需求永遠優先；不適合的硬規則，就應在 brief 中明確 opt out。
Taste Skill 常見問題
Taste Skill 免費嗎？
是，官方倉庫採 MIT License。但 MIT 不會自動授權範例裡可能用到的商標、商用字體、照片或第三方套件，這些仍要各自確認。
它是 UI 元件庫嗎？
不是。標準安裝的核心是一份 SKILL.md，不會多出一套可 import 的按鈕、卡片或 React component。
Codex、Claude Code 都能用嗎？
Skill 格式可攜，上游安裝器也列出多種 Agent；但掃描路徑、觸發語法、工具權限與 context 行為不同，不能假設兩邊完全相同。想看另一種可在本機執行的 Agent，可延伸閱讀 Hermes Agent 教學。
一定要設定 8／6／4 嗎？
不用。那是目前核心檔的 baseline，不是分數或通用最佳值。應先看品牌與任務，再調整三個旋鈕。
可以用在 Vue 或 Svelte 嗎？
可以移植多數設計原則，但目前範例偏 React／Next.js。請明確要求保留 Vue、Svelte 或現有 CSS 架構，並用原專案測試驗收。
它會自己生成圖片嗎？
核心 Skill 只會提出圖像策略；真正生圖仍需要 Agent 宿主具備圖像生成或搜尋工具。使用私密素材前，先確認資料會送到哪個服務。
為什麼裝了卻沒有明顯差別？
先確認有明確點名 Skill，再檢查 brief 是否交代讀者、品牌、技術棧、保留項目與驗收條件。只有「幫我做漂亮」四個字，仍不足以推導可靠方向。
v2 experimental 適合正式專案嗎？
可以試，但要把它當成會變動的第三方規則。鎖定已審核版本、保留 Git diff、跑既有測試；不想承受變動時，使用官方保留的 v1 入口。
新手只要記住這 5 件事
- Taste Skill 是 Agent 規則，不是模型、框架或元件庫。
- 先安裝
design-taste-frontend，不要一口氣混用所有美學 Skill。 - 先審 Design Read 與三個旋鈕，再允許 Agent 寫程式。
- 把技術棧、品牌資產、路由、表單、SEO 與 analytics 寫成保留條件。
- 把它當 reviewer，不當品質保證；最後仍要靠截圖、測試、可及性與真人判斷驗收。
延伸閱讀：把單一 Skill 變成完整工作流
- AI Agent Harness 是什麼？
- 如何建立自己的 AI Agent Harness
- Claude Code vs Codex 完整比較
- 更多 AlphaLab AI 教學與分析
- AlphaLab 免費線上課程
結論：先用一個小頁面測試你的共同語言
Taste Skill 的真正價值，不是宣稱 AI 突然「有品味」，而是把設計討論從感覺變成可檢查的決策。今天先挑一個低風險 Landing Page：只安裝核心 Skill，貼上本文實戰提示詞，要求 Agent 先交 Design Read 與三個旋鈕。只要第一輪方向能被你清楚地同意或否決，這套規則就已經開始發揮作用。