--- title: "zenit — Zig 的 GPU 原生桌面 UI 框架" description: "zenit 是用 Zig 编写的 GPU 原生桌面 UI 框架：Metal 渲染、细粒度 Signal 响应式、完整 Unicode 文本与 IME、51 个组件和 E2E…" url: https://zenit.z.express/zh language: zh-CN alternate_en: https://zenit.z.express/index.md alternate_es: https://zenit.z.express/es.md alternate_ja: https://zenit.z.express/ja.md alternate_ko: https://zenit.z.express/ko.md alternate_fr: https://zenit.z.express/fr.md alternate_de: https://zenit.z.express/de.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- [v0.1.0-alpha尚未发布正式包](https://zenit.z.express/zh#status)macOS ·[Zig 0.15.2](https://ziglang.org) AI Skill让 Agent 写地道的 zenit 界面 # 像 Web 一样开发， 由 GPU 原生绘制 高性能的 Zig GPU UI 框架。Signal、样式配方、Flex / Grid 和 DevTools，写起来像 Web；Metal 渲染、完整的文本与输入法，跑起来是原生应用——ReleaseSmall 打包的 Hello Button.app 只有 1.7 MB。 [5 分钟上手](https://zenit.z.express/zh/docs/guide/getting-started) [Video](https://zenit.z.express/media/film/zenit-film-4k.mp4?v=74579aad19) 01 / SIGNALSSignal，而不是虚拟 DOM。0:00 / 1:53 HELLO, ZENIT ## 一个文件， 一扇原生窗口。 examples/hello\_button/main.zig 的完整源码，和它编译出的 .app。窗口里的画面由 E2E harness 录制：在真实窗口里点了三次按钮。 main.zigexamples/hello\_button/ ```zig 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 [Video](https://zenit.z.express/media/hello-button.mp4?v=b4d2b8f8a0) 窗口 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 代码时自动加载。 [下载 Skill.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[安装与说明](https://zenit.z.express/zh/docs/guide/ai-skill) 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 解压到 ```zig ~/.claude/skills/zenit-ui-dev/ ``` [Pencilpen.dev](https://www.pen.dev/) 推荐工作流 · PENCIL + SKILL 推荐搭配 Pencil，设计 + AI 一起开发 我们推荐用 [Pencil](https://www.pen.dev/) 画界面，再让 Agent 结合本 Skill 实现。.pen 的 Flex 布局、间距、圆角、字号和 lucide 图标与 zenit 的模型很接近；Skill 里附了字段映射表和 design\_diff 比对工具，方便 Agent 按数值而不是凭感觉还原。 [了解 Pencil](https://www.pen.dev/) [设计稿还原流程](https://zenit.z.express/zh/docs/guide/ai-skill#pencil) 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 绘制。 [浏览全部组件](https://zenit.z.express/zh/components) [![zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate](https://zenit.z.express/media/component-wall.webp?v=7e700be72a)](https://zenit.z.express/zh/components) 这不是设计稿：它是 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。 三缓冲实例 + frame sync，GPU 与 CPU 布局并行 带子树缓存的显示列表，静态子树跳过布局与绘制 `layout_isolation` 边界截断 dirty 级联 延迟调度器把重任务切分到多帧 [Video](https://zenit.z.express/media/film/efficient.mp4?v=d765f1d5e1) 摘自影片第 08 章：悬停和加载动画只标脏自己的子树，其余从缓存重放；什么都没变时，run loop 休眠——0 帧，0 GPU 工作。数字测于 M4 Max · 5K · 60 Hz。 05 / QUICK START ## 三步，得到第一扇窗口。 获取模板01 ```zig 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 ```zig zenit.attach(zenit_dep, exe); ``` 一次调用接入 ui、zenit\_app、原生桥与系统框架。 构建并运行03 ```zig zig build run zig build app ``` 直接运行，或生成可双击的 macOS .app。 06 / 状态 ## 坦白说， 它还没准备好。 0.1.0 是第一个公开版本，但 1.0 之前 API 仍可能变化。请固定到明确的版本，每一处破坏性变更都记录在 MIGRATION 中。 [MIGRATION](https://github.com/version-next/zenit/blob/HEAD/docs/MIGRATION.md) [version-next/zenit](https://github.com/version-next/zenit) macOS · Apple Silicon NSWindow + Metal，持续验证的唯一平台 可用 Linux · Windows 后端已占位，尚不可用 计划中 无障碍 a11y 树与 NSAccessibility 桥已实现，但 61 个组件中 0 个通过 VoiceOver 验收。需要无障碍的产品请勿使用。 不支持 公开 API 1.0 之前允许破坏性变更，逐条记录在 MIGRATION；v1.0.0 起冻结 pre-1.0 07 / 案例 ## 看它在真实 应用里的样子。 来自社区的现有案例，真实窗口原样录屏。 [查看全部案例](https://zenit.z.express/zh/showcase) [0:18社区案例代码 IDE（原生）接入真实的 TypeScript 语言服务：边输入边补全、方法签名提示、悬浮文档。补全列表、提示浮层、编辑区和小地图全部由 zenit 在 GPU 上绘制。](https://zenit.z.express/zh/showcase#code-intelligence)[1:09社区案例所见即所得 Markdown 编辑器一个完整的原生文档编辑器：边写边排版，列表、清单、引用和多级编号即时成形；表格、流程图、代码块和截图都活在同一份文档里。没有 Electron，没有 WebView，每个像素都由 zenit 绘制。](https://zenit.z.express/zh/showcase#ui-tour) [2:22社区案例合成器课堂与钢琴卷帘（原生）一边做音色，一边学合成：内嵌课程一步步讲解滤波器，每个旋钮都实时驱动滤波曲线、包络与频谱；再在 7 轨钢琴卷帘里写完一首歌，每个音都由应用自带的合成器发声。点击播放，带声音观看。](https://zenit.z.express/zh/showcase#timbre) 08 / 正在用 ZENIT 构建 ## 框架无限， 等你解锁创意。 已经有合作伙伴在用 zenit 开发无限画板设计软件、代码编辑 IDE、视频下载器……同一套节点、样式与原生能力，撑得起完全不同的产品。 合作伙伴开发中 无限画板设计软件 缩放、拖拽与多选都跑在 GPU 上，液态玻璃浮层叠在画布之上。 GPU canvasGlassBoxmagnify 合作伙伴开发中 代码编辑 IDE 大文件虚拟滚动、完整输入法、多窗口命令面板与原生菜单。 VirtualListIMEmulti-window 合作伙伴开发中 视频下载器 后台任务与进度反馈，下载完成直接拖到 Finder。 workersProgressdrag-out [下一个 你的创意 框架无限，等你解锁。从一扇窗口开始，做你想做的 Mac 应用。 开始构建](https://zenit.z.express/zh/docs/guide/getting-started) ## 从第一扇 窗口开始。 [阅读快速开始](https://zenit.z.express/zh/docs/guide/getting-started) [开发手册](https://zenit.z.express/zh/docs)[AI 开发 Skill](https://zenit.z.express/zh/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) 开源计划 · 招募中 ### 对 UI 性能和动效 有极致追求？ 加入我们。 无论你是设计师还是开发者——一帧掉帧、一次光标延迟、一条不对劲的缓动曲线都放不下的人，正是我们在找的伙伴。一起把 zenit 打磨成最受欢迎、拥有最好开发体验（DX）与性能的 GPU 原生 UI 框架。 设计师组件视觉、动效曲线、交互细节 开发者渲染、布局、文本引擎与性能 [加入开源计划](https://github.com/version-next/zenit)[贡献指南](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)