# @drawcall/uikitml 中文文档

规范地址：https://npmcn.com/package/%40drawcall/uikitml/

版本：0\.1\.8
npm 元数据更新时间：2026-07-29T19:44:02.438Z
中文译文更新时间：2026-11-12T19:21:25.666Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40drawcall/uikitml
原文对照：https://npmcn.com/package/%40drawcall/uikitml/?lang=original
项目主页：https://github.com/drawcall-ai/uikitml#readme
源码仓库：https://github.com/drawcall-ai/uikitml

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.6 MB，87 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：13 个
- peer 依赖：@pmndrs/uikit ^1\.0\.71，three \>=0\.162
- 首次发布：2026-05-15T21:49:22.182Z
- 最新版本发布：2026-07-29T19:44:02.055Z
- 近 30 天下载量：25267（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

![UIKitML logo](https://npmcn.com/package/%40drawcall/uikitml/assets/uikitml-logo.png)

## 安装

```sh
npm install @drawcall/uikitml
```

也可以使用：`pnpm add @drawcall/uikitml`、`yarn add @drawcall/uikitml`、`bun add @drawcall/uikitml`

## README

![UIKitML logo](https://npmcn.com/package/%40drawcall/uikitml/assets/uikitml-logo.png)

# UIKitML 设备

生成三.js,React 三纤维, IWSDK 等相接的相接相机 更多使用 HTML 语法。 完全适合AI的工作流程.

```sh
npx skills add drawcall-ai/uikitml
```

## 这是什么

UIKitML是空间UI的一种类似于HTML的小格式. AI探员可以写出来, 验证,预览,并转换为真实的3D接口代码.

```text
prompt / Pencil design / .pen file
  -> .uikitml
  -> PNG preview
  -> Three.js / React Three Fiber / IWSDK / more
```

用于AI生成的XR面板,仪表板,控制和从设计到代码 工作流程.

## 为什么

-   严格标记,所以特工有明显的错误.
-   由Lucide所建,默认,地平线,和浸入UI参考.
-   与Pencil合作良好:检查一个设计,生成UIKitML,渲染,比较,转换.

## 快速启动

```sh
uikitml validate ./screen.uikitml --kit horizon
uikitml render ./screen.uikitml --kit horizon --out screen.png
uikitml convert ./screen.uikitml --kit horizon --name Screen --out Screen.tsx
uikitml convert ./screen.uikitml --to three --kit horizon --name createScreen --out screen.ts
```

代码 :

```ts
import { parse, generate } from "@drawcall/uikitml";

const result = parse("<div><h1>Hello XR</h1></div>");
if (result.success) generate(result.ast);
```

## 自定义 TTF 字体

声明带有 CSS 的运行时 TTF 字体 `@font-face`,然后在 属性、 内置样式或样式表规则:

```xml
<style>
  @font-face {
    font-family: "Brand Sans";
    src: url("/fonts/BrandSans-Regular.ttf");
    font-weight: 400;
  }

  @font-face {
    font-family: "Brand Sans";
    src: url("/fonts/BrandSans-Bold.ttf") format("truetype");
    font-weight: 700;
  }

  .title { font-family: "Brand Sans"; font-weight: 700; }
</style>

<h1 class="title">Launch ready</h1>
```

UIKitML 支持 `.ttf` URL 和 CSS 服务器 `font-family`, (中文(简体) ), `src`,以及 `font-weight` 解说. `font-weight` 默认为 `normal`运行时间和 香草 三.js 转换使用 `TTFLoader`。反应转换用途 `useTTF` 并且要求 `Suspense` 边界.

见 [最小编辑器来源](https://npmcn.com/package/%40drawcall/uikitml/examples/minimal-editor/src/default.uikitml) (单位:千美元) 工作多重量的例子.

## 常见问题

### 如何安装 @drawcall/uikitml？

在项目目录运行 npm install @drawcall/uikitml，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@pmndrs/uikit（^1\.0\.71）、three（\>=0\.162）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 uikitml，可以用 npx uikitml 直接运行。

### @drawcall/uikitml 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @drawcall/uikitml 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @drawcall/uikitml 可以商用吗？

@drawcall/uikitml 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @drawcall/uikitml 的下载量有多少？

根据 npm 官方下载统计，@drawcall/uikitml 在 2026/10/13 – 2026/11/11 这 30 天内被下载 25,267 次，日均约 842 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @drawcall/uikitml 还在维护吗？

最新版本 0\.1\.8 发布于 2026/07/30（3 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/05/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。