Claude Code 官方推出 Playground Skill 快速創建方便給 AI 讀取的互動式 HTML 工具

官方文檔：https://skills.sh/anthropics/claude-plugins-official/playground

---

什麼是 Playground Skill？

核心概念

Playground Skill 是 Anthropic 官方推出的 Claude Code 插件，它能幫助你快速創建互動式 HTML 工具。每個 Playground 都是一個自包含的 HTML 檔案，包含三大核心元素：

┌─────────────────────────────────────────────┐
│  📊 左側：互動控制面板                        │
│  調整參數、切換選項                           │
├─────────────────────────────────────────────┤
│  👁️ 中間：即時預覽區域                        │
│  視覺化顯示當前設定的效果                      │
├─────────────────────────────────────────────┤
│  📝 底部：智能提示詞輸出                       │
│  自動生成可複製的自然語言指令                  │
│  [Copy] 按鈕                                 │
└─────────────────────────────────────────────┘

工作流程

你調整控制面板 → 預覽即時更新 → 系統生成提示詞 → 複製提示詞 → 貼回 Claude → 執行任務

為什麼需要它？

傳統方式的痛點：

• ❌ 純文字描述難以精確表達視覺設計
• ❌ 需要反覆來回調整參數
• ❌ 容易產生理解誤差

Playground 的優勢：

• ✅ 視覺化探索所有選項組合
• ✅ 即時看到每個調整的效果
• ✅ 自動生成精確的自然語言指令
• ✅ 無縫整合回 Claude Code 工作流

---

快速開始：安裝與設定

三步驟安裝

# Step 1: 添加官方 Marketplace
/plugin marketplace add anthropics/claude-plugins-official

# Step 2: 安裝 Playground Plugin
/plugin install playground@claude-plugins-official

# Step 3: 重啟 Claude Code
exit
claude code

驗證安裝

安裝完成後，試試這個指令：

請建立一個設計 playground，讓我可以調整按鈕的圓角和顏色

如果 Claude 開始創建 HTML 檔案，就表示安裝成功！

---

核心概念與設計原則

使用流程

1. 用關鍵字觸發

包含這些關鍵字的請求會自動觸發 Playground：

• 「互動工具」、「playground」
• 「視覺化探索」、「調整設計」
• 「架構圖」、「關係圖」

2. Claude 自動處理

Claude 會：

• 識別最適合的模板類型
• 載入對應模板
• 生成自定義 HTML 檔案
• 自動在瀏覽器開啟

3. 互動探索

• 🎛️ 調整控制面板參數
• 👀 觀察預覽即時更新
• 📋 查看生成的提示詞
• 🔘 點擊 Copy 按鈕

4. 應用結果

將提示詞貼回 Claude Code，繼續你的工作流程。

七大設計原則

每個優質的 Playground 都應該遵循：

1. 📦 單一 HTML 檔案

<!-- ✅ 正確：所有資源內嵌 -->
<style>/* CSS 寫在這裡 */</style>
<script>// JS 寫在這裡 </script>

<!-- ❌ 錯誤：依賴外部資源 -->
<link rel="stylesheet" href="external.css">

原因：確保離線可用、無依賴問題。

2. ⚡ 即時預覽

// ✅ 正確：input 事件立即觸發
input.addEventListener('input', () => updateAll());

// ❌ 錯誤：需要點擊按鈕才更新
button.addEventListener('click', () => updateAll());

原因：即時反饋讓探索更流暢。

3. 📝 自然語言輸出

// ✅ 正確：像人類的描述
"創建一個按鈕，使用 12px 圓角、藍色背景、柔和陰影"

// ❌ 錯誤：純數據列表
"borderRadius: 12, color: #3b82f6, shadow: 8"

原因：Claude 需要自然語言才能正確理解。

4. 📋 一鍵複製

copyBtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(prompt);
  copyBtn.textContent = '✓ Copied!';
  setTimeout(() => copyBtn.textContent = 'Copy', 2000);
});

5. 🎯 合理的預設值

const DEFAULTS = {
  borderRadius: 8,
  padding: 16,
  color: '#3b82f6'
};

const PRESETS = {
  minimal: { borderRadius: 4, shadow: 0 },
  bold: { borderRadius: 16, shadow: 20 }
};

原因：載入時就能看到好看的效果。

6. 🌑 深色主題

body {
  background: #1a1a1a;
  color: #e0e0e0;
  font-family: system-ui, sans-serif;
}

7. 🔄 集中式狀態管理

const state = { /* 所有配置 */ };

function updateAll() {
  renderPreview();  // 更新視覺
  updatePrompt();   // 重建提示詞
}

---

六種模板完整介紹

模板總覽

模板	適用場景	觸發關鍵字
🎨 Design Playground	UI 組件設計	設計工具、樣式調整
🗺️ Code Map	專案架構視覺化	架構圖、組件關係
📊 Data Explorer	數據查詢建構	SQL、API、查詢建構
🧭 Concept Map	知識結構展示	概念地圖、學習路徑
📄 Document Critique	文件審查	文件審查、評論工具
🔍 Diff Review	程式碼審查	code review、diff 檢視

1. 🎨 Design Playground

功能：

• 組件樣式調整（按鈕、卡片、表單）
• 布局配置（間距、對齊、排列）
• 顏色系統（主題色、背景、文字）
• 字體設定（大小、粗細、行高）

使用案例：

請建立一個設計 playground，讓我可以調整卡片組件的圓角、陰影和間距

適合誰：UI/UX 設計師、前端工程師、產品經理

2. 🗺️ Code Map

功能：

• 組件關係圖
• 資料流向視覺化
• 系統分層結構
• 依賴關係展示

使用案例：

請用 playground 為這個專案建立互動式架構圖

適合誰：技術 Lead、架構師、新團隊成員

3. 📊 Data Explorer

功能：

• SQL 查詢建構器
• API 端點測試
• 資料管道視覺化
• 正則表達式測試器

使用案例：

幫我建立一個 SQL 查詢的互動工具，可以視覺化選擇表格和欄位

適合誰：數據分析師、後端工程師

4. 🧭 Concept Map

功能：

• 概念關係圖
• 知識結構展示
• 學習路徑規劃
• 範圍映射

使用案例：

建立一個概念地圖，幫我理解這個技術的核心概念和它們之間的關係

適合誰：學習者、技術寫作者、教育者

5. 📄 Document Critique

功能：

• 段落級別評論
• 建議批准/拒絕流程
• 改進建議追蹤
• 版本對比

使用案例：

創建一個文件審查工具，讓我可以對每個章節添加評論

適合誰：技術寫作者、文檔管理員

6. 🔍 Diff Review

功能：

• Git diff 視覺化
• 逐行評論
• 提交歷史檢視
• Pull Request 審查

使用案例：

建立一個 code review playground，幫我審查 Git diff

適合誰：開發團隊、Code Reviewer

---

深度實戰：Design Playground

完整案例：設計現代按鈕組件

Phase 1：提出需求

請建立一個 Design Playground，幫我設計現代化的按鈕組件。

需要調整：
- 圓角大小
- 顏色（Primary、Secondary、Danger）
- 尺寸（Small、Medium、Large）
- 陰影效果
- Hover 狀態

Phase 2：生成的介面結構

控制面板：

基本樣式
├── 圓角 [0-24px] ━━━━━●━━━━━
├── 顏色方案
│   ├── ● Primary (藍色)
│   ├── ○ Secondary (灰色)
│   └── ○ Danger (紅色)
└── 尺寸
    ├── ○ Small
    ├── ● Medium
    └── ○ Large

進階設定 ▼
├── 陰影強度 [0-20px] ━━━●━━━━━
├── 邊框寬度 [0-4px] ━●━━━━━━━
└── 內邊距 [8-32px] ━━━━●━━━━

預設組合
├── [極簡風格] [標準樣式] [大膽設計]

預覽區域：

┌──────────────────────┐
│                      │
│   [  Click Me  ]     │ ← 正常狀態
│                      │
│   [  Click Me  ]     │ ← Hover 狀態（變亮）
│                      │
│   [  Click Me  ]     │ ← Active 狀態（按下）
│                      │
└──────────────────────┘

提示詞輸出：

創建一個按鈕組件，使用 12px 圓角、藍色背景（#3b82f6）、
中等尺寸（padding: 12px 24px）、柔和陰影（0 4px 8px rgba(0,0,0,0.1)）。
Hover 時背景變為 #2563eb，陰影增強至 0 6px 12px。

[Copy] 按鈕

Phase 3：操作步驟演示

步驟 1：調整圓角

• 移動滑桿至 12px
• ✅ 預覽按鈕圓角立即更新
• ✅ 提示詞加入「12px 圓角」

步驟 2：選擇顏色

• 點擊 Primary 單選按鈕
• ✅ 按鈕變藍色
• ✅ 提示詞更新「藍色背景（#3b82f6）」

步驟 3：調整陰影

• 陰影滑桿設為 8
• ✅ 預覽顯示柔和陰影
• ✅ 提示詞描述「柔和陰影效果」

步驟 4：測試預設組合

• 點擊「大膽設計」
• ✅ 所有參數自動調整：圓角 16px、陰影 20px
• ✅ 提示詞完整更新

步驟 5：複製並應用

• 點擊 Copy
• 貼回 Claude Code
• ✅ Claude 生成完整 React/Vue 組件程式碼

Phase 4：生成的程式碼範例

// Button.tsx
import React from 'react';
import './Button.css';

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
}

export const Button: React.FC<ButtonProps> = ({ 
  children, 
  onClick,
  variant = 'primary',
  size = 'medium' 
}) => {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

/* Button.css */
.btn {
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.btn-medium {
  padding: 12px 24px;
  font-size: 16px;
}

實戰案例 2：電商產品卡片

需求定義

請建立 Design Playground，設計電商產品卡片：
- 卡片圓角、陰影層次
- 內部間距、圖片高度
- 字體大小（標題、價格、描述）
- 主題切換（日間/夜間模式）

預設方案對比

方案	圓角	陰影	內邊距	風格
極簡電商	8px	柔和	16px	簡潔易讀
豪華精品	4px	明顯	24px	高端精緻
現代時尚	16px	中等	20px	潮流年輕

生成的提示詞

創建產品卡片組件，採用現代時尚風格：
- 16px 圓角營造柔和感
- 卡片 320px 寬，圖片 240px 高
- 內邊距 20px，元素間距 12px
- 柔和陰影（0 8px 16px rgba(0,0,0,0.08)）
- 標題 20px 粗體，價格 24px 醒目
- Hover 時卡片上浮 2px，陰影增強
- 底部按鈕使用品牌主色 #3b82f6

---

深度實戰：Code Map

完整案例：React 電商專案架構

Phase 1：提供專案上下文

這是我的 React 電商專案：

src/
├── components/
│   ├── ProductCard.tsx
│   ├── ShoppingCart.tsx
│   └── Checkout.tsx
├── pages/
│   ├── HomePage.tsx
│   ├── ProductPage.tsx
│   └── CartPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── store/
│   ├── cartSlice.ts
│   └── userSlice.ts
└── App.tsx

請用 playground 建立互動式架構圖，
顯示各層關係和資料流向。

Phase 2：生成的介面

控制面板：

顯示層級
├── ☑ Pages (頁面層)
├── ☑ Components (組件層)
├── ☑ Services (服務層)
└── ☑ Store (狀態層)

顯示關係
├── ☑ 組件依賴
├── ☑ 資料流向
├── ☑ API 呼叫
└── ☐ Props 傳遞（細節）

視圖模式
├── ● 分層視圖
├── ○ 依賴關係圖
└── ○ 資料流視圖

搜尋功能
└── [搜尋組件...] 🔍

預覽區域：

┌──────────────────────────────────────────┐
│                 App.tsx                   │
│                    │                      │
│     ┌──────────────┼──────────────┐      │
│     │              │              │      │
│  HomePage    ProductPage    CartPage     │
│     │              │              │      │
│     │        ┌─────┴─────┐       │      │
│     │        │           │        │      │
│ ProductCard ProductCard ShoppingCart     │
│     │        │           │        │      │
│     └────────┴───────────┴────────┘      │
│              │           │                │
│          api.ts     cartSlice.ts          │
│                                           │
│  ■ Pages  ■ Components  ■ Services       │
└──────────────────────────────────────────┘

Phase 3：互動功能演示

功能 1：點擊組件查看詳情

點擊 ProductCard：

╔════════════════════════════════╗
║ ProductCard.tsx                ║
╠════════════════════════════════╣
║ 使用於：                       ║
║  • HomePage                    ║
║  • ProductPage                 ║
║                                ║
║ 依賴：                         ║
║  • api.ts (獲取產品)           ║
║  • cartSlice.ts (加購物車)     ║
║                                ║
║ Props：                        ║
║  • productId: string           ║
║  • showDetails: boolean        ║
║  • onAddToCart: () => void     ║
╚════════════════════════════════╝

功能 2：切換資料流視圖

┌────────────────────────────────┐
│ 用戶互動                        │
│     ↓                          │
│ Pages (路由層)                  │
│     ↓                          │
│ Components (UI 層)              │
│     ↓                          │
│ Services (API 請求)             │
│     ↓                          │
│ Store (狀態更新)                │
│     ↓                          │
│ Components (重新渲染)           │
└────────────────────────────────┘

功能 3：搜尋與聚焦

搜尋 cart：

結果高亮：
✓ ShoppingCart.tsx (黃色高亮)
✓ CartPage.tsx (黃色高亮)
✓ cartSlice.ts (黃色高亮)
✓ 相關連線變為紅色
✓ 其他組件半透明化

Phase 4：生成的提示詞

這個 React 電商專案採用四層架構：

1. 頁面層（Pages）：
   - HomePage、ProductPage、CartPage
   - 負責路由和頁面佈局

2. 組件層（Components）：
   - ProductCard（HomePage 和 ProductPage 共用）
   - ShoppingCart、Checkout（CartPage 使用）

3. 服務層（Services）：
   - api.ts：處理 HTTP 請求
   - auth.ts：管理認證
   - 被 Pages 和 Components 呼叫

4. 狀態層（Store）：
   - cartSlice.ts：購物車狀態
   - userSlice.ts：用戶狀態
   - 使用 Redux Toolkit

關鍵資料流：
用戶點擊 ProductCard → 觸發 cartSlice.addToCart 
→ ShoppingCart 自動更新 → Checkout 讀取資料結帳

建議：
- Checkout 可拆分為更小的子組件
- 為 services 添加錯誤處理中間件

實戰案例 2：微服務架構

系統描述

我們有以下微服務：
- API Gateway（入口）
- User Service、Product Service
- Order Service、Payment Service
- Notification Service

透過 RabbitMQ 進行非同步通訊。
請建立互動式架構圖。

特殊功能：時間軸動畫

控制面板：

場景模擬
├── [下訂單流程]
├── [用戶註冊流程]
└── [支付完成流程]

時間軸
├── [▶️ 播放] [⏸️ 暫停] [🔄 重置]
└── 速度：[1x] [2x] [4x]

動畫演示（下訂單流程）：

Step 1: Client → API Gateway
        [POST /api/orders]

Step 2: API Gateway → Order Service
        [創建訂單]

Step 3: Order Service → Product Service
        [檢查庫存]

Step 4: Order Service → Payment Service
        [處理支付]

Step 5: Payment Service → RabbitMQ
        [發送 payment.completed 事件]

Step 6: RabbitMQ → Order Service
        [更新訂單狀態]

Step 7: RabbitMQ → Notification Service
        [發送確認郵件]

---

進階技巧與最佳實踐

Design Playground 進階技巧

技巧 1：響應式設計預覽

請在 Design Playground 中加入響應式預覽，
讓我看到手機、平板、桌面三種尺寸下的效果

生成的介面會包含：

[📱 Mobile] [📱 Tablet] [💻 Desktop]

技巧 2：動畫時間軸

請加入動畫展示，讓我看到 hover、focus、active 
狀態的轉場效果，並可以調整動畫速度

技巧 3：直接匯出程式碼

請在 Playground 底部加入「匯出 CSS」和「匯出 Tailwind」
按鈕，讓我直接取得對應程式碼

技巧 4：A/B 測試對比

請建立雙欄預覽，讓我可以同時看兩種設計方案，
方便比較和選擇

Code Map 進階技巧

技巧 1：效能熱點分析

請在 Code Map 中加入效能熱點標示，
用顏色深淺表示組件的渲染頻率

視覺效果：

🔴 熱點（高頻渲染）
🟡 中等
🟢 冷點（低頻）

技巧 2：版本對比

請建立可以對比兩個版本架構差異的 Code Map，
顯示重構前後的變化

技巧 3：自動生成文檔

請加入「生成架構文檔」按鈕，
自動將視覺化架構轉為 Markdown 文檔

技巧 4：整合專案統計

在 Code Map 中顯示每個模組的統計：
- 程式碼行數
- 複雜度評分
- 測試覆蓋率
- 最後修改時間

提示詞生成最佳實踐

原則 1：只提及非預設值

function updatePrompt() {
  const parts = [];
  
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`圓角 ${state.borderRadius}px`);
  }
  
  // 只在有改變時才加入
  if (parts.length > 0) {
    return `更新卡片使用${parts.join('、')}`;
  } else {
    return '使用預設樣式的卡片';
  }
}

原則 2：使用定性描述

if (state.shadowBlur > 16) {
  parts.push('明顯的陰影');
} else if (state.shadowBlur > 0) {
  parts.push('微妙的陰影');
}
// 而非只寫 shadowBlur: 8

原則 3：提供足夠上下文

// ❌ 錯誤
"8px、藍色、16px"

// ✅ 正確
"創建按鈕組件，使用 8px 圓角、藍色背景（#3b82f6）、
16px 內邊距。整體風格應該簡約內斂。"

常見錯誤與解決方案

錯誤 1：控制項過多

問題：介面雜亂，使用者不知從何開始

解決：

<div class="controls">
  <section>
    <h3>基本樣式</h3>
    <!-- 最常用的 3-5 個控制項 -->
  </section>
  
  <details>
    <summary>進階選項 ▼</summary>
    <!-- 進階控制項摺疊在這裡 -->
  </details>
</div>

錯誤 2：預覽不即時更新

問題：調整滑桿，畫面沒反應

解決：

// ✅ 使用 'input' 事件
slider.addEventListener('input', (e) => {
  state.value = e.target.value;
  updateAll(); // 立即更新
});

// ❌ 避免用 'change' 事件（只在失焦時觸發）

錯誤 3：沒有預設值

問題：頁面載入時是空白的

解決：

const DEFAULTS = {
  borderRadius: 8,
  shadowBlur: 8,
  padding: 16
};

// 初始化
window.addEventListener('DOMContentLoaded', () => {
  Object.assign(state, DEFAULTS);
  updateAll();
});

---

總結與資源

核心價值

Playground Skill 的三大價值：

1. 🎨 視覺化探索

   • 將抽象概念轉為可互動介面
   • 降低溝通成本，提高精確度

2. ⚡ 即時反饋

   • 每個調整立即看到效果
   • 快速試錯，找到最佳方案

3. 🔄 無縫整合

   • 自動生成自然語言指令
   • 輕鬆整合回 Claude Code 工作流

使用時機

記住這三個關鍵場景：

場景	使用模板	範例
🎨 視覺設計	Design Playground	難以用文字描述 UI 外觀時
📊 複雜配置	Data Explorer	選項組合太多需要視覺化探索
🗺️ 系統理解	Code Map	需要互動式理解專案架構

快速開始指令

# Design Playground
請建立一個設計 playground，幫我調整按鈕的樣式

# Code Map
請用 playground 為這個專案建立互動式架構圖

# Data Explorer
幫我建立一個 SQL 查詢的視覺化工具

# Concept Map
建立概念地圖，幫我理解這個技術的核心概念

# Document Critique
創建文件審查工具，讓我可以添加評論

# Diff Review
建立 code review playground，幫我審查 Git diff

延伸資源

• 📚 Claude Code 官方文檔
• 🔌 Anthropic 插件庫
• 🛠️ Skills 市場
• 💬 社群討論

下一步行動

1. ✅ 立即安裝 Playground Skill
2. 🎨 試試 Design Playground 設計一個按鈕
3. 🗺️ 用 Code Map 視覺化你的專案架構
4. 💡 探索其他四種模板的可能性
5. 🚀 將 Playground 整合進你的日常工作流

---

記住：Playground 不只是工具，更是你和 Claude 之間精確溝通的橋樑。

當你下次需要設計 UI、理解架構、建構查詢時，別忘了說：

「請建立一個 playground 工具…」

你會發現工作效率大幅提升！✨