Featured image of post web-design-skill 实操手册（详细版）
AI工具

web-design-skill 实操手册（详细版）

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
2
3
4
5

# 方法 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 优化的。

创建项目目录

创建工作文件夹

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

1
2
3
4
5
6
7
8

# 切换到你想要存放项目的目录（比如桌面）
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 后输入：

1

请在当前目录创建一个 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）：

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

# 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

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

# 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

克隆仓库

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

1
2
3
4
5

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

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

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

1
2
3
4
5
6
7

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

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

  1. skill.md 是核心，但 reference.md 也很重要（里面是代码模板参考）
  2. 仓库里的 demo 文件可以作为学习参考
  3. 后续作者更新了你可以直接 git pull 获取最新版本

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

1
2

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

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

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

启动 Agent（不加载 Skill）

Claude Code：

1
2
3
4
5

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

# 启动 Claude Code
claude

OpenCode：

1
2

cd ~/Desktop/space-museum-demo
opencode

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

输入设计需求

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

 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 文件。

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

等待 AI 生成

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

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

整个过程大约需要 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）

操作步骤：

1
2
3
4
5

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

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

在 Claude Code 中操作：

1

claude

进入后输入：

1

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

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

验证：

1
2
3
4
5

# 查看 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 文件：

1

claude

然后输入：

1

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

方式 A vs 方式 B 的区别：

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

OpenCode — 安装方式

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

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

什么是 AGENTS.md？

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

操作步骤：

1
2
3
4

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
4

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

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

1
2
3

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

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

阶段 B：AI 说明设计系统

你应该会看到： AI 在写代码之前，先用自然语言描述它的设计系统：

 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

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

或者如果不对味：

1

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

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

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

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

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

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

1
2
3
4
5
6
7
8

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

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

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

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

  • 方式 A：先给你看一张效果图 → 你确认后再施工 ✅
  • 方式 B：直接施工三个月 → 完工后你发现风格不对 → 全部拆掉重来 ❌

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

阶段 D：迭代打磨

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

你可以给的反馈方向：

1
2
3
4

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

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

  1. AI 一次改太多容易顾此失彼
  2. 每轮改完你都要看一眼效果，确认改对了再继续
  3. 这样你能清楚知道每一步发生了什么（对录视频也有好处）

阶段 E：最终验证

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

1
2
3
4
5
6
7
8

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

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

保存 Skill 版本

AI 完成后，保存最终版：

1
2
3
4
5

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

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

对比两个版本

文件结构

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

1
2
3
4
5
6

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

镜头 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 引导下自主决策：

1

钢琴

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

练习 3：修改 Skill 文件 

1
2
3
4
5
6
7
8

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

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

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

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

附录 A：常用提示词速查

让 AI 先说设计系统 

1
2
3
4
5
6
7

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

要求快速 V0 

1
2
3
4

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

触发全面验证 

1
2
3
4

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

去除特定 AI 味 

1
2
3
4
5
6

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

附录 B：常见问题排查

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

告诉 AI：

1
2

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

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

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

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

在对话中强调：

1
2
3

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

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

明确要求：

1
2
3
4

请添加原生 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：完整项目结构参考

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

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

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 的精髓：

  1. 先说设计系统，再写代码 — 方向不对，代码白写
  2. 先出粗糙 V0，再精雕细琢 — 快速试错，成本最低
  3. 大胆留白，每个元素要证明自己 — 克制即高级
comments powered by Disqus
© 2020 - 2026 Yanmu
使用 Hugo 构建
主题 Stack 由 Jimmy 设计