之前关注的一个公众号"白天做白日梦"发了一个 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 |
|
|
|
categories.js |
|
|
|
tags.js |
|
|
|
orders.js |
|
|
|
settings.js |
|
|
|
profile.js |
|
AI 加一个新页面的流程
你跟 AI 说"加一个产品管理"。AI 先读 SKILL.md 了解 ADS 规范和组件 API，然后做四件事：
- 读
mock-data.js— 知道数据格式，加种子数据 - 参考
users.js— 复制页面注册、列表渲染、弹窗表单的模式 - 改
menu.js— 菜单加一项 - 改
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，告诉它你要什么页面。
