OwnUI

挑一种主色，
拿到一整套 UI

中性灰阶打底，主色只留一个可换的接口。下面这些组件都是真的——调色、换深浅色，它们立刻跟着走；定下来之后，导出 CSS、Token、整个起步工程，连同一套让 AI 照着写的规范。

v1.0.0 零依赖 · 零构建 40+ 组件 AI 可读

调色台

改动直接写到 <html> 的 --ui-p-*；组件引用的是语义层，所以下面全部一起跟随，不需要逐个改。

预设主色 / 自定义

主色标签默认标签进行中

开关

提示条

浅底、描边、图标同样派生自主色。

深浅色用右上角开关切换，预览实时跟随换肤机制怎么实现的

导出这一版

当前 中性墨黑 · 浅色，导出内容随主色与主题实时重算

starter.zip 解压即用：library/ 五个文件 + 这一版主题 + 示例页 + 一页完整样板 + AGENTS.md 与组件契约。

后两样是给 AI 看的——放进你的项目，它写的页面就自然是这套 UI。「复制分享链接」会把当前主色与主题编码进 URL 的 hash，别人打开就是同一个配色。

Getting started

三步接入

把三个文件拷进你的项目，按顺序引入。不需要构建工具，也不需要任何 npm 依赖—— Vue、React、Svelte、原生页面、服务端模板都一样用。

HTML · 引入顺序不可颠倒

<!-- 1. 设计 Token：颜色 / 字阶 / 间距 / 圆角 / 阴影 / 动效 -->
<link rel="stylesheet" href="library/tokens.css">
<!-- 2. 基础层：重置、排版、布局、工具类 -->
<link rel="stylesheet" href="library/base.css">
<!-- 3. 组件层：全部组件样式 -->
<link rel="stylesheet" href="library/components.css">
<!-- 4. 行为层：弹层、提示、标签页等交互（可选，纯原生） -->
<script src="library/components.js"></script>

两种用法

声明式：写 data 属性即可

<button class="ui-btn ui-btn--primary"
        data-ui="modal" data-target="#demoModal">打开弹窗</button>

<div class="ui-modal" id="demoModal">…</div>

命令式：调 API

UI.toast({ message: '已保存', type: 'success' });
UI.modal.open('#demoModal');
const ok = await UI.confirm({
  title: '确认删除该记录？',
  description: '删除后不可恢复。'
});

与框架集成：所有行为都通过 ui:* 自定义事件对外广播（如 ui:submit、ui:change、ui:sort），在任意框架里用原生事件监听即可接管，无需为组件库再包一层。

AI ready

让 AI 照着这套 UI 写

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

四份文件，各管一段

llms.txt 索引：这是什么、关键文件在哪

AGENTS.md 规则与禁止清单，AI 会自动读到

ownui.spec.json 每个组件的准确写法与代码片段

golden.html 一页完整样板，照抄改比读规则有效

看完整规范粘贴 HTML 自检

禁止清单（节选）

AI 的默认先验在这套库里全是错的，必须明说。

不存在 container / row / col-* / d-flex
         btn / btn-primary / el-button

不写裸色值  #2563EB / rgb(...)
不写非字阶字号  13px / 15px
不写 !important
不自己写 position:fixed 做弹层

规范不是手抄的：ownui.spec.js 是唯一数据源，构建脚本从它生成 llms.txt 与 ownui.spec.json，并反向校验components.css 里的真实类名—— 声明了却没有、有却没收录，两个方向都会报。这样规范不会悄悄过期。

挑一种主色，拿到一整套 UI

三步接入

让 AI 照着这套 UI 写

挑一种主色，
拿到一整套 UI