tailwind-design-system skill 是什麼、怎麼安裝使用：按 Tailwind CSS v4 的寫法搭設計系統

本文根據 wshobson/agents 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 6.8 萬次；所在倉庫 wshobson/agents 在 GitHub 約 4.0 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

Tailwind CSS 從 v3 到 v4 改動很大：配置從 JavaScript 文件搬進了 CSS，引入方式、暗色模式、動畫的寫法都變了。模型的訓練數據裏 v3 的代碼更多，所以經常給 v4 項目寫出 v3 的配置。這個技能專門糾正這一點。description：用 Tailwind CSS v4、設計令牌、組件庫和響應式模式構建可擴展的設計系統；在創建組件庫、落地設計系統或統一介面模式時使用。SKILL.md 開頭註明它只針對 v4，v3 項目請看官方升級指南。

最實用的是那張 v3 → v4 對照表：

• tailwind.config.ts → 在 CSS 裏寫 @theme；
• 三條 @tailwind 指令 → 一句 @import "tailwindcss"；
• darkMode: "class" → 用 @custom-variant 定義暗色變體；
• theme.extend.colors → 在 @theme 裏寫 --color-* 變量；
• 動畫插件 → 把關鍵幀寫進 @theme，入場動畫用 @starting-style。

之後是快速上手，以及兩個核心概念：設計令牌分層（從基礎值到語義令牌再到組件令牌）和組件架構（變體、尺寸、狀態怎麼組織）。適用場景還包括用原生 CSS 能力做暗色模式、構建響應式且無障礙的組件，以及從 v3 遷移。

SKILL.md 本身只有五千多字符，是一個導航層：詳細的模式和完整示例放在 references/details.md，進階內容在 references/advanced-patterns.md，按需讀取。

怎麼安裝

倉庫 README 給了兩種裝法。只要這一個技能，用 skills CLI：

bash
npx skills add wshobson/agents --skill tailwind-design-system

在 Claude Code 裏則是裝它所在的插件 frontend-mobile-development，同插件的其他技能、子智能體和命令會一起裝上：

text
/plugin marketplace add wshobson/agents
/plugin install frontend-mobile-development@claude-code-workflows

倉庫整體介紹和其他安裝方式，詳見本站《wshobson/agents 是什麼、怎麼安裝：94 個插件、184 個 Skills 的多工具插件市場》。

怎麼用

• 「這個項目是 Tailwind v4，幫我把品牌色、圓角和字號定義成設計令牌，支持暗色模式」。
• 「做一個按鈕組件，有主要、次要、危險三種變體和三種尺寸」。
• 「把現在的 tailwind.config.ts 遷移成 v4 的 CSS 配置」。

開頭說清 Tailwind 的版本，能避免它按舊寫法出代碼。

適合誰 / 侷限

適合新起 v4 項目或正在從 v3 遷移的前端團隊。侷限：仍在用 v3 的項目不適用；它講的是工程組織方式，不提供成品組件，也不替你做視覺決策——配色和風格要另外定，或配合設計類技能使用；Tailwind 更新快，細節以官方文檔為準。

注意事項

• 許可：MIT。
• 不帶腳本：SKILL.md 加兩份參考文件。
• 通過 Claude Code 插件安裝時，會連同 frontend-mobile-development 插件裏的其他技能和子智能體一起裝上。