omniui-design-tokens

OmniUI：设计令牌（tokens/）+ omniui CLI（token fetch、sandbox render、evaluate visual）+ 内置 Vite / Sandpack 预览壳。面向 Vue 3 + Tailwind，运行时注入 --omni-* CSS 变量。

快速开始（npm，推荐）

npm install omniui-design-tokens
npx omniui token fetch --scene landing --theme light

全局安装后可直接使用 omniui。

首次执行 omniui sandbox render 时，若内置 sandbox/ 或 sandpack-host/ 尚未安装依赖，CLI 会在对应目录自动运行 npm install（仅需一次）。

npm 包内仅包含 CLI 运行所需文件（dist/、tokens/、sandbox/、sandpack-host/、scripts/lib/ 等）；完整 docs/、examples/、SKILL.md 在 GitHub 仓库。

快速开始（clone 仓库）

git clone https://github.com/h-yu-u/omniui-design-tokens.git
cd omniui-design-tokens
npm install
node dist/cli.js token fetch --scene landing --theme light

仓库含已构建的 dist/ 时，克隆后不必先跑 npm run build。修改 src/ 的维护者需执行 npm run build 并提交 dist/（见 docs/publish.md）。

文档

| | | |--|--| | Cursor / Claude 技能约定 | SKILL.md | | 安装与构建 | docs/setup.md | | npm 发布与 dist 策略 | docs/publish.md | | CLI | docs/cli.md | | 路由与 omni-preview.json | docs/routing.md、docs/omni-preview.schema.md |

预览示例

仅 clone 仓库时可用技能包根目录脚本（依赖 examples-preview/，未打进 npm 包）：

npm run preview:example -- examples/MultiPageDemo landing light

npm 包用户用沙箱预览（5173 等，见终端输出）：

npx omniui sandbox render --app-dir ./path/to/MyApp --scene landing --theme light
# 或单文件 .vue
npx omniui sandbox render --component-file ./path/to/Page.vue --scene app --theme dark

包内附带 examples/MultiPageDemo/ 可作 omni-preview.json 参考；若从 node_modules/omniui-design-tokens 引用，请使用绝对路径或带 .. 的相对路径（解析规则见 docs/cli.md）。

目录结构（摘要）

• src/、dist/ — CLI 源码与编译产物
• tokens/ — 场景 × 主题 JSON
• examples-preview/ —本地 Vite 预览器（仅仓库，preview:example）
• sandbox/、sandpack-host/ — sandbox render 使用的宿主（随 npm 包发布）
• examples/ — 官方示例（随 npm 包发布）
• scripts/lib/ — omni-preview 同步逻辑（随 npm 包发布）

License

MIT