OwnUI v1.0.0
去自检
AI 规范

让 AI 照着这套 UI 写

不写规范,AI 只会按它的先验生成 Bootstrap 或 Tailwind 的类名——类名不对、Token 不对、状态方向也不对。 这一页把「怎么用」写成了机器可读的文件,随 starter.zip 一起进你的项目。

4 份文件 单数据源生成 与 CSS 双向对账
Artifacts

四份文件,各管一段

由浅入深。AI 不必一次读完四份:它按需读——不知道这是什么就读第一份, 要写具体组件时只看第三份里那一段。

llms.txt
索引。这是什么、关键文件在哪。遵循 llmstxt.org 约定,AI 抓站时第一个读到的就是它。
AGENTS.md
规则。禁止清单 + 必须做的事 + 决策表 + 15 个组件的完整片段。放在你项目根目录,支持它的编辑器会自动读到。
ownui.spec.json
契约。每个组件的类名、变体、尺寸、状态、必需属性、ARIA、事件与代码片段。机器读的那一份。
llms-full.txt
上面几份拼成一整份。只在你没有文件读取能力、必须一次性把规范贴进对话时用它。
怎么用:把 AGENTS.md 和 ownui.spec.json 放进项目根目录就行, 多数编码助手会自动读取前者。其余两份不用放——llms.txt 是给爬站场景的, llms-full.txt 是给「只能贴文本」的场景的。 首页导出的 starter.zip 里这四份都已经放好了。
Guardrails

禁止与必须

禁止清单比允许清单有效。AI 的默认先验是 Bootstrap 与 Tailwind, 不明确否定,它就会写出 container / d-flex / btn-primary。

必须做的事

这些不是风格偏好。每一条漏了都有具体后果。

Tokens

Token 与刻度

三层结构,你自己的样式里应该只出现中间那层。猜不到的是「hover 该取哪一档」与「10px 为什么不能用」, 所以这些都以表格写死。

常用语义 token
状态方向
间距 · 圆角 · 字阶
Decisions

什么场景用什么

类名往往能写对,选错容器才是更常见的错——用卡片包一行操作、用两列表格展示一对「标签 - 值」、 用 ui-row 排一排按钮(它不换行,窄屏就溢出)。

Inventory

组件速查

标 ★ 的是高频组件,下一节给了完整片段;其余知道基类名与用途即可,写法照抄这些结构。

Snippets

常用片段

AI 最擅长模仿而不是推导。给它一段能直接改的完整结构,比给它十条规则都管用。

Wiring

钩子与事件

声明式交互全靠 data-ui。「写了没反应」绝大多数是把属性挂错了元素, 或者漏了配套的第二个属性。

对外事件

都是 ui:* 自定义事件,冒泡到 document。

命令式 API
Why it stays true

规范为什么不会过期

规范最大的风险不是写得不全,是和代码脱节:三个月后 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
改了库就要改规范:新增组件、改类名、调整刻度之后,都要重跑上面这条命令并提交产物。 忘了跑的话,最后一次提交里的规范就停留在旧状态——这正是这套机制要防的事。