让 AI 照着这套 UI 写
不写规范,AI 只会按它的先验生成 Bootstrap 或 Tailwind 的类名——类名不对、Token 不对、状态方向也不对。 这一页把「怎么用」写成了机器可读的文件,随 starter.zip 一起进你的项目。
四份文件,各管一段
由浅入深。AI 不必一次读完四份:它按需读——不知道这是什么就读第一份, 要写具体组件时只看第三份里那一段。
llms.txt
AGENTS.md
ownui.spec.json
llms-full.txt
AGENTS.md 和 ownui.spec.json 放进项目根目录就行,
多数编码助手会自动读取前者。其余两份不用放——llms.txt 是给爬站场景的,
llms-full.txt 是给「只能贴文本」的场景的。
首页导出的 starter.zip 里这四份都已经放好了。
禁止与必须
禁止清单比允许清单有效。AI 的默认先验是 Bootstrap 与 Tailwind,
不明确否定,它就会写出 container / d-flex / btn-primary。
这些不是风格偏好。每一条漏了都有具体后果。
Token 与刻度
三层结构,你自己的样式里应该只出现中间那层。猜不到的是「hover 该取哪一档」与「10px 为什么不能用」, 所以这些都以表格写死。
什么场景用什么
类名往往能写对,选错容器才是更常见的错——用卡片包一行操作、用两列表格展示一对「标签 - 值」、
用 ui-row 排一排按钮(它不换行,窄屏就溢出)。
组件速查
标 ★ 的是高频组件,下一节给了完整片段;其余知道基类名与用途即可,写法照抄这些结构。
常用片段
AI 最擅长模仿而不是推导。给它一段能直接改的完整结构,比给它十条规则都管用。
钩子与事件
声明式交互全靠 data-ui。「写了没反应」绝大多数是把属性挂错了元素,
或者漏了配套的第二个属性。
都是 ui:* 自定义事件,冒泡到 document。
规范为什么不会过期
规范最大的风险不是写得不全,是和代码脱节:三个月后 CSS 改了类名,文档还写着旧的, AI 照着写就是错的——比没有规范更糟。
这一页看到的每个字、以及四份导出文件,都来自 docs/ownui.spec.js 一个文件。
页面渲染与文件生成走的是同一组函数,不可能出现「页面上说 A、导出的文件里说 B」。
tools/build-ai-files.mjs 会把规范里声明过的每个类名拿去
components.css 与 base.css 里核对。
声明了却不存在就直接构建失败——这种错最危险,因为页面只是静默变形,不报错。
# 生成四份产物(AGENTS.md / llms.txt / llms-full.txt / ownui.spec.json)
node tools/build-ai-files.mjs
# 只校验不写文件,提交前或 CI 里用
node tools/build-ai-files.mjs --check