30分钟从零落地：微信小程序设计规范Skill实操全拆解

内容总结生成中

你看见的，不仅是一个总结

刚好最近团队同事需要一套微信小程序的设计规范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，每个模块都套同一个标准化格式：

【组件/场景】：
【适用场景】：
【官方标准规范】：
【尺寸/参数】：
【交互规则】：
【强制要求】：
【禁止设计】：
【最佳实践】：

举个例子，处理胶囊按钮避让规范的时候，原来的官方文档是散落在适配指南、设计指南两个页面的，整合之后就变成：

【组件/场景】：导航栏胶囊按钮避让【适用场景】：所有小程序页面顶部导航栏设计【官方标准规范】：胶囊按钮为微信原生控件，不可修改、不可隐藏，所有自定义导航栏内容必须避让胶囊按钮区域【尺寸/参数】：胶囊按钮高度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个汉字」这些容易踩坑的边界规则单独高亮，读起来就是可以直接落地用的专业文档。 Codex输出的版本结构确实更干净，尺寸参数整理得清清楚楚，组件的像素值、间距都列得很规整，但是对微信审核规则的感知相对浅，很多边界情况容易漏，比如我问它「能不能在导航栏放自定义返回按钮覆盖原生胶囊？」，Codex只说不建议，但是没提这个是审核红线，会直接导致上线被拒，这一点差距在实际落地的时候影响非常大。

第三步（5分钟）：验证Skill质量，不同AI差异明显

Skill生成完不是终点，得验证写得对不对才能落地，这一步两个AI的处理逻辑差异非常大：

Claude会主动做自我校验：写完Skill之后，它会自己构造设计场景和代码示例，对照规范逐条检查——这个规则写清楚了吗？这个参数在例子里对得上吗？禁止项有没有覆盖到？相当于它自己先跑了一遍全量测试，全程不需要我介入，自我校验完直接交卷，我最后只要扫一眼有没有大问题就行。 Codex需要完全手动验证：它输出的内容本身没有大错误，但是自我校验这步它不会做，需要我自己拿官方规范和实际例子对照逐项review，本质上还是人工核查，花的时间会比用Claude多一倍左右。

我自己的使用建议是：如果是做小程序、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都打包成一个规整的文件夹，直接放到你桌面上，不管是发团队群还是传给朋友，直接发压缩包就行，所有人拿到之后导入就能用，不用额外做配置。

最后算笔账：全程真的只要30分钟

整个流程走下来，熟练的话刚好30分钟就能搞定：

整合规范输出结构化PDF：10分钟
喂给AI生成标准Skill：15分钟（含AI自我校验时间）
人工验证+实战测试：5分钟
打包分享：1分钟（可忽略不计）

为什么现在变得这么简单？核心是AI理解能力上来了

很多人会好奇，为什么之前做同样的事要花数天，现在30分钟就能搞定？我整理了前后流程的核心差异，一目了然：

对比项	上一次（传统流程）	这一次（AI辅助流程）
起点	必须先有结构化设计系统	只要有原始设计规范文档就行
前置工作	要花大量时间整理token、定义schema、梳理patterns、开发MCP接口	只需要把零散的规范文档整合为统一格式的PDF
验证方式	全人工逐项核对规则，耗时耗力	Claude自动完成自我校验，只需要少量人工抽查
总用时	数天甚至数周	30分钟就能搞定全流程

不是流程被刻意简化了，本质是AI的理解能力上来了。以前AI读不懂松散的原始文档，必须先人工把内容结构化成它能处理的格式——整理token、定义schema、梳理patterns，本质上是在替AI做「消化」的工作，这些折腾人的步骤，其实都是AI能力不够时的补丁。现在AI自己能完成「消化」工作了：你给它原始材料，它自己提炼结构、梳理规则、输出标准Skill，还能自己构造测试用例验证自己写的对不对，中间那些没用的补丁自然就不需要了。

如果你上次看过我写的那篇设计Skill搭建教程，觉得流程太复杂迟迟没有动手——现在真的可以试试了，门槛已经低到了几乎所有人都能上手的程度。这份微信小程序设计Skill我已经整理好了，需要的朋友可以在评论区留言，我会把完整的Skill包、结构化规范PDF一起发给你，拿到手就能直接用，不用再花时间自己整理官方文档~