Ant Design 原型设计

解决什么

AI 生成 Ant Design 页面时，常见问题不是“不会画组件”，而是把组件样式拍脑袋定：间距不是 4px 倍数，圆角混用，主色 hover 直接写死，布局高度不符合 B 端习惯。结果是页面像一套 demo，却不是可交付的 Ant Design 原型。

如何工作

该技能把 Ant Design v6 的量化规范打包成一份可直接放入 system prompt 或项目根目录的规则文件。使用时先读取品牌配置，用 colorPrimary、logoPath、siderWidth 等项目参数覆盖默认 Token；再依据全局 Design Token 约束间距、圆角、字号、控件高度、阴影和动效；最后按 B 端页面布局指南 生成侧边栏、顶栏和内容区结构。

它的重点不是生成业务代码，而是给 AI 一个可检查的设计基线：

• 间距必须落在 4px 倍数上；
• 圆角优先使用 2px / 4px / 6px / 8px；
• 控件高度使用 24px / 32px / 40px；
• 颜色优先走 colorPrimary、colorSuccess 等语义 Token，不直接堆色值；
• 主色派生态交给 Ant Design 算法生成，避免手写 hover、active 不一致。

适用边界

它适合做 Ant Design 风格的 B 端原型、管理后台、数据看板、表单页和列表页。若项目完全自定义设计系统、使用非 Ant Design 组件，或需要严格还原某个品牌视觉稿，这份规范只能作为参考，不能直接当唯一事实源。使用时仍要检查生成页面是否满足断点、对比度、可访问性和真实业务字段约束。