Web Design Skill 實操手冊（詳細版）

1

準備環境 → 安裝 Skill → 創建項目 → 裸跑體驗 → Skill 加持 → 對比

1

claude --version

1
2

# 需要先安裝 Node.js（https://nodejs.org），然後：
npm install -g @anthropic-ai/claude-code

1

opencode --version

1
2
3
4
5

# 方法 1：通過 Go 安裝
go install github.com/sst/opencode@latest

# 方法 2：通過 Homebrew（macOS/Linux）
brew install sst/tap/opencode

1
2
3

cd ~/Desktop
mkdir space-museum-demo
cd space-museum-demo

1

git init

1

claude

1

請在當前目錄創建一個 index.html 文件，只包含最基本的 HTML5 結構（DOCTYPE、head、body），不需要任何樣式和內容。HTML lang 設為 zh-CN，title 設為「太空探索博物館」。

1

npx serve .

1
2

cd ~/Desktop/space-museum-demo
git clone https://github.com/ConardLi/web-design-skill.git

1
2
3

claude
# 或
opencode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

請幫我做一個太空探索博物館的線上展覽網頁，所有代碼寫在一個 index.html 文件裡（HTML + CSS + JS 都內聯），要求如下：

1. 深色主題，有宇宙感和科幻氛圍
2. Hero 區域展示博物館名稱「星際探索博物館」和一句標語
3. 展品卡片區域，展示 4 個太空探索裡程碑事件（加加林、阿波羅 11 號、哈勃望遠鏡、韋伯望遠鏡）
4. 時間線區域，展示太空探索的關鍵年份
5. 有滾動動畫效果（元素隨滾動漸入）
6. 響應式布局，手機端也能看

請直接生成完整代碼，寫入 index.html 文件。

1

請把當前的 index.html 複製一份，命名為 index-no-skill.html

1

請讀取 web-design-skill/skill.md 文件的全部內容，然後創建一個 CLAUDE.md 文件，把 skill.md 的內容寫進去。

1

@web-design-skill/skill.md 請根據這個 Skill 文件的規則來幫我設計網頁。

1

cp web-design-skill/skill.md AGENTS.md

1

在開始設計之前，請告訴我：按照你的設計系統，你會使用什麼配色方案？什麼字體？什麼間距規則？有哪些絕對不能做的事情？

1

幫我做一個太空探索博物館的線上展覽網頁，所有代碼寫在一個 index.html 文件裡。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

設計系統：
━━━━━━━━━━━━
配色方案（基於 OKLCH）：
- 背景：oklch(15% 0.02 260) — 極深的太空藍
- 主色：oklch(70% 0.15 250) — 冷藍色
- 輔色：oklch(60% 0.12 310) — 深紫色
- 文字：oklch(95% 0.01 260) — 近白色

字體：
- 標題：Orbitron（科技感強）
- 正文：Space Grotesk（可讀性好）

間距系統：基於 8px 網格

布局策略：雜誌式大圖排版，非傳統的卡片網格

1
2
3
4
5
6
7
8

請你現在以一個全新設計評審專家的視角，全面檢查這個網頁：
1. 是否有任何「一看就是 AI 做的」的特徵？逐一列出。
2. 配色是否和諧？有沒有用 OKLCH？
3. 字體使用是否恰當？有沒有用到爛大街的字體？
4. 布局是否有創意？還是標準的 Hero + 卡片網格？
5. 動畫是否自然？有沒有過度使用發光效果？
6. 移動端適配是否正常？
列出所有需要改進的地方，然後逐一修復。

1
2
3
4
5

# 如果你還在 Agent 對話中，讓 AI 幫你複製：
# "請把當前的 index.html 複製一份，命名為 index-with-skill.html"

# 或者退出 Agent 後手動複製：
cp index.html index-with-skill.html

1
2

http://localhost:3000/index-no-skill.html     ← 裸跑版本
http://localhost:3000/index.html               ← Skill 版本

1
2
3
4
5

鏡頭 1：【成品展示】（30 秒）
鏡頭 2：【對比展示】（1 分鐘）
鏡頭 3：【過程回放】（2-3 分鐘）
鏡頭 4：【設計細節講解】（1 分鐘）
鏡頭 5：【總結】（30 秒）

1
2
3
4
5
6
7

在寫任何代碼之前，請先用自然語言描述你的設計系統，包括：
1. 配色方案（使用 OKLCH）
2. 字體選擇（標題和正文分別用什麼）
3. 間距系統
4. 布局策略
5. 絕對不能做的事情
我確認後再開始寫代碼。

1
2
3
4

先給我一個最小可用版本（V0）。
可以有佔位符和未完成的部分。
我確認方向後再完善細節。
不要花太多時間在細節上。

1
2
3
4

請以一個全新的設計評審專家視角，全面檢查當前網頁。
列出所有「一看就是 AI 做的」的特徵，
以及配色、字體、布局上的所有問題。
然後逐一修復。

1
2

做網頁的核心流程：
理解需求 → 確認設計系統 → 快速 V0 → 迭代打磨 → 驗證