Goodux Skills — Design skill for Claude Code

Good UX Skills

專業的 UX 設計技能包，符合 Agent Skills 標準。**5 大設計思考流程 + 內建 20 個 UI 風格**，一行指令安裝到 AI 工具中使用。

功能特色

• 📚 5 大設計思考流程 - Empathize 同理洞察、Define 問題定義、Ideate 發想構思、Prototype 原型製作、Test 可用性驗證
• 🤖 6 種 AI 工具支援 - Windsurf、Cursor、Claude Code、Continue、Cline、Aider
• 🎨 20 個 UI 風格 - 內建精選視覺風格資料庫，涵蓋科技極簡、賽博龐克、日式和風等多種風格
• 🛡️ 避免錯亂機制 - 一次只推薦一個 skill、衝突解決規則、專案狀態檢測
• 💻 開發選項 - Ideate/Prototype 階段可選 React + Shadcn/UI 直接實作測試
• ⚡ 強大 CLI - 多工具支援、單一技能選裝、JSON 輸出、dry-run 模擬
• 🔧 簡潔架構 - 11 個 references 檔案，易於維護和擴展
• 🌐 現代化網站 - Next.js 14 + TypeScript + Tailwind CSS

技術棧

• 框架: Next.js 14 (App Router)
• 語言: TypeScript
• 樣式: Tailwind CSS
• 圖示: Lucide React
• 部署: Vercel (推薦)

快速開始

安裝技能包到 AI 工具

# 安裝所有 5 個設計思考流程技能（預設支援當前工具）
npx goodux-ux-skills

# 支援多個 AI 工具
npx goodux-ux-skills --tool cursor --tool claude-code

# 列出所有支援的 AI 工具
npx goodux-ux-skills --list-tools

# 強制覆蓋更新
npx goodux-ux-skills -f

# 顯示說明
npx goodux-ux-skills --help

本地開發網站

# 安裝依賴
npm install

# 開發模式
npm run dev

# 建置生產版本
npm run build
npm start

在瀏覽器中開啟 [http://localhost:3000](http://localhost:3000) 查看結果。

專案結構

goodux-skills/
├── app/                      # Next.js App Router 頁面
│   ├── globals.css          # 全域樣式
│   ├── layout.tsx           # 根佈局
│   ├── page.tsx             # 首頁
│   ├── skills/              # 技能相關頁面
│   │   ├── page.tsx         # 技能列表頁
│   │   └── [id]/            # 技能詳細頁
│   └── getting-started/     # 開始學習頁面
├── components/              # React 元件
│   └── Navigation.tsx       # 導航元件
├── lib/                     # 工具函式和資料
│   ├── skills.ts           # 技能資料和類型定義
│   └── cn.ts               # 樣式工具函式
└── public/                  # 靜態資源

技能清單

設計思考五大流程

1. Empathize 同理洞察 (empathize) - 使用者訪談、人物誌與研究洞察整理
2. Define 問題定義 (define) - 問題界定、需求優先順序、限制與成功指標（含 a11y 規範）
3. Ideate 發想構思 (ideate) - 概念發散、線框與視覺方向探索（含 20 種 UI 風格參考）
4. Prototype 原型製作 (prototype) - 建立可操作的互動原型
5. Test 可用性驗證 (test