--- title: "Skill de desarrollo IA — Docs de zenit Zig UI" description: "Un manual de desarrollo para Claude Code y otros agentes de IA. Con ella instalada, un agente que escribe UI con zenit recurre primero a componentes…" url: https://zenit.z.express/es/docs/guide/ai-skill language: es alternate_en: https://zenit.z.express/docs/guide/ai-skill.md alternate_zh: https://zenit.z.express/zh/docs/guide/ai-skill.md alternate_ja: https://zenit.z.express/ja/docs/guide/ai-skill.md alternate_ko: https://zenit.z.express/ko/docs/guide/ai-skill.md alternate_fr: https://zenit.z.express/fr/docs/guide/ai-skill.md alternate_de: https://zenit.z.express/de/docs/guide/ai-skill.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # La Skill zenit UI dev Un manual de desarrollo para Claude Code y otros agentes de IA. Con ella instalada, un agente que escribe UI con zenit recurre primero a componentes existentes, aplica estilos con tokens y recipes, gestiona el estado según los ciclos de vida de zenit, y compila y captura su propio trabajo antes de entregarlo. ## Descarga El archivo es una carpeta estándar de Agent Skill: un punto de entrada `SKILL.md` breve con reglas y tablas de decisión, y los detalles repartidos en `references/`, que el agente lee solo cuando los necesita. [Descargar la Skill.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Ver SKILL.md](https://zenit.z.express/downloads/zenit-ui-dev.SKILL.md) 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 ## Instalación 1. **Colócala en una carpeta de skills** Para ti, usa `~/.claude/skills/` (todos los proyectos). Para un equipo, súbela al `.claude/skills/` del repo para que la tenga todo el que lo clone. 2. **Reinicia la sesión del agente** Claude Code escanea las skills al iniciar la sesión. Abre una sesión nueva; `/skills` debería mostrar `zenit-ui-dev`. 3. **Pide lo que necesites como siempre** Cualquier tarea de UI con zenit la carga automáticamente; también puedes decir “usa la skill zenit-ui-dev”. Tras descargarla, descomprímela en tu carpeta de usuario (todos los proyectos): Descomprime en ```zig ~/.claude/skills/ └── zenit-ui-dev/ ├── SKILL.md ├── references/ └── tools/ ``` O descomprímela en el proyecto y haz commit (compartida con el equipo): Descomprime en ```zig .claude/skills/ └── zenit-ui-dev/ ├── SKILL.md ├── references/ └── tools/ ``` ```sh # Codex and other agents that read AGENTS.md: unpack into the repo and reference it unzip -oq zenit-ui-dev.zip -d .agents/skills echo '- zenit UI: read .agents/skills/zenit-ui-dev/SKILL.md before writing UI code' >> AGENTS.md ``` > NOTE > > **Actualízala junto con zenit.** zenit puede romper su API antes de la 1.0. Tras actualizar zenit, vuelve a descargar la Skill sobre la carpeta anterior. La Skill indica la versión de zenit a la que corresponde, y si un agente detecta que la API del proyecto difiere, confía en el código fuente. ## Qué contiene | Archivo | Contenido | | --- | --- | | `SKILL.md` | Punto de entrada: disparadores, flujo de trabajo, reglas estrictas, tablas de decisión y qué reference leer en cada caso | | `references/app-architecture.md` | Capas de una app grande, a partir de un editor en producción: estado, vistas, comandos, servicios | | `references/components.md` | El catálogo ui.widgets, las dos formas de mount y una tabla elemento de diseño → componente | | `references/macos-native.md` | Menús, atajos, diálogos de archivo, portapapeles, arrastrar y soltar, multiventana, IME | | `references/pencil-design.md` | Diseños de Pencil (pen.dev): leer valores vía MCP, mapeo de campos, diff numérico de capturas | | `references/performance.md` | Listas virtuales, niveles de dirty, textos grandes, hilos en segundo plano y el hilo principal | | `references/pitfalls.md` | Síntoma → causa → solución, recopilado del historial de correcciones de zenit y de una app en producción | | `references/project-setup.md` | Proyecto nuevo, build.zig / build.zig.zon, empaquetado .app, reenvío de opciones de build | | `references/state-reactivity.md` | bindState / cx.on, Signal / Memo / Effect, ciclo de vida y limpieza de Scope | | `references/styling.md` | Capas Token → styles.zig → recipe, temas y la vía de escape ui.arb | | `references/ui-tree-layout.md` | Nodos, layout Flex, tamaños, actualizar nodos, visibilidad, coordenadas | | `references/verification.md` | El ciclo de autoverificación del agente: build, captura, harness E2E, DevTools, logs | | `tools/design_diff.ts` | Diff numérico entre el PNG del diseño y la captura de la app, con sugerencias accionables | | `tools/png.ts` | Decodificador PNG sin dependencias usado por design\_diff | | `tools/shot.ts` | Captura cualquier app zenit mediante file RPC (Retina) | **Componentes antes que hacerlo a mano** Asigna cada elemento del diseño a un componente existente de ui.widgets, para que el agente no reconstruya un Button a base de boxes. **Ciclos de vida bien hechos** Reglas para bindState, pub deinit, la limpieza de Scope y los cambios de página: la solución directa a las fugas, dobles liberaciones y punteros colgantes más comunes. **Revisar antes de entregar** Hace que el agente compile, ejecute, capture y compare con lo pedido, en vez de quedarse en “compila”. **Trampas de una app real** Una lista de problemas extraída del historial de correcciones de una app en producción, cada uno con su causa y la forma correcta de resolverlo. ## Recomendado: diseña en Pencil [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/) 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 1. **Conecta el MCP de Pencil** Activa el servidor MCP de Pencil en tu agente y abre el archivo .pen. La Skill solo lee .pen a través del MCP, que resuelve las variables de diseño y los tamaños calculados: las dos cosas que necesita una reproducción fiel. 2. **Lee valores, no píxeles** El agente obtiene primero gap, padding, radio, tamaño de fuente y color con `Get(nodeId, { resolveVariables: true })`, y luego los traslada a zenit: `fill_container → .fill()`, `chevron-down → ui.icons.chevron_down`. 3. **Compara hasta que coincida** Exporta el diseño a scale 2, captura la ventana real con `tools/shot.ts`, y `tools/design_diff.ts` informa del desplazamiento, la diferencia de tamaño, un mapa de calor y la desviación de la paleta; el agente corrige a partir de las pistas, unos 5 s por ronda. ```sh SKILL=~/.claude/skills/zenit-ui-dev bun $SKILL/tools/design_diff.ts --self-test ZENIT_E2E_FILE_RPC_DIR=$RPCDIR bun $SKILL/tools/shot.ts /tmp/actual.png bun $SKILL/tools/design_diff.ts /tmp/design/.png /tmp/actual.png ``` ## Cómo usarla No hace falta sintaxis especial. Describe la UI o el problema; estos son algunos prompts que funcionan bien: ``` Lee el tablero "Settings" del archivo .pen abierto con el Pencil MCP, reconstrúyelo en zenit como ventana de ajustes y entrégamelo cuando design_diff supere 90. Añade a esta app una ventana de ajustes con zenit: lista de categorías a la izquierda, formulario a la derecha y cambios aplicados al momento. Migra los estilos escritos a mano en src/views/sidebar.zig a styles.zig + una recipe. El scroll va a tirones cuando el árbol de archivos tiene 50.000 nodos: encuentra la causa, corrígela y enséñame una captura al terminar. ``` > TIP > > **Indica cómo comprobarlo.** Añade “muéstrame una captura” o “verifícalo con E2E” a la petición y el agente seguirá el ciclo de autoverificación de la Skill, así que lo que recibes ya ha sido revisado de verdad. ## De dónde sale Las reglas provienen de dos proyectos: el propio framework zenit (API pública, ejemplos, catálogo de componentes, herramientas de test) y un editor para macOS en producción construido sobre zenit (capas de una app grande, integración nativa e historial de correcciones). Los ejemplos de código se toman, siempre que es posible, de código que compila en esos repos y coinciden con este manual. Las fuentes están en el repo del sitio, en `skill/zenit-ui-dev/`, y se empaquetan al compilar con `scripts/pack-skill.mjs`. También puedes [leer SKILL.md](https://zenit.z.express/downloads/zenit-ui-dev.SKILL.md) directamente.