用途:为 React/Next.js 应用提供统一的 UI/UX 规范,确保新建组件与既有设计系统在颜色、间距、字体和交互上保持一致。适用于创建表单、表格、弹窗、卡片、列表、数据可视化与仪表盘、加载状态与动画,以及任何视觉组件的样式对齐。
主要能力:以 Ant Design 组件为基础,配合 shadcn/ui 图表与设计令牌;提供数据表格、弹窗表单、可选卡片网格、加载状态、带头像回退等核心模式;给出颜色(品牌橙 #F79402、产品负责人 #7C4DFF、技术负责人 #52c41a、错误/逾期 #ff4d4f)、间距(8/12/16/24px)与字体(表格 12px、次要文本 11px)规范。
使用方式:先判断组件类型,再查阅对应参考文件(design-tokens.md、codebase-patterns.md、component-patterns.md、styling-layout.md、animations.md)。每个组件需使用 Ant Design 基础组件、theme.useToken() 取色、统一间距、TypeScript 类型、加载状态、message 反馈、响应式与错误处理。样式优先级为 Ant Design 属性、主题令牌、内联布局样式,尽量少用 Tailwind。数据获取示例使用 SWR。
限制:资料未提供安装命令、版本要求、收费与价格信息;不涉及具体平台与效果承诺。避免使用 CSS-in-JS、自定义 CSS 文件、硬编码颜色、过度阴影,且不可跳过错误处理与响应式设计。