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

OpenCode 全深度指南：开源版 Claude Code 的安装、配置与高级玩法

Thu, 30 Apr 2026 02:00:15 +0800

📋 目录

一、什么是 OpenCode？

OpenCode 是近期热度最高的 AI 编程工具，本质上是一个开源版的 Claude Code。它几乎复刻了 Claude Code 的所有核心功能，同时解决了 Claude Code 在中国用户中常见的限速、封号等痛点。

与 Claude Code 对比

对比维度	Claude Code	OpenCode
开源	❌ 闭源	✅ 开源
免费模型	❌ 需付费 API	✅ 内置免费模型
中国用户友好	⚠️ 限速/封号风险	✅ 无限制
Skills/MCP	✅ 支持	✅ 完全兼容
Session 并行	❌	✅ 核心亮点

核心定位

开源版 Claude Code：具备几乎全部功能，中国用户友好，不限速不封号
免费模型：开箱即用 GLM-4.7、MiniMax-2.1 等免费模型，零配置即可上手
顶级模型接入：通过 Antigravity 插件免费接入 Gemini 3 Pro、Claude 4.5 Opus；通过 /connect 接入 GPT Codex
杀手级功能：Session 并行、Timeline 回退、Share 分享、Ultra Work 多智能体协作
插件生态：Oh My Open Code (OMO) 集成七大编程智能体 + 三大 MCP Server + 多种工具

二、四种安装形态

⭐ 1. 命令行版（主力推荐）

最稳定、功能最全的使用方式。

# 安装（需先安装 Node.js）
npm i -g opencode-ai

# 启动
opencode

前置条件：需要安装 Node.js（前往 nodejs.org 下载对应系统版本）

2. 桌面客户端（Beta）

从官网下载客户端，一路下一步安装，选择项目文件夹即可使用。

⚠️ 目前处于 Beta 测试阶段，bug 较多，暂不推荐作为主力工具。

3. VS Code 插件版

前提：已安装命令行版 OpenCode。插件版的核心价值在于与 IDE 的无缝集成，让 AI 直接感知你的代码上下文。

在 VS Code 扩展商店搜索 OpenCode 并安装
快捷键 Ctrl + Shift + P → 输入 open opencode 回车
插件会自动关联左侧窗口打开的代码文件
选中代码后按 Ctrl + Alt + K 可快速粘贴到 OpenCode 聊天窗口

4. 云端运行环境（GitHub Actions）

非常适合开源项目的自动化 Issue 修复：

将项目上传到 GitHub 公开仓库
在仓库中配置 API Key（Settings → Secrets and Variables → Actions）
在 Issue 评论中输入 /opencode + 需求描述
GitHub Actions 自动运行 OpenCode 工作流
完成后自动创建 Pull Request

三、免费模型配置

查看可用模型

`1`	`/models # 查看所有可用模型（带 free 标记的即可免费使用）`

接入顶级模型

方式一：Antigravity 插件（免费接入 Gemini + Claude）

Antigravity 是 Google 推出的 AI 编程 IDE，它慷慨地免费提供了 Gemini 3 Pro 和 Claude 4.5 Opus。

在 OpenCode 中粘贴安装提示词（从 Antigravity GitHub 首页复制）
等待 AI 自动完成安装
打开新终端执行登录命令，选择 Google → Antigravity 登录
登录 Google 账户，粘贴生成的 URL
重启 OpenCode，/models 即可看到 Gemini 3 Pro 和 Claude 4.5 Opus

方式二：GPT Codex（OpenAI 官方合作）

OpenAI 与 OpenCode 官宣合作，可直接接入 ChatGPT Codex。

`1`	`/connect # 选择 OpenAI → GPT Pro → 浏览器登录`

前提：需要有 ChatGPT Plus 或以上订阅。

方式三：OpenRouter（万能接入）

通过 OpenRouter 可以接入市面上几乎所有大模型，国内用户也能方便获取额度。

`1`	`/connect # 选择 OpenRouter → 填写 API Key`

OpenCode 支持 75 种 AI 接入方式，几乎囊括所有模型供应商。

四、核心功能亮点

1. 反问式需求澄清

在动手编码之前，OpenCode 会反向询问你一系列问题：

只需要代码样例，还是完整可运行的程序？
哪些功能是必须实现的？
调用哪个模型？
环境变量如何保存？

这种"先问清楚再动手"的机制，大幅减少了返工。

2. 命令行代码比对界面

OpenCode 的命令行 diff 展示被认为是所有命令行编程工具中做得最好的，代码变更一目了然。

⭐ 3. Session 并行处理

这是 OpenCode 最具特色的功能——多 Session 并行运行：

# 发起第一个任务（如：增加计时器）
# 任务执行中，创建新 session
/new

# 发起第二个任务（如：画笔调色）
# 查看所有 session 状态
/sessions

# 在 session 间切换
/session <id>

打转符号表示 Session 正在后台运行。两个需求可以完全并行开发，互不干扰。

4. Timeline 检查点回退

`1`	`/timeline # 查看当前 Session 的完整对话记录`

选择任意历史节点：

Revert：将代码和聊天内容同时回退到该时间点
View：查看当时 AI 做了什么修改

相当于编程过程中的"时光机"，可以大胆尝试不同方案。

1
2
3

/share      # 将对话记录分享为网页
/unshare    # 取消分享
/export     # 导出对话记录为文件

分享后生成一个网页链接，展示完整的对话记录和代码修改过程，方便与他人协作或展示。

五、Skills 技能迁移

OpenCode 完全兼容 Claude Code 的 Skills 目录结构，迁移成本极低：

1
2

# 目录结构对应关系
.claude/skills/<skill-name>/    →    .opencode/skills/<skill-name>/

操作步骤

在项目根目录新建 .opencode 文件夹
在 .opencode 下新建 skills 文件夹
将原 .claude/skills/ 下的技能文件夹直接复制过来
重启 OpenCode，AI 即可识别并调用这些 Skills

每个 Skill 就是一个带目录的说明书，告诉 AI 如何完成特定领域的任务。

六、MCP 配置

OpenCode 支持两种 MCP（Model Context Protocol）模式：

本地 MCP（Local）

通过本地命令执行。在 ~/.config/opencode/opencode.json 中配置：

{
  "mcpServers": {
    "shed-cn": {
      "type": "local",
      "command": "npx",
      "args": ["shed-cn"],
      "enabled": true
    }
  }
}

远程 MCP（Remote）

通过 URL 远程调用。以 Context7 为例：

{
  "mcpServers": {
    "context7": {
      "type": "remote",
      "url": "https://context7-mcp-server-url",
      "headers": {
        "Authorization": "Bearer <your-api-key>"
      },
      "enabled": true
    }
  }
}

配置完成后重启 OpenCode，输入 /mcp 即可查看已配置的 MCP Server。

七、Oh My Open Code (OMO) 超强插件 ⭐

OMO 是 OpenCode 上最火的编程插件，本质上是 工具 + MCP + 编程 Agent 的组合捆绑包。

七大编程智能体

智能体	角色	推荐模型
🧠 西西弗斯 (Sisyphus)	主智能体，规划与调度	Claude 4.5 Opus / GPT 5.2
🔮 先知 (Prophet)	架构设计、代码评审	—
📚 图书管理员 (Librarian)	查阅文献、文档检索	—
🔍 探索者 (Explorer)	网络搜索	—
🎨 前端工程师	前端开发	Gemini 3 Pro
📝 文档编写者	文档生成	—
🖼️ 多模态	图片/PDF 理解	—

每个智能体都分配了最适合其工作的大模型，据作者称耗费了 24,000 美元的 Token 才找到最佳组合。

三大 MCP Server

Web Search：网络搜索
Context7：获取最新技术文档
Grep App：GitHub 仓库快速代码搜索

集成工具

LSP 高级版：通过编程语言的语法和语义帮助 AI 快速定位代码
AST 工具：通过代码语法树进行关联搜索
LOC 工具：借助多模态视觉能力理解图片、PDF
Delegate Task / Background Task：Agent 任务分配和后台调度

安装与使用

配置文件位置：C:\Users\<用户名>\.config\opencode\oh-my-opencode.json

从 OMO GitHub 首页复制 install 开头的提示词
粘贴到 OpenCode 中，回答配置问题（订阅情况等）
自动完成安装

两种核心用法

① @ 指定智能体

`1`	`@前端工程师帮我优化这个页面的响应式布局`

② Ultra Work 模式（魔法词 ULW）

`1`	`ULW 帮我创建一个宠物商店应用`

Ultra Work 模式下，西西弗斯作为主智能体会：

将任务拆解成 Todo List
同时开启多个后台任务并行执行
居中调度各个智能体协同工作
最终交付完整项目

Ralph Loop 循环模式

强制 AI 长时间循环工作，适合极难任务：

`1`	`/ralph-loop`

示例：“使用 Spring Boot 4 最新标准重构整个项目，直到所有测试用例通过”——可以连续运行数小时直到任务完成。

八、其他实用功能

`/init` — 项目知识初始化

让 AI 通读整个项目文件夹，生成 agents.md 文件作为系统提示词，帮助 AI 快速了解项目。

`/compact` — 上下文压缩

将之前的对话提炼为简洁摘要，释放模型上下文窗口，避免 Token 超限。

自定义命令

在 ~/.config/opencode/commands/ 下创建 .md 文件定义自定义命令：

# 运行测试
模式：build
命令：npm test
描述：运行项目的全部测试用例

使用：/运行测试 即可触发。

自定义智能体

在 ~/.config/opencode/agents/ 下创建 .md 文件：

# Code Review Agent
类型：subagent
模型：claude-4.5-opus
描述：专门负责代码审查，检查代码质量、安全漏洞和最佳实践。

Primary Agent：按 Tab 键切换，在对话中直接使用
Sub Agent：由主智能体在后台自动调度

九、总结与推荐

适用场景

场景	推荐度	说明
新手入门 AI 编程	⭐⭐⭐⭐⭐	免费模型零成本上手
日常开发辅助	⭐⭐⭐⭐⭐	Session 并行 + Timeline 回退
复杂项目开发	⭐⭐⭐⭐⭐	OMO 插件多智能体协作
开源项目维护	⭐⭐⭐⭐	GitHub Actions 云端自动化
练习 Skills/MCP	⭐⭐⭐⭐⭐	完全兼容 Claude Code 生态

十、实战记录：安装 Oh My OpenAgent

以下是笔者亲测安装 Oh My OpenAgent（原 Oh My Open Code）的完整对话记录，环境为 Windows + PowerShell。

环境检查

1
2

opencode --version
# 输出: 1.14.39

安装过程

在 OpenCode 对话中直接告诉 AI：

“Install and configure oh-my-openagent by following the instructions here: https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/refs/heads/dev/docs/guide/installation.md"

AI 会先询问你拥有的模型订阅情况：

订阅	我的情况
Claude Pro/Max	❌ 无
OpenAI / ChatGPT Plus	❌ 无
Gemini	❌ 无
GitHub Copilot	✅ 学生认证版
OpenCode Zen	✅ 免费可用
Z.ai Coding Plan	❌ 无
OpenCode Go	❌ 无
Kimi for Coding	❌ 无
Vercel AI Gateway	❌ 无

⚠️ AI 会提示 “Without a Claude subscription, the Sisyphus agent might not work ideally”，但 GitHub Copilot 会作为后备模型自动接管。

确认订阅后，AI 自动执行安装命令：

bunx oh-my-openagent install --no-tui \
  --claude=no --openai=no --gemini=no \
  --copilot=yes --opencode-zen=yes \
  --zai-coding-plan=no --opencode-go=no \
  --kimi-for-coding=no --vercel-ai-gateway=no

安装成功的输出：

[1/4] Checking OpenCode installation...
[OK] OpenCode 1.14.39 detected
[2/4] Adding oh-my-openagent plugin...
[OK] Plugin added -> C:\Users\<用户名>\.config\opencode\opencode.json

安装后的配置文件

主配置文件 ~/.config/opencode/opencode.json：

{
  "plugin": [
    "oh-my-openagent@latest"
  ]
}

Agent 模型配置 ~/.config/opencode/oh-my-openagent.json：

AI 自动根据 GitHub Copilot 订阅分配了模型：

Agent	分配的模型
Sisyphus（主智能体）	`github-copilot/claude-opus-4.7`
Oracle（先知）	`github-copilot/gpt-5.5` (medium)
其余 Agent	自动选择 Copilot 可用模型

认证配置

安装完成后需要手动认证 GitHub Copilot：

`1`	`opencode auth login`

交互步骤：

上下键选择 GitHub Copilot
按回车确认
浏览器自动打开，登录 GitHub 学生账号
授权完成，终端显示认证成功

如何重新配置 Agent 模型？

方式一：直接告诉 AI

“把 Sisyphus 的模型改成 claude-sonnet-4.6” “Oracle 用 gpt-5.5”

方式二：手动编辑配置文件

直接修改 ~/.config/opencode/oh-my-openagent.json 中对应 agent 的 model 字段。

追加配置：补上 OpenCode Zen 作为备选

安装时遗漏了免费的 OpenCode Zen（--opencode-zen=no），后续在 OpenCode 新对话中直接让 AI 帮忙修正：

“其实我还有你免费的 OpenCode Zen，但是我已经登录 GitHub Copilot 了，你帮我修改一下”

AI 的第一次尝试把 OpenCode Zen 设成了主力（opencode/claude-opus-4-7），GitHub Copilot 变成了备选。实际需求是反过来的：

“不是，是 GitHub Copilot 作为主力，OpenCode Zen 自带的免费模型作为备选”

AI 修正后，最终配置策略：

1
2

主力模型: github-copilot/*     （已付费，优先使用）
备选模型: opencode/*           （免费额度，Copilot 不可用时自动切换）

关键配置片段（以 Sisyphus 为例）：

{
  "sisyphus": {
    "model": "github-copilot/claude-opus-4-7",
    "fallback_models": [
      { "model": "opencode/claude-opus-4-7" },
      { "model": "opencode/gpt-5.5" }
    ]
  }
}

💡 经验：描述配置需求时，主次关系要说清楚——“XX 作为主力，YY 作为备选”，避免 AI 搞反。

使用提示

安装完成后，在终端输入 opencode 即可开始：

在 prompt 中包含 ultrawork 或 ulw 触发自动并行处理
按 Tab 进入 Prometheus（规划器）模式
运行 /start-work 执行完整编排

附录：踩坑记录

问题	解决
`doctor` 命令超时（30s）	部分检查可能挂起，加 `--verbose` 排查，或跳过不影响使用
PowerShell 下 `if` 语法报错	OpenCode 的 bash 命令在 PowerShell 下需转换语法
Sisyphus 非 Claude 模型性能下降	这是已知限制，有 Claude 订阅体验最佳
AI 把主力/备选模型搞反	描述需求时说清主次：“XX 作为主力，YY 作为备选”，不要只说"帮我加上 YY”

📚 参考来源：技术爬爬虾 - OpenCode 详细攻略、Oh My OpenAgent 安装指南

模型	特点
GLM-4.7	编程能力强，零配置
MiniMax-2.1	编程能力出色，响应快