UIKitML 设备

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

npx skills add drawcall-ai/uikitml

这是什么

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

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

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

为什么

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

快速启动

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

代码 :

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,然后在 属性、 内置样式或样式表规则:

<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 边界.

见 最小编辑器来源 (单位:千美元) 工作多重量的例子.