# Pen: rebrand y pantallas

Kasy también entrega el design system como archivo de **Pen** (pen.dev — el
mismo producto que antes se llamaba "Pencil"; si ves `pencil` en el nombre de
un paquete o herramienta, es lo mismo). Descarga una carpeta comprimida (el
archivo `.pen` y las imágenes que usa, juntos), descomprímela, abre el `.pen`
en la app de escritorio de Pen, edita colores y fuente, y deja que la IA
sincronice Flutter.

**Enlace de descarga:**
https://xkefozfsrmqjtesiitvk.supabase.co/storage/v1/object/public/design-downloads/Kasy-Design-System.zip

A diferencia de Figma, Pen no tiene una página en la nube para "duplicar":
descargas el zip una vez, lo descomprimes, y el `.pen` de adentro ya es tuyo,
abierto localmente en la app de Pen. **No separes el `.pen` de las imágenes**
— tienen que quedar en la misma carpeta, o el archivo pierde las imágenes.

Pen es solo **una** de las piezas (la otra es Figma — las dos entregan el
mismo resultado, elige la que prefieras). La pantalla Design System en la app
refleja el código; `DESIGN_SYSTEM.md` es el contrato para la IA (regla, no
tabla de colores para editar). En el sitio: docs → Conceptos → Design System.

---

## Qué incluye el proyecto

Después de `kasy new`:

| Archivo | Qué es |
| ------- | ------ |
| `docs/pen-guia.md` | Esta guía offline en el idioma del proyecto |
| `docs/pen-workflow.md` | Reglas para IA (inglés) |
| `docs/figma-guia.md` | La misma guía, pero para Figma |
| `DESIGN_SYSTEM.md` | Contrato del design system para IA/dev |

El design system **no** viene como archivo local ya listo. Usa el enlace de
arriba para descargar tu copia de Pen (o el enlace de duplicate de Figma, si
prefieres esa herramienta).

---

## Descargar la carpeta

1. Abre el enlace de arriba y descarga `Kasy-Design-System.zip`.
2. Descomprímelo — obtienes una carpeta con el archivo `.pen` **y** las
   imágenes que usa, juntos. No saques el `.pen` de esa carpeta.
3. Abre el `.pen` (desde la carpeta descomprimida) en la **app de escritorio
   de Pen** (descárgala en pen.dev si aún no la tienes).
4. Deja la app de Pen **abierta con ese archivo** mientras le pides a la IA
   que trabaje en él — el MCP de Pen habla con la app que está corriendo, no
   con un enlace o ruta de archivo. Si una herramienta de Pen da un error de
   conexión, normalmente es por eso: la app está cerrada o el archivo no está
   abierto.

---

## Rebrand en 4 pasos

### 1. Abrir las variables

En Pen: busca la colección de variables de color del archivo (el equivalente
a las "Variables" de Figma).

### 2. Cambiar tu marca

- **Color principal (primary/accent):** empieza aquí.
- **Color de fondo (background):** también afecta el splash.
- **Color del texto (foreground).**
- Fuente predeterminada del kit: Poppins.

### 3. Prompt para la IA

```
Lee AGENTS.md y docs/pen-workflow.md.

Mi design system está abierto en la app de Pen ahora mismo.
Llama a get_editor_state y luego a get_variables para leer los tokens.

Sincroniza TODOS los colores en lib/core/theme/colors.dart
(KasyColors.light() y .dark()), no solo el color principal.

Si el fondo cambió, actualiza el color del splash en pubspec.yaml.

Verifica en la pantalla Design System (claro y oscuro).
flutter analyze sin errores.
```

### 4. Verificar en la app

```bash
kasy run --web
```

Ve a **Home → Design System**. Cambia tema claro/oscuro en Ajustes.

Crea pantallas nuevas solo **después** de que el rebrand esté correcto.

---

## Crear una pantalla nueva

### 1. Diseñar

En el mismo archivo de Pen (o en uno nuevo), usando las mismas variables del
design system, pídele a la IA que diseñe la pantalla contigo — a diferencia
de Figma, la IA de Pen puede dibujar directamente en el archivo, no solo
leerlo.

### 2. Prompt para la IA

```
Lee docs/pen-workflow.md.
Mi pantalla está en la página/frame [NOMBRE] del archivo de Pen abierto ahora.
Implementa esa pantalla.
Fiel al layout, funcional (botones, campos, navegación).
Componentes Kasy, tokens, i18n (pt, en, es).
Si algún color no existe en el design system, avísame antes de codear.
flutter analyze limpio.
```

### 3. Probar

```bash
kasy run --web
```

---

## Errores comunes

| Problema | Qué hacer |
| -------- | --------- |
| La herramienta de Pen no conecta | Abre (o reabre) el archivo en la app de Pen — tiene que estar corriendo |
| La app sigue con el color anterior | Pide sincronizar **todos** los colores, no solo el principal |
| La IA usó Material crudo | Pide `KasyButton`, `KasyCard`, `KasyTextField` |
| Color distinto al mockup | Primero entra al design system, después al código |

---

## Resumen

1. **Rebrand** en las variables de Pen → IA → `lib/core/theme/`.
2. **Pantallas** en el mismo archivo → IA → fiel y funcional.
3. **Color fuera del DS** → la IA avisa, sin hardcode.

Ve también [Colores](https://kasy.dev/docs/personalizacao/cores),
[Figma](https://kasy.dev/docs/personalizacao/figma) (la otra opción de diseño)
y [Design System](https://kasy.dev/docs/conceitos/design-system).