Primeros pasos · Desarrollo asistido por IA

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.

4 min de lectura

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 Ver 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

~/.claude/skills/
└── zenit-ui-dev/
    ├── SKILL.md
    ├── references/
    └── tools/

O descomprímela en el proyecto y haz commit (compartida con el equipo):

Descomprime en

.claude/skills/
└── zenit-ui-dev/
    ├── SKILL.md
    ├── references/
    └── tools/

Other agents

# 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

ArchivoContenido

SKILL.mdPunto de entrada: disparadores, flujo de trabajo, reglas estrictas, tablas de decisión y qué reference leer en cada caso

references/app-architecture.mdCapas de una app grande, a partir de un editor en producción: estado, vistas, comandos, servicios

references/components.mdEl catálogo ui.widgets, las dos formas de mount y una tabla elemento de diseño → componente

references/macos-native.mdMenús, atajos, diálogos de archivo, portapapeles, arrastrar y soltar, multiventana, IME

references/pencil-design.mdDiseños de Pencil (pen.dev): leer valores vía MCP, mapeo de campos, diff numérico de capturas

references/performance.mdListas virtuales, niveles de dirty, textos grandes, hilos en segundo plano y el hilo principal

references/pitfalls.mdSíntoma → causa → solución, recopilado del historial de correcciones de zenit y de una app en producción

references/project-setup.mdProyecto nuevo, build.zig / build.zig.zon, empaquetado .app, reenvío de opciones de build

references/state-reactivity.mdbindState / cx.on, Signal / Memo / Effect, ciclo de vida y limpieza de Scope

references/styling.mdCapas Token → styles.zig → recipe, temas y la vía de escape ui.arb

references/ui-tree-layout.mdNodos, layout Flex, tamaños, actualizar nodos, visibilidad, coordenadas

references/verification.mdEl ciclo de autoverificación del agente: build, captura, harness E2E, DevTools, logs

tools/design_diff.tsDiff numérico entre el PNG del diseño y la captura de la app, con sugerencias accionables

tools/png.tsDecodificador PNG sin dependencias usado por design_diff

tools/shot.tsCaptura 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

FLUJO RECOMENDADO · PENCIL + SKILL

Combínala con Pencil: diseña y luego construye con IA

Te recomendamos diseñar en Pencil 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

01.penDiseño en Pencil
02MCPEl agente lee valores exactos
03zigCódigo zenit con widgets + tokens
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.

Terminal

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/<nodeId>.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:

Prompts

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 directamente.

← PREV

Estructura del proyecto

Árbol de UI y layout