AI 写后台页面，按钮和表单老对不齐？把 Ant Design 这样喂给它

我最近在高强度的进行 Vibe Coding，主要是让 AI 帮我写一个知识工程系统。

功能它基本都能写出来，但细节经常不统一。比如这个页面按钮高一点，那个页面按钮矮一点；一个筛选表单排 3 列，另一个排 4 列；有的弹窗按钮靠右，有的又居中；表格里的空状态、分页、状态标签，也经常各写各的。

页面少的时候还不明显，页面一多，就会感觉它们不像同一个系统。最后我就得反复提醒 AI：按之前的风格来，别自己写按钮样式，间距和列表页保持一致。

AI 写后台页面，按钮和表单老对不齐？把 Ant Design 这样喂给它配图 1

——非常随意、完全不讲究视觉的原始界面——

后来我发现，如果做的是后台、管理台、订单列表、权限配置这类页面，与其让 AI 自己发挥，不如一开始就给它一套现成的组件积木。

Ant Design 就是这套积木。 AI 写后台页面，按钮和表单老对不齐？把 Ant Design 这样喂给它配图 2

Ant Design 是什么

如果你没听过 Ant Design，它是一个企业后台常用的 UI 组件库，蚂蚁开源的。

按钮、输入框、表单、表格、弹窗、上传、日期选择器、分页、菜单……这些后台高频组件，它已经做成了现成模块。 AI 写后台页面，按钮和表单老对不齐？把 Ant Design 这样喂给它配图 3

AI 要做的事情，从「自己画一个按钮」变成「拿现成 Button、Form、Table 组合业务页面」。

这对 Vibe Coding 很有用。AI 可以很快的把需求变成代码，但没有边界时，它会顺手造样式：margin 随便写，按钮尺寸随便定，表单布局按当下理解来。

Ant Design 最近补的 AI 相关工具，价值就在这里：给 AI 设边界，少让它自由发挥。

AI 写后台页面，按钮和表单老对不齐？把 Ant Design 这样喂给它配图 4

按需取用

官方现在给了 For Agents、design.md、LLMs.txt、MCP Server、CLI 五种用法，你可以按需取用。

你遇到的问题	用哪个
与一段开箱即用的提示词	For Agents
想让页面更像 Ant Design 默认风格	design.md
AI 工具不支持 MCP，但能读长文档	`LLMs.txt`
Coding 工具里想让 Agent 自己查文档	MCP Server
内网、离线、不能实时访问官网	CLI

只想让 AI 少乱画：先喂 design.md

design.md 是给 AI 看的设计语言说明。

它会告诉 AI：Ant Design 默认主题的颜色、圆角、字体、间距、阴影，以及常见组件应该怎么用。

你可以把这段放到需求前面：

这个项目使用 Ant Design。
先阅读 https://ant.design/design.md，并按 Ant Design 的视觉语言生成界面。
按钮、输入框、表格、弹窗等基础控件优先使用 Ant Design，不要手写一套新的组件样式。

这一步解决的是「别让 AI 开始自由设计」。

但要注意，design.md 讲的是 Ant Design 默认风格。如果你们项目改过主题色、圆角、字号，最好把项目里的 theme token、ConfigProvider 配置，或者一两个已有页面代码一起给 AI。

否则它只能更像 Ant Design，未必更像你们自己的系统。

不知道组件名？打开官网，看图复制

官方文章里推荐"写页面时精确指定组件名"，但这对没有前端开发经验的人来说不现实。

谁会天天记 <Form.Item>、Table rowSelection 这些东西？我连 div 和 header 的关系都还没搞懂呢，你让我记这些？这不开玩笑？

所以我找到一个更简单的办法：打开 Ant Design 组件页，看图选。

比如表单页面，看这个：

https://ant.design/components/form-cn

里面已经有基础表单、搜索表单、动态字段、弹窗表单、校验、上传等示例。你看到哪个接近自己的需求，就复制示例代码给 AI，再加业务描述：

参考这段 Ant Design Form 示例，改成订单筛选表单。
字段包括：订单号、客户名称、订单状态、创建时间。
要求一行 4 个字段，查询和重置按钮靠右，移动端自动换行。

这比「请使用某某组件」好用多了。

你给 AI 的不是组件名，而是可视化参照物：页面长什么样、交互是什么、代码大概怎么写，官方示例已经摆在那里了。

用 Coding 工具：再配 MCP

如果你用 Cursor、VS Code、Claude Code、Codex 这类工具，MCP 会更省事。

配好以后，Agent 写代码时可以自己查组件列表、Props、完整文档、示例代码、Design Token、版本差异。

配置大概是这样：

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/cli", "mcp"]
    }
  }
}

以后你可以直接在需求里写：

这个页面使用 Ant Design。
不确定组件 API 时，先查 antd MCP，再写代码。

不支持 MCP，或者是离线开发环境怎么办

如果工具不支持 MCP，但能读取 URL，可以用 LLMs.txt：

先阅读 https://ant.design/llms-full-cn.txt，理解 Ant Design 组件用法，再根据我的需求生成页面。

它更像一次性把文档交给 AI。小任务、一次性页面，用这个就够了。

如果开发环境在内网，不能让 AI 实时访问官网，就用 CLI。

@ant-design/cli 的官方文档说，组件元数据会随包安装到本地。装好后，AI 可以在终端里查资料：

npm install -g @ant-design/cli

antd info Button
antd doc Form
antd demo Select basic
antd token DatePicker
antd changelog 4.24.0 5.0.0 Select
antd design.md --lang zh

这类方式适合客户现场、内网开发、受限环境。

如果机器完全不能访问 npm，就需要先在有网环境准备包，或者走公司内网 npm 源。

如果你想更省事一点

官方提供一段开箱即用的提示词，让任何 AI 编程 Agent 高效使用 Ant Design：

“
这个版本可能包含破坏性变更，组件 API、约定、文件结构都可能与你训练数据中的内容不同。在编写任何代码之前，请先阅读 https://ant.design/docs/react/for-agents-cn.md 和 https://raw.githubusercontent.com/ant-design/ant-design-cli/main/skills/antd/SKILL.md，留意弃用提示，并按照说明使用 Ant Design。

如果你可以安装 skills，请运行：
npx skills add ant-design/ant-design-cli
”

然后再写业务需求：

做一个订单管理页：
上面是筛选区，字段有订单号、客户、状态、时间；
中间是订单表格，支持分页、状态标签、操作按钮；
点击“查看”后，右侧抽屉展示订单详情；
所有基础控件用 Ant Design，不要自己写按钮和输入框样式。

这会提高不少效率

页面统一非常影响返工成本。

现在AI 写一个页面很快。但经过多轮次对话后，问题开始出现：筛选区不一致、按钮文案不一致、弹窗位置不一致、空状态不一致、表格操作区不一致。

单看都不是大问题，合在一起就会变成一堆细节债。

Ant Design 这些 AI 入口的用处，就是把 AI 的发挥范围收窄：视觉有 design.md，用法有组件文档，自动查询有 MCP，离线环境有 CLI，人类选组件有官网示例。

别上来直接就开始让 AI 写页面。

先给 AI 积木，再让它搭房子。

以上就是这次的侦察。

如果对你有用，顺手点个赞 +「♥️」。

想第一时间收到前线情报，关注「硅基斥候S01」。我们，下次侦察见。

AI 写后台页面，按钮和表单老对不齐？把 Ant Design 这样喂给它配图 5