Design Range
在預設狀態下，Claude 設計每個產品的方式都一樣：Inter 或 Geist 字型、靛藍/紫漸層、置中的英雄區塊加上兩個按鈕、三個帶有淺色圓形圖標的特徵卡片、全部 rounded-2xl、柔和的灰色陰影。這看起來還可以，但看起來也像其他所有 AI 生成的網站。這個技能就是為了刻意打破這個模式而存在。
核心動作很簡單：不要自己選擇風格，而是隨機抽取。 當模型被要求「選擇一種風格」時，每次都只會落在相同的少數幾個選擇上，因此我們將選擇權交給一個腳本，它會從一個連貫方向的庫中抽樣，並避開該專案近期使用過的風格。你的任務是全力投入那個方向，以技藝將其執行出來。
工作流程
1. 了解情境
- 正在建構什麼？ 將其對應到一種產品類型：
marketing（登陸頁面、網站、作品集，如果你偏好也算在這裡）、saas（人們工作用的應用程式畫面）、dashboard（分析、管理、監控）、ecommerce（商店、產品和分類頁面）、mobile（原生或行動優先的應用程式畫面）、portfolio。 - 有既存的品牌或設計系統嗎？ 如果專案已有確立的 tokens、
design-direction.md，或者使用者是在現有應用程式中要求一個功能，請維持其方向。多樣性是為新專案、重新設計以及使用者要求不同東西時準備的。單一產品內的一致性是一個功能；而產品之間的相似性才是問題。 - 使用者有提到某種氛圍嗎？（例如「奢華」、「俏皮」、「暗黑科技風」）。將其轉換為篩選條件（
--energy、--mode）或特定的--show <id>，但除非他們有特別指定，否則仍應展示其他選項。 - 品味檔案。 如果
references/taste.md有內容，請閱讀它。它記錄了使用者個人的喜好與厭惡，並在與庫衝突時覆蓋庫的設定。其exclude:和favor:行由抽取腳本自動套用；其餘部分（偏好的字型、顏色、他們喜歡的手法）則由你帶入任何被選中建構的方向中。
2. 抽取方向
python3 <skill-dir>/scripts/roll.py --product <type> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]
從專案根目錄執行。它會讀取兩個歷史紀錄：專案的 .design-history.json 以及一個涵蓋所有專案的共用 ~/.claude/design-range-history.json，並同時避開兩者，確保下一個產品不會得到與上一個產品相同的外觀。它還會分散強調色：每個選項的色板在選取時，其強調色色調會與其他選項以及近期使用過的強調色保持距離，這可以防止「多樣性」最終只淪為同一色系配上不同字型。腳本會印出三個對比的選項，每個都是一份完整的簡報：情緒、附有 CSS 字型連結的字型對、一個具名色板、一個佈局原型、造型語言、動態、簽名式手法、應避免的事項，以及一個 Tailwind v4 的 @theme 區塊。
其他指令：--list（列出所有方向）、--show <id> --product <type>（顯示一個完整的單一方向，可選用 --font N --palette N --layout <id>）。
3. 讓使用者選擇（當他們在場時）
以簡潔的方式呈現選項，每個選項一個短區塊：名稱、一行描述其情緒、字型對、以色碼表示的色板、佈局概念。詢問他們要哪一個，並提到他們可以混搭（「選項 2 的字型搭配選項 3 的色板」）或重新抽取。
如果使用者說「直接建構就好」，或者你是在沒有真人參與的情況下執行，請為他們做出選擇，並且要選擇最適合的。隨機性是用來打破你的習慣，而不是把夜店美學套在一個晚餐規劃應用程式上。對於每個選項，問問自己：這個品牌的顧客能在其中看到自己嗎？這種情緒適合這個產品的功能嗎（健康與金融適合平靜，運動與夜生活適合充滿活力，數據適合精確，食物與家居適合溫暖）？選擇最適合的選項。如果沒有適合的，重新抽取一次（--count 4，或使用 --energy/--mode 篩選），然後從新的集合中挑選。當你能用一句話說明它為何適合這個產品時，一個令人驚訝的選擇才是好的；當你報告你使用了哪個方向時，就說出那句話。不要為了等待一個沒人會做出的選擇而耽擱建構。
4. 記錄並撰寫方向檔案
python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <type>
這會同時寫入專案和共用的歷史紀錄。然後將選擇的簡報儲存為專案根目錄下的 design-direction.md。未來的會話（以及一小時後的你）將透過讀取它來保持此產品內的一致性，而共用歷史紀錄則能確保下一個產品不會得到相同的外觀。
5. 開始建構
在建構前，請閱讀相符的平台參考文件，因為每種產品類型都有其自身的工藝規則：
| 產品類型 | 參考文件 |
|---|---|
| marketing, portfolio | references/marketing.md |
| saas | references/saas.md |
| dashboard | references/dashboard.md |
| ecommerce | references/ecommerce.md |
| mobile | references/mobile.md |
技術棧：預設使用 React + Tailwind（請參閱下方的「技術棧設定」）。接著：
-
先佈線 tokens。 載入字型，貼上
@theme區塊，並使用語意名稱進行樣式設定（bg-bg、bg-surface、text-text、text-muted、border-border、bg-accent、font-display）。腳本已經檢查過對比度：當強調色的文字放在 bg 或 surface 上時，使用text-accent-ink（如果強調色本身已可讀，它等於該強調色），而對於強調色填充按鈕和徽章上的標籤，則使用text-on-accent。如果簡報顯示了一個對比度行，它會告訴你進行了哪些調整。像indigo-500或slate-100這樣的原始 Tailwind 色板類別是預設外觀滲回來的途徑，請將它們排除在元件之外。 -
全心投入該方向。 至少明顯使用其兩個簽名式手法，並將「應避免」清單視為硬性限制。一個膽怯應用的方向（字型正確，其他全部預設）會崩回一般的外觀。如果簡報說半徑為 0，那就不應該有任何圓角。如果說的是硬偏移陰影，就不應該有模糊的陰影。
-
讓佈局原型塑造頁面。 抽取出的佈局（例如
sticky-scroll-story、three-pane、hub-and-sheet）就是為了打破置中英雄區塊加三張卡片的骨架而存在。圍繞它進行建構。 -
擴展色板，不要取代它。 你會需要 hover、active 和淺色調的色調。從給定的顏色中衍生它們（例如
color-mix(in oklch, var(--color-accent) 85%, black)，或使用透明度修飾符如bg-accent/10），而不是引入新的色調。 -
真實內容。 為產品撰寫合理、具體的文案。Lorem ipsum 和「特徵一」會隱藏設計是否真的有效。
-
讓它動起來。 靜態頁面感覺像模板，而使用者的品味檔案要求每個建構都要有動態。每個建構都應獲得以下全部四種動態，並以該方向自己的
motion個性來表達（野獸派和運動風為乾脆俐落，玩具箱為彈性十足，電影風格為緩慢且具電影感，有機風格為柔和，復古作業系統風格為步進式）：- 載入時的進場編舞：英雄區塊的元件以一個短暫而錯開的序列到來（標題，然後文案，然後操作，間隔 60-120 毫秒），而不是一次全部出現或一個緩慢的淡入。
- 所有可點擊元件的懸停和按壓回饋，以該方向的風格呈現：一個硬陰影按壓、一個彈性的縮放、一個底線滑動、一個光暈、一個搖晃。
- 一個取自簡報
motion或signature欄位的簽名動畫（閃爍、旋轉圖案、變形模糊形狀、Ken Burns 效果、打字機效果、跑馬燈、旋轉形狀）。這是人們會記住的時刻，所以給它一個顯眼的位置。 - 摺頁以下區塊的滾動揭示，在適合的地方使用（使用 IntersectionObserver 或 CSS
animation-timeline: view()並附帶備援方案）。
動畫化
transform和opacity而非佈局屬性，以保持流暢，UI 回饋保持在 ~300 毫秒以下，並將所有裝飾性動畫放在@media (prefers-reduced-motion: no-preference)之後（或在reduce下將其關閉），這樣關閉動畫的人就能得到一個平靜、完整的頁面。
6. 完成前的千篇一律檢查
檢視你建構的內容，並修正以下任何一項，除非該方向明確要求它們：
- 使用 Inter、Roboto、Arial 或 system-ui 作為可見的顯示字型
- 任何地方的紫色/靛藍/藍到紫漸層
- 置中的英雄區塊、標題 + 副標題 + 兩個按鈕，然後是一個三欄的圖標卡片網格
- 每個容器都是
rounded-xl/2xl搭配shadow-md/lg - 圖標放在粉彩色調的圓形中
- 整個視覺概念就是灰-50 頁面配上白色卡片
- 所有文字都只有少數幾種大小；缺乏排版對比
- 標題上的漸層文字（除非是 Y2K Chrome 或 Glass Aurora 風格）
然後快速進行工藝檢查：文字對比度符合 WCAG AA 標準（主體文字 4.5:1，大字型 3:1；如果某個色板在其背景上無法達到標準，請調整 muted），每個可互動元素都有 hover、focus-visible 和 disabled 狀態，在 375px 寬度下能正常運作，並且動畫能尊重 prefers-reduced-motion。
技術棧設定
Tailwind v4（預設）：將字型 <link> 標籤放在 index.html 中（或使用 next/font / @import url(...) 放在 CSS 頂部），然後將抽取出的 @theme 區塊放在主 CSS 檔案中 @import "tailwindcss"; 之後。像 bg-accent、font-display、text-muted 這些類別會自動生效。
Tailwind v3：將相同的值分別放入 tailwind.config.js 的 theme.extend.colors 和 theme.extend.fontFamily 中，並使用相同的名稱。
Next.js：對於 Google 字型，偏好使用 next/font/google（使用相同的字型名稱，空格用底線代替），並將它們對應到 CSS 變數。Fontshare 字型則透過 CSS URL 載入。
React Native / Expo（用於 mobile）：使用 NativeWind，並將色板放入 tailwind.config.js，使用 @expo-google-fonts/<font-name> 或 expo-font 載入字型。Fontshare 字型需要將字型檔案下載到 assets/fonts 中。如果使用者只想要一個視覺模型，一個行動裝置尺寸的 React 網頁（390x844 框架）就很好，而且快得多；如果不確定，請詢問。
單檔案預覽：如果還沒有專案，使用者只是想看看效果，一個單一的 HTML 檔案，使用 Tailwind CDN（對於 v3 配置使用 <script src="https://cdn.tailwindcss.com"></script>，或使用 @tailwindcss/browser@4 搭配內聯的 <style type="text/tailwindcss">@theme {...}</style>）加上透過 ESM 引入的 React，是可以接受的。
當使用者想要更多變化時
- 重新抽取：再次執行腳本；它已經會避開近期選項。
- 混搭：取一個方向的類型搭配另一個方向的色板。檢查結果仍然感覺連貫（一個像素字型搭配一個奢華色板會是一個笑話，只有當那正是目的時才沒問題）。
- 新方向：如果使用者描述了一個庫中沒有的外觀，以相同的格式將其加入
assets/directions.json，這樣它就能參與未來的抽取。檢查其字型存在於 Google Fonts 或 Fontshare 上。 - 品味：當使用者說出他們喜歡或不喜歡什麼時（「永遠不要用襯線字型」、「我喜歡野獸派風格」），提議將其加入
references/taste.md，這樣它就能每次都生效。