提示詞工程 on Yanmu

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	粗糙但快速的原型 > 精緻但方向錯誤的成品

Context7 指南：讓 AI 程式設計助手讀懂最新文件

Sat, 02 May 2026 19:51:00 +0800

概述

有沒有這種經歷：讓 AI 寫一段程式碼，它霹靂啪啦寫完了，一執行就報錯。或者呼叫的 API，文件裡明明寫著有，AI 卻說「不存在」。

不是 AI 笨，是它學的東西有保質期——訓練資料可能是幾個月甚至一年前的，框架早就更新了好幾版。

Context7 就是幹這個的。它由 Upstash 團隊開發，你提問時它去拉最新的官方文件，塞進 AI 的上下文裡，讓 AI 基於當前版本回答。

用法也簡單，提問末尾加一句 use context7 就行。相當於告訴 AI：「別瞎猜，先翻翻最新文件再回我。」

為什麼需要它？

💥 一個例子就夠了

你想給個人網站加個「回到頂部」按鈕——頁面往下滑，右下角出現一個按鈕，點一下回到最上面。

AI 憑舊知識寫出來的是： 先載入一個幾十 KB 的第三方函式庫，再寫一堆程式碼去呼叫它。功能做出來了，但為了一個按鈕，網頁變慢、程式碼囉嗦。

實際上現在用不著這麼麻煩： 瀏覽器自己就帶了平滑捲動和捲動監聽，幾行程式碼搞定，不需要任何額外函式庫。

AI 不知道這些，因為它學的是幾年前的教材。

加上 use context7 後，Context7 先去查了最新文件，發現原生功能已經夠用了。於是 AI 選了更輕量的方案，而不是拿老套路糊弄你。

這就像讓朋友幫忙修手機，他憑記憶拆機，記的卻是 3 年前的步驟——螺絲位置早變了。動手前先看一眼最新教學，就不會拆壞。

有沒有 Context7 的區別

	沒有	有
資訊來源	AI 腦子裡的舊知識，可能過時	即時去官方文件拿最新內容
API 準確性	經常呼叫錯誤或用已經不存在的 API	保證用當前版本的 API
程式碼品質	可能是兩三年前的過時寫法	符合最新推薦寫法
版本處理	不管版本瞎猜	你說用哪個版本就查哪個版本

🔄 工作原理

操作就幾步：

你提問（末尾加 use context7）
    ↓
Context7 認出你問的是哪個程式碼套件
    ↓
去 GitHub、官方文件站取得最新內容
    ↓
篩選出最相關的幾段，塞進 AI 的「上下文」
    ↓
AI 拿著最新文件回答你

「上下文」就是你跟 AI 當前對話裡它能「看到」的內容。塞文件進去，相當於聊天時在桌上攤開一本參考書，AI 邊看邊答。

文件從哪來？GitHub 倉庫、官方文件站，還有專案維護者寫的 llms.txt（一種專門給 AI 看的文件索引檔案）。

搜到一堆結果後，Context7 會用 LLM（大型語言模型）再做一次智慧排序，把最相關的那幾段挑出來給你。

兩種用法：

方式	說明
MCP 模式（推薦）	裝一次，AI 程式設計助手自動呼叫。MCP 相當於給 AI 裝了個外掛程式，裝好了不用管
CLI 手動模式	在終端機敲命令手動查文件，適合喜歡折騰的人

核心能力

智慧匹配：你說名字，它去找地方

你要問 AI 某個工具怎麼用，Context7 得先去網上找到這個工具的最新說明書。但網上叫同一個名字的東西可能有好幾個，它得知道你到底說哪個。

一般的名字它能自己認出來。萬一名字太常見、容易搞混，就用 誰/什麼 的格式精確告訴它：

`1`	`用 /tailwindlabs/tailwindcss 給我的網頁加一個導覽列。use context7`

這裡的 tailwindlabs 是作者名，tailwindcss 是專案名。就像你搜「蘋果」，可能是水果也可能是手機——說清楚就錯不了。

支援哪些函式庫

熱門的都收錄了：React、Next.js、Vue、Tailwind CSS、Express、Prisma、Supabase、TypeScript……完整列表在 context7.com/rankings。

版本感知

不同版本的 API 差別可能很大。直接說版本號，Context7 查對應版本的文件：

1
2
3

用 Vue 3 寫一個計數器。use context7
用 Next.js 14 的 Pages Router 寫 API 路由。use context7
用 Tailwind CSS v4 設定深色模式。use context7

你要 iPhone 12 的拆機教學，別人就不會給你拿 iPhone 15 的來。

安裝

一鍵安裝

`1`	`npx ctx7 setup`

npx 是 Node.js 自帶的命令，不需要額外安裝。如果你還沒裝 Node.js，先去 nodejs.org 下載安裝，裝完就有 npx 了。

執行後它會：

彈出瀏覽器讓你登入授權（OAuth）
生成一串 API Key（相當於你的「身分憑證」）
自動設定好對應編輯器

三步走完，搞定。

想指定編輯器就加個參數：

1
2
3

npx ctx7 setup --claude      # Claude Code
npx ctx7 setup --cursor      # Cursor
npx ctx7 setup --opencode    # OpenCode

解除安裝：npx ctx7 remove

手動設定

自動安裝不生效的話，手動加 MCP Server（可以理解為一個幫你查文件的後臺服務）：

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "你的API金鑰"
      }
    }
  }
}

不同工具的設定檔位置（~ 代表你電腦的使用者目錄，比如 Windows 上的 C:\Users\你的使用者名稱）：

工具	設定位置
Cursor	Settings → MCP，或 `~/.cursor/mcp.json`
Claude Code	`~/.claude/settings.json`（全域）或 `.claude/settings.json`（專案）
Windsurf	Settings → Cascade → MCP servers
Cline	VS Code 擴充功能內 MCP Servers → Configure
OpenCode	專案根目錄 `opencode.json`

API Key 去 context7.com/dashboard 註冊，格式是 ctx7sk...，免費使用者也有額度。

✅ 驗證

發一條測試：

`1`	`寫一個帶按鈕的計數器網頁。use context7`

AI 如果給出的是乾淨現代的程式碼，沒有載入額外函式庫，說明生效了。

使用方法

基本用法

提問末尾加 use context7：

1
2

寫一個簡潔的個人簡歷網頁。use context7
寫一個倒數計時工具，輸入秒數開始倒數。use context7

精確指定函式庫

用 /owner/repo 格式跳過名稱匹配：

`1`	`用 /tailwindlabs/tailwindcss 給我的網頁加一個導覽列。use context7`

函式庫名有歧義時推薦這麼用。

指定版本

1
2

用 Bootstrap 4 而不是 5 的寫法，寫一個卡片佈局。use context7
用 Vue 3 的 Composition API 寫一個待辦事項列表。use context7

組合多個函式庫

`1`	`用 Bootstrap + Font Awesome 做一個圖示展示頁。use context7`

設定自動觸發

不想每次都手打 use context7 的話，在規則檔裡配一下：

→ Cursor 在 .cursorrules 裡寫：

`1`	`當使用者提問涉及第三方框架/函式庫的 API 用法時，自動使用 Context7 查詢最新文件。`

→ Claude Code 在 CLAUDE.md 裡寫：

1
2
3

## 文件查詢規則
- 涉及第三方函式庫/框架時，先用 Context7 查詢最新文件
- 優先基於 Context7 回傳的內容生成程式碼

CLI 命令

如果你只在 AI 對話裡用 Context7，這部分可以跳過。CLI 是給喜歡在終端機敲命令的人用的。

npm 是 Node.js 自帶的套件管理員，-g 表示「全域安裝」，裝一次所有地方都能用。

# 安裝 CLI
npm install -g ctx7

# 搜尋函式庫
ctx7 library react
ctx7 library nextjs "middleware"

# 取得文件
ctx7 docs /facebook/react "hooks state management"
ctx7 docs /vercel/next.js "middleware authentication"

# Skills 管理
ctx7 skills search        # 搜尋可用 Skill
ctx7 skills install       # 安裝 Skill
ctx7 skills list          # 檢視已安裝
ctx7 skills remove        # 解除安裝

# 認證
ctx7 login                # 登入
ctx7 whoami               # 檢視狀態
ctx7 logout               # 登出

❓ 常見問題

和 AI 自帶的聯網搜尋有什麼區別？

聯網搜尋到的是部落格、論壇貼文，品質參差不齊，還得自己判斷靠不靠谱。Context7 只從官方文件拿內容，用 LLM 篩選出最相關的片段，給 AI 直接用。

💰 `use context7` 會多花錢嗎？

不會。雖然多了一步查文件，但 AI 拿到的資訊準了，就不用瞎猜、反覆改、寫又長又錯的程式碼。整體算下來花的錢（Token 消耗，AI 的計價單位）反而更少。

沒收錄我用的函式庫怎麼辦？

去 context7.com 點 “Add Docs” 提交，或者不加 use context7，AI 會退回用自己的知識回答。

裝好了但沒效果？

逐項排查：

npx ctx7 setup 有沒有報錯
MCP 設定檔 JSON 格式對不對（多一個逗號都不行）
API Key 是不是有效的（ctx7sk... 開頭）
編輯器有沒有完全關掉再打開
MCP 列表狀態亮綠燈了嗎
提問時有沒有寫 use context7

會影響回答速度嗎？

會多等一兩秒，但換來答案準了、不用反覆改。跑一次報錯再修的時間，可比這一兩秒長多了。

總結

項目	內容
是什麼	為 AI 程式設計助手提供即時最新文件的平臺
解決什麼	AI 因訓練資料過時而給出錯誤程式碼
核心原理	即時擷取官方文件，注入 AI 上下文
安裝	`npx ctx7 setup` 一行命令搞定
使用	提示詞末尾加 `use context7`
價格	有免費層級，個人夠用
官方網站	context7.com
GitHub	github.com/upstash/context7

裝好之後，再也不用擔心 AI 拿舊版知識來糊弄你了。

提示詞工程 on Yanmu

Web Design Skill 學習筆記

Web Design Skill 學習筆記

Claude Design 是什麼？

與傳統設計工具的區別

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

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

工作流 —— 六步流程

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

細節二：總結原則

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

色彩系統 —— OKLCH 色彩空間

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

驗證機制 —— 子 Agent 檢查

Skill 文件的核心優化

先說設計系統再寫代碼

儘早輸出最小可用版本

額外補充

效果對比演示

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

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

最終結論

核心知識點速查

相關資源

Context7 指南：讓 AI 程式設計助手讀懂最新文件

概述

為什麼需要它？

💥 一個例子就夠了

有沒有 Context7 的區別

🔄 工作原理

核心能力

智慧匹配：你說名字，它去找地方

支援哪些函式庫

版本感知

安裝

一鍵安裝

手動設定

✅ 驗證

使用方法

基本用法

精確指定函式庫

指定版本

組合多個函式庫

設定自動觸發

CLI 命令

❓ 常見問題

和 AI 自帶的聯網搜尋有什麼區別？

💰 use context7 會多花錢嗎？

沒收錄我用的函式庫怎麼辦？

裝好了但沒效果？

會影響回答速度嗎？

總結

💰 `use context7` 會多花錢嗎？