保姆级教程！教你把公司里的设计规范变成Skill

全文速览图

群里有人问我怎么把公司的设计规范写成skills？这是一个很实际的好问题，今天就详细的聊一下我到底怎么弄的。

我之前就说过AI生成UI，现在到底行不行？。现在的AI工具有个问题，就是生成的UI图乍一看像那么回事，但真正落地还不大行，尤其是当我们的实际项目需求都特别具体，设计规范又非常明确的情况下，用AI去抽卡无异于大海捞针，能得出能用的组合的概率就跟摸彩票没太多差别。

但老板又天天要我们用AI来提效，总觉得AI是万能的，这个矛盾到底咋解决？

其实目前AI的发展已经有这个趋势了，就是结合具体的设计规范定向输出UI，这样慢慢往能用的方向上靠，现在Google Stitch之类的AI设计工具就是这么搞的。思路是对的，我们实际在做设计的时候，也会基于规范来做落地方案，只是对于需求的理解，我们会综合非常多的因素，AI暂时还没法帮我们判断一个东西到底行不行。

回到开头那个问题，具体怎么弄才能把公司的设计规范、UI KIT那些变成skill，真正意义上帮我们做效率提升呢？

我也不知道方法成不成熟，先把我目前的经验毫无保留地分享出来。

先聊一下这东西到底是什么？

不管是 Google Stitch 的 DESIGN.md，还是 Claude 里的 SKILL.md，本质上都在做一件差不多的事，就是把原本散落在规范、组件库和经验里的规则，整理成AI更容易读取和执行的文本约束。AI会在相关任务触发时加载这些内容，并尽量按你定义的规则来生成结果。你可以理解为，这就是给 AI看的设计规范说明书。

这样搞的话，你就不用每次开一个新对话都重新跟AI解释一遍我们公司的主色是什么、按钮圆角用多大、标题字号是多少。你写一次，以后每次生成都自动带上这些约束。

说到这里我想多说几句。如果你啥也不给，让AI自由发挥，出来的东西大概率是那种千篇一律的Inter字体加紫色渐变加白色背景的标准AI味设计。说白了，就是 AI会优先落到统计学上最常见、最安全的那类解法上，所以每次出来的东西看起来会有明显的同质化倾向。

但这不是AI不行，是你没给它足够的约束。就好比你跟一个新来的设计师说随便画个页面，他也画不出你想要的东西。但如果你把设计规范和品牌手册甩给他，情况就会好很多了。

AI也是一样的道理。

好了，回到正题。假设你有一套成熟的设计规范和组件库，怎么把它一步步变成你能用的skill？我就用网上公开的腾讯的TDesign figma组件库用作演示案例吧，利用claude来生成对应的skill。

https://www.figma.com/design/Rtw8x9oiAZN2dPtnHF9ufV/TDesign-for-mobile--Community-?node-id=0-1&p=f&t=4GnyfIxnVTYYZsWr-0

第一步，把现有的设计资产规范先整理好。

可能每个人的习惯不一样，有些人的规范在figma里，有些是图片格式，有些是组件库，有些是pdf品牌手册，把它们先都整理好。

像腾讯云这个规范跟组件库都在figma里，但如果你只把这个链接发给claude的话，它是没办法识别的。

所以，我的办法是把它们先都导出成pdf文件。

导出后，你会得到一堆设计规范pdf。

第二步，把这些东西丢给Claude，让它帮你生成初稿。

打开Claude，把收集到的设计规范文档，图片啥的往对话框里一丢，然后跟它说

帮我把这些设计规范整理成一个SKILL.md文件，用于约束AI生成符合我们品牌规范的UI。

我自己试的时候，Claude大概两分钟就给我吐出了一份初稿。说实话那个初稿还挺像那么回事的，该有的板块基本都有了，色彩、字体、组件、间距都覆盖到了。但细节上肯定需要手动调整，比如有些色值它猜错了，有些组件的状态描述不够精确。

很正常，初稿就是初稿，肯定还是要调优的，没有一遍就搞定的skill。

写完后，它会输出一个SKILL.md的文件，你可以下载到本地修改，也可以直接点保存，就直接给你装好到了claude里。（如果你想要本地的skill.md文件，如果你用不了claude，也可以参考它的格式自己直接写了，如果需要的话可以微信找我要）

第三步，人工校对和补充，这一步最关键。

Claude生成的初稿一定要你自己一条条过。在这里可以改

这里我分享一下最容易出问题的几个地方。

一个是氛围描述。很多人上来就甩色值甩字号，但AI不知道你这些数字组合起来应该是什么什么感觉。你得在文件最开头用几段话描述整体的视觉氛围。

比如TDesign的氛围可以这么写，大意是说

整体风格追求清晰高效的企业级质感，以中性色为主基调，界面干净、信息层级分明、没有多余的装饰。品牌色腾讯蓝作为唯一的强调色贯穿交互元素，整体给人的感觉是稳健、专业、不张扬。

这段话里没有一个具体数值，但AI读完就能建立一个判断的基调了。后面它在生成的时候遇到两个方案选哪个，就会往这个方向靠。你公司的设计语言给人什么整体感觉？把它用大白话写出来就行，不用写得很文艺但要具体。高端大气不具体，大面积留白加深色系、产品图片高清无背景，这才具体。

然后是颜色。颜色不能只给色值，得给每个颜色分配角色。

比如要写主色 #0052D9 用于核心交互元素和品牌强调，成功色 #2BA471 用于成功状态和正向反馈，错误色 #D54941 仅用于错误状态和危险操作。这个仅用于三个字特别重要，它告诉AI这个颜色的使用边界在哪。

如果只写一串色值不说用途，AI就会随机混着用。警告红可能出现在某个装饰图标上，品牌色可能被拿去当背景色铺满整个页面，看着就不对。

字体这块我建议写得越详细越好。不只是字体名和字号，行高、字重、字间距全都写上。这些参数差一点，出来的排版质感就差很远。我之前偷懒少写了行高，AI生成出来的标题松松垮垮的，一眼就不对劲。后来补上了，出来的效果瞬间就有那味了。所以这块千万别嫌烦。

组件样式要逐个写清楚。拿按钮举例，不能只写主按钮用品牌色，得写成类似这样的描述：

主按钮，背景#0052D9，文字#FFFFFF，圆角8px，高度80rpx，内边距左右32rpx，字号32rpx字重500。禁用状态背景色变为#D4E3FC，文字色变为#A6C4F7。

这种级别的细节AI才能真正用上。卡片、导航栏、输入框、弹窗，每个高频组件都按这个思路来写一遍。

写到这你可能已经觉得有点烦了，一个一个组件地抠参数，跟写说明书似的。但我跟你说，上面那些都是基本功，下面这块才是真正的大杀器。

然后是最容易被忽略但我觉得最有价值的一块，就是什么不能做。

你想想你们公司设计评审的时候最常被打回来的问题是什么？那些就是你要写在这里的东西。

比如不要在浅色卡片上用浅色文字，不要给圆角组件加直角阴影，不要把品牌蓝用在非交互元素的装饰上，不要把底部导航超过5个tab，正文不要居中对齐，功能色不能混用，成功绿只用于正向反馈、错误红只用于负向反馈。

这些禁区写得越具体，AI犯错的概率就越低。我自己的经验是，不能做清单对输出质量的提升甚至比要做什么更大。因为AI大多数时候能做对大方向，但特别容易在细节上踩到你们公司的红线。

第四步，测试和迭代。

skill写完放好了，别急着觉得大功告成，得拿几个真实需求去测一测。

比如我跟claude直接说

帮我设计一个后台页面，检测流量状态，先写出后台的页面的数据逻辑结构，再开始设计具体页面效果

然后它就能自动调用刚才做好的skill了。

等把页面生成出来后，看看它生成的颜色对不对？字体层级对不对？按钮样式是不是你要的？

我第一次测的时候，发现一个问题，AI在生成列表项的时候用品牌蓝做了分割线颜色，但TDesign的分割线应该是中性色。我回去在不能做里面加了一条，再试就好了。还有一次，AI给按钮用了16px的圆角，但TDesign移动端按钮标准是8px。这种问题你不测根本发现不了。

地址在这里，大家也可以看看，感觉也还行吧。

https://claude.ai/public/artifacts/c8bca3cf-5a4a-4c6c-b509-ed9e61f3d117

所以这是一个不断补漏的过程。每发现一个偏差，就回去补一条规则。跑上三五轮之后，你会发现AI的输出越来越靠谱了。

好了，说了半天步骤，到底搞完之后能怎么提效呢？

我自己的感受是，有了设计规范skill之后，AI的输出从完全不能看变成了大方向没跑偏，色彩体系对了，字体层级对了，组件样式大致对了。但细节上还是有问题，间距经常不够精确，有些组件的状态处理不到位，交互逻辑上的判断更是完全靠不住，对需求的理解估计要把完整的prd和交互的线框图给它才可能会好一些，我目前还没直接去试，你们可以去试试看。

它更像是帮你跳过了从0到6的部分，但从6到9还是得你自己来。

不过这已经很有价值了。我以前要给一个新项目搭页面框架，光配色和排版就得花半天去对齐规范。现在有了skill之后，AI两分钟就能给我一个基本靠谱的起点，第一次看到它自动用对了我写的品牌色和字体层级的时候，我是真的有点兴奋的，就觉得，还有点意思的。

具体来说，我觉得目前最实际的提效场景有三个。

一个是快速出方案。比如产品经理突然说明天要给老板看一版新的个人中心改版方案，你可以先用skill约束让AI快速生成三四个方向，然后挑一个最接近的再手动精修。以前这事至少半天，现在一两个小时能搞定。

一个是批量生成重复页面。很多App里有大量结构类似的页面，比如不同运动类型的详情页、不同时间维度的数据页。这些页面骨架都差不多，以前要一个个做，现在可以让AI基于规范批量生成，你只做差异化调整就行。

还有一个是设计走查。这个可能很多人没想到，你可以把skill反过来用。不是让AI生成，而是让AI基于你的规范去review已有的设计稿，看哪里不符合规范。我试过截图丢给Claude让它对照skill做走查，它确实能发现一些明显的色值偏差和间距问题。当然细微的体感层面的问题它还是判断不了，但能帮你先过一遍粗筛。

说实话，目前这套东西还远远谈不上成熟。AI对设计规范的理解还停留在照着数值来的层面，缺少对上下文和用户场景的综合判断。你让它按规范出一个页面，它可以做到颜色对、字号对、组件对，但这个场景下到底应该用卡片还是列表、这个操作应该用弹窗还是跳转新页面这种需要设计判断力的问题，它还是不行。

所以我觉得，目前是真的可以把它当一个特别听话但缺少审美直觉的助手。你负责判断，它负责执行。你告诉它规则越多越清楚，它执行得就越好。

回到最开始那个问题，这整件事最大的价值可能不只是提效本身。

就像 MC Dean 在分享自己做 63 个 design skills 时提到的，把设计知识真正编码出来，会逼着你说清楚自己到底懂什么（原文是https://marieclairedean.substack.com/p/i-built-63-design-skills-for-claude）。这某种程度上，也是在审计你自己作为设计师的能力边界。你会发现很多你以为自己很清楚的规则，其实从来没有真正说清楚过。什么叫呼吸感？什么叫高级感的投影？你得把这些模糊的形容词翻译成具体的参数，翻译的过程会逼着你重新审视自己到底在做什么。

这也是为什么我一直觉得，AI不是来替代设计师的，它是来逼我们把模糊的经验变成清晰的规则的。能把自己的设计直觉翻译成AI能理解的约束条件，这本身就是一种很稀缺的能力。

可能有小伙伴会觉得，搞这些太麻烦了，还不如直接手动做快。我理解这种感觉。但你想想看，你整理一次设计规范，之后每个项目、每个页面、每个组件的起点都会变好。而且现在 SKILL.md 背后的 Agent Skills 体系已经在越来越多的工具中被采用，比如 Claude、Codex、Cursor、OpenClaw 等都支持这类技能包思路。所以一份内容往往可以复用，但不同工具在触发方式、目录约定和扩展能力上，细节并不完全一样，落地时还是要稍微调一下。

说到底，AI工具的天花板的关键还是要看你喂给它的上下文质量。

这篇文章里讲的方法不一定是最优解，我自己也还在摸索。如果你也在搞类似的事情，欢迎来群里一起聊。或者你试了之后发现哪里不对，也在评论区说说，大家一起把这条路趟出来。

不管你承不承认，AI发展的趋势已经无法阻挡，现在到它真正能落地的时间已经不远了。

现在还可以在池塘边不下场摸鱼，但至少也要看看别人有没有摸到鱼。