高性能的 Zig GPU UI 框架。Signal、样式配方、Flex / Grid 和 DevTools,写起来像 Web;Metal 渲染、完整的文本与输入法,跑起来是原生应用——ReleaseSmall 打包的 Hello Button.app 只有 1.7 MB。A high-performance GPU UI framework for Zig. Signals, style recipes, flex / grid and DevTools feel like the web; Metal rendering and a complete text and IME path ship a native app — a ReleaseSmall Hello Button.app is 1.7 MB.

5 分钟上手Start in 5 minutes
01 / SIGNALS不是虚拟 DOM。Not a virtual DOM.0:00 / 1:34
HELLO, ZENIT

一个文件,
一扇原生窗口。
One file.
One native window.

examples/hello_button/main.zig 的完整源码,和它编译出的 .app。窗口里的画面由 E2E harness 录制:在真实窗口里点了三次按钮。The complete source of examples/hello_button/main.zig, and the .app it compiles to. The window footage is recorded by the E2E harness, clicking the button three times in the real window.

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
窗口Window
640 × 480 · Metal
.app
1.7 MB · ReleaseSmall
录制Recorded by
E2E harness
/01
1.7MB
Hello Button .app 体积(ReleaseSmall)Hello Button .app (ReleaseSmall)
/02
51
录制过的组件 storyRecorded component stories
/03
2,026
内置 Lucide 图标Bundled Lucide icons
/04
60fps
Debug 构建交互目标Debug-build interaction target
AI SKILL · 给 Claude Code / 任何 AgentFOR CLAUDE CODE / ANY AGENT

让 AI 写出
地道的 zenit 界面。
Teach your agent
to write real zenit UI.

zenit-ui-dev 是一份从 zenit 框架本身和一个基于 zenit 的生产级 macOS 编辑器的开发历史中提炼的 Agent Skill:组件选型、样式三层、Signal 用法、原生集成、截图自验,以及几十条“坑 → 原因 → 正确做法”。放进 ~/.claude/skills,Agent 写 zenit 代码时自动加载。zenit-ui-dev is an Agent Skill distilled from the zenit framework and from the history of a production macOS editor built on it: component choice, the three styling layers, Signals, native integration, screenshot self-checks, and dozens of pitfall → cause → fix entries. Drop it in ~/.claude/skills and your agent loads it whenever it writes zenit code.

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
解压到Unzip into
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev
推荐工作流 · PENCIL + SKILLRECOMMENDED WORKFLOW · PENCIL + SKILL
推荐搭配 Pencil,设计 + AI 一起开发Pair it with Pencil: design, then build with AI

我们推荐用 Pencil 画界面,再让 Agent 结合本 Skill 实现。.pen 的 Flex 布局、间距、圆角、字号和 lucide 图标与 zenit 的模型很接近;Skill 里附了字段映射表和 design_diff 比对工具,方便 Agent 按数值而不是凭感觉还原。We recommend designing in Pencil and letting your agent build it with this Skill. Flex layout, spacing, radii, type sizes and lucide icons in a .pen file sit close to zenit’s model; the Skill includes a field mapping and a design_diff tool so the agent ports by the numbers rather than by eye.

  1. 01.penPencil 设计稿Pencil design
  2. 02MCPAgent 读取精确数值Agent reads exact values
  3. 03zig组件 + token 写出 zenit 代码zenit code from widgets + tokens
  4. 04diff截图与设计稿数值比对Numeric diff against the design
01 / 核心能力CAPABILITIES

从窗口到像素,
全链路原生。
Native from
window to pixel.

没有 WebView,没有虚拟 DOM。UI 树输出扁平的 DisplayItem 列表,由 Metal 渲染器直接消费。No WebView, no virtual DOM. The UI tree emits a flat DisplayItem list consumed directly by the Metal renderers.

Metal GPU 渲染Metal GPU rendering

render · gpu

三缓冲的 SDF、文本与图片渲染器;GPU 完成与 CPU 布局重叠进行。Triple-buffered SDF, text and image renderers; GPU completion overlaps CPU layout.

LabelCount ← dirtyButtonBox

Signal 精确更新Fine-grained Signals

Signal · Memo · createEffect

不重建树、不做 diff。依赖直接定位到订阅它的节点。No tree rebuilds, no diffing. A dependency reaches exactly the nodes that read it.

baselinex-height
Aa字ع

文本与输入法Text & IME

text · text_core

Unicode 17、UAX #9 双向文本、UAX #29 字素边界,以及端到端的 preedit / commit。Unicode 17, UAX #9 bidi, UAX #29 grapheme boundaries, and end-to-end preedit / commit.

Click megetByRole("button")

真实窗口 E2EReal-window E2E

ui.devtools · harness

语义定位、虚拟光标、Retina 截图与 drawable 直录 MP4;DevTools 随框架提供。Semantic locators, a virtual cursor, Retina screenshots and drawable-level MP4. DevTools included.

02 / 组件COMPONENTS

51 个组件,
每一个像素都由 GPU 绘制。
51 components,
every pixel on the GPU.

浏览全部组件Browse all components
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 在真实窗口中截取。每一块都能直接点、输入和滚动。Not a mockup: this is the Component Wall story in Storybook, captured from a real window by the E2E harness. Every tile can be clicked, typed into and scrolled.
03 / 架构ARCHITECTURE

应用只依赖
两个公开模块。
Your app imports
two modules.

平台、渲染与文本细节由下层接管。边界在构建期强制执行:越界导入会直接编译失败。Platform, rendering and text live below. The boundary is enforced at build time — a forbidden import fails to compile.

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

Debug 构建下的基本交互目标——包括数万行虚拟列表中的滚动、光标移动与输入。M 系列 Apple silicon。The Debug-build target for basic interactions — including scrolling, cursor movement and typing in virtual lists with tens of thousands of rows. M-series Apple silicon.

01三缓冲实例 + frame sync,GPU 与 CPU 布局并行Triple-buffered instances; frame sync overlaps GPU with CPU layout
02带子树缓存的显示列表,静态子树跳过布局与绘制Display list with subtree caching — static subtrees skip layout and render
03layout_isolation 边界截断 dirty 级联layout_isolation boundaries cut dirty cascades
04延迟调度器把重任务切分到多帧A deferred scheduler chunks heavy work across frames
摘自影片第 08 章:悬停和加载动画只标脏自己的子树,其余从缓存重放;什么都没变时,run loop 休眠——0 帧,0 GPU 工作。数字测于 M4 Max · 5K · 60 Hz。From chapter 08 of the film: hover and a spinner dirty only their own subtree, the rest replays from cache; when nothing changes, the run loop sleeps — 0 frames, 0 GPU work. Measured on M4 Max · 5K · 60 Hz.
05 / QUICK START

三步,得到第一扇窗口。Three steps to
your first window.

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

模板已含 build.zig、build.zig.zon 与 src/main.zig。Ships with build.zig, build.zig.zon and src/main.zig.

连接依赖Wire the dependency02
zenit.attach(zenit_dep, exe);

一次调用接入 ui、zenit_app、原生桥与系统框架。One call wires ui, zenit_app, the native bridges and frameworks.

构建并运行Build and run03
zig build run
zig build app

直接运行,或生成可双击的 macOS .app。Run directly, or produce a double-clickable macOS .app.

06 / 状态STATUS

坦白说,
它还没准备好。
Honestly, it is
not ready yet.

0.1.0 是第一个公开版本,但 1.0 之前 API 仍可能变化。请固定到明确的版本,每一处破坏性变更都记录在 MIGRATION 中。0.1.0 is the first public release, but the API can still change before 1.0. Pin an exact version; every breaking change is recorded in MIGRATION.

macOS · Apple Silicon
NSWindow + Metal,持续验证的唯一平台NSWindow + Metal — the only continuously tested platform
可用Supported
Linux · Windows
后端已占位,尚不可用Backends are stubbed; not yet usable
计划中Planned
无障碍Accessibility
a11y 树与 NSAccessibility 桥已实现,但 61 个组件中 0 个通过 VoiceOver 验收。需要无障碍的产品请勿使用。The a11y tree and NSAccessibility bridge exist, but 0 of 61 components have passed VoiceOver acceptance. Do not ship where accessibility is required.
不支持Not supported
公开 APIPublic API
1.0 之前允许破坏性变更,逐条记录在 MIGRATION;v1.0.0 起冻结Breaking changes allowed before 1.0, each recorded in MIGRATION; frozen at v1.0.0
pre-1.0
07 / 案例SHOWCASE

看它在真实
应用里的样子。
See it in
a real app.

来自社区的现有案例,真实窗口原样录屏。Existing projects from the community, recorded in real windows.

查看全部案例Open the showcase
08 / 正在用 ZENIT 构建BUILT WITH ZENIT

框架无限,
等你解锁创意。
An open framework.
Your idea next.

已经有合作伙伴在用 zenit 开发无限画板设计软件、代码编辑 IDE、视频下载器……同一套节点、样式与原生能力,撑得起完全不同的产品。Partners are already building an infinite-canvas design tool, a code editor IDE, a video downloader… One set of nodes, styles and native capabilities, carrying very different products.

合作伙伴开发中In development by a partner
无限画板设计软件Infinite-canvas design tool

缩放、拖拽与多选都跑在 GPU 上,液态玻璃浮层叠在画布之上。Zoom, drag and multi-select on the GPU, with liquid-glass chrome floating over the canvas.

GPU canvasGlassBoxmagnify
合作伙伴开发中In development by a partner
代码编辑 IDECode editor IDE

大文件虚拟滚动、完整输入法、多窗口命令面板与原生菜单。Virtualized large files, a full IME path, multi-window palettes and native menus.

VirtualListIMEmulti-window
合作伙伴开发中In development by a partner
视频下载器Video downloader

后台任务与进度反馈,下载完成直接拖到 Finder。Background jobs with live progress, and finished files dragged straight into Finder.

workersProgressdrag-out
下一个Next
你的创意Your idea

框架无限,等你解锁。从一扇窗口开始,做你想做的 Mac 应用。The framework is open-ended. Start with one window and build the Mac app you have in mind.

开始构建Start building
开源计划 · 招募中OPEN SOURCE · NOW RECRUITING

对 UI 性能和动效
有极致追求?
加入我们。
Obsessed with UI
performance and motion? Join us.

无论你是设计师还是开发者——一帧掉帧、一次光标延迟、一条不对劲的缓动曲线都放不下的人,正是我们在找的伙伴。一起把 zenit 打磨成最受欢迎、拥有最好开发体验(DX)与性能的 GPU 原生 UI 框架。Designer or developer — if a dropped frame, a caret one tick late or an easing curve that feels off bothers you, you are exactly who we are looking for. Help us polish zenit into the most loved GPU-native UI framework, with the best DX and performance.

设计师Designers组件视觉、动效曲线、交互细节Component visuals, motion curves, interaction details
开发者Developers渲染、布局、文本引擎与性能Rendering, layout, the text engine and performance