高德B端PC设计规范（b-antd）

生成严格遵循高德 B 端 PC 设计规范的 React + Ant Design 代码。适用于创建列表页、表单页、详情页、报表页等场景；当用户需要创建高德 B 端 PC 页面时，使用本 Skill。

项	说明
Skill ID	b-antd
当前版本	v1.2.6
技术栈	React 18+、TypeScript、Ant Design v5、@ant-design/charts、dayjs
主色	#1A66FF

适用场景

• 列表页：筛选区、表格、分页、批量操作、主按钮
• 表单页：单列 / 多列 / 分步 / 带预览
• 详情页：Descriptions、Timeline、审批流程
• 报表页：指标卡、图表栅格、明细表、可选 AI 模块
• 模块编排页：摘要 + 筛选 + 图表 + 表格 + 抽屉详情

信息不完整时，Skill 会按需求自动判型并先产出可运行页面，再标注待确认项。

安装

Qoder

git clone https://github.com/liuman0722/b-antd.git
cp -r b-antd ~/.qoder/skills/

Cursor

将本仓库克隆到 Cursor skills 目录（例如 ~/.cursor/skills/b-antd），或在对话中手动附加 SKILL.md。

快速开始

在对话中直接说明业务目标即可，无需先背页面类型术语：

使用 b-antd，生成一个订单列表页。
筛选项：订单号、订单状态、下单时间；
表格列：订单号、买家、金额、状态、创建时间、操作；
功能：分页、批量删除、主按钮「新建订单」；
请直接落地到当前项目并接入路由。

产品经理极简模板：

使用 b-antd，我是产品经理，下面是需求，请你自动判断页面类型并生成代码。

业务目标：【一句话说明要解决的问题】
关键字段：【表格列或表单项】
核心动作：【查询/新增/编辑/删除/导出等】

规范要点（摘要）

模块	要点
全局布局	Header 固定置顶 + Sider 固定左侧 + Content padding: 24
筛选区	≥3 项独立 Card、三列右对齐标签；按钮顺序固定为「重置 → 查询 → 展开/收起」
表格区	操作列吸右、fixed: 'right' 须配 width，scroll={{ x: 'max-content' }}
标题	面包屑与页面标题二选一，不重复展示
报表页	指标卡 + 主图表 + 可选明细；形态 C 支持指标与下图表联动
主题	仅自定义 Primary Token，其余复用 Ant Design 默认

完整规则、Figma 节点引用与 changelog 见 SKILL.md。

仓库结构

b-antd/
├── SKILL.md              # 主规范（Agent 读取）
├── README.md             # 本说明（人类阅读）
├── references/           # 设计规范与页面模板补充
│   ├── DESIGN-SPECS.md
│   ├── PAGE-TEMPLATES.md
│   └── ANTD-REFERENCE.md
├── assets/
│   └── default-logo.png  # 默认顶栏 Logo
└── scripts/
    └── print_default_logo_data_url.py

项目接入建议

在应用入口确保已引入 Ant Design reset 与主题配置（详见 SKILL.md 第 1.2 节）：

import 'antd/dist/reset.css';

const themeConfig = {
  token: {
    colorPrimary: '#1A66FF',
    colorPrimaryBg: '#E6F2FF',
    colorPrimaryHover: '#4287FF',
    colorPrimaryActive: '#0B49D9',
    borderRadius: 6,
  },
  components: { Card: { lineWidth: 1 } },
};

常见问题

生成结果不符合筛选区规范？
回灌：按 b-antd 4.2.2 落地：单个 Row gutter={[24,24]}，按钮顺序「重置 → 查询 → 展开」，按钮区 wrapperCol={{ span: 24 }} 吸右。

报表指标点击后图表不联动？
回灌：按 b-antd 3.6.4 形态 C：维护 activeMetricKey，同一数据流驱动主图与明细表。

更多修正 Prompt 见 SKILL.md「常见失败与修正 Prompt」。

版本与社区

• 技能广场提交：Qoder Community PR #38
• 问题与改进：欢迎在 Issues 反馈

License

与上游 Skill 规范一致；社区分发以 GitHub 仓库内容为准。