網頁設計 on Yanmu

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

Wed, 27 May 2026 00:00:00 +0800

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

適用工具： Claude Code / OpenCode 目標： 跟著本筆記，你將用 AI 生成一個高品質的太空探索博物館網頁 預計耗時： 40-90 分鐘

在開始之前：理解我們要做什麼

整體流程概覽

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

為什麼先「裸跑」再用 Skill？

這是一個對比實驗：

如果你直接用 Skill，你不會感受到 Skill 的價值
先讓 AI 自由發揮 → 你會看到典型的 AI 味網頁（紫粉藍漸變、大圓角卡片、Emoji 圖標……）
然後用 Skill 再做一遍 → 你會親眼看到同一個主題、同一個模型做出截然不同的效果

你需要的工具清單

工具	是什麼	去哪裡獲取
終端	你和 AI 對話的地方	Windows: PowerShell / Terminal；macOS: Terminal
Claude Code 或 OpenCode	AI 編碼 Agent	見下方安裝說明
Git	從 GitHub 下載 Skill 文件	`winget install Git.Git`（Win）/ `brew install git`（macOS）
瀏覽器	預覽網頁效果	Chrome / Edge / Firefox
錄屏軟件（可選）	錄製操作過程	OBS Studio（免費）/ 系統自帶錄屏

確認 Agent 已就緒

如果你用 Claude Code

是什麼： Anthropic 官方的終端 AI 編碼工具。

確認已安裝：

`1`	`claude --version`

如果顯示版本號（如 1.0.x），說明已安裝。

如果沒安裝：

1
2

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

如果你用 OpenCode

是什麼： SST 團隊開發的開源終端 AI 編碼工具。

確認已安裝：

`1`	`opencode --version`

如果沒安裝：

# 方法 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

初始化 Git 倉庫

`1`	`git init`

創建初始文件

claude

輸入：

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

啟動本地預覽服務器

`1`	`npx serve .`

打開瀏覽器訪問 http://localhost:3000。

下載 web-design-skill

克隆倉庫

1
2

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

裸跑體驗 — 見識 AI 的「原生審美」

🎯 目的： 讓 AI 用默認方式生成網頁，觀察它的「原生審美」。

啟動 Agent（不加載 Skill）

1
2
3

claude
# 或
opencode

輸入設計需求

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

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

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

等待 AI 生成

整個過程大約需要 1-3 分鐘。

查看結果

刷新 http://localhost:3000。

觀察清單：

配色：是否有紫粉藍的漸變？
布局：Hero 區域是不是標準的「居中標題 + 副標題」？
AI 味特徵：有沒有用 Emoji 當圖標？有沒有大圓角卡片？

保存裸跑版本

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

安裝 Skill 到 Agent 中

🎯 目的： 把 web-design-skill 的規則注入到 Agent 的系統提示中。

Claude Code — 兩種安裝方式

方式 A：寫入 CLAUDE.md（推薦，永久生效）

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

方式 B：在對話中引用（臨時生效）

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

OpenCode — 安裝方式

方式 A：寫入 AGENTS.md（推薦）

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

驗證 Skill 是否生效

啟動 Agent，輸入：

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

如果 Skill 生效了，AI 的回答應該包含：

提到 OKLCH 色彩空間
列出具體的字體推薦
提到「去除 AI 味」的具體規則

Skill 加持 — 打磨高級感

🎯 目的： 用同樣的需求，讓 Skill 引導 AI 做出完全不同的網頁。

啟動新的對話

重要：必須新開一個對話！

輸入設計需求

這次我們故意只給極簡需求：

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

階段 A：AI 提問

AI 先問你幾個關鍵問題。

階段 B：AI 說明設計系統

AI 在寫代碼之前，先用自然語言描述它的設計系統：

設計系統：
━━━━━━━━━━━━
配色方案（基於 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 網格

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

階段 C：AI 輸出 V0（粗糙初版）

刷新瀏覽器查看效果，判斷方向是否正確。

階段 D：迭代打磨

每輪只提 1-2 個修改點。

階段 E：最終驗證

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

保存 Skill 版本

AI 完成後，保存最終版：

# 如果你還在 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：【成品展示】（30 秒）
鏡頭 2：【對比展示】（1 分鐘）
鏡頭 3：【過程回放】（2-3 分鐘）
鏡頭 4：【設計細節講解】（1 分鐘）
鏡頭 5：【總結】（30 秒）

附錄 A：常用提示詞速查

讓 AI 先說設計系統

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

要求快速 V0

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

觸發全面驗證

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

最後總結

1
2

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

三句話記住 Skill 的精髓：

先說設計系統，再寫代碼 — 方向不對，代碼白寫
先出粗糙 V0，再精雕細琢 — 快速試錯，成本最低
大膽留白，每個元素要證明自己 — 克制即高級

Web Design Skill 學習筆記

Tue, 26 May 2026 00:00:00 +0800

Web Design Skill 學習筆記

Claude Design 是什麼？

Claude Design 是 Anthropic 發佈的設計工具，發佈當天直接導致了 Figma 股價暴跌。

核心理念： 左邊打字，右邊直接出設計稿（本質上是可運行的網頁，不是圖片）

與傳統設計工具的區別

維度	傳統設計工具（如 Figma）	Claude Design
主導者	人在畫布上操作，AI 輔助提速	AI 是主要生成者，人負責審核
輸出物	設計圖/圖片	真實可運行的代碼
交互方式	手動繪製	文字描述 → 自動生成
版本管理	需手動操作	鏈接可點擊，標籤可切版本

本質： Claude Design 更像 Claude Code（設計師版），而不是 AI 版 Figma。

核心提示詞拆解（6 大要點）

視頻對 Claude Design 洩露的提示詞進行了深度拆解，提煉出 6 個核心設計原則：

角色定位 —— 動態身份切換

提示詞原文要旨： “你是一個專家設計師，而用戶是你的產品經理”

關鍵洞察：

❌ 不要說"你是一個 AI 助手"
✅ 建立設計師 ↔ 產品經理的協作關係

兩個好處：

AI 決策更果斷 — 設計師本身應該有判斷力，不用事事請示
關鍵點會來問你 — 因為用戶是產品經理，最終由用戶拍板

動態身份切換：

做動畫 → 動效設計師
做原型 → UX 設計師
做 PPT → Deck 設計師

💡 啟示： 很多人的提示詞只寫一句"你是個前端開發者"就完事了。好的角色定位應該是動態的，根據具體任務靈活切換身份。

工作流 —— 六步流程

`1`	`理解需求 → 探索資源 → 制定計劃 → 搭建結構 → 完成驗證 → 簡要總結`

細節一：提問的藝術（什麼時候該問？什麼時候直接幹？）

問題： 很多 Agent 要麼先問你一堆問題，要麼啥也不問悶頭就幹。

Claude Design 的策略：

輸入 “幫我做個 PPT” → 先問幾個問題（信息不足）
輸入 “幫我做個 PPT，全運會馬上要用，10 分鐘” → 直接開幹（緊急場景，信息充分）

💡 啟示： 根據上下文的緊迫程度和信息完整度，靈活決定是提問還是執行。

細節二：總結原則

✅ 只說關鍵注意事項和下一步動作
❌ 不要復述自己已經做了什麼

💡 啟示： 這個原則可以有效避免 AI 產生大量廢話。

去除 AI 味（最有價值的部分）

典型的 AI 生成網頁特徵：

紫粉藍漸變背景
大圓角卡片
Emoji 當圖標
到處堆砌假數據
左側彩色邊框的圓角卡片
爛大街的字體
無意義的數據和圖標堆砌

這就像文章裡通篇都是"此外"“值得注意的是"“綜上所述"一樣，一眼就能聞出來是 AI 寫的。

Claude Design 的做法： 列出一份完整的"雷區清單”，逐條告訴 AI 不能走這些老套路。

字體推薦也很講究：

明確列出千萬不能用的字體 + 替代方案
推薦小眾但品質很高的字體

色彩系統 —— OKLCH 色彩空間

配色策略優先級：

`1`	`品牌色 → OKLCH 派生顏色 → 絕不憑空編新顏色`

為什麼用 OKLCH 而不是 HSL？

	HSL	OKLCH
感知均勻性	❌ 不均勻（同亮度值，黃色比藍色亮很多）	✅ 均勻
AI 配色效果	數值沒問題但看著不舒服	保持亮度和色度不變，只轉色相，顏色自然和諧

💡 啟示： OKLCH 這個看似很小的細節，能讓網頁的高級感直接提升一個檔次。

內容原則 —— “用 1000 個 NO 換一個 YES”

引用喬布斯經典名言。

AI 做網頁的傳統毛病： 恨不得把空間全塞滿 — Hero、特性、評價、數據、FAQ、聯繫方式……一股腦全上，但每塊都平庸。

Claude Design 的態度：

每個元素都得證明自己為什麼應該在那裡
如果覺得頁面空 → 可能是排版問題，用留白來解決
一個大膽的留白 > 十個湊數的板塊

驗證機制 —— 子 Agent 檢查

原理： 開發完成後，fork 出一個獨立的子 Agent 對網頁做全面檢查。

為什麼要獨立的子 Agent？

同一個上下文裡的 AI 容易"自我感覺良好”
獨立的子 Agent 沒有"感情包袱"，更容易發現問題

驗證內容：

是否有 AI 味特徵？
配色是否和諧？
字體是否恰當？
布局是否有創意？

Skill 文件的核心優化

Skill 文件在 Claude Design 提示詞的基礎上，做了三個關鍵優化：

先說設計系統再寫代碼

在開始編碼之前，要求 AI 明確列出：

配色方案
字體選擇
間距系統
……

為什麼？ 如果不說清楚，AI 會默默自己做決定直接寫代碼。等你看到成品時，如果方向不對只能推翻重來。提前說出來，還沒寫代碼就能糾偏。

儘早輸出最小可用版本

要求 AI 先拿出一個帶假設和佔位符的粗糙 V0 版本
一個粗糙的 V0 > 花幾倍時間做出精雕細琢的 V1

為什麼？ 如果整個方向都錯了，V1 做得再精緻也全白幹了。

額外補充

補充了更多去除 AI 味的條目
增加了幾套經過驗證的字體和配色參考對照表
附帶 reference 文件（典型代碼模板，來源於提示詞中的 “copy study the component” 部分）

效果對比演示

測試環境：Cursor + Claude 4.7（有 Skill vs 無 Skill）

太空探索博物館線上展覽頁

	無 Skill	有 Skill
配色	青紫粉漸變，典型 AI 霓虹感	OKLCH 定義，接近雜誌印刷的深沉色調
字體	比較老套	標題和正文都有特點，科技感十足
布局	標準 Hero + 卡片，教科書式落地頁	非傳統卡片式，有創意感
動畫	有星空和行星動畫，但堆砌了大量發光特效	舒適、有創意感
總體	有太空感，缺少創意	像非常有經驗的設計師的傑作

獨立攝影師個人作品集（極簡提示詞）

	無 Skill	有 Skill
設計風格	深色背景 + 霓虹發光 + 半透明卡片，老套	虛構了一位北歐攝影師，從頭設計完整視覺風格
文案	滿滿的 AI 感	—
情感表達	攝影師本該有的自由感完全沒體現	像在翻一本高端攝影畫冊
決策策略	直接開幹，沒問問題	主動提問了配色傾向、核心元素等

最終結論

1
2

無 Skill: 85 分 → 能用、完整、合格
有 Skill: 95 分 → 好看、精緻、有風格

Skill 裡的每條規則單獨看效果不大，但加起來就會產生質變。這就是從"能用"到"好看"、從"完整"到"精緻"、從"合格"到"有風格"的差距。

核心知識點速查

#	知識點	一句話總結
1	動態角色定位	根據任務靈活切換 AI 身份，而不是一句"你是前端"了事
2	工作流六步法	理解需求→探索資源→制定計劃→搭建結構→完成驗證→簡要總結
3	提問的藝術	根據信息完整度和緊迫度決定是提問還是直接幹
4	去除 AI 味	列出雷區清單，禁用漸變/Emoji/大圓角卡片等老套路
5	OKLCH 配色	感知均勻的色彩空間，比 HSL 更能產生和諧配色
6	內容克制	每個元素都要證明自己存在的理由，大膽留白
7	子 Agent 驗證	用獨立上下文檢查，避免"自我感覺良好"
8	先說設計系統再寫代碼	提前暴露設計決策，避免方向性錯誤
9	快速出 V0	粗糙但快速的原型 > 精緻但方向錯誤的成品

網頁設計 on Yanmu

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

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

在開始之前：理解我們要做什麼

整體流程概覽

為什麼先「裸跑」再用 Skill？

你需要的工具清單

確認 Agent 已就緒

如果你用 Claude Code

如果你用 OpenCode

創建項目目錄

創建工作文件夾

初始化 Git 倉庫

創建初始文件

啟動本地預覽服務器

下載 web-design-skill

克隆倉庫

裸跑體驗 — 見識 AI 的「原生審美」

啟動 Agent（不加載 Skill）

輸入設計需求

等待 AI 生成

查看結果

保存裸跑版本

安裝 Skill 到 Agent 中

Claude Code — 兩種安裝方式

方式 A：寫入 CLAUDE.md（推薦，永久生效）

方式 B：在對話中引用（臨時生效）

OpenCode — 安裝方式

方式 A：寫入 AGENTS.md（推薦）

驗證 Skill 是否生效

Skill 加持 — 打磨高級感

啟動新的對話

輸入設計需求

階段 A：AI 提問

階段 B：AI 說明設計系統

階段 C：AI 輸出 V0（粗糙初版）

階段 D：迭代打磨

階段 E：最終驗證

保存 Skill 版本

對比兩個版本

錄製成視頻（可選）

建議錄製的鏡頭

附錄 A：常用提示詞速查

讓 AI 先說設計系統

要求快速 V0

觸發全面驗證

最後總結

Web Design Skill 學習筆記

Web Design Skill 學習筆記

Claude Design 是什麼？

與傳統設計工具的區別

核心提示詞拆解（6 大要點）

角色定位 —— 動態身份切換

工作流 —— 六步流程

細節一：提問的藝術（什麼時候該問？什麼時候直接幹？）

細節二：總結原則

去除 AI 味（最有價值的部分）

色彩系統 —— OKLCH 色彩空間

內容原則 —— “用 1000 個 NO 換一個 YES”

驗證機制 —— 子 Agent 檢查

Skill 文件的核心優化

先說設計系統再寫代碼

儘早輸出最小可用版本

額外補充

效果對比演示

太空探索博物館線上展覽頁

獨立攝影師個人作品集（極簡提示詞）

最終結論

核心知識點速查

相關資源