编辑文档 - 别再让前端帮你搭后台原型了：这个 Ant Design 脚手架 Skill，产品经理自己 2 分钟搞定

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

之前关注的一个公众号"白天做白日梦"发了一个 Ant Design 风格的 Skill，挺方便的。我拿下来改了一下，加了很多东西，现在变成了一个完整的后台管理脚手架，配了完整的 `SKILL.md`。

**`SKILL.md` 在 `C:\Users\Administrator\.agents\skills\ant-design-system\` 下**，是 pi 可以直接加载的 skill 文件。里面写好了 ADS 命名空间所有 API 的用法、页面注册模式、组件规范——AI 读了这个文件，不用你多解释一句话。

## 这玩意是给谁用的

**不是给你手动拖拽搭页面的**。这玩意是扔给 AI Agent 用的——你把整个 `ant-design-system` 目录挂给 pi（或者把 `SKILL.md` 喂给 OpenCode、Claude Code、Hermes、Codex），然后说一句"加一个产品管理页面"，它读了 SKILL.md 里的代码规范，自己把页面写出来。

骨架、数据层、组件层、路由都搭好了。AI 只需要照着 `users.js` 的模式再加一个页面文件就行。

所有操作点了就有反馈，数据不连真实后端，全走 `localStorage`，刷新不丢。产品经理拿去给客户演示，不需要后台接口。

## 原来是啥样的

原版就是一个单页面的 HTML，好看是好看，但就是个演示，不能真用。

我把它拆了，做了这几件事：

**加了 10 个真实可用的业务页面**。数据看板、工作台、用户管理、角色管理、文章管理、分类、标签、订单管理、系统配置、个人中心。每个页面都能点、能增删改查、数据存 `localStorage`。

**做了共享代码层**。所有页面共享同一套侧边栏、顶栏、弹窗、表格。纯 HTML + CSS + JS，但数据互通、视觉一致。

**把代码规范做成了 AI 能读懂的格式**。`ADS.page()` 怎么注册、`ADS.store` 怎么读写、`ADS.components` 怎么调——所有模式都在那，AI 看一眼就会照着写。

## AI 工具怎么接

这个 Skill 最核心的文件不是脚手架代码，是 **`SKILL.md`**。里面写了 `ADS.*` 所有 API 的用法、页面注册模式、组件调用方式、表单校验规则、设计变量规范。AI 读了这个文件就知道怎么干活了。

**pi**（最优）：把 `ant-design-system` 整个目录放到 Agent 的 skills 目录下（或者通过 `addSkill` 工具加载）。pi 加载后自动理解 `ADS.*` 命名空间、页面注册模式、组件规范。你对它说"在 scaffold 里加一个产品管理页面"，pi 已经知道该用 `ADS.page()` 注册、用 `ADS.store` 读写、用 `ADS.components.select()` 做下拉。不需要额外解释。

**OpenCode**：把 `scaffold/` 目录加到 workspace，同时把 `SKILL.md` 的内容贴在 prompt 里或者作为 reference 文件。说"看了 SKILL.md 的规范了吗？在 scaffold 里加一个产品管理 CRUD"。OpenCode 理解 ADS 模式后，按规范生成 `pages/products.js`，自动用 `ADS.page()` 注册、`ADS.store` 读写数据。

**Claude Code**：`claude --print` 模式，把 `SKILL.md` 和 `assets/js/pages/users.js` 一起喂进去，说"按 SKILL.md 的规范，加一个产品管理页面"。Claude 读完规范后生成的代码风格跟现有页面一致。

**Hermes**：配置 `ant-design-system/SKILL.md` 作为 Hermes 的 context skill 文件。Hermes 启动时自动加载，你说"加一个产品管理"它就知道用 ADS 模式。

**Codex CLI**：把 `SKILL.md` 加到 codex 的上下文里，或者在 `codex exec` 模式下指向 scaffold 目录，说"按 ADS 规范加产品管理页面"。

关键在于：**SKILL.md 写清楚了 AI 需要知道的一切**——ADS 命名空间、组件 API、页面注册、数据流。任何 AI 工具只要读了这份文件，就能正确生成代码。不用自己写 prompt 解释。

## 核心架构

所有代码挂在全局 `window.ADS` 下：

```
ADS.store        ← 数据层（localStorage 封装，AI 读得懂）
ADS.components   ← UI 组件（弹窗/确认/消息/下拉）
ADS.utils        ← 工具函数
ADS.layout       ← 布局服务
ADS.router       ← Hash 路由
ADS.menu         ← 菜单配置
ADS.page         ← 页面注册
```

每个页面只用四步：`ADS.store.list()` 拿数据 → 渲染 DOM → `ADS.store.add/update/remove` 改数据 → 重新渲染。模式固定，AI 不需要猜。

## 10 个页面列表

| 页面 | 文件 | 主要功能 |
|------|------|---------|
| 数据看板 | `dashboard.js` | 统计卡片 + 图表 + 最近动态 |
| 工作台 | `workspace.js` | 待办 + 快捷入口 |
| 用户管理 | `users.js` | 用户列表 + 新建/编辑/删除 + 角色分配 |
| 角色管理 | `roles.js` | 角色 + 权限配置 |
| 文章管理 | `articles.js` | 多状态/分类/标签 Tabs + 搜索 |
| 分类管理 | `categories.js` | 分类 CRUD |
| 标签管理 | `tags.js` | 标签 CRUD |
| 订单管理 | `orders.js` | 订单详情弹窗 + 发货改状态 |
| 系统配置 | `settings.js` | 站点信息/安全设置/数据管理 |
| 个人中心 | `profile.js` | 3 个 Tab + 个人资料 |

## AI 加一个新页面的流程

你跟 AI 说"加一个产品管理"。AI 先读 `SKILL.md` 了解 ADS 规范和组件 API，然后做四件事：

1. **读 `mock-data.js`** — 知道数据格式，加种子数据
2. **参考 `users.js`** — 复制页面注册、列表渲染、弹窗表单的模式
3. **改 `menu.js`** — 菜单加一项
4. **改 `index.html`** — 引入新页面的 `<script>`

刷新浏览器，菜单出现，点进去 CRUD 全有。不需要你写任何代码。

**核心区别**：你不需要给 AI 写解释 prompt——SKILL.md 已经说了该用什么组件、怎么注册页面、数据怎么存。AI 读完自动按规范写。

## 几个有意思的设计

**所有下拉框统一用自定义组件**。`ADS.components.select()` 保证蓝边框 + 阴影 + 选中态全站一致。AI 知道这个接口后不会写出原生 select。

**表单校验不用库**。`data-required`、`data-pattern` 这些属性就够了。AI 读一遍 `store.js` 和 `components.js` 就懂。

**主题色改一个变量全站变**。`tokens.css` 里改 `--color-primary`，所有按钮和链接自动换色。AI 知道这个约定后，生成的代码不会硬编码颜色。

**数据层全在 `localStorage`**。页面不需要后端接口就能演示。所有按钮可点、所有表单可填、所有数据可删。给客户看原型的时候不用解释"这里还没接"。

## 适合谁

**用 AI Agent 写代码的开发者**——你只需要给它一个目标，它按 ADS 规范把页面写好。你改改逻辑、调调样式就行。

**要给客户快速演示后台的产品经理**——AI 生成、localStorage 存数据、所有操作可点击。不需要后端介入。

**做原型验证的独立开发者**——Skill 扔给 pi 或 OpenCode，说需求让它出页面。不合适就删掉重来，0 成本。

项目在 `C:\Users\Administrator\.agents\skills\ant-design-system\scaffold\`。你也可以把路径当 prompt 的一部分直接扔给 AI。

如果你也用 AI Agent 写过什么页面，评论区聊聊你给了它什么指令。

## 福利

**点亮小红心 + 评论区回复「后台脚手架」，我把完整 Skill 和脚手架源码打包发你**。

包括 10 个页面的完整代码、共享组件层、ADS 数据层、tokens.css 设计变量。拿到手双击就能跑，扔给 AI Agent 就能接着加页面。

如果你手头正好在搭什么后台原型，直接把这个 Skill 扔给 OpenCode 或 pi，告诉它你要什么页面。

扔给 OpenCode 或 pi，告诉它你要什么页面。

摘要

标签多个标签用逗号分隔

分类