网页设计 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 编码工具，你在终端里打字，它帮你读文件、写代码、执行命令。

确认已安装：

打开终端（Windows 用 PowerShell，macOS 用 Terminal），输入：

`1`	`claude --version`

如果显示版本号（如 1.0.x），说明已安装。

如果没安装：

1
2

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

确认 API Key 已配置：

Claude Code 需要 Anthropic API Key 才能使用。在终端输入：

`1`	`claude config list`

如果看到 apiKey 已设置，就 OK。如果没有，运行：

`1`	`claude config set apiKey sk-ant-xxxxx`

（把 sk-ant-xxxxx 换成你的真实 Key）

为什么要确认这个？ 后续所有操作都依赖 Agent 能正常调用 AI 模型。如果 Key 没配好，后面所有步骤都会卡住。

如果你用 OpenCode

是什么： SST 团队开发的开源终端 AI 编码工具，和 Claude Code 类似，但支持多种模型（Claude、GPT 等），界面是 TUI（终端图形界面）。

确认已安装：

`1`	`opencode --version`

如果显示版本号，说明已安装。

如果没安装（二选一）：

# 方法 1：通过 Go 安装（需要先安装 Go）
go install github.com/sst/opencode@latest

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

确认模型已配置：

OpenCode 启动后，在 TUI 界面中按快捷键查看设置，确认已选择 Claude 模型并配置好 API Key。

为什么要确认这个？ OpenCode 支持多个模型供应商，你需要确保选择的是 Claude（而非 GPT），因为 web-design-skill 的提示词是针对 Claude 优化的。

创建项目目录

创建工作文件夹

打开终端，执行以下命令：

# 切换到你想要存放项目的目录（比如桌面）
cd ~/Desktop

# 创建项目文件夹
mkdir space-museum-demo

# 进入项目文件夹
cd space-museum-demo

初始化 Git 仓库

`1`	`git init`

为什么要 Git？ 不是为了推送到 GitHub，而是为了对比两个版本的差异。后面做完两个版本后，你可以用 git diff 精确看到 Skill 带来了哪些变化。

创建初始文件

用终端创建一个空的 HTML 文件：

Claude Code 方式：

1
2

# 启动 Claude Code，告诉它创建一个空的 HTML 骨架
claude

进入 Claude Code 后输入：

请在当前目录创建一个 index.html 文件，只包含最基本的 HTML5 结构（DOCTYPE、head、body），不需要任何样式和内容。HTML lang 设为 zh-CN，title 设为"太空探索博物馆"。

Claude Code 会自动创建文件。输入 /exit 退出。

OpenCode 方式：

1
2

# 启动 OpenCode
opencode

在 OpenCode 的 TUI 界面中输入同样的提示词。OpenCode 会创建文件。按 Ctrl+C 或 q 退出。

或者手动创建（不依赖 Agent）：

# Windows PowerShell
@"
<!DOCTYPE html>
<html lang=`"zh-CN`">
<head>
  <meta charset=`"UTF-8`">
  <meta name=`"viewport`" content=`"width=device-width, initial-scale=1.0`">
  <title>太空探索博物馆</title>
</head>
<body>
</body>
</html>
"@ | Out-File -Encoding utf8 index.html

# macOS / Linux
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太空探索博物馆</title>
</head>
<body>
</body>
</html>
EOF

启动本地预览服务器

在终端中（不要在 Agent 里，另开一个终端窗口）执行：

1
2
3

# 方法 1：用 Node.js 的 serve（推荐，最简单）
npx serve .
# 首次会提示你安装 serve，输入 y 确认即可

1
2

# 方法 2：用 Python
python -m http.server 8080

打开浏览器访问 http://localhost:3000（npx serve 默认端口）或 http://localhost:8080（Python 默认端口），你应该看到一个空白页面。

为什么要提前启动预览服务器？ 因为后面 AI 生成代码后，你需要立刻在浏览器里看效果。提前启动好服务器，后面只需要刷新浏览器就行，不用每次都重新启动。

保持这个终端窗口开着，不要关掉它。后续你在另一个终端窗口里和 AI 对话。

下载 web-design-skill

克隆仓库

在哪里操作： 新开一个终端窗口（不要关掉上面的预览服务器窗口）

# 进入项目目录
cd ~/Desktop/space-museum-demo

# 克隆 skill 仓库到当前目录下
git clone https://github.com/ConardLi/web-design-skill.git

执行完后，你的项目目录结构会变成这样：

space-museum-demo/
├── index.html                  ← 你创建的空 HTML 文件
└── web-design-skill/           ← 刚克隆下来的仓库
    ├── README.md               ← 仓库说明文档
    ├── skill.md                ← ⭐ 核心 Skill 文件（约 400 行）
    ├── reference.md            ← 参考代码模板
    └── ...                     ← 其他文件（demo 等）

为什么要克隆整个仓库而不只是复制文件？

skill.md 是核心，但 reference.md 也很重要（里面是代码模板参考）

仓库里的 demo 文件可以作为学习参考

后续作者更新了你可以直接 git pull 获取最新版本

查看 Skill 文件内容（可选但推荐）

1
2

# 查看 skill.md 的前 30 行，了解它的结构
head -30 web-design-skill/skill.md

裸跑体验 — 见识 AI 的"原生审美"

🎯 目的： 让 AI 用默认方式生成网页，观察它的"原生审美"。

启动 Agent（不加载 Skill）

Claude Code：

# 确保在项目目录下
cd ~/Desktop/space-museum-demo

# 启动 Claude Code
claude

OpenCode：

1
2

cd ~/Desktop/space-museum-demo
opencode

关键： 这一步不要引用任何 Skill 文件。让 AI 用它自己的默认行为来工作。

输入设计需求

在 Agent 的对话框中，输入以下内容（直接复制粘贴）：

请帮我做一个太空探索博物馆的线上展览网页，所有代码写在一个 index.html 文件里（HTML + CSS + JS 都内联），要求如下：

1. 深色主题，有宇宙感和科幻氛围
2. Hero 区域展示博物馆名称"星际探索博物馆"和一句标语
3. 展品卡片区域，展示 4 个太空探索里程碑事件（加加林、阿波罗 11 号、哈勃望远镜、韦伯望远镜）
4. 时间线区域，展示太空探索的关键年份
5. 有滚动动画效果（元素随滚动渐入）
6. 响应式布局，手机端也能看

请直接生成完整代码，写入 index.html 文件。

为什么给这么详细的需求？ 这是裸跑测试，我们要排除"需求不清"这个干扰因素。给足够详细的需求，这样最终效果不好就只能是 AI 的审美问题，而不是"你没说清楚"。

等待 AI 生成

AI 会开始工作。你会看到它：

先思考/规划
然后写入 index.html 文件
可能会告诉你"已完成"

整个过程大约需要 1-3 分钟。

查看结果

切到浏览器，刷新 http://localhost:3000（或 http://localhost:8080）。

你应该能看到一个完整的网页。仔细观察并记录以下内容：

📝 观察清单（边看边打勾）

配色：

背景是否是深色？用了什么颜色？

是否有紫粉蓝的渐变？（这是 AI 最喜欢的"霓虹风"）

文字颜色和背景的对比度够不够？

布局：

Hero 区域是不是标准的"居中标题 + 副标题"？

展品卡片是不是等宽的网格排列？（这是 AI 最爱用的布局）

是否有大胆的留白？还是把每个角落都塞满了？

字体：

用了什么字体？是不是最常见的那几个？（如 Inter、Roboto）

标题和正文的字体有没有区分？

AI 味特征：

有没有用 Emoji 当图标？（🚀🌌✨ 等）

有没有大圆角卡片（border-radius: 20px 那种）？

有没有到处都是的发光效果（glow、box-shadow with color）？

有没有堆砌的假数据？

整体评分：______ / 100

保存裸跑版本

在 Agent 中输入：

`1`	`请把当前的 index.html 复制一份，命名为 index-no-skill.html`

或者退出 Agent 后在终端执行：

`1`	`cp index.html index-no-skill.html`

为什么要保存？ 后面用 Skill 重做时，index.html 会被覆盖。保留一份裸跑版本才能做对比。

安装 Skill 到 Agent 中

🎯 目的： 把 web-design-skill 的规则注入到 Agent 的系统提示中，让 AI 后续所有的设计决策都遵循这些规则。

Claude Code — 两种安装方式

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

什么是 CLAUDE.md？

这是 Claude Code 的"项目说明书"
Claude Code 每次启动时都会自动读取这个文件
文件里的内容会成为 AI 的"行为准则"
就像给 AI 一份"员工手册"，它会一直遵守

在哪里创建： 项目根目录下（即 ~/Desktop/space-museum-demo/CLAUDE.md）

操作步骤：

# 确保在项目目录下
cd ~/Desktop/space-museum-demo

# 创建 CLAUDE.md（把 Skill 内容作为规则写入）
# 方法：读取 skill.md 的内容，写入 CLAUDE.md

在 Claude Code 中操作：

claude

进入后输入：

`1`	`请读取 web-design-skill/skill.md 文件的全部内容，然后创建一个 CLAUDE.md 文件，把 skill.md 的内容写进去。`

等待 Claude Code 完成。输入 /exit 退出。

验证：

# 查看 CLAUDE.md 是否存在
ls -la CLAUDE.md

# 查看内容是否正确（应该能看到 skill.md 的内容）
head -20 CLAUDE.md

你应该能看到 Skill 文件的内容已经写入了 CLAUDE.md。

CLAUDE.md 的作用原理：
1
2
3
4
5
6
7
你启动 Claude Code
       ↓
Claude Code 自动读取 CLAUDE.md
       ↓
CLAUDE.md 的内容被注入到 AI 的系统提示中
       ↓
AI 后续所有的决策都会参考这些规则
这就像你给一个新员工发了一份设计规范手册，他后续做所有设计都会遵守这份手册。

方式 B：在对话中引用（临时生效）

如果你不想修改 CLAUDE.md，也可以每次在对话中引用 Skill 文件：

claude

然后输入：

`1`	`@web-design-skill/skill.md 请根据这个 Skill 文件的规则来帮我设计网页。`

方式 A vs 方式 B 的区别：

方式 A（CLAUDE.md）方式 B（对话引用）

持久性永久生效，每次启动都加载仅当前对话有效

适合场景你要长期用这个 Skill 做设计你只是想试一下

操作一次设置，后续无感每次都要手动引用

	方式 A（CLAUDE.md）	方式 B（对话引用）
持久性	永久生效，每次启动都加载	仅当前对话有效
适合场景	你要长期用这个 Skill 做设计	你只是想试一下
操作	一次设置，后续无感	每次都要手动引用

OpenCode — 安装方式

OpenCode 支持读取项目根目录的配置文件来注入自定义指令。

方式 A：写入 AGENTS.md（推荐）

什么是 AGENTS.md？

类似于 Claude Code 的 CLAUDE.md
OpenCode 启动时会自动读取
内容会成为 AI 的行为准则

操作步骤：

cd ~/Desktop/space-museum-demo

# 把 skill.md 的内容复制到 AGENTS.md
cp web-design-skill/skill.md AGENTS.md

或者用 OpenCode 自身操作：

`1`	`opencode`

进入后输入：

`1`	`请读取 web-design-skill/skill.md 文件的全部内容，然后创建一个 AGENTS.md 文件，把 skill.md 的内容写进去。`

注意： 如果 OpenCode 也支持读取 CLAUDE.md（很多工具兼容这个格式），你也可以用 CLAUDE.md 作为文件名。具体取决于你使用的 OpenCode 版本。

方式 B：在对话中引用

`1`	`opencode`

在对话中直接告诉 AI：

`1`	`请先阅读 web-design-skill/skill.md 文件，后续所有设计工作都遵循这个文件中的规则。`

验证 Skill 是否生效

无论用哪种工具，验证方法都一样：

启动 Agent，输入：

`1`	`在开始设计之前，请告诉我：按照你的设计系统，你会使用什么配色方案？什么字体？什么间距规则？有哪些绝对不能做的事情？`

如果 Skill 生效了， AI 的回答应该包含：

提到 OKLCH 色彩空间
列出具体的字体推荐（不是泛泛的"使用 sans-serif"）
提到"去除 AI 味"的具体规则（不使用渐变、不用 Emoji 当图标等）
提到工作流（先确认设计系统 → 快速 V0 → 迭代 → 验证）

如果 Skill 没生效， AI 的回答会很笼统：

“我会使用现代的配色方案”
“使用清晰的 sans-serif 字体”
没有提到 OKLCH 或具体的反面规则

如果没生效怎么办？

Claude Code：检查 CLAUDE.md 是否在项目根目录，文件名是否拼写正确

OpenCode：检查 AGENTS.md 是否在项目根目录

通用：尝试在对话中直接引用文件（方式 B）

Skill 加持 — 打磨高级感

🎯 目的： 用同样的需求，让 Skill 引导 AI 做出完全不同的网页。

启动新的对话

重要：必须新开一个对话！

Claude Code：

1
2
3

# 退出之前的对话（如果还在里面的话）
# 然后重新启动
claude

OpenCode：

`1`	`opencode`

为什么要新开对话？ 上一个对话里 AI 已经"看过"裸跑版本的代码了，如果在同一个对话里重做，AI 可能会受到之前代码的影响。新开对话确保 AI 从零开始，唯一的变化就是多了 Skill 的规则。

输入设计需求

这次我们故意只给极简需求，测试 Skill 引导下的 AI 自主决策能力：

`1`	`帮我做一个太空探索博物馆的线上展览网页，所有代码写在一个 index.html 文件里。`

为什么这次需求这么简短？

阶段 A：AI 提问（如果信息不足）

你应该会看到： AI 先问你几个关键问题，比如：

在开始之前，我想确认几个关键点：
1. 目标受众是谁？（太空爱好者 / 学生 / 大众？）
2. 希望什么风格？（杂志感 / 科幻感 / 极简？）
3. 有没有参考网站？

你的操作： 根据你的想法回答。例如：

1
2
3

1. 大众，对太空感兴趣但不一定专业
2. 科幻感，但要高级，不要廉价的霓虹感
3. 没有参考，你来决定

如果你的初始需求已经足够详细（比如第四步那种），AI 可能跳过提问直接进入下一步。这是正常的——Skill 的规则是"信息够就直接干"。

阶段 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 网格

布局策略：杂志式大图排版，非传统的卡片网格

你的操作： 仔细审核，提出修改意见。例如：

1
2
3

配色可以，这个深空蓝很对味。
字体也 OK。
继续吧。

或者如果不对味：

`1`	`配色太冷了，我希望有一点暖色点缀（比如星云的橙红色），让画面更丰富。`

为什么要先确认设计系统？ 这是 Skill 的核心优化之一。如果 AI 直接写代码，等你看到成品时发现配色不对，就要推翻重来。在写代码之前确认设计系统，成本为零，方向错了随时改。

阶段 C：AI 输出 V0（粗糙初版）

你应该会看到： AI 快速生成一个带占位符的初版。可能：

部分文字是 [待补充]
图片区域是纯色块
动画可能还没做

你的操作： 刷新浏览器查看效果，判断方向是否正确：

✅ 方向正确：
"整体方向很好，配色和氛围都对了。继续完善细节吧。"

❌ 方向不对：
"整体太暗了，看不清内容。我希望暗但不是全黑，要有层次感。"

❌ 布局不对：
"卡片式布局太普通了，我想要更像杂志那种大图排版，有冲击力。"

为什么要先出 V0 而不是一步到位？ 想象你请人装修房子：

方式 A：先给你看一张效果图 → 你确认后再施工 ✅

方式 B：直接施工三个月 → 完工后你发现风格不对 → 全部拆掉重来 ❌

V0 就是那张"效果图"。粗糙但方向对了，后面就只是精雕细琢的事。

阶段 D：迭代打磨

你应该会看到： AI 根据你的反馈逐步完善代码。

你可以给的反馈方向：

第 1 轮："Hero 区域加一个 Canvas 绘制的星空动画，要有缓慢移动的星星"
第 2 轮："展品卡片的排版太规整了，试试不对称的杂志式排版"
第 3 轮："时间线部分加滚动动画，年份数字要大，有视觉冲击力"
第 4 轮："整体字体太大了，调小一点，留白再多一些"

每轮只提 1-2 个修改点，不要一次性说太多。 原因：

AI 一次改太多容易顾此失彼

每轮改完你都要看一眼效果，确认改对了再继续

这样你能清楚知道每一步发生了什么（对录视频也有好处）

阶段 E：最终验证

当你觉得差不多了，触发验证：

请你现在以一个全新设计评审专家的视角，全面检查这个网页：
1. 是否有任何"一看就是 AI 做的"的特征？逐一列出。
2. 配色是否和谐？有没有用 OKLCH？
3. 字体使用是否恰当？有没有用到烂大街的字体？
4. 布局是否有创意？还是标准的 Hero + 卡片网格？
5. 动画是否自然？有没有过度使用发光效果？
6. 移动端适配是否正常？
列出所有需要改进的地方，然后逐一修复。

为什么要"全新视角"？ 这是 Skill 里的子 Agent 验证理念：如果让同一个上下文的 AI 检查自己的作品，它天然倾向于"觉得自己没问题"。但当你要求它以"全新视角"重新审视时，它更容易发现问题。

保存 Skill 版本

AI 完成后，保存最终版：

# 如果你还在 Agent 对话中，让 AI 帮你复制：
# "请把当前的 index.html 复制一份，命名为 index-with-skill.html"

# 或者退出 Agent 后手动复制：
cp index.html index-with-skill.html

对比两个版本

文件结构

你的项目目录现在应该有这些文件：

space-museum-demo/
├── index.html                  ← Skill 版本（最终版）
├── index-no-skill.html         ← 裸跑版本
├── index-with-skill.html       ← Skill 版本的备份
├── CLAUDE.md 或 AGENTS.md      ← Skill 规则文件
└── web-design-skill/           ← Skill 源文件

代码差异对比

1
2

# 用 diff 查看两个版本的代码差异
diff index-no-skill.html index-with-skill.html

或者如果你用了 Git：

1
2

# 查看整个过程中所有文件的变化
git diff

视觉对比

同时在浏览器中打开两个文件：

1
2

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

在两个浏览器标签页之间切换，对比：

维度	裸跑版本	Skill 版本	差距
配色	？	？	？
字体	？	？	？
布局	？	？	？
AI 味	？	？	？
动画	？	？	？
总评	/100	/100	？

录制成视频（可选）

录制工具

平台	工具	操作
Windows	Xbox Game Bar	按 `Win + G` 打开，点击录制按钮
Windows	OBS Studio	免费下载，功能最全
macOS	QuickTime	`Cmd + Shift + 5` 打开截屏工具栏
macOS	OBS Studio	免费下载

建议录制的镜头

镜头 1：【成品展示】（30 秒）
  → 打开最终网页，缓慢滚动展示全貌
  → 让观众先看到"结果"

镜头 2：【对比展示】（1 分钟）
  → 分屏或标签页切换，展示裸跑 vs Skill 版本
  → 逐个对比配色、字体、布局、动画

镜头 3：【过程回放】（2-3 分钟）
  → 回放你在终端中和 AI 对话的过程
  → 重点展示：AI 提问 → 确认设计系统 → 生成 V0 → 迭代

镜头 4：【设计细节讲解】（1 分钟）
  → 放大展示几个关键设计细节
  → 比如 OKLCH 配色的和谐感、字体的选择、留白的运用

镜头 5：【总结】（30 秒）
  → 总结 Skill 带来的提升
  → 展示开源仓库地址

录制设置

分辨率：1920×1080
帧率：30fps
录浏览器时，把地址栏也录进去（增加真实感）
录终端时，把整个终端窗口都录进去

进阶练习

完成上面的流程后，你已经掌握了基本操作。以下是三个进阶练习：

练习 1：换一个主题

在同一个项目目录下，新建一个文件，用 Skill 做一个完全不同风格的网页：

1
2

# 新建一个练习用的 HTML 文件
# 在 Agent 中输入：

`1`	`请帮我做一个独立咖啡店的官网，所有代码写在一个 coffee.html 文件里。`

`1`	`请帮我做一个日本旅行攻略的展示页，所有代码写在一个 japan.html 文件里。`

练习 2：极简提示词挑战

只给 AI 一个词，看它如何在 Skill 引导下自主决策：

钢琴

观察： AI 是先问你几个问题？还是直接开始创作？它做了什么假设？

练习 3：修改 Skill 文件

# 用编辑器打开 Skill 文件
# Claude Code 中：
claude
# 输入："请打开 web-design-skill/skill.md，我要修改它"

# OpenCode 中：
opencode
# 输入同样的内容

尝试修改以下内容，然后重新测试效果：

在字体推荐中增加一个你喜欢的字体
增加一条"去除 AI 味"的新规则（比如"不要使用全屏背景视频"）
修改配色策略的优先级

附录 A：常用提示词速查

让 AI 先说设计系统

在写任何代码之前，请先用自然语言描述你的设计系统，包括：
1. 配色方案（使用 OKLCH）
2. 字体选择（标题和正文分别用什么）
3. 间距系统
4. 布局策略
5. 绝对不能做的事情
我确认后再开始写代码。

要求快速 V0

先给我一个最小可用版本（V0）。
可以有占位符和未完成的部分。
我确认方向后再完善细节。
不要花太多时间在细节上。

触发全面验证

请以一个全新的设计评审专家视角，全面检查当前网页。
列出所有"一看就是 AI 做的"的特征，
以及配色、字体、布局上的所有问题。
然后逐一修复。

去除特定 AI 味

请检查并修改以下 AI 味特征：
1. 删除所有紫粉蓝渐变背景
2. 将 Emoji 图标替换为 SVG 或纯文字
3. 将大圆角卡片改为更有设计感的布局
4. 删除所有无意义的装饰性发光效果
5. 减少假数据，使用更有真实感的内容

附录 B：常见问题排查

Q：AI 生成的代码写入了错误的文件？

告诉 AI：

1
2

请把所有代码写入 ~/Desktop/space-museum-demo/index.html
用绝对路径，不要写到其他地方。

Q：浏览器刷新后没变化？

确认文件确实被修改了：cat index.html | head -5（查看文件头几行）
强制刷新：Ctrl + Shift + R（Windows）/ Cmd + Shift + R（macOS）
确认预览服务器还开着

Q：Skill 安装后 AI 还是生成紫粉蓝渐变？

在对话中强调：

1
2
3

严格遵守 CLAUDE.md（或 AGENTS.md）中的"去除 AI 味"规则。
特别注意：不要使用渐变背景、Emoji 图标、大圆角卡片。
使用 OKLCH 色彩空间定义所有颜色。

Q：AI 生成的网页没有动画效果？

明确要求：

请添加原生 JavaScript 实现的滚动动画：
使用 IntersectionObserver API，
元素进入视口时添加渐入效果。
不要用任何第三方库。

Q：想在网页中使用中文但 AI 默认用了英文？

在需求中明确：

1
2
3

所有文案内容使用中文。
HTML lang 属性设为 zh-CN。
字体要支持中文显示（在字体栈中加入中文字体作为 fallback）。

Q：Claude Code 和 OpenCode 的行为有差异？

两个工具的核心区别：

	Claude Code	OpenCode
配置文件	`CLAUDE.md`	`AGENTS.md`（或兼容 CLAUDE.md）
模型	只用 Claude	支持多模型（确保选 Claude）
界面	纯文本终端	TUI 图形终端
文件引用	`@文件名`	具体语法看版本文档

如果 OpenCode 生成效果和 Claude Code 差异很大，检查是否用的是同一个模型。

附录 C：完整项目结构参考

完成所有步骤后，你的项目目录应该长这样：

space-museum-demo/
│
├── CLAUDE.md                       ← Skill 规则（Claude Code 用）
├── AGENTS.md                       ← Skill 规则（OpenCode 用）
├── index.html                      ← 最终成品（Skill 版本）
├── index-no-skill.html             ← 裸跑版本（用于对比）
├── index-with-skill.html           ← Skill 版本备份
│
├── coffee.html                     ← 进阶练习：咖啡店网页（可选）
├── japan.html                      ← 进阶练习：日本旅行网页（可选）
│
└── web-design-skill/               ← Skill 源文件
    ├── skill.md                    ← 核心提示词
    ├── reference.md                ← 参考代码模板
    ├── README.md                   ← 仓库说明
    └── demo/                       ← 示例网页

最后总结

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	粗糙但快速的原型 > 精致但方向错误的成品