刚好最近团队同事需要一套微信小程序的设计规范Skill，我就以这个需求为例，给大家走一遍完整的落地流程，全程不用开发资源，一个设计师30分钟就能搞定。
首先要明确：现在AI进化之后，做设计Skill的门槛已经降到了几乎为零。 不需要提前整理结构化的token文件，不需要自己定义复杂的schema，更不用开发MCP接口打通工具链。你只需要手头有整理好的设计规范原始文档，就可以直接开工。
我这次用到的原材料就是微信官方公开的几份文档，都是散落在不同页面、格式不统一的公开资料：
✅ 核心必录源文件
小程序官方设计指南（主规范）：
https://developers.weixin.qq.com/miniprogram/design/index.html WeUI 视觉 & 组件规范（落地组件标准）：
https://weui.io/ 小程序 UI 审核规范 + 违规红线（避坑关键）：
https://developers.weixin.qq.com/miniprogram/product/spec.html ✅ 补充增补内容
小程序适配规范（刘海屏、深色模式、胶囊按钮避让规则）
弹窗/授权/定位/隐私弹窗强制规范
导航栏、Tabbar、顶部标题栏强制交互规则
就这些公开资料足够了，这也是为什么现在设计规范Skill不再是大团队、设计系统团队的专利——哪怕是小团队，甚至个人设计师，都可以快速搭建自己的专属规范Skill。
第一步（10分钟）：整合原材料，输出结构化PDF
很多人图省事直接把一堆链接扔给AI，最后出来的效果差强人意，核心问题就是原始资料格式不统一，AI理解容易有偏差。 正确的做法是先花10分钟做第一步整合：借助AI把几份官方文档的内容先提炼、对齐，输出成一份结构完全统一的PDF，每个模块都套同一个标准化格式：
【组件/场景】：
【适用场景】：
【官方标准规范】：
【尺寸/参数】：
【交互规则】：
【强制要求】：
【禁止设计】：
【最佳实践】：示例：整理后的结构化规范PDF部分内容展示
举个例子，处理胶囊按钮避让规范的时候，原来的官方文档是散落在适配指南、设计指南两个页面的，整合之后就变成：
【组件/场景】：导航栏胶囊按钮避让 【适用场景】：所有小程序页面顶部导航栏设计 【官方标准规范】：胶囊按钮为微信原生控件，不可修改、不可隐藏，所有自定义导航栏内容必须避让胶囊按钮区域 【尺寸/参数】：胶囊按钮高度32px，左右边距各16px，距离顶部状态栏高度根据设备不同为：iOS 44px、Android 48px 【交互规则】：胶囊按钮区域不允许放置任何可交互元素，避免和原生返回、更多按钮冲突 【强制要求】：自定义标题必须在胶囊按钮左侧区域居中对齐，不得超过胶囊按钮左边界 【禁止设计】：禁止将搜索框、按钮等元素横跨胶囊按钮区域 【最佳实践】：导航栏高度统一设置为 状态栏高度 + 44px，内容全部放在胶囊按钮下方或者左侧安全区域
所有规范都按这个格式统一之后，AI后续读取的准确率能提升90%以上，最后生成的Skill质量也会高很多，这一步是整个流程的地基，绝对不能省。
第二步（15分钟）：PDF喂给AI，一键生成标准Skill
把第一步整理好的结构化PDF直接上传给AI，不用写几十行复杂的提示词，指令就一句话足够：
"请按照 Skill 的标准格式，把这份文档整理成一套完整的微信小程序设计规范 Skill，同时写一段预设人设 Prompt，让 AI 以这份规范为准来回答设计问题。"
很多人会担心这么简单的指令会不会输出质量不好，其实完全不用担心——因为我们第一步已经把所有规范都整理成了结构统一、信息完整的标准化格式，AI只要按规则拆解就行，不需要额外的信息补充。 我这次为了对比效果，把同一份结构化PDF同时发给了Claude和Codex两个模型，全程没有介入任何额外指导，15分钟之后两份完整的Skill就都输出了，刚好能直观对比不同模型的处理差异。 两份Skill的基础框架都没问题：都自动输出了标准Skill元信息、结构化规则库、预设人设Prompt三个核心模块，常用的组件参数、适配规则都整理得很清楚，但是质量差距恰恰藏在细节里：
Claude输出的版本合规部分做得更完整，审核红线、边界情况覆盖得非常系统，比如它会主动把「隐私弹窗必须放在用户操作触发后，不能一进页面就弹出」「小程序标题不能超过12个汉字」这些容易踩坑的边界规则单独高亮，读起来就是可以直接落地用的专业文档。
第三步（5分钟）：验证Skill质量，不同AI差异明显
Skill生成完不是终点，得验证写得对不对才能落地，这一步两个AI的处理逻辑差异非常大：
Claude会主动做自我校验：写完Skill之后，它会自己构造设计场景和代码示例，对照规范逐条检查
我自己的使用建议是：如果是做小程序、APP这种有明确审核红线、合规要求高的设计Skill，优先选Claude，边界规则覆盖和自我校验能力确实更省心；如果是做内部组件库、团队通用规范这种没有严格合规要求的，用Codex也没问题，输出的结构更清晰，参数整理得更规整。
第四步（5分钟）：实战验证，跑一个真实项目
光靠AI自我校验和人工抽查还不够，必须拿真实的业务项目跑一遍才能确保Skill真的能用。我这次专门找了一个正在开发的社区咖啡店微信小程序来做测试，覆盖了首页推荐、菜单点单、会员积分、订单查询四个核心页面，包含了列表、卡片、表单、弹窗、底部导航这些小程序最典型的设计场景，全程没有给设计师额外指导，就让他完全用生成的Skill来做设计：
设计师查规范的时候直接问Skill，不用再翻好几份官方文档，1分钟就能拿到准确的参数和规则，比之前自己查效率提升了80%
设计稿做完之后，把截图发给Skill做校验，它直接标出了2个容易忽略的问题：一是首页的搜索框距离原生胶囊按钮太近，不符合避让规则；二是会员授权弹窗的「不同意」按钮字号小于14px，违反了微信可交互元素的规范要求
最后把调整后的4个页面设计稿发给审核组，完全符合微信UI审核规范，一次性通过，没有踩到任何红线
实战案例：社区咖啡店小程序设计稿符合规范展示
测试下来最终Skill的规则覆盖率达到了92%，剩下的8%是咖啡店品牌定制部分，比如专属的积分动画、品牌主题色这些非通用规则，只要在Skill基础上额外补充定义就行，完全不影响通用场景的使用。
第五步（1分钟）：打包分享，一句话的事
Skill验证完没问题，想分享给团队或者同行朋友，完全不用手动整理一堆文件。 直接跟AI说一句话就行："帮我把这个 Skill 打包到桌面。" 它会自动把所有规范源文档、Skill结构文件、预设Prompt都打包成一个规整的文件夹，直接放到你桌面上，不管是发团队群还是传给朋友，直接发压缩包就行，所有人拿到之后导入就能用，不用额外做配置。
打包后的Skill包内容展示，导入即可直接使用
最后算笔账：全程真的只要30分钟
整个流程走下来，熟练的话刚好30分钟就能搞定：
整合规范输出结构化PDF：10分钟
喂给AI生成标准Skill：15分钟（含AI自我校验时间）
人工验证+实战测试：5分钟
打包分享：1分钟（可忽略不计）
为什么现在变得这么简单？核心是AI理解能力上来了
很多人会好奇，为什么之前做同样的事要花数天，现在30分钟就能搞定？我整理了前后流程的核心差异，一目了然：
不是流程被刻意简化了，本质是AI的理解能力上来了。 以前AI读不懂松散的原始文档，必须先人工把内容结构化成它能处理的格式——整理token、定义schema、梳理patterns，本质上是在替AI做「消化」的工作，这些折腾人的步骤，其实都是AI能力不够时的补丁。 现在AI自己能完成「消化」工作了：你给它原始材料，它自己提炼结构、梳理规则、输出标准Skill，还能自己构造测试用例验证自己写的对不对，中间那些没用的补丁自然就不需要了。
技能获取：