mcpField
U
uikitml

uikitml

github.com/drawcall-ai开发13117 次安装13 周前更新
代码仓库

关于 uikitml

UIKitML 是用于 pmndrs/uikit 的类 HTML 标记语言，面向构建空间 3D、VR 和 AR 界面的开发者。它提供 Shadcn 风格与 Meta Horizon 风格组件，并可通过 CLI 验证、渲染或转换标记。

主要功能

  1. 01编写空间 3D 与 XR 界面
  2. 02使用默认或 Horizon 组件套件
  3. 03支持 HTML 标签与 Lucide 图标
  4. 04验证、渲染并转换标记
  5. 05输出 React Three Fiber 或 Three.js 代码

适用场景

  1. 01为 VR/AR 项目构建界面
  2. 02检查 UIKitML 标记与诊断信息
  3. 03生成界面预览 PNG
  4. 04转换标记以用于 React Three Fiber 或 Three.js

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/drawcall-ai/uikitml --skill uikitml

安装后在 Claude Code 中输入/uikitml确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
default-kit.md
horizon-kit.md
lucide-kit.md

详细介绍

UIKitML

使用场景

对于空间 3D UI 或面向 VR/AR 设备的 UI，请使用 UIKitML。对于不面向 VR/AR 设备的项目中的 HUD UI，请直接使用 HTML。

UIKitML 是适用于 pmndrs/uikit 的严格类 HTML 标记语言。使用一个根组件。顶层的 <style> 块和 <meta preferred-color-scheme="dark|light|system" /> 可以与根组件并列。

组件库提供 PascalCase 组件标签。默认组件库采用 Shadcn 风格；Horizon 组件库适用于 Meta Horizon iOS 风格的 3D/XR 界面。两个组件库都支持 Lucide 图标和 HTML 标签。要查看准确的组件名称和属性，请阅读对应的参考文档。

<meta preferred-color-scheme="dark" />
<style>
  .card { width: 360; flex-direction: column; gap: 12; padding: 16; border-radius: 12; }
  .row { flex-direction: row; align-items: center; gap: 8; }
</style>

<Card class="card">
  <CardHeader class="row"><Activity width="18" height="18" /><CardTitle>Status</CardTitle></CardHeader>
  <CardContent><Badge>Live</Badge></CardContent>
</Card>

语言

  • 标签必须准确，且区分大小写。
  • 在 UIKitML 中使用 kebab-case 属性名；它们会转换为 camelCase UIKit 属性。
  • 使用显式闭合标签或自闭合标签。
  • 裸属性的值为 true：<Button disabled />。
  • class 会转换为 classList；id 会原样传递，也可用于样式设置。
  • 内联样式使用与 <style> 相同的声明语法：<Card style="padding: 16; gap: 8" />。
  • font-family 接受捆绑的 MSDF 字体名称：crimson-text、fira-code、inconsolata、inter、lato、libre-baskerville、merriweather、montserrat、nunito、open-sans、playfair-display、poppins、raleway、roboto、source-code-pro、space-mono 和 work-sans。
  • 布局采用 UIKit 弹性布局：display 支持 flex（默认值）、none 和 contents；定位支持静态/默认流式布局以及 position-type="absolute"。
  • 文本会去除首尾空白，并解码 HTML 实体。
  • 纯 .uikitml 无法表达回调或图标构造函数等函数属性。

支持的样式表选择器：.class、#id、:hover、:active、:focus、:sm、:md、:lg、:xl、:2xl 和 > *。

始终支持 HTML 标签：div、p、span、li、h1-h6、ol、ul、a、button、img、svg、video、input、textarea。它们分别映射到基础 UIKit 的 Container/Image/Svg/Video/Input/Textarea 行为。

Lucide 图标始终可用，形式为 PascalCase 自闭合标签，例如 <Search /> 或 <Activity />。

CLI

CLI 属于 @drawcall/uikitml 包。请按名称调用该包：

npx @drawcall/uikitml validate '<Card><Badge>Live</Badge></Card>'
npx @drawcall/uikitml render card.uikitml --width 800 --height 600 --color-scheme dark --out card.png
npx @drawcall/uikitml convert card.uikitml --name Card --color-scheme dark --out Card.tsx
npx @drawcall/uikitml convert card.uikitml --to three --name createCard --out card.ts
npx @drawcall/uikitml feedback 'unexpected render output for valid Horizon markup'

输入解析顺序为：- 表示标准输入，其次是文件路径，最后是内联源代码。不指定 --kit 时会选择默认组件库；对于 Meta Horizon iOS 风格的 3D/XR 组件库，请使用 --kit horizon。无论使用哪个组件库，都可以使用 Lucide 图标和 HTML 标签。

validate 会打印诊断信息；无论 UIKitML 有效与否，退出码均为 0。CLI/运行时故障会打印 error ...，并以非零状态码退出。

转换目标：默认的 convert 会生成 @react-three/fiber 代码；convert --to three 会生成原始 Three.js 代码。IWSDK 可直接使用 .uikitml 文件，因此无需转换。

请使用 feedback 报告非用户问题：疑似 UIKitML 错误、意外的解析/渲染/转换行为、误导性诊断信息或其他工具故障。请简洁描述问题，并在已知时注明命令、预期行为和实际行为。

参考文档

  • references/default-kit.md：Shadcn 风格默认组件库的组件目录。
  • references/horizon-kit.md：Meta Horizon OS 3D/XR 组件库的组件目录。
  • references/lucide-kit.md：Lucide 图标名称列表。

评论

支持 Markdown