上周 GitHub Trending 出现了一个有意思的现象：好几个 Claude Code 的设计类 Skill 同时冲榜，其中 huashu-design 6 天拿了 6000 多星，guizang-ppt-skill 两天破 2000 星。

这几个项目做的事情很简单——给 Claude Code 装一个 SKILL.md 文件，让它在生成网页、做 PPT、画原型图的时候，产出质量直接从"能用但丑"跳到"能拿去汇报"。

这篇文章拆解一下这些 Skill 是什么、怎么装、效果怎么样，最后教你怎么写自己的 Skill。

先说清楚：Claude Code 的 Skill 是啥

很多人分不清 Skill 和 MCP。一句话说清楚：MCP 是给 AI 接外部工具（数据库、API、文件系统），Skill 是给 AI 加指令（告诉它做某类事情该怎么做）。

Skill 的技术实现极其简单。它就是一个 Markdown 文件，叫 SKILL.md，放在项目目录下。Claude Code 启动时会自动读取这个文件，把里面的指令当作系统提示词的一部分。

比如你在项目根目录放一个 SKILL.md，内容写着"所有 HTML 页面用 Tailwind CSS，配色用深色主题，字体用 Inter"，Claude Code 后续生成的代码就会自动遵守这些规则。

不用装插件，也不用改配置。放个文件就行。

这周在火的三个设计 Skill

huashu-design：6000 星的"设计总监"

仓库地址：github.com/alchaincyf/huashu-design

这个 Skill 让 Claude Code 生成的 HTML 页面直接到"可交付"水平。它内置了 20 条设计哲学（留白、对齐、层次感这些），还有一套 5 维评审机制——生成完页面后 Claude Code 会自己打分，不及格就重做。

它能做的事情包括： - 高保真网页原型 - 幻灯片（HTML 格式，浏览器打开就能演示） - 带动画的落地页 - 导出 MP4 视频

安装方法：

# 进入你的项目目录
cd ~/my-project

# 下载 skill 文件
curl -O https://raw.githubusercontent.com/alchaincyf/huashu-design/main/SKILL.md

# 启动 Claude Code，它会自动加载
claude

试一下效果。在 Claude Code 里输入：

帮我做一个 AI 产品的落地页，深色主题，要有 hero section、功能介绍、价格表

你会发现生成的页面有渐变背景、卡片阴影、合理的间距，不再是那种"Bootstrap 默认主题"的观感。

guizang-ppt-skill：两天 2000 星的 PPT 生成器

仓库地址：github.com/op7418/guizang-ppt-skill

这个 Skill 专门做横向滑动式的演示文稿。输出是单个 HTML 文件，用浏览器打开就是一套 PPT。

它提供了 10 种页面布局（封面页、对比页、时间轴、数据图表等）和 5 套配色主题，支持 WebGL 作为封面背景动画。

安装方法和上面一样，把它的 SKILL.md 下载到项目目录即可。

用法示例：

做一份关于"2026年AI编程工具趋势"的演示文稿，8页左右

Claude Code 会生成一个 presentation.html。在浏览器打开，左右箭头键翻页。页面排版确实比 Markdown 转 PPT 的方案好看不少。

web-design-skill：给"能用"的页面加美感

仓库地址：github.com/ConardLi/web-design-skill

这个 Skill 的定位是"二次加工"。你先让 Claude Code 生成一个功能完整但样式普通的页面，然后用这个 Skill 把它变好看。

它的 SKILL.md 里定义了一套转换规则：响应式布局、微交互动画、配色对比度、字体层级。

实测对比：有 Skill 和没 Skill 的差距

我做了一个简单测试。用同一句提示词"做一个待办事项应用的界面"，分别在有和没有 huashu-design Skill 的情况下生成。

没有 Skill 的版本：白底黑字，按钮是浏览器默认样式，列表没有间距，整体像是一个 HTML 教程的示例代码。能用，但你不会想展示给别人看。

有 Skill 的版本：毛玻璃效果的卡片，渐变按钮，输入框有 focus 动画，完成的事项有删除线和透明度变化。打开以后第一反应是"这是一个正经产品"。

代码量差距不大，多了大概 40 行 CSS。差别在于那些你自己写会花 2 小时调的细节——间距、圆角、阴影、过渡动画——Skill 里已经写好了规则，Claude Code 直接照着做。

自己写一个 Skill：没你想的那么难

看完上面的例子，你可能也想给自己的场景定制一个 Skill。流程很直接。

第一步：新建 SKILL.md

在项目根目录创建文件：

touch SKILL.md

第二步：写规则

SKILL.md 就是 Markdown 格式的指令文件。一个最小可用的示例：

# 我的前端规范

## 技术栈
- 使用 Tailwind CSS 做样式
- 图标用 Lucide Icons
- 动画用 CSS transition，不引入额外库

## 设计规则
- 所有圆角用 rounded-xl（12px）
- 卡片之间间距 24px
- 主色调 #6366f1（靛蓝），辅助色 #f59e0b（琥珀）
- 深色模式优先

## 代码规范
- 组件文件名用 PascalCase
- CSS class 按 layout → typography → decoration 排序
- 每个页面必须有 meta viewport 标签

第三步：测试效果

启动 Claude Code，随便让它生成一个页面，检查是否遵守了你写的规则。如果某条规则没生效，通常是因为描述太模糊——把"好看的样式"改成"圆角 12px、阴影 0 4px 6px rgba(0,0,0,0.1)"这种具体数值。

进阶：多文件 Skill 结构

复杂的 Skill 可以拆成目录结构：

my-skill/
├── SKILL.md          # 主文件，Claude Code 读这个
├── references/       # 参考资料
│   ├── color-system.md
│   └── layout-rules.md
└── examples/         # 示例代码
    ├── card.html
    └── form.html

在 SKILL.md 里用相对路径引用其他文件：

配色规则详见 references/color-system.md
卡片组件参考 examples/card.html

Claude Code 会按需读取这些文件。

踩坑记录

坑 1：SKILL.md 太长导致效果变差

Claude Code 的上下文窗口有限。SKILL.md 超过 2000 字以后，后面的规则容易被忽略。控制在 1500 字以内，把细节拆到 references 目录。

坑 2：规则冲突

同一个目录放了两个 Skill 的 SKILL.md，规则互相打架。一个说"用 Tailwind"，另一个说"用纯 CSS"。Claude Code 会随机选一个遵守。解决方法是合并成一个文件，或者分目录。

坑 3：旧版本 Claude Code 不读子目录

2026 年 3 月之前的版本只读项目根目录的 SKILL.md。确保你的 Claude Code 版本 ≥ 1.0.20，执行 claude --version 检查。升级命令：

npm update -g @anthropic-ai/claude-code

坑 4：生成的 HTML 在不同浏览器表现不一致

设计类 Skill 大量使用 backdrop-filter（毛玻璃）、CSS Grid 等特性。Safari 和 Chrome 都没问题，但 Firefox 对 backdrop-filter 的支持有边界情况，需要加 -webkit 前缀。如果你的用户群有 Firefox，在 SKILL.md 里加一条"兼容 Firefox，backdrop-filter 加 -webkit 前缀"。

值得关注的其他 Skill

除了设计类，cc-design（628 星）也是做高保真原型的，规则体系和 huashu-design 不同，可以对比试试。另外有人做代码审查类的 Skill，写完代码自动检查安全隐患。还有文档生成类的，自动对齐 OpenAPI 规范。

Skill 生态还在早期，GitHub 上每天都有新项目。

小结

回到文章开头的问题：这些 Skill 为什么一周涨星近万？因为大家已经过了"AI 能生成网页好厉害"的阶段，现在的痛点是"生成的东西拿不出手"。一个 Markdown 文件就能把产出质量拉到可交付水平，投入产出比太高了。

如果你每天用 Claude Code 写前端，花 20 分钟整理一份自己的设计规范写进 SKILL.md，后面每次生成都能省下调样式的时间。值不值得试，你自己判断。