Ant Design Pro：企业级中后台前端脚手架创建与部署指南

一、项目官方信息

二、项目背景

按照官方 README 的定义，Ant Design Pro 是开箱即用的中台前端/设计解决方案。它在 Ant Design 组件库之上，进一步把中后台产品的常见页面、常见交互、常见工程实践沉淀成一套脚手架：开发者 clone 下来就是一个结构完整、可直接运行的中后台项目，而不必从空工程开始搭路由、布局、权限、Mock 数据。

它解决的痛点非常具体：一个企业内部管理系统，往往 80% 的页面都是登录、列表、表单、详情这类"标准件"，真正需要业务定制的只有少数页面。Ant Design Pro 把这些标准件全部预置好，团队只需专注于业务差异部分，从而显著缩短中后台项目的启动周期。README 的定位是"开箱即用"，意味着 clone 后 npm install && npm start 就能跑起一个看起来像正式产品的中后台。

它与 Ant Design 的关系是：antd 是底层组件库，antd-pro 是在其上封装的完整应用模板。如果说 antd 提供的是"按钮、表格、表单"这些零件，antd-pro 提供的就是"已经拼好的一辆车"——有布局、有路由、有菜单、有 Mock 数据，业务方直接在上面换业务内容即可。

README 顶部的"v6 正式发布"是一个重要信号：v6 是一次面向现代技术栈的大版本重构，不再是旧版的小修小补，技术栈整体升级到 React 19 与 Umi Max 4。对存量 v5 用户，README 通过 /pro-upgrade skill 提供了平滑升级路径。

README 顶部展示了 CI、GitHub Release、构建工具（Utoo、Umi）、Biome 检查、Ant Design 徽章，并特别标注"v6 正式发布"。v6 基于最新技术栈重构：React 19、Umi Max 4、antd 6、utoopack，并引入了 Tailwind CSS v4 + antd-style 的主题方案。

其中几个关键技术栈的角色是：Umi Max 4 是蚂蚁系的企业级 React 框架，负责路由、数据流、构建等；antd 6 是组件库本体；utoopack 是新一代构建工具；Tailwind CSS v4 + antd-style 负责样式与主题。README 同时标注用 Biome 做代码检查，说明工程规范是内置的。

三、官方图片

上图为 Ant Design Pro 仓库在 GitHub 上的官方封面图。在线预览地址为 preview.pro.ant.design，可直接体验登录页、Dashboard、表单页等模板页面。建议第一次接触的读者先打开在线预览，实际点一遍各模板页面，再对照本文理解 README 的特性与模板目录。

四、核心特性（README 特性逐条展开）

README 在"特性"一节列出了十二条，逐条翻译说明：

1. :bulb: TypeScript：应用程序级 JavaScript 的语言，全工程用 TypeScript 编写，路由、数据、模型都有类型约束。
2. :scroll: 区块：通过区块模板快速构建页面，区块是可复用的页面片段，类似积木式拼装。
3. :gem: 优雅美观：基于 Ant Design 6 体系精心设计，视觉与 antd 保持一致。
4. :triangular_ruler: 常见设计模式：提炼自中后台应用的典型页面和场景，不是凭空设计的模板。
5. :rocket: 最新技术栈：使用 React 19 / Umi Max 4 / antd 6 / utoopack 等前端前沿技术开发，避免过时技术栈。
6. :iphone: 响应式：针对不同屏幕大小设计，在桌面与平板上都有合理布局。
7. :art: 主题：基于 Tailwind CSS v4 + antd-style 的可配置主题，满足多样化品牌诉求。
8. :globe_with_meridians: 国际化：内建业界通用的国际化方案，多语言开箱即用，组件文案与路由都有翻译。
9. :gear: 最佳实践：良好的工程实践帮助团队持续产出高质量代码，包括目录结构、命名、状态管理等约定。
10. :1234: Mock 数据：实用的本地数据调试方案，后端接口未就绪时前端可独立开发，减少联调阻塞。
11. :robot: AI 助手：内置 AI 聊天助手页面，基于 Ant Design X，是 v6 面向 AI 应用场景的新能力。
12. :white_check_mark: UI 测试：自动化测试保障前端产品质量。

五、模板（README 目录树）

README 列出了脚手架内置的完整页面模板结构：

- 欢迎页
- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 搜索列表（文章/项目/应用）
  - 查询表格
  - 标准列表
  - 卡片列表
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 用户
  - 用户中心页
  - 用户设置页
- AI 助手
- 账户
  - 登录
  - 注册
  - 注册成功

可以看到，它覆盖了中后台几乎所有高频页面：从登录注册、Dashboard 三类（分析/监控/工作台）、表单三类（基础/分步/高级）、列表四类（搜索/查询表格/标准/卡片）、详情两类，到结果页、异常页（403/404/500）、用户中心与设置，还额外内置了 AI 助手页面。

这些页面的含义大致是：分析页与监控页面向数据看板，工作台面向个人待办；基础表单页用于简单录入，分步表单用于多步向导，高级表单用于复杂业务表单；搜索列表对应文章/项目/应用三类常见列表，查询表格对应带筛选条件的表格页，标准列表与卡片列表是另外两种版式；基础详情与高级详情面向单条数据的查看；成功页与失败页是操作结果反馈；403/404/500 是常见异常页；用户中心与设置是账号相关页面；AI 助手是 v6 新增的对话式页面。业务方通常直接删除用不上的模板，保留自己需要的部分。

整棵模板树覆盖了一个中后台项目从登录到数据展示的完整链路：登录注册进入后是 Dashboard，再通过菜单进入表单、列表、详情，操作后跳转结果页，出错时落到异常页，账号相关则进入用户中心。这套页面结构是 README 从大量真实中后台项目里提炼出来的"标准骨架"。

六、环境要求

现代浏览器。README 兼容策略为 Edge、Firefox、Chrome、Safari 各最近两个版本（last 2 versions）。本地开发需要 Node.js 环境（用于 npm 安装与启动）。

由于 v6 基于 React 19、Umi Max 4 与 utoopack，本地开发建议使用较新版本的 Node，以保证工具链兼容。

七、使用步骤

7.1 克隆项目到本地

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git myapp
cd myapp

使用 --depth=1 只拉取最新一次提交，减少克隆体积；myapp 是自定义的项目目录名，可以按需改名。

7.2 安装依赖

npm install

这一步会按 package.json 安装全部依赖，包括 React 19、Umi Max 4、antd 6 与构建工具，首次安装可能需要较长时间。

7.3 启动开发服务器

# 启动开发服务器（默认为完整版）
npm start

默认启动的是包含全部区块的完整版项目。启动后会自动打开本地开发地址，可在浏览器中预览各模板页面并支持热更新。

7.4 精简为简单版本

如果只需要一个最小化版本，运行：

npm run simple

README 明确这将会： - 删除多余的页面目录（dashboard、form、list/*、profile、result、exception、account 等）； - 删除多余的 mock 文件； - 替换路由为简单版本； - 从 package.json 中移除多余的依赖。

注意：此操作不可逆，将永久删除文件。

也就是说，npm run simple 是一个"裁剪"动作：把一个塞满示例的完整版模板，裁成一个只保留核心框架的最小骨架，适合不需要那么多示例页的项目。因为它直接删文件，执行前建议先提交 git 或做好备份。

7.5 构建

npm run build

构建产出可直接部署到静态服务器或网关后。更多信息参考使用文档，常见问题见文档中的 FAQ 章节。

八、AI Skills（Claude Code）

README 专门介绍了项目内置的两个 Claude Code Skills，位于 .claude/skills/ 目录下：

在 Claude Code 中使用：

# 升级项目到最新 Pro 版本
/pro-upgrade

# 查询 antd 组件信息、调试问题、运行 lint 等
/antd

README 提示：如果项目是从本仓库克隆的，这些 skill 已经内置，无需额外安装；如需获取最新 skill 定义，可以从模板拉取更新，或运行 npx skills add ant-design/ant-design-pro 刷新。

这两个 skill 的分工是：/pro-upgrade 解决"模板升级"问题——Ant Design Pro 会持续迭代，业务项目在 fork 后如何合并官方模板变更而不丢失业务代码，是长期维护痛点；/antd 解决日常开发中的 antd 用法问题——查 API、查 props、检查废弃用法、跨版本迁移，底层基于 @ant-design/cli。

这两个 skill 位于 .claude/skills/ 目录，是 v6 把"AI 辅助开发"直接内置进脚手架的尝试：业务团队用 Claude Code 开发时，升级框架与查组件用法不再需要手动翻文档，直接在对话里触发即可。

九、常见问题（FAQ）

• 问：默认启动的是完整版还是精简版？ 答：npm start 默认启动包含全部区块的完整版；需要精简版再运行 npm run simple。
• 问：npm run simple 能撤销吗？ 答：README 明确此操作不可逆，会永久删除多余页面目录、mock 文件与依赖，执行前请确认或备份。
• 问：怎么升级到最新 Pro？ 答：README 内置了 /pro-upgrade Claude Code skill，会自动对比模板差异并合并框架变更、保留业务代码。
• 问：v6 用了什么技术栈？ 答：README 说明是 React 19、Umi Max 4、antd 6、utoopack，主题基于 Tailwind CSS v4 + antd-style。
• 问：有哪些内置页面？ 答：README 模板树覆盖登录注册、Dashboard、表单、列表、详情、结果、异常（403/404/500）、用户中心、AI 助手等。
• 问：Mock 数据怎么用？ 答：README 特性中说明内置实用的本地数据调试方案，dev 模式下通过 mock 文件拦截接口。
• 问：怎么参与贡献？ 答：README 欢迎在公司或个人项目中使用、通过 Issue 报告 bug 或咨询、提交 Pull Request 改进代码。
• 问：构建产物用哪个命令？ 答：npm run build，与开发启动命令 npm start 对应。
• 问：主题怎么定制？ 答：README 说明 v6 主题基于 Tailwind CSS v4 + antd-style，可配置主题满足品牌诉求。
• 问：多语言怎么办？ 答：README 特性中说明内建业界通用的国际化方案，开箱即用。
• 问：UI 测试怎么做？ 答：README 特性中说明内置自动化测试保障产品质量，具体测试命令见使用文档。
• 问：响应式支持哪些屏幕？ 答：README 特性说明针对不同屏幕大小设计，桌面端为主，兼顾小屏。
• 问：区块是什么？ 答：README 特性说明区块是可复用的页面片段，通过区块模板快速构建页面。
• 问：在线预览在哪？ 答：README 提供 preview.pro.ant.design 在线预览地址。
• 问：常见问题在哪查？ 答：README 指向 docs/cheatsheet.zh-CN.md#faq。
• 问：更新日志在哪？ 答：README 指向 GitHub Releases，v6 更新内容见 v6.0.0。

十、跳转链接

• GitHub 仓库
• 在线预览
• 使用文档
• 常见问题（FAQ）
• 更新日志（Releases）
• v6.0.0 更新内容
• Ant Design 官网 · Umi · utoopack
• Tailwind CSS v4 · antd-style · Ant Design X

综上，Ant Design Pro README 传递的核心信息是：它是一套开箱即用的中后台前端解决方案，基于 React 19 + Umi Max 4 + antd 6 + utoopack，内置十二类特性、完整页面模板树、Mock 数据与 AI 助手页面，提供 npm start / npm run simple / npm run build 三个核心命令，并通过内置 Claude Code Skills 解决模板升级与 antd 用法查询问题。对需要快速启动企业级中后台项目的团队，它是官方推荐的脚手架。

使用路径建议：先在在线预览熟悉模板，再 clone 到本地跑通 npm start，根据业务需要 npm run simple 裁剪，最后用 npm run build 产出部署包。长期维护时，借助 /pro-upgrade skill 合并官方模板变更，借助 /antd skill 解决组件用法与迁移问题。整个过程从熟悉预览到产出部署包，通常只需一两个小时即可搭起一个可用的中后台骨架。对于想直接借鉴而非 fork 的团队，也可以只读它的页面结构与工程实践作为参考，吸收其设计模式而不引入全部代码。