发布日期：2026-06-10 06:05:09 浏览次数： 1673
作者：B端AI设计视界
微信搜一搜，关注“B端AI设计视界”
推荐语
将 Ant Design 规范转化为 AI 设计助手，让 B 端产品与开发团队高效协同，快速产出符合规范的设计方案。
核心内容：
1. 构建高质量知识库：系统整理 Ant Design 的 Token、组件与页面模式
2. 生成与迭代 AI Skill：利用 Claude 生成可维护、易迭代的设计助手文件
3. 业务验证与优化：通过典型场景 Demo 验证效果，持续反向优化 Skill
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
最近收到不少小伙伴私信，能不能做一个 B 端设计的 AI Skill，尤其是产品和开发同学，希望日常遇到原型demo的项目可直接调用。
国内做 B 端的前端团队有很多在用 Ant Design 这套，设计和开发能说同一种语言，还原成本少很多——所以我照着这个方向做了一个，主路径和上次分享的 微信小程序设计 Skill 类似，整个过程拆开来给大家看一遍，资源分享见文末~
* * *
## 01
## 第一步：整理知识库
Skill 的质量取决于喂进去的内容。
我先用 AI 把所有 Ant Design 相关资料系统整理了一遍——Token 体系、视觉规范、组件用法、高频页面模式，不是照搬官网文档，是结合实际项目沉淀的版本。整理完导出成一份 PDF，作为后续生成 Skill 的原料。
素材越扎实，Skill 给出的答案越能直接落地。这一步不要省。
* * *
## 02
## 第二步：用 Claude 生成 Skill
把整理好的 PDF 上传给 Claude，指令很直接：
基于这份 Ant Design 设计规范文档，生成一个可安装的 Skill 文件。文档里缺失的部分自行补充，确保覆盖组件选型、Token 用法、页面结构三个核心场景。
第一次生成的版本通常是冗余的——规范、资源、示例混在一起，不好维护也不好迭代。
所以生成完之后，我重新整理了结构，让AI把文件拆分清楚：
* **主 Skill 文件**（`antd-design.skill`）：核心规范与调用逻辑
* **资源文件**（`antd_content.txt`）：原始规范内容，方便后续更新替换
* **Demo 文件**（`antd-design-demo.html`）：验证用的页面示例
* **源文件目录**（`antd-design/`）：组件、Token、页面模式的分类素材
结构拆清楚之后，哪部分规范更新了，只需要替换对应的资源文件重新生成主 Skill，不用从头来过。这是让 Skill 可以持续迭代的关键。
* * *
## 03
## 第三步：跑 Demo 验证
Skill 生成完不能直接发出去，要先验证。
让它跑了一个 B 端 Demo，覆盖数据看板、用户管理列表、表单页三个典型场景，对照规范逐页检查 Token 用法和组件状态。跑通没有明显偏差，才打包成最终的`antd-design.skill`。
PS：还是之前说的Skill是需要迭代的，仔细看生成的页面，还是会有一些细节问题，需要不停的用demo验证，反向去优化Skill
* * *
## 04
## 装上之后，我们来看看业务验证效果
举一个真实场景：订单管理页面。
需求很常见——列表展示订单状态，支持筛选和批量操作，点击进详情可以查看流转记录和操作日志。听起来不复杂，但真正开始画的时候问题一个接一个：
订单状态有六种，Tag 颜色怎么定才符合规范？筛选条件有八个，是全部平铺还是折叠？批量操作按钮放顶部还是跟着勾选浮出？详情里的审批流转记录用 Timeline 还是 Steps？操作日志字段多，Descriptions 怎么分组？
以前这些问题要么翻文档、要么靠经验、要么和前端来回拉锯。现在直接问 Skill，每个问题两分钟内有答案，答案带 Token 名称、组件嵌套方式、边界情况处理，可以直接写进标注。一个页面下来，少来回了三四次。
下面是提示词
你是一名资深 B 端产品设计师，正在使用 Ant Design 组件库设计一个订单管理页面。页面包含以下模块：顶部筛选区：订单编号、状态、时间范围、客户名称，共 8 个筛选条件订单列表：展示订单号、客户、金额、状态、创建时间、操作列，支持批量操作订单详情（侧滑 Drawer）：基本信息、商品明细、审批流转记录、操作日志请严格按照 Ant Design 规范输出完整可运行的 HTML 页面，要求：使用语义色 Token，不自定义色值订单状态用 Tag 组件，覆盖待付款/待发货/已发货/已完成/已取消/售后中六种状态审批流转记录用 Timeline 组件筛选条件超过 4 个默认折叠，展开显示全部批量操作跟随勾选浮出，未勾选时隐藏页面整体配色和间距符合 Ant Design 5.x 规范
生成效果预览
* * *
再看几个具体问题的回答——
**问：审批流转记录用什么组件？**
> 用`Timeline`。节点通过/拒绝/进行中/等待，分别对应`colorSuccess`（绿）/`colorError`（红）/`colorPrimary`（蓝）/ 默认灰，用`color`属性控制，不要自己写色值。每个节点嵌套`Descriptions size=”small”`展示操作人、时间、意见。超过 10 条加折叠，默认展示最近 3 条。
**预览一下：**
**问：表格状态”正常/禁用/待审核”颜色怎么定？**
> 用`Tag`走语义色：正常`color=”success”`，禁用`color=”error”`，待审核`color=”warning”`，不要自定义色值。每个 Tag 加同色系 6px 圆点，颜色不是唯一信息传达方式，色盲用户靠文字也能区分。
**问：18 个字段的新增表单怎么组织？**
> 按信息归属拆 3 个 Card 分组，标签宽度固定 84px 右对齐，输入框按语义定宽。底部操作区`sticky`，按钮顺序：取消 → 保存草稿 → 提交，提交中进入 loading 防重复提交。
普通问 AI 只能给你组件名。这个 Skill 告诉你用哪个 Token、怎么嵌套、超长时的兜底方案，答案有依据，可以直接写进标注。
* * *
## 写在最后
AI 真正的价值，不是帮你少画几张图，而是把散在文档里、存在经验里的判断依据，变成随时可调用的东西。
这个方法不只适用于 Ant Design——任何你有积累的设计规范、组件库、业务模式，都可以用同样的方式沉淀成 Skill。积累越深，用起来越顺手。
[登录查看剩余 70% 内容](javascript:void (0);)
https://www.53ai.com/keyword/skill%E6%98%AF%E4%BB%80%E4%B9%88https://www.53ai.com/keyword/skill%E6%98%AF%E5%B9%B2%E5%98%9B%E7%9A%84https://www.53ai.com/keyword/AI%20skill
分享：
用微信扫描二维码
用微信扫描二维码
用微信扫描二维码
用微信扫描二维码
53AI，企业落地大模型首选服务商
**产品**：场景落地咨询+大模型应用平台+行业解决方案
**承诺**：免费POC验证，效果达标后再合作。**零风险落地应用大模型**，已交付160+中大型企业
https://www.53ai.com/news/tishicikuangjia/2026061048326.htmlhttps://www.53ai.com/news/tishicikuangjia/2026061026051.html
https://www.53ai.com/news/tishicikuangjia
相关资讯
https://www.53ai.com/news/tishicikuangjia/2026070413704.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070265741.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070124357.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070107258.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070103254.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070174326.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070129317.htmlhttps://www.53ai.com/news/tishicikuangjia/2026070119702.html
https://www.53ai.com/solution.html
https://www.53ai.com/solution.html
160+中大型企业正在使用53AI
[立即咨询](javascript:void(0))[预约演示](javascript:void(0))
https://www.53ai.com/news/dongtai/2025012294502.htmlhttps://www.53ai.com/news/dongtai/2025012234192.html
https://hub.53ai.com/
热点资讯
https://www.53ai.com/news/tishicikuangjia/2026051597542.htmlhttps://www.53ai.com/news/tishicikuangjia/2026052409782.htmlhttps://www.53ai.com/news/tishicikuangjia/2026041683796.htmlhttps://www.53ai.com/news/tishicikuangjia/2026041412039.htmlhttps://www.53ai.com/news/tishicikuangjia/2026040910685.htmlhttps://www.53ai.com/news/tishicikuangjia/2026050695647.htmlhttps://www.53ai.com/news/tishicikuangjia/2026051925938.htmlhttps://www.53ai.com/news/tishicikuangjia/2026052072043.htmlhttps://www.53ai.com/news/tishicikuangjia/2026050320581.htmlhttps://www.53ai.com/news/tishicikuangjia/2026041447532.html
大家都在问
https://www.53ai.com/news/tishicikuangjia/2026062898431.htmlhttps://www.53ai.com/news/tishicikuangjia/2026062374293.htmlhttps://www.53ai.com/news/tishicikuangjia/2026061129743.htmlhttps://www.53ai.com/news/tishicikuangjia/2026061135916.htmlhttps://www.53ai.com/news/tishicikuangjia/2026060924810.htmlhttps://www.53ai.com/news/tishicikuangjia/2026060882139.htmlhttps://www.53ai.com/news/tishicikuangjia/2026052871869.htmlhttps://www.53ai.com/news/tishicikuangjia/2026051950942.html
热门标签
https://www.53ai.com/news/neirongchuangzuohttps://www.53ai.com/news/LargeLanguageModelhttps://www.53ai.com/news/gerentixiaohttps://www.53ai.com/news/langchainhttps://www.53ai.com/news/llamaindexhttps://www.53ai.com/news/MultimodalLargeModelhttps://www.53ai.com/news/RAGhttps://www.53ai.com/news/zhinengkefuhttps://www.53ai.com/news/knowledgegraphhttps://www.53ai.com/news/finetuninghttps://www.53ai.com/news/RAGFlowhttps://www.53ai.com/news/cozehttps://www.53ai.com/news/difyhttps://www.53ai.com/news/fastgpthttps://www.53ai.com/news/Bishenghttps://www.53ai.com/news/Qanythinghttps://www.53ai.com/news/AIqichehttps://www.53ai.com/news/AIjinronghttps://www.53ai.com/news/AIgongyehttps://www.53ai.com/news/AIpeixunhttps://www.53ai.com/news/AISaaShttps://www.53ai.com/news/tishicikuangjiahttps://www.53ai.com/news/tishicijiqiaohttps://www.53ai.com/news/AIdianshanghttps://www.53ai.com/news/AImianshihttps://www.53ai.com/news/shuziyuangonghttps://www.53ai.com/news/zhinengbaobiaohttps://www.53ai.com/news/zhishiguanlihttps://www.53ai.com/news/OpenSourceLLMhttps://www.53ai.com/news/zhinengyingxiaohttps://www.53ai.com/news/zhinengyingjianhttps://www.53ai.com/news/zhinenghuagaizaohttps://www.53ai.com/news/AIyiliaohttps://www.53ai.com/news/MaxKBhttps://www.53ai.com/news/Palantirhttps://www.53ai.com/news/Gleanhttps://www.53ai.com/news/Openclaw
[应聘简历请发送至： ceo@53ai.com](mailto:ceo@53ai.com)
https://www.53ai.com/product.html
https://www.53ai.com/product/quanyuanAIhttps://www.53ai.com/product/gongzuoduihuahttps://www.53ai.com/product/neirongchuangzuohttps://www.53ai.com/product/zhinengwendanghttps://www.53ai.com/product/mofacaidan
https://www.53ai.com/product/yewuAIhttps://www.53ai.com/product/weixinfenshenhttps://www.53ai.com/product/haiwaikefuhttps://www.53ai.com/product/guanwangkefuhttps://www.53ai.com/product/douyinkefuhttps://www.53ai.com/product/shuzilaoshihttps://www.53ai.com/product/shuzidudaohttps://www.53ai.com/product/zhinengfuwutai
https://www.53ai.com/product/AIXyewuhttps://www.53ai.com/product/zhinengwenshuhttps://www.53ai.com/product/zhinengshenhehttps://www.53ai.com/product/zhinenggongdanhttps://www.53ai.com/product/qiweigenjinzhushouhttps://www.53ai.com/product/zhinengbaojiahttps://www.53ai.com/product/qiweixiaoshouzhushouhttps://www.53ai.com/product/zijianyingyonghttps://www.53ai.com/product/qiweikefuzhushou
https://www.53ai.com/consulting.htmlhttps://www.53ai.com/fine-tuning.html
https://www.53ai.com/kehuanli.html
https://www.53ai.com/kehuanli/hangyeanlihttps://www.53ai.com/kehuanli/solution
https://www.53ai.com/news.html
https://www.53ai.com/news/qianyanjishuhttps://www.53ai.com/news/agentplatformhttps://www.53ai.com/news/hangyeyingyonghttps://www.53ai.com/news/qiyejingyinghttps://www.53ai.com/prompt.html
https://www.53ai.com/about.html
https://www.53ai.com/about/introductionhttps://www.53ai.com/about/cooperation
友情链接：
https://www.waytoagi.com/https://www.yuncan.com/https://www.wescrm.com/https://www.mingpian.top/https://www.uweb.net.cn/
CopyRight © 2012-2026 深圳市博思协创网络科技有限公司 版权所有
https://beian.miit.gov.cn/
广州：广州市华景路37号(华景软件园)暨南大学科技大厦6楼（整层）
深圳：深圳市福田区泰然四路29号天安创新科技广场一期A座1204
上海：上海市浦东新区金新路58号1602室
微信扫码
和创始人交个朋友
联系我们
售前咨询
[186 6662 7370](tel:18666627370)
预约演示
[185 8882 0121](tel:18588820121)
微信扫码
添加专属顾问
回到顶部
加载中…
扫码咨询
[](https://www.53ai.com/news/tishicikuangjia/2026061053109.html)
https://work.weixin.qq.com/ca/cawcde2599cf74e2d9https://work.weixin.qq.com/ca/cawcdefb661890e885[电话咨询](tel:400-838-1185)
扫码登录
– [x] 登录即表示您同意[《53AI网站服务协议》](javascript:void(0);)
服务协议
欢迎您使用【53AI 官方网站】（以下简称“本网站”或“我们”）。本《会员服务协议》（以下简称“本协议”）是您（以下简称“会员”或“用户”）与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。
在您注册或登录前，请务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时，即视为您已完全理解并同意接受本协议的全部内容。
一、 定义
本网站：指由【深圳市博思协创网络科技有限公司】运营的，域名为【53ai.com】的网站及相关移动端页面。
会员服务：指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。
知识库内容：指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。
二、 账号注册与登录
登录方式：本网站支持以下登录方式，您可根据实际情况选择：
微信公众号授权登录：您同意将您的微信OpenID信息授权给本网站，用于创建或关联会员账号。
手机验证码登录：您需提供真实有效的手机号码，并通过短信验证码完成身份验证与登录/注册。
账号安全：您的账号仅限您本人使用，禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失，由您自行承担。
实名认证：根据相关法律法规要求，我们可能要求您在特定功能下完成实名认证。如您拒绝提供，可能无法使用部分或全部服务。
未成年人保护：若您未满18周岁，请在法定监护人的陪同下阅读本协议，并在征得监护人同意后使用本服务。
三、 服务内容与规范
知识库查阅权限：会员登录后，有权按照其会员等级对应的权限范围，在线浏览、检索本网站知识库中的相关文章及内容。
服务变更：我们有权根据业务发展需要，调整、变更或终止部分服务内容，并将以网站公告、公众号消息等方式提前通知。
禁止行为：您在使用服务时不得实施以下行为：
利用技术手段批量爬取、下载、转存知识库内容；
将知识库内容用于商业目的或未经授权地向第三方传播；
干扰本网站正常运行或侵犯其他用户合法权益；
发布违法违规信息或从事违反公序良俗的活动。
四、 知识产权声明
权利归属：本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有，受《中华人民共和国著作权法》等法律保护。
有限许可：本网站授予会员一项非独占、不可转让、不可转授权的普通许可，仅限于个人学习、研究之目的在线查阅知识库内容。
侵权追责：未经书面许可，任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现，我们保留追究其法律责任的权利。
五、 个人信息保护
我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息，请单独阅读 《隐私政策》。
您通过微信公众号授权或手机号验证所提供的信息，我们将严格按照《个人信息保护法》的规定处理，仅用于身份识别、服务提供及安全验证等必要用途。
您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。
六、 免责声明
内容准确性：知识库内容仅供参考，不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证，您应自行判断并承担使用风险。
不可抗力：因自然灾害、政策法规变化、网络故障、第三方平台接口异常（如微信接口维护、运营商短信通道故障）等不可抗力导致的服务中断或延迟，我们不承担违约责任。
第三方链接：本网站可能包含指向第三方网站的链接，该等网站的内容和服务不受我们控制，请您自行甄别风险。
七、 违约责任
如您违反本协议约定，我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施，并保留要求赔偿损失的权利。
如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失，您应承担全部赔偿责任（包括但不限于罚款、赔偿金、律师费、公证费等）。
八、 法律适用与争议解决
本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。
因本协议产生的或与本协议有关的任何争议，双方应友好协商解决；协商不成的，任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。
九、 其他
本协议构成双方就本服务达成的完整协议，取代此前任何口头或书面约定。
本协议任一条款被认定为无效或不可执行的，不影响其他条款的效力。
我们对本协议享有最终解释权，并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效，继续使用服务即视为同意修订内容。
[已查阅](javascript:void(0);)
安全验证
拖动下方拼图完成验证
AI生成背景
您的速度已超过 99% 的用户
验证错误,请重试
确定
安全验证
刷新验证码
反馈
切换无障碍验证
切换常规验证
