--- title: "zenit — framework de UI de escritorio nativo de GPU para Zig" description: "zenit es un framework de UI de escritorio nativo de GPU para Zig: renderizado con Metal, Signals de grano fino, texto Unicode completo e IME, 51 componentes…" url: https://zenit.z.express/es language: es alternate_en: https://zenit.z.express/index.md alternate_zh: https://zenit.z.express/zh.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-alphaAún sin versión estable](https://zenit.z.express/es#status)macOS ·[Zig 0.15.2](https://ziglang.org) AI SkillEnseña zenit a tu agente # Desarrolla como en la web. Renderiza en la GPU Un framework de UI por GPU de alto rendimiento para Zig. Signals, recetas de estilo, flex / grid y DevTools se sienten como la web; el renderizado con Metal y un camino completo de texto e IME entregan una app nativa: una Hello Button.app en ReleaseSmall ocupa 1.7 MB. [Empieza en 5 minutos](https://zenit.z.express/es/docs/guide/getting-started) [Video](https://zenit.z.express/media/film/zenit-film-4k.mp4?v=74579aad19) 01 / SIGNALSSignals, no un DOM virtual.0:00 / 1:53 HELLO, ZENIT ## Un archivo. Una ventana nativa. El código completo de examples/hello\_button/main.zig y la .app que produce al compilar. Las imágenes de la ventana las graba el E2E harness, que pulsa el botón tres veces en la ventana real. 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) Ventana 640 × 480 · Metal .app 1.7 MB · ReleaseSmall Grabado con E2E harness /01 1.7MB Hello Button .app (ReleaseSmall) /02 51 Stories de componentes grabadas /03 2,026 Iconos Lucide incluidos /04 60fps Objetivo de interacción en Debug AI SKILL · PARA CLAUDE CODE / CUALQUIER AGENTE ## Enseña a tu agente a escribir UI zenit de verdad. zenit-ui-dev es una Agent Skill destilada del propio framework zenit y del historial de un editor de macOS en producción construido con él: elección de componentes, las tres capas de estilo, Signals, integración nativa, autoverificación por capturas y decenas de entradas trampa → causa → solución. Colócala en ~/.claude/skills y tu agente la cargará cada vez que escriba código zenit. [Descargar la Skill.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Guía de instalación](https://zenit.z.express/es/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 Descomprime en ```zig ~/.claude/skills/zenit-ui-dev/ ``` [Pencilpen.dev](https://www.pen.dev/) FLUJO RECOMENDADO · PENCIL + SKILL Combínala con Pencil: diseña y luego construye con IA Te recomendamos diseñar en [Pencil](https://www.pen.dev/) y dejar que tu agente lo construya con esta Skill. El layout Flex, los espaciados, los radios, los tamaños de texto y los iconos lucide de un archivo .pen están muy cerca del modelo de zenit; la Skill incluye una tabla de correspondencia de campos y una herramienta design\_diff para que el agente traslade el diseño con números y no a ojo. [Sobre Pencil](https://www.pen.dev/) [El ciclo de diseño a código](https://zenit.z.express/es/docs/guide/ai-skill#pencil) 1. 01.penDiseño en Pencil 2. 02MCPEl agente lee valores exactos 3. 03zigCódigo zenit con widgets + tokens 4. 04diffDiff numérico contra el diseño 01 / CAPACIDADES ## Nativo de la ventana al píxel. Sin WebView, sin DOM virtual. El árbol de UI emite una lista plana de DisplayItem que consumen directamente los renderers de Metal. ### Renderizado GPU con Metal `render · gpu` Renderers de SDF, texto e imagen con triple búfer; la finalización en la GPU se solapa con el layout en la CPU. LabelCount ← dirtyButtonBox ### Signals de grano fino `Signal · Memo · createEffect` Sin reconstruir el árbol, sin diffing. Una dependencia llega exactamente a los nodos que la leen. baselinex-height Aa字ع ### Texto e IME `text · text_core` Unicode 17, bidi UAX #9, límites de grafemas UAX #29 y preedit / commit de extremo a extremo. Click megetByRole("button") ### E2E en ventana real `ui.devtools · harness` Localizadores semánticos, un cursor virtual, capturas Retina y MP4 a nivel de drawable. DevTools incluidas. 02 / COMPONENTES ## 51 componentes, cada píxel en la GPU. [Ver todos los componentes](https://zenit.z.express/es/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/es/components) No es un mockup: es la story Component Wall de Storybook, capturada desde una ventana real por el E2E harness. Cada pieza se puede pulsar, escribir y desplazar. 03 / ARQUITECTURA ## Tu app importa dos módulos. La plataforma, el renderizado y el texto viven por debajo. El límite se impone en tiempo de compilación: un import prohibido no compila. error:import of 'render' is forbidden from L0 your appL0 ui + zenit\_apppublic · L1 system\_sdkrendergputext text\_coreicon\_ir NSWindow · CAMetalLayer · CoreTextmacOS 04 / RENDIMIENTO 60fps 0 ms16.6 ms / frame1 s El objetivo en Debug para las interacciones básicas, incluidos el desplazamiento, el movimiento del cursor y la escritura en listas virtuales de decenas de miles de filas. Apple silicon serie M. Instancias con triple búfer; la sincronización de frames solapa la GPU con el layout en la CPU Display list con caché de subárboles: los subárboles estáticos se saltan layout y render Los límites `layout_isolation` cortan las cascadas de dirty Un planificador diferido reparte el trabajo pesado entre varios frames [Video](https://zenit.z.express/media/film/efficient.mp4?v=d765f1d5e1) Del capítulo 08 de la película: el hover y un spinner solo marcan como dirty su propio subárbol y el resto se reproduce desde la caché; cuando nada cambia, el run loop duerme: 0 frames, 0 trabajo de GPU. Medido en M4 Max · 5K · 60 Hz. 05 / QUICK START ## Tres pasos hasta tu primera ventana. Obtén la plantilla01 ```zig git clone https://github.com/version-next/zenit.git cp -R zenit/templates/minimal-app ./myapp ``` Incluye build.zig, build.zig.zon y src/main.zig. Conecta la dependencia02 ```zig zenit.attach(zenit_dep, exe); ``` Una sola llamada conecta ui, zenit\_app, los puentes nativos y los frameworks. Compila y ejecuta03 ```zig zig build run zig build app ``` Ejecuta directamente o genera una .app de macOS que se abre con doble clic. 06 / ESTADO ## Sinceramente, aún no está listo. 0.1.0 es la primera versión pública, pero la API aún puede cambiar antes de 1.0. Fija una versión exacta; cada cambio incompatible queda registrado en 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: la única plataforma probada de forma continua Compatible Linux · Windows Los backends son esqueletos; aún no se pueden usar Previsto Accesibilidad El árbol a11y y el puente NSAccessibility existen, pero 0 de 61 componentes han superado la validación con VoiceOver. No lo uses donde se requiera accesibilidad. No compatible API pública Se permiten cambios incompatibles antes de 1.0, cada uno registrado en MIGRATION; se congela en v1.0.0 pre-1.0 07 / EJEMPLOS ## Míralo en una app real. Proyectos existentes de la comunidad, grabados en ventanas reales. [Ver los ejemplos](https://zenit.z.express/es/showcase) [0:18ComunidadIDE de código (nativo)Conectado a un servidor de lenguaje TypeScript real: autocompletado mientras escribes, ayuda de firmas y documentación al pasar el cursor. La lista de sugerencias, los popovers, el editor y el minimapa los dibuja zenit en la GPU.](https://zenit.z.express/es/showcase#code-intelligence)[1:09ComunidadEditor Markdown WYSIWYGUn editor de documentos nativo completo: listas, listas de tareas, citas y numeración multinivel toman forma mientras escribes, y tablas, diagramas de flujo, bloques de código y capturas conviven en el mismo documento. Sin Electron, sin WebView: cada píxel lo dibuja zenit.](https://zenit.z.express/es/showcase#ui-tour) [2:22ComunidadCurso de síntesis y piano roll (nativo)Aprende síntesis mientras diseñas sonidos: un curso integrado explica los filtros paso a paso, y cada perilla mueve en vivo la curva del filtro, las envolventes y el espectro. Después escribe la canción en un piano roll de 7 pistas: cada nota suena con el sintetizador de la propia app. Haz clic para verlo con sonido.](https://zenit.z.express/es/showcase#timbre) 08 / HECHO CON ZENIT ## Un framework abierto. Tu idea, la siguiente. Ya hay socios creando con zenit una herramienta de diseño de lienzo infinito, un IDE de código, un descargador de vídeos… Un mismo conjunto de nodos, estilos y capacidades nativas que sostiene productos muy distintos. En desarrollo por un socio Herramienta de diseño de lienzo infinito Zoom, arrastre y selección múltiple en la GPU, con paneles de vidrio líquido flotando sobre el lienzo. GPU canvasGlassBoxmagnify En desarrollo por un socio IDE de edición de código Archivos grandes virtualizados, un camino completo de IME, paletas multiventana y menús nativos. VirtualListIMEmulti-window En desarrollo por un socio Descargador de vídeos Tareas en segundo plano con progreso en vivo, y archivos terminados que se arrastran directamente al Finder. workersProgressdrag-out [Lo siguiente Tu idea El framework no tiene techo. Empieza con una ventana y construye la app de Mac que tienes en mente. Empieza a construir](https://zenit.z.express/es/docs/guide/getting-started) ## Empieza con una ventana. [Lee el inicio rápido](https://zenit.z.express/es/docs/guide/getting-started) [Manual para desarrolladores](https://zenit.z.express/es/docs)[Skill de desarrollo IA](https://zenit.z.express/es/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) CÓDIGO ABIERTO · BUSCAMOS GENTE ### ¿Te obsesiona el rendimiento y el movimiento de la UI? Únete. Diseñador o desarrollador: si te molesta un frame perdido, un cursor que llega un tick tarde o una curva de easing que no se siente bien, eres justo a quien buscamos. Ayúdanos a pulir zenit hasta convertirlo en el framework de UI nativo de GPU más querido, con la mejor DX y el mejor rendimiento. DiseñadoresVisual de componentes, curvas de movimiento, detalles de interacción DesarrolladoresRenderizado, layout, el motor de texto y el rendimiento [Únete en GitHub](https://github.com/version-next/zenit)[Guía de contribución](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)