高性能的 Zig GPU UI 框架。Signal、样式配方、Flex / Grid 和 DevTools,写起来像 Web;Metal 渲染、完整的文本与输入法,跑起来是原生应用——ReleaseSmall 打包的 Hello Button.app 只有 1.7 MB。

5 分钟上手
01 / SIGNALSSignal,而不是虚拟 DOM。0:00 / 1:53
HELLO, ZENIT

一个文件,
一扇原生窗口。

examples/hello_button/main.zig 的完整源码,和它编译出的 .app。窗口里的画面由 E2E harness 录制:在真实窗口里点了三次按钮。

main.zigexamples/hello_button/
const std = @import("std");const ui = @import("ui");const App = @import("zenit_app").App; /// 样式表:具名纯函数 + 应用层自定义 recipe,与业务逻辑分离。const S = @import("styles.zig"); const Counter = struct {    n: u32 = 0,    label: ?*ui.Node = null,    buf: [32]u8 = undefined,     pub fn increment(self: *Counter) void {        self.n += 1;        const node = self.label orelse return;        const content = std.fmt.bufPrint(&self.buf, "Clicked {d} times", .{self.n}) catch return;        if (node.getText()) |old| {            var t = old;            t.content = content;            node.setText(t);        }        node.markRenderDirty();    }}; fn mountUI(cx: *ui.Cx, scope: *ui.Scope) anyerror!*ui.Node {    const allocator = cx.allocator;     const counter = try cx.bindState(Counter, .{});    const click = cx.on(Counter, counter, Counter.increment);     const root = try ui.boxStyled(cx, S.root, .{});     try root.appendChild(allocator, try ui.textStyled(cx, S.title, "Hello, zenit!"));     try root.appendChild(allocator, try ui.widgets.Button(.{        .label = "Click me",        .variant = .primary,        .size = .md,        .on_click = click,    }).mount(scope, cx));     // 应用层自定义 recipe(styles.zig 的 PanelRecipe)包住计数文本    const panel = try ui.boxStyled(cx, S.panel(.highlight), .{});    const label = try ui.textStyled(cx, S.counterLabel, "Clicked 0 times");    try panel.appendChild(allocator, label);    try root.appendChild(allocator, panel);    counter.label = label;     return root;} pub fn main() !void {    var gpa = std.heap.GeneralPurposeAllocator(.{}){};    defer _ = gpa.deinit();     const app = try App.init(gpa.allocator(), .{        .window = .{ .width = 640, .height = 480, .title = "Hello Button" },    });    defer app.deinit();     try app.runWith(mountUI);}
Hello Button
窗口
640 × 480 · Metal
.app
1.7 MB · ReleaseSmall
录制
E2E harness
/01
1.7MB
Hello Button .app 体积(ReleaseSmall)
/02
51
录制过的组件 story
/03
2,026
内置 Lucide 图标
/04
60fps
Debug 构建交互目标
AI SKILL · 给 Claude Code / 任何 Agent

让 AI 写出
地道的 zenit 界面。

zenit-ui-dev 是一份从 zenit 框架本身和一个基于 zenit 的生产级 macOS 编辑器的开发历史中提炼的 Agent Skill:组件选型、样式三层、Signal 用法、原生集成、截图自验,以及几十条“坑 → 原因 → 正确做法”。放进 ~/.claude/skills,Agent 写 zenit 代码时自动加载。

zenit-ui-dev/
SKILL.md9.6 KB
references/
app-architecture.md7.2 KB
components.md8.3 KB
macos-native.md8.2 KB
pencil-design.md7.9 KB
performance.md4.1 KB
pitfalls.md8.5 KB
project-setup.md8.1 KB
state-reactivity.md7.8 KB
styling.md5.8 KB
ui-tree-layout.md6.1 KB
verification.md5.7 KB
tools/
design_diff.ts20.6 KB
png.ts3.6 KB
shot.ts3.7 KB
解压到
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev
推荐工作流 · PENCIL + SKILL
推荐搭配 Pencil,设计 + AI 一起开发

我们推荐用 Pencil 画界面,再让 Agent 结合本 Skill 实现。.pen 的 Flex 布局、间距、圆角、字号和 lucide 图标与 zenit 的模型很接近;Skill 里附了字段映射表和 design_diff 比对工具,方便 Agent 按数值而不是凭感觉还原。

  1. 01.penPencil 设计稿
  2. 02MCPAgent 读取精确数值
  3. 03zig组件 + token 写出 zenit 代码
  4. 04diff截图与设计稿数值比对
01 / 核心能力

从窗口到像素,
全链路原生。

没有 WebView,没有虚拟 DOM。UI 树输出扁平的 DisplayItem 列表,由 Metal 渲染器直接消费。

Metal GPU 渲染

render · gpu

三缓冲的 SDF、文本与图片渲染器;GPU 完成与 CPU 布局重叠进行。

LabelCount ← dirtyButtonBox

Signal 精确更新

Signal · Memo · createEffect

不重建树、不做 diff。依赖直接定位到订阅它的节点。

baselinex-height
Aa字ع

文本与输入法

text · text_core

Unicode 17、UAX #9 双向文本、UAX #29 字素边界,以及端到端的 preedit / commit。

Click megetByRole("button")

真实窗口 E2E

ui.devtools · harness

语义定位、虚拟光标、Retina 截图与 drawable 直录 MP4;DevTools 随框架提供。

02 / 组件

51 个组件,
每一个像素都由 GPU 绘制。

浏览全部组件
zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate
这不是设计稿:它是 Storybook 里的 Component Wall story,由 E2E harness 在真实窗口中截取。每一块都能直接点、输入和滚动。
03 / 架构

应用只依赖
两个公开模块。

平台、渲染与文本细节由下层接管。边界在构建期强制执行:越界导入会直接编译失败。

error:import of 'render' is forbidden from L0
your appL0
ui + zenit_apppublic · L1
system_sdkrendergputext
text_coreicon_ir
NSWindow · CAMetalLayer · CoreTextmacOS
04 / 性能
60fps
0 ms16.6 ms / frame1 s

Debug 构建下的基本交互目标——包括数万行虚拟列表中的滚动、光标移动与输入。M 系列 Apple silicon。

01三缓冲实例 + frame sync,GPU 与 CPU 布局并行
02带子树缓存的显示列表,静态子树跳过布局与绘制
03layout_isolation 边界截断 dirty 级联
04延迟调度器把重任务切分到多帧
摘自影片第 08 章:悬停和加载动画只标脏自己的子树,其余从缓存重放;什么都没变时,run loop 休眠——0 帧,0 GPU 工作。数字测于 M4 Max · 5K · 60 Hz。
05 / QUICK START

三步,得到第一扇窗口。

获取模板01
git clone https://github.com/version-next/zenit.git
cp -R zenit/templates/minimal-app ./myapp

模板已含 build.zig、build.zig.zon 与 src/main.zig。

连接依赖02
zenit.attach(zenit_dep, exe);

一次调用接入 ui、zenit_app、原生桥与系统框架。

构建并运行03
zig build run
zig build app

直接运行,或生成可双击的 macOS .app。

06 / 状态

坦白说,
它还没准备好。

0.1.0 是第一个公开版本,但 1.0 之前 API 仍可能变化。请固定到明确的版本,每一处破坏性变更都记录在 MIGRATION 中。

macOS · Apple Silicon
NSWindow + Metal,持续验证的唯一平台
可用
Linux · Windows
后端已占位,尚不可用
计划中
无障碍
a11y 树与 NSAccessibility 桥已实现,但 61 个组件中 0 个通过 VoiceOver 验收。需要无障碍的产品请勿使用。
不支持
公开 API
1.0 之前允许破坏性变更,逐条记录在 MIGRATION;v1.0.0 起冻结
pre-1.0
07 / 案例

看它在真实
应用里的样子。

来自社区的现有案例,真实窗口原样录屏。

查看全部案例
08 / 正在用 ZENIT 构建

框架无限,
等你解锁创意。

已经有合作伙伴在用 zenit 开发无限画板设计软件、代码编辑 IDE、视频下载器……同一套节点、样式与原生能力,撑得起完全不同的产品。

合作伙伴开发中
无限画板设计软件

缩放、拖拽与多选都跑在 GPU 上,液态玻璃浮层叠在画布之上。

GPU canvasGlassBoxmagnify
合作伙伴开发中
代码编辑 IDE

大文件虚拟滚动、完整输入法、多窗口命令面板与原生菜单。

VirtualListIMEmulti-window
合作伙伴开发中
视频下载器

后台任务与进度反馈,下载完成直接拖到 Finder。

workersProgressdrag-out
下一个
你的创意

框架无限,等你解锁。从一扇窗口开始,做你想做的 Mac 应用。

开始构建
开源计划 · 招募中

对 UI 性能和动效
有极致追求?
加入我们。

无论你是设计师还是开发者——一帧掉帧、一次光标延迟、一条不对劲的缓动曲线都放不下的人,正是我们在找的伙伴。一起把 zenit 打磨成最受欢迎、拥有最好开发体验(DX)与性能的 GPU 原生 UI 框架。

设计师组件视觉、动效曲线、交互细节
开发者渲染、布局、文本引擎与性能