Claude Code 现在连设计系统都能装技能了

5 阅读4分钟

Claude Code 现在连设计系统都能“装技能”了

我以前一直觉得,Claude Code skill 最适合干工程活。

比如代码审查、测试生成、重构建议、README 优化。这些很自然,因为它们本来就在开发者工作流里。

但今天拉了一下 claude-code-skills-zh,看到最新提交里新增了 open-design,我突然觉得这个边界又往前挪了一步:Claude Code 不只是在帮你写代码,它开始把设计规范也变成可复用能力了。

项目地址放这里,全文只留这一个入口:

github.com/laolaoshire…

这次新增的点挺有意思

最近 5 条提交里,有一条是:

  • 新增 open-design 并同步生态数据

README 里对它的描述也很直接:31 个设计 Skills,72 套品牌级设计系统,支持 Claude Code、Codex、Cursor、Gemini、Hermes 等 13 种 coding-agent CLI,本地优先,BYOK。

我看到这几个数字时,第一反应不是“又多了一个资源链接”。

更像是:前端项目里那些经常说不清的设计偏好,终于有机会被沉淀成 skill 了。

为什么设计 skill 对开发者有用?

很多独立开发者做页面,最痛的不是不会写 CSS。

真正痛的是:

  • 按钮应该圆一点还是硬一点?
  • 间距到底用 12、16 还是 24?
  • 一个 SaaS 首页应该像 Linear,还是像 Stripe?
  • 深色主题怎么做才不像随便反色?
  • 让 AI 改 UI 时,怎么别每次都生成一股模板味?

这些问题如果只靠一句“帮我做得高级一点”,AI 很容易开始自由发挥。

今天像这样把设计系统、品牌风格、组件偏好做成 skills,价值就在于:它把模糊审美变成了可复用上下文。

你不是每次都从零解释“我想要什么感觉”,而是让 agent 直接加载一套明确的设计约束。

我更关心的是协作成本

以前我让 AI 帮我做页面,经常会遇到一个小尴尬:

第一次生成还行,第二次改另一个页面,风格就跑了。

首页像一个产品,设置页像另一个产品,弹窗又像第三个产品。每次都要靠人工把它拉回来。

设计 skill 解决的不是“AI 会不会画页面”,而是“它能不能持续按同一套规则做页面”。

这对小团队挺关键。

因为很多项目并没有完整设计师配置,但又不想让后台、官网、落地页、控制台看起来像 4 个外包拼出来的东西。

如果把设计系统做成 skill,至少可以让 AI 在写代码前先知道:

  • 用什么色板
  • 用什么字体层级
  • 卡片、按钮、表格是什么气质
  • 动效要克制还是夸张
  • 页面信息密度该高还是低

这比事后一句“再美化一下”靠谱多了。

claude-code-skills-zh 现在越来越像工具箱

这个仓库现在已经整理了 200+ Claude Code Skills / Agents / Plugins,还有 18 个原创可安装技能。

我之前更常推荐里面的工程类原创技能,比如:

  • zh-code-reviewer:中文代码审查
  • zh-readme:中文 README 生成
  • api-tester:接口测试思路
  • refactor-advisor:重构建议
  • perf-profiler:性能瓶颈分析

但最近几次更新看下来,它明显不只是在补“写代码”的能力了。

从 IM 接入、内容运营、办公自动化,再到这次的设计系统,Claude Code skill 的形态越来越像一套个人/团队工作流插件。

你需要什么场景,就把对应 skill 装进去。

不需要把所有知识都塞进一个超长提示词里,也不用每次打开新项目都重新解释一遍工作习惯。

我觉得这类更新会越来越多

Claude Code 本身是入口,skill 才是把入口变成工作流的那层东西。

工程、设计、内容、运营、知识库、IM 调度,这些看起来不是一个赛道,但它们共同的问题都是:人类有一套经验,AI 每次都要重新学。

skill 的意义,就是把这些经验打包下来。

今天新增 open-design 这类项目,对我来说不是一个单点更新,而是一个信号:以后我们给 AI 配能力,可能会越来越像给 IDE 装插件。

你会给 Claude Code 装设计类 skill 吗?还是更希望它先把代码审查、测试、安全这些工程活做到极致?