Vedmeena21/ship-beautiful-ui

Ship Beautiful UI (Interfaz Hermosa para Envío)

Las interfaces construidas por IA se ven igual porque el agente comienza siempre con los mismos valores predeterminados: las mismas fuentes, los mismos degradados, la misma fila de tarjetas idénticas. Este skill reemplaza esos valores predeterminados con un proceso:

1. Brief. Define el tema, la audiencia y el único trabajo de la pantalla.
2. Dirección. Construye la apariencia desde el propio mundo del tema, no desde una plantilla.
3. Fijar. Escribe cada decisión visual en DESIGN.md y verifícalo.
4. Construir. Usa solo los tokens de DESIGN.md. Una idea audaz por pantalla.
5. Movimiento. Solo movimiento que explique un cambio.
6. Revisar. Escanea en busca de señales de IA y brechas de calidad, mira capturas de pantalla, escribe REVIEW.md.

Siempre en este orden. No te saltes el paso 0 ni el paso 5.

Quién gana

Cuando dos instrucciones entren en conflicto, la de mayor rango gana:

1. Las propias palabras del usuario.
2. DESIGN.md, una vez que existe.
3. Las reglas de este skill en references/.
4. Cualquier otra cosa que esté cargada, incluyendo otros skills de UI.

Cuando resuelvas un conflicto, dímelo en una línea para que el usuario pueda anularte.

Herramientas en este skill

Todos los scripts son de la biblioteca estándar de Python 3. Ejecútalos desde la carpeta de este skill o pasa rutas completas.

Script	Qué hace
scripts/derive.py	Convierte palabras del mundo del tema en una paleta verificada por contraste, usando 78 materiales
scripts/direction.py	Reparte 3 opciones de dirección (paleta + par tipográfico + layout) para un tipo de producto, y escribe un borrador de DESIGN.md
scripts/lint_design.py	Verifica DESIGN.md: estructura, orden de secciones, referencias a tokens, contraste WCAG
scripts/detect.py	Escanea el código front-end en busca de 40 señales de IA y brechas de calidad mínima

Biblioteca	Contenido
data/materials.json	78 materiales de los mundos de los temas (papel, comida, naturaleza, artesanía, pantallas, dinero, cuidado, juego, viaje)
data/palettes.json	60 paletas, claras y oscuras, todas verificadas por contraste
data/type-pairings.json	40 pares tipográficos, todas Google Fonts gratuitas, con roles y notas
data/layouts.json	20 patrones de layout con wireframes
references/effects.md	16 efectos en CSS/JS plano con fallbacks de movimiento reducido
references/04-motion.md	Tokens de tiempo y 12 recetas de movimiento
references/ux-rules.md	80 reglas UX por área
references/anti-patterns.md	Las 40 reglas del detector y 12 valores predeterminados visuales

Paso 0: Brief

Lee references/00-brief.md. Escribe cuatro líneas: tema, audiencia, trabajo, restricciones, más cinco sustantivos del mundo del tema. Si el brief es escueto, propón estos y confirma en un mensaje (como máximo tres preguntas).

Paso 1: Dirección

Lee references/01-direction.md.

• Por defecto: derivar del tema. Elige 3-5 de los sustantivos del mundo y ejecuta python3 scripts/derive.py --words "<sustantivos>" (añade --mode dark si el producto vive de noche). Empareja la paleta con un par tipográfico y un layout de data/ que encajen con el estado de ánimo.
• Alternativa: repartir desde la biblioteca cuando el tema no tiene un mundo visual fuerte o el usuario quiere opciones rápido: python3 scripts/direction.py --kind <tipo> --brief "<una línea>". Muestra las 3 opciones y deja que el usuario elija.
• Marca existente: la marca es la dirección. Extrae sus colores y tipografía en su lugar.
• Verifica el plan contra los valores predeterminados visuales en references/anti-patterns.md y revisa cualquier cosa que coincida, a menos que el brief lo haya pedido.

Paso 2: Fijar

Lee references/02-lock.md.

• Escribe DESIGN.md en la raíz del proyecto: tokens YAML en la parte superior, luego secciones ## en orden (Descripción general, Colores, Tipografía, Diseño, Elevación y profundidad, Formas, Componentes, Qué hacer y qué no hacer). direction.py --write te da un borrador; templates/DESIGN.md es el formulario en blanco.
• Pon el brief en Descripción general y los valores predeterminados rechazados en Qué hacer y qué no hacer.
• Ejecuta python3 scripts/lint_design.py DESIGN.md y corrige cada error antes de construir.

Paso 3: Construir

Lee references/03-build.md y usa references/ux-rules.md mientras avanzas.

• Asigna tokens a variables CSS (o al tema del framework) una vez; usa solo esos nombres.
• Un elemento memorable por pantalla. Todo lo demás en calma.
• Como máximo un efecto de references/effects.md, en ese elemento, recoloreado con tokens.
• Construye hasta el nivel mínimo de calidad: 360px de ancho, foco visible, contraste AA, movimiento reducido, texto real, estados de carga/vacío/error.

Paso 4: Movimiento

Lee references/04-motion.md. El movimiento iniciado por el usuario usa los tokens de tiempo y las recetas allí indicados. Como máximo un momento de movimiento ambiental por pantalla. Todo tiene una ruta de movimiento reducido.

Paso 5: Revisar

Lee references/05-review.md.

1. python3 scripts/detect.py <src o archivos>. Corrige cada error; corrige las advertencias o escribe por qué se quedan.
2. python3 scripts/lint_design.py DESIGN.md de nuevo. El código y DESIGN.md deben coincidir.
3. Captura de pantalla en escritorio y 390px de ancho si tu entorno lo permite, y critica las imágenes contra el brief.
4. Escribe REVIEW.md a partir de templates/REVIEW.md.

Salida

Cuando termines, el proyecto tiene DESIGN.md (válido), la UI (construida solo con sus tokens) y REVIEW.md. Dile al usuario en pocas líneas: la dirección y por qué encaja con el tema, el elemento memorable y lo que deliberadamente omitiste.