open-beauty
by jdsalasca
README.md
# Open Beauty
Open Beauty es un arnés de diseño y servidor MCP que convierte un brief corto en una página HTML, experiencia, cuento, presentación, kit de sprint o GIF completo y validado, en uno de trece sistemas editoriales. El modelo aporta contenido y juicio; el arnés aporta fuentes, paleta, composición, movimiento y la puerta de calidad.
La ruta `beauty narrative` define briefs de tres a cinco fases y genera GIF, PNG, hoja de contacto y manifiesto v3 para los trece estilos. `workflowStatus` describe el trabajo; `outcome` separa el resultado esperado del observado con evidencia. Antes de escribir el brief, consulta `beauty capabilities` para conocer los valores válidos y los límites de cada escena. Los cinco niveles de evaluación y la revisión visual permanecen separados. La revisión empieza sin registro y solo una revisión independiente con criterios completos puede aprobarla.
Para una historia de Sprint Review, copia `examples/recipes/<style>/narrative.json`, conserva **Antes → Cambio → Resultado esperado** mientras el resultado no tenga evidencia observada, genera y revisa la galería:
```bash
beauty capabilities --style papercraft --json
beauty narrative --style papercraft --brief examples/recipes/papercraft/narrative.json --out out/papercraft
beauty review "out/papercraft/<pack>.manifest.json" --reviewer reviewer-17:Ada --criterion thumbnailIdentity=pass --frames
beauty review-state "out/papercraft/<pack>.manifest.json"
beauty rerender "out/papercraft/<pack>.manifest.json" --apply-feedback
beauty gallery docs/narrative-gif --out docs/narrative-gif/GALLERY.html --title "Sprint Review"
beauty validate docs/narrative-gif/GALLERY.html --style papercraft --visual
pnpm narrative:recipes
```
La galería usa PNG estáticos al abrir, carga el GIF solo al pulsar **Reproducir**, permite detener, descargar y ampliar, filtrar por estilo y activar una vista de 640 × 360. La salida generada está en [GALLERY.html](docs/narrative-gif/GALLERY.html); los pasos reproducibles desde un checkout limpio están en [REPRODUCE.md](docs/narrative-gif/REPRODUCE.md).
`beauty review` guarda criterios visuales y feedback enlazados a hashes del GIF, PNG y manifiesto. `--frames` extrae frames y recortes verificados para la galería. `beauty rerender` reutiliza brief y seed y solo marca comentarios como corregidos cuando la región indicada cambió de forma medible. Una recomendación humana de publicación es una señal editorial, nunca una publicación automática. El procedimiento y el formato del feedback están en [REVIEW-PROCESS.md](docs/narrative-gif/REVIEW-PROCESS.md).
## Inicio rápido
```bash
pnpm setup
pnpm mcp:config
pnpm examples
```
`pnpm setup` instala, compila y corre la suite. `pnpm mcp:config` imprime el bloque para registrar el servidor MCP por stdio. `pnpm examples` regenera la galería de referencia.
### Registrar el servidor MCP para Codex/Claude
`pnpm mcp:config` imprime el snippet exacto para tu máquina y nunca edita tus archivos de configuración. Copiá el bloque que necesites:
```bash
pnpm mcp:config
```
Imprime (tu ruta absoluta reemplaza `<repo>`):
```toml
# Codex CLI (~/.codex/config.toml)
[mcp_servers.open_beauty]
command = "node"
args = ["<repo>/dist/mcp/server.js"]
startup_timeout_sec = 30.0
```
```bash
# Codex one-liner
codex mcp add open-beauty -- node "<repo>/dist/mcp/server.js"
# Claude Code one-liner
claude mcp add -s user open-beauty -- node "<repo>/dist/mcp/server.js"
```
### Cómo mirar tu salida
El validador estático lee el CSS; el pase visual con Playwright mira el render real. Mirá el render antes de publicar:
- `beauty validate <file> --style <s> --strict --visual` para el grado, las correcciones y la geometría en 360x780 y 1440x900.
- Añadí `--shots <dir>` para guardar `visual-360.png` y `visual-1440.png`.
- Si Playwright no está disponible, el pase visual se **omite** con una línea de arreglo (`visual check skipped`); nunca falla ni aprueba en silencio.
- Códigos de salida de `validate`/`fix`: `0` cumple; `1` no cumple el listón estricto (craft A, 90+, visión 4/4 y sin avisos abiertos) o hay un error; un chequeo visual omitido no cambia el código.
- `beauty fix` revalida con exactamente las mismas opciones que `validate` (incluido `--visual`), así que ambos no pueden discrepar.
- Abrí el HTML en un navegador en 360px, 768px y 1440px.
- Capturá con Playwright una vez instalado:
```bash
pnpm add -D playwright && pnpm exec playwright install chromium
pnpm exec playwright screenshot --full-page out/nature.html out/nature.png
```
- Para un GIF, contá frames y verificá el loop en vez de confiar en el tamaño:
```bash
python -X utf8 -c "from PIL import Image; im=Image.open('out/n.gif'); print(im.n_frames, im.info.get('loop'))"
```
Scroll-eá la página antes de capturar: las secciones aparecen al hacer scroll y una captura full-page puede mostrar bandas vacías.
## Herramientas MCP
| Herramienta | Propósito | Llamada de ejemplo |
| --- | --- | --- |
| `beauty_list_styles` | Lista los 13 estilos con fuente y uso | `beauty_list_styles()` |
| `beauty_get_style` | Lee los tokens exactos de un estilo | `beauty_get_style({ style: "nature", format: "markdown" })` |
| `beauty_get_skill` | Carga el flujo y la skill de formato | `beauty_get_skill({ format: "deck" })` |
| `beauty_get_capabilities` | Consulta primitivas, aspectos, idiomas y vocabulario de escenas | `beauty_get_capabilities({ style: "papercraft" })` |
| `beauty_create_page` | Genera una página HTML completa | `beauty_create_page({ style: "nature", title: "Herbario" })` |
| `beauty_create_experience` | Genera un lugar de 3–8 salas | `beauty_create_experience({ style: "galactic", title: "Museo", rooms: [...] })` |
| `beauty_create_story` | Genera un cuento o lección por capítulos | `beauty_create_story({ style: "papercraft", title: "La semilla", chapters: [...] })` |
| `beauty_create_deck` | Genera una presentación 16:9 | `beauty_create_deck({ style: "nature", title: "Té", slides: [...] })` |
| `beauty_create_sprint` | Genera review + retro + planning + 3 GIFs | `beauty_create_sprint({ style: "artdeco", sprint: "16" })` |
| `beauty_create_gif` | Genera un GIF editorial | `beauty_create_gif({ style: "artdeco", text: "Subir" })` |
| `beauty_create_narrative` | Valida vocabulario, workflow, outcome y holds, y renderiza un pack en los 13 estilos | `beauty_create_narrative({ style: "papercraft", brief: { kind: "narrative-gif", ... } })` |
| `beauty_review_artifact` | Registra revisión, feedback y hashes del artefacto exacto | `beauty_review_artifact({ pack: "out/pack.manifest.json", reviewer: { id: "reviewer-17", name: "Ada", kind: "human" } })` |
| `beauty_get_review_state` | Comprueba si el ledger aún coincide con los hashes actuales | `beauty_get_review_state({ pack: "out/pack.manifest.json" })` |
| `beauty_create_gallery` | Genera una galería HTML desde los manifiestos de una carpeta | `beauty_create_gallery({ directory: "docs/narrative-gif", output: "out/gallery.html" })` |
| `beauty_validate` | Audita HTML y devuelve grado y fixes (`visual: true` incluye el pase de navegador) | `beauty_validate({ style: "nature", path: "page.html", visual: true })` |
| `beauty_fix` | Repara y revalida con las mismas opciones | `beauty_fix({ style: "nature", path: "page.html", visual: true })` |
| `beauty_examples` | Devuelve rutas de referencia | `beauty_examples()` |
## Galería de estilos
| Estilo | Ejemplo |
| --- | --- |
| Renaissance | [examples/renaissance/index.html](examples/renaissance/index.html) |
| Brutalist | [examples/brutalist/index.html](examples/brutalist/index.html) |
| Paper Craft | [examples/papercraft/index.html](examples/papercraft/index.html) |
| Art Deco | [examples/showcase/artdeco/index.html](examples/showcase/artdeco/index.html) |
| Isotype | [examples/showcase/isotype/index.html](examples/showcase/isotype/index.html) |
| Op Art | [examples/showcase/opart/index.html](examples/showcase/opart/index.html) |
| Ukiyo-e | [examples/showcase/ukiyoe/index.html](examples/showcase/ukiyoe/index.html) |
| Bestiary | [examples/showcase/bestiary/index.html](examples/showcase/bestiary/index.html) |
| Psychedelic | [examples/showcase/psychedelic/index.html](examples/showcase/psychedelic/index.html) |
| Memphis | [examples/showcase/memphis/index.html](examples/showcase/memphis/index.html) |
| Vaporwave | [examples/showcase/vaporwave/index.html](examples/showcase/vaporwave/index.html) |
| Galactic | [examples/showcase/galactic/index.html](examples/showcase/galactic/index.html) |
| Nature Memory | [examples/showcase/nature/index.html](examples/showcase/nature/index.html) |
## Solución de problemas
- **Node.js 22 o superior** (`node --version`); `engines.node` lo exige.
- **`dist/` ausente**: `pnpm install` ejecuta `prepare`, que compila `dist/` solo si falta; si corrés el CLI sin compilar, imprime la solución exacta (`pnpm build`).
- **Fuentes**: están en `fonts/` y se registran con `@napi-rs/canvas`; no borres esa carpeta. Si falta un TTF, `beauty doctor` falla con `FONTS_MISSING`.
- **`@napi-rs/canvas` en Windows**: reinstalá con `pnpm install` en Node 22+; usa binarios precompilados y no requiere compilación nativa. Si no carga, verificá la versión de Node y que `dist/` siga junto al repo.
## Barra de calidad
## Kit para modelos débiles
- `skills/beauty.md`: árbol de decisión de una página (qué quieres -> comando exacto).
- `examples/recipes/<style>/`: briefs de arranque (`page`, `deck`, `story`, `experience`, `sprint`, `narrative`) validados contra el CLI.
- `skills/narrative.md`: diferencias entre make/narrative/sequence/gif, estado y lectura de evaluaciones.
- `docs/WEAK-MODELS.md`: por qué fallan los modelos débiles, reglas del arnés y tabla de solución de problemas.
El CLI y MCP son la fuente de verdad; los comandos exactos están en `skills/beauty.md`.
- **Accesibilidad**: `prefers-reduced-motion`, landmarks, `alt`, contraste de los pares de tokens que llevan texto y controles de 44 px en decks.
- **Determinismo**: la misma brief y estilo producen el mismo HTML (salvo timestamp) y los mismos frames; los ornamentos usan PRNG sembrado.
- **Pruebas**: `pnpm test` y `pnpm check` (todo en verde); el validador exige **A/100 y visión 4/4**.
## Trece maneras de mirar
Cada estilo tiene su propia composición, tipografía, color y ritmo. Las imágenes abren sus ejemplos.
<p align="center">
<a href="examples/renaissance/index.html"><img src="examples/previews/renaissance.png" width="180" alt="Renaissance: un fresco editorial de cal, pigmento y tinta"><br><sub>Renaissance · una idea como fresco</sub></a>
<a href="examples/brutalist/index.html"><img src="examples/previews/brutalist.png" width="180" alt="Brutalist: un cartel público frontal"><br><sub>Brutalist · una postura como cartel</sub></a>
<a href="examples/papercraft/index.html"><img src="examples/previews/papercraft.png" width="180" alt="Paper Craft: papeles cortados y superpuestos"><br><sub>Paper Craft · trabajo hecho a mano</sub></a>
</p>
<p align="center">
<a href="examples/showcase/artdeco/index.html"><img src="examples/previews/mine-artdeco.png" width="180" alt="Art Deco: geometría vertical y laca"><br><sub>Art Deco · altura y tiempo</sub></a>
<a href="examples/showcase/isotype/index.html"><img src="examples/previews/mine-isotype.png" width="180" alt="Isotype: datos públicos en una retícula de pictogramas"><br><sub>Isotype · datos como lenguaje común</sub></a>
<a href="examples/showcase/opart/index.html"><img src="examples/previews/mine-opart.png" width="180" alt="Op Art: patrones ópticos de alto contraste"><br><sub>Op Art · el ojo participa</sub></a>
</p>
<p align="center">
<a href="examples/showcase/ukiyoe/index.html"><img src="examples/previews/mine-ukiyoe.png" width="180" alt="Ukiyo-e: paisaje y agua como estampa"><br><sub>Ukiyo-e · paisaje impreso</sub></a>
<a href="examples/showcase/bestiary/index.html"><img src="examples/previews/mine-bestiary.png" width="180" alt="Bestiario: manuscrito de historia natural imaginaria"><br><sub>Bestiario · curiosidad como manuscrito</sub></a>
<a href="examples/showcase/psychedelic/index.html"><img src="examples/previews/mine-psychedelic.png" width="180" alt="Psicodelia: color líquido y ritmo de cartel"><br><sub>Psicodelia · color para explorar</sub></a>
</p>
<p align="center">
<a href="examples/showcase/memphis/index.html"><img src="examples/previews/mine-memphis.png" width="180" alt="Memphis: formas lúdicas con jerarquía editorial"><br><sub>Memphis · humor con rigor</sub></a>
<a href="examples/showcase/vaporwave/index.html"><img src="examples/previews/mine-vaporwave.png" width="180" alt="Vaporwave: una ventana de internet de 1999"><br><sub>Vaporwave / Y2K · cultura digital</sub></a>
<a href="examples/showcase/galactic/index.html"><img src="examples/previews/mine-galactic.png" width="180" alt="Galactic Futurism: un planetario de memoria"><br><sub>Galactic Futurism · memoria orbital</sub></a>
</p>
<p align="center">
<a href="examples/showcase/nature/index.html"><img src="examples/previews/mine-nature.png" width="560" alt="Nature Memory: un herbario editorial de hojas prensadas"><br><sub><strong>Nature Memory · el estilo 13</strong> · hoja, sombra, semilla y procedencia.</sub></a>
</p>
## De páginas a lugares, relatos y presentaciones
El harness ya puede componer una página editorial, una experiencia de **3 a 8 salas**, una historia de **2 a 8 capítulos**, un deck 16:9 o un GIF breve. El arte SVG responde al asunto —una casa, un río, una mesa, una vitrina o una planta— en vez de ser un adorno intercambiable.
### Lugares
- [Casa Perla](examples/experiences/casa-perla.html): restaurante, mercado, carta y sobremesa en cuatro salas.
- [Museo de lo invisible](examples/experiences/museo-invisible.html): cinco salas sobre aquello que sostiene la vida de un museo y suele quedar fuera de vitrina.
- [Black Clover · La memoria del trébol](examples/experiences/black-clover.html): recorrido de homenaje fan, identificado como tal; no es una pieza oficial.
- [Museo de las estaciones](examples/experiences/museo-estaciones.html): seis salas de ficción museográfica sobre tiempo, luz y memoria; Nature Memory con `maxxing`.
<p align="center"><a href="examples/experiences/museo-estaciones.html"><img src="examples/experiences/museo-estaciones.png" width="760" alt="Museo de las estaciones: seis salas Nature Memory"></a></p>
<p align="center"><a href="examples/experiences/black-clover.html"><img src="examples/experiences/black-clover.png" width="760" alt="Black Clover: sala Nature Memory con un trébol prensado"></a><br><sub>Black Clover · un archivo de tréboles, promesas y magia que no se rinde.</sub></p>
### Historias
- [La casa que aprendió a respirar](examples/stories/casa-respira.html): cuento por capítulos.
- [El río que cambió de ciudad](examples/stories/rio-1870.html): relato histórico urbano con fuentes y hechos al margen.
- [La semilla que esperó](examples/stories/dominio-publico.html): historia en Paper Craft; la propia página acredita «CC0 1.0 · texto original».
- [El archivo de las hojas](examples/stories/archivo-hojas.html): ensayo narrativo en seis capítulos; ficción original CC0 y arte maxxing.
- [La liebre que prestó su sombra](examples/stories/liebre-sombrero.html): storybook de papel con escenas, personajes y cuatro capítulos; ficción original CC0.
<p align="center"><a href="examples/stories/archivo-hojas.html"><img src="examples/stories/archivo-hojas.png" width="420" alt="El archivo de las hojas: ensayo narrativo Nature Memory"></a></p>
<p align="center"><a href="examples/stories/liebre-sombrero.html"><img src="examples/stories/liebre-sombrero.png" width="760" alt="La liebre que prestó su sombra: storybook de papel"></a><br><sub><strong>La liebre que prestó su sombra</strong> · storybook de papel, 4 capítulos, escenas originales.</sub></p>
<p align="center"><a href="examples/stories/dominio-publico.html"><img src="examples/stories/dominio-publico.png" width="420" alt="La semilla que esperó: cuento CC0 en Paper Craft"></a></p>
### Presentaciones
- [El té no se apura](examples/decks/tea.html): deck Nature Memory de ocho slides.
- [Gaticos: una guía para no hacer nada](examples/decks/kittens.html): deck Paper Craft de ocho slides.
- [Atlas de la memoria](examples/decks/atlas-memoria.html): ocho slides Galactic con `maxxing`; memoria, mapas y orientación.
<p align="center"><a href="examples/decks/atlas-memoria.html"><img src="examples/decks/atlas-memoria.png" width="560" alt="Atlas de la memoria: deck Galactic maxxing"></a></p>
- [La memoria del futuro](examples/luna-deck/memory-future.html): presentación creada por Luna para mostrar el flujo de trabajo.
<p align="center">
<a href="examples/decks/tea.html"><img src="examples/decks/tea.png" width="360" alt="El té no se apura, deck Nature Memory"></a>
<a href="examples/decks/kittens.html"><img src="examples/decks/kittens.png" width="360" alt="Gaticos, deck Paper Craft"></a>
</p>
## MUSEM
El museo real que salió de esta casa sigue abierto: [**musem.eridu.top**](https://musem.eridu.top). La Sala 01, *Random Access Memories*, ahora tiene un vinilo que gira, una onda de audio y una ficha de archivo; la Sala 07 es **Black Clover · La memoria del trébol**, un homenaje fan con texto original y sin material oficial; la Sala 08 es **Museo de las estaciones**, seis salas de ficción museográfica con la capa maxxing.
## Para empresas
Los rituales ágiles pueden ser conversaciones visuales, no formularios de estado. Hay tres decks acompañados por sus GIFs de entrada: [Sprint 14 · Review](examples/agile/sprint-14-review.html) ([GIF](examples/agile/sprint-14-review.gif)), [Sprint 14 · Retrospective](examples/agile/sprint-14-retro.html) ([GIF](examples/agile/sprint-14-retro.gif)) y [Sprint 15 · Planning](examples/agile/sprint-15-planning.html) ([GIF](examples/agile/sprint-15-planning.gif)). Un kit completo con maxxing: [Sprint 16 · Review](examples/agile/sprint-16/sprint-16-review.html), [retro](examples/agile/sprint-16/sprint-16-retro.html), [planning](examples/agile/sprint-16/sprint-16-planning.html) y sus tres GIFs.
### Un kit de sprint
`beauty sprint --style nature --brief sprint.json --out out/sprint` genera, en una sola carpeta, **review + retrospectiva + planning + tres GIFs** construidos con los datos: gráfico de barras de velocidad (comprometido vs hecho), línea de burndown, tabla de historias con estado (`done`/`carried`/`dropped`), riesgos con mitigación y responsable, tres columnas de retro con acciones fechadas y barras de capacidad por persona. El brand sale de `team.brand || team.name` y el estilo y `maxxing` se comparten. Sin `--out` (ni `output` en MCP) la carpeta por defecto es `beauty-output/sprint-<equipo>-<sprint>-<hash>`, única por corrida, de modo que dos procesos en paralelo nunca colisionan.
El esquema está documentado en [examples/recipes/README.md](examples/recipes/README.md#sprint-briefs) y hay un brief funcional por estilo en `examples/recipes/<style>/sprint.json`. El esquema es zod: los tipos incorrectos fallan con el campo exacto (por ejemplo `stories.0.points: expected number, received string`) y los campos desconocidos se reportan como warnings, nunca se ignoran en silencio. Los briefs legacy mínimos (`sprint`, `team`, `metrics`, `highlights`, `blockers`, `next`) siguen funcionando.
Después de generar, el kit verifica fidelidad: cada título de historia, riesgo y acción provista tiene que aparecer en el HTML correspondiente; lo que falte se reporta como issue (`sprint-fidelity`). Los GIFs también son datos: la review anima las barras creciendo y el número de puntos, la retro cicla las acciones con responsable y fecha, y el planning llena las barras de capacidad.
<p align="center"><a href="examples/agile/sprint-16/sprint-16-review.html"><img src="examples/agile/sprint-16/sprint-16-review.png" width="520" alt="Sprint 16 review, kit Art Deco maxxing"></a></p>
La review reúne evidencia, cambios para usuarios y decisiones; la retro, aprendizajes y experimentos; la planificación, resultados esperados, capacidad y límites. Son ejemplos de formato: antes de una reunión real, reemplazá cifras, voces, fechas y responsables por información del equipo. El sistema no inventa métricas.
## Para aulas
Una clase puede empezar con una pregunta, detenerse ante un objeto y avanzar por salas o capítulos. Mirá [La città ideale](examples/education/renaissance-perspective.html) y [Museo de las Cosas Pequeñas](examples/education/papercraft-museum.html). En historia, cada fecha, cita y atribución necesita fuente; separá el hecho de la interpretación y señalá lo que no se sabe. El texto sigue disponible con movimiento reducido y debe poder leerse en proyector.
## Diecinueve herramientas MCP
El servidor trabaja por **stdio** y transforma briefs; no llama a un modelo ni navega la web.
- **Orientar:** `beauty_list_styles`, `beauty_get_style`, `beauty_get_skill`, `beauty_get_capabilities`.
- **Crear:** `beauty_create_page`, `beauty_create_experience`, `beauty_create_story`, `beauty_create_deck`, `beauty_create_gif`, `beauty_create_sprint`, `beauty_create_motion`, `beauty_create_canvas`, `beauty_create_sequence`.
- **Revisar y encontrar:** `beauty_validate`, `beauty_examples`.
En total son diecinueve herramientas: elegir una gramática, consultar sus capacidades, cargar instrucciones, crear la pieza adecuada, validarla y consultar ejemplos.
## Canvas abierto
`beauty_create_canvas` no impone escena, personaje ni pose. El modelo compone **capas**: `path`, `circle`, `ellipse`, `rect`, `line`, `polygon`, `text`, `image` y `group`. El renderer le da los pinceles, los tokens de color del estilo, el reloj de animación y el sistema de assets. El arte lo pone el modelo.
```json
{
"style": "nature",
"title": "Carta al mar",
"layers": [
{ "kind": "rect", "x": 0, "y": 0, "width": 1600, "height": 1000, "fill": "@surface" },
{ "kind": "path", "d": "M0 640 C 260 560 420 720 680 620 S 1160 680 1600 560 V1000 H0Z", "fill": "@accent3", "animation": "drift" },
{ "kind": "circle", "cx": 1200, "cy": 240, "r": 100, "fill": "@accent4", "animation": "breathe" },
{ "kind": "text", "text": "Carta al mar", "x": 80, "y": 820, "size": 96, "font": "display", "fill": "@ink" }
]
}
```
Colores: `@bg`, `@surface`, `@ink`, `@muted`, `@accent`, `@accent2`, `@accent3`, `@accent4`, `@deep`. Los assets piden `alt`; `caption` y `source` se conservan en metadata y créditos.
[**Ver los cuatro canvas**](examples/canvas/index.html)
<p align="center"><a href="examples/canvas/carta-al-mar.svg"><img src="examples/canvas/carta-al-mar.svg" width="520" alt="Carta al mar: canvas abierto Nature Memory"></a></p>
## Secuencias y GIFs
`beauty_create_sequence` convierte **2–12 frames** en un SVG animado y un GIF rasterizado de los mismos frames. Cada frame es un canvas abierto: capas, paths, texto, assets. El modelo escribe el cuento; la herramienta le da el tiempo, la paleta y el loop.
```json
{
"style": "papercraft",
"title": "Pedro, el conejo que no escuchó",
"license": "Dominio público · texto original",
"fps": 10,
"frames": [
{ "id": "01", "duration": 2.2, "layers": [] },
{ "id": "02", "duration": 2.4, "layers": [] }
]
}
```
Cada frame exige capas; cada asset exige `alt`. El SVG muestra la secuencia con keyframes; el GIF se genera con `@napi-rs/canvas` y `gifenc`. La licencia y la fuente quedan visibles.
[**Ver la secuencia de Pedro**](examples/sequences/index.html)
<p align="center"><a href="examples/sequences/index.html"><img src="examples/sequences/pedro-conejo.svg" width="620" alt="Pedro, el conejo que no escuchó: secuencia de papel"></a></p>
· [**GIF**](examples/sequences/pedro-conejo.gif)
## SVG en movimiento
`beauty_create_motion` produce un **póster SVG animado** de un solo archivo: keyframes CSS, tipografía exacta del estilo, paleta exacta, fallback de movimiento reducido y una escena elegida. No es un GIF ni un video; es una pieza que se queda en pantalla y respira.
```bash
beauty motion --style nature --title "El jardín de las horas lentas" --scene bloom --size landscape --maxxing
beauty motion --style galactic --title "Memoria orbital" --scene orbit --size square --maxxing
```
Escenas: `orbit`, `bloom`, `tide`, `papercut`, `constellation`, `ribbon`, `rain` y `type`. El skill `motion.md` explica cuándo usar cada una y qué no animar.
[**Ver los trece pósters SVG**](examples/motions/index.html) — uno por estilo, con `bloom`, `orbit`, `ribbon`, `papercut`, `tide`, `type`, `constellation` y `rain`, todos con **maxxing**.
<p align="center">
<a href="examples/motions/el-jardin-de-las-horas-lentas.svg"><img src="examples/motions/el-jardin-de-las-horas-lentas.svg" width="400" alt="Póster SVG Nature Memory"></a>
<a href="examples/motions/memoria-orbital.svg"><img src="examples/motions/memoria-orbital.svg" width="240" alt="Póster SVG Galactic"></a>
</p>
## Modo maxxing
`maxxing: true` —o `--maxxing`— es una segunda dirección de arte, no un filtro. Agrega una capa de ornamento original por estilo, más contraste tipográfico, alternativas de display y movimiento ambiental lento. La paleta y las fuentes siguen siendo las del estilo; el validador sigue exigiendo A/100 y visión 4/4. Funciona en página, deck, experiencia, cuento y GIF.
```bash
beauty page --style nature --title "El jardín de las horas lentas" --maxxing
beauty gif --style artdeco --text "Subir" --subtitle "1930" --maxxing
```
Para un brief JSON, agregá `"maxxing": true`. En MCP, pasá `maxxing: true` a cualquiera de las herramientas de creación.
## El flujo de Luna
1. `beauty_list_styles`: compara los estilos con el tema.
2. `beauty_get_style` y `beauty_get_skill`: lee los tokens y el oficio del formato.
3. Escribe un brief con voz, objetos, evidencia y hechos proporcionados.
4. Llama a la herramienta adecuada: página, experiencia, relato, deck o GIF.
5. Pasa el HTML por `beauty_validate`; corrige y repite hasta lograr **A/100 y visión 4/4**.
6. Una persona hace la lectura final: revisa los hechos y abre la pieza en un navegador.
Luna usa las herramientas MCP; no necesita escribir HTML a mano. La calificación automatizada mide reglas de craft y una heurística visual, no la verdad de lo escrito.
## Evidencia disponible
- [La suite documentada](docs/TESTING.md) registra **65/65 pruebas aprobadas**.
- La [ronda histórica de Luna](examples/agents/round-2026/index.html) reúne **12/12 páginas A/100 y visión 4/4**. Esa ronda corresponde a los doce estilos que existían entonces.
- Nature Memory se evaluó en la matriz local: **A/100 y visión 4/4**; el estilo 13 también produce deck y GIF. La matriz actual de páginas cubre **13/13 estilos**.
## Empezar
Necesitás **Node.js 22 o superior** y **pnpm**. Desde una terminal:
```bash
git clone https://github.com/jdsalasca/open-beauty-site.git
cd open-beauty-site
pnpm setup
pnpm mcp:config
```
`pnpm setup` instala dependencias, compila y corre la suite. `pnpm mcp:config` imprime el bloque para registrar el servidor en Codex, Claude Code, Cursor u otro cliente compatible con MCP local por stdio. La configuración y opciones están en [docs/MCP.md](docs/MCP.md).
La web estándar de ChatGPT no puede iniciar un proceso MCP local. Hace falta un cliente con stdio o un puente HTTP. El servidor no busca fuentes, no trae datos y no comprueba fechas, citas o métricas. El validador revisa estructura y reglas de diseño; **no sustituye la inspección en navegador ni la revisión humana**.
## Límites
`A/100` mide craft y `4/4` es una heurística de visión: ninguno verifica la verdad de un dato ni garantiza cómo se verá en cada navegador. Los decks aún no tienen un layout de figura con imagen, pie y fuente. La pausa de movimiento está disponible en páginas, pero sigue pendiente para decks y GIFs; los perfiles de movimiento tampoco varían por subfamilia.
## Trece GIFs
El archivo completo, uno por estilo, está en [**examples/gifs/luna13/**](examples/gifs/luna13/index.html). Tres puertas:
<p align="center">
<a href="examples/gifs/luna13/artdeco.gif"><img src="examples/gifs/luna13/artdeco.gif" width="180" alt="GIF Art Deco: Subir"></a>
<a href="examples/gifs/luna13/papercraft.gif"><img src="examples/gifs/luna13/papercraft.gif" width="180" alt="GIF Paper Craft: Pequeñas cosas"></a>
<a href="examples/gifs/luna13/nature.gif"><img src="examples/gifs/luna13/nature.gif" width="180" alt="GIF Nature Memory: Herbario"></a>
</p>
## Trece máximos
La versión maxxing del archivo, con más ornamento, más contraste y más aire: [**examples/gifs/maxxing/**](examples/gifs/maxxing/index.html).
<p align="center">
<a href="examples/gifs/maxxing/galactic.gif"><img src="examples/gifs/maxxing/galactic.gif" width="180" alt="GIF Galactic maxxing"></a>
<a href="examples/gifs/maxxing/nature.gif"><img src="examples/gifs/maxxing/nature.gif" width="180" alt="GIF Nature maxxing"></a>
<a href="examples/gifs/maxxing/artdeco.gif"><img src="examples/gifs/maxxing/artdeco.gif" width="180" alt="GIF Art Deco maxxing"></a>
</p>
## Para curiosear
[Galería de estilos](examples/showcase/index.html) · [Índice de ejemplos](examples/index.html) · [Archivo de 13 GIFs](examples/gifs/luna13/index.html) · [Revisión editorial de 2026](docs/STYLE-REVIEW-2026.md) · [Ideas implementadas y pendientes](docs/IDEAS-2026.md) · [Ronda histórica de 12 estilos](examples/agents/round-2026/index.html).
Open Beauty es MIT; las fuentes tipográficas incluidas son OFL. Una buena página abre la puerta. Lo que pasa adentro depende de la verdad y el cuidado de quien la escribe.
This server cannot be deployed
Maintenance
ActivityNo data
ResponsivenessSyncing