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:

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; los pasos reproducibles desde un checkout limpio están en 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.

Inicio rápido

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:

pnpm mcp:config

Imprime (tu ruta absoluta reemplaza <repo>):

# Codex CLI (~/.codex/config.toml)
[mcp_servers.open_beauty]
command = "node"
args = ["<repo>/dist/mcp/server.js"]
startup_timeout_sec = 30.0

# 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:

  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:

  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.

Related MCP server: visualspec

Herramientas MCP

Galería de estilos

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.

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: restaurante, mercado, carta y sobremesa en cuatro salas.

• Museo de lo invisible: cinco salas sobre aquello que sostiene la vida de un museo y suele quedar fuera de vitrina.

• Black Clover · La memoria del trébol: recorrido de homenaje fan, identificado como tal; no es una pieza oficial.

• Museo de las estaciones: seis salas de ficción museográfica sobre tiempo, luz y memoria; Nature Memory con maxxing.

Historias

• La casa que aprendió a respirar: cuento por capítulos.

• El río que cambió de ciudad: relato histórico urbano con fuentes y hechos al margen.

• La semilla que esperó: historia en Paper Craft; la propia página acredita «CC0 1.0 · texto original».

• El archivo de las hojas: ensayo narrativo en seis capítulos; ficción original CC0 y arte maxxing.

• La liebre que prestó su sombra: storybook de papel con escenas, personajes y cuatro capítulos; ficción original CC0.

Presentaciones

• El té no se apura: deck Nature Memory de ocho slides.

• Gaticos: una guía para no hacer nada: deck Paper Craft de ocho slides.

• Atlas de la memoria: ocho slides Galactic con maxxing; memoria, mapas y orientación.

• La memoria del futuro: presentación creada por Luna para mostrar el flujo de trabajo.

MUSEM

El museo real que salió de esta casa sigue abierto: 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 (GIF), Sprint 14 · Retrospective (GIF) y Sprint 15 · Planning (GIF). Un kit completo con maxxing: Sprint 16 · Review, retro, planning 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 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.

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 y Museo de las Cosas Pequeñas. 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.

{
  "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

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.

{
  "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

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.

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 — uno por estilo, con bloom, orbit, ribbon, papercut, tide, type, constellation y rain, todos con maxxing.

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.

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 registra 65/65 pruebas aprobadas.

• La ronda histórica de Luna 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:

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.

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/. Tres puertas:

Trece máximos

La versión maxxing del archivo, con más ornamento, más contraste y más aire: examples/gifs/maxxing/.

Para curiosear

Galería de estilos · Índice de ejemplos · Archivo de 13 GIFs · Revisión editorial de 2026 · Ideas implementadas y pendientes · Ronda histórica de 12 estilos.

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.