Eclipse UI

Todo se alinea.

Tu marca, lo que arma tu IA y lo que siente quien lo usa, en una sola línea.

Para Claude Code, Cursor y compañía

Personalidad y UX para tus proyectos de vibe code

Tu IA ya escribe el código; lo que le falta es criterio. Por eso todo sale con el mismo gris, las mismas tarjetas y el mismo degradado morado. Dale una personalidad y cada pantalla sale con la tuya.

Encuentra tu personalidad Ver componentes
personalidades de partida
6
mediciones de contraste AA
336
plantillas de página completa
4

Cómo funciona

Elige, descarga, pídeselo a tu agente

Sin otro framework que aprender ni un design system de meses: tres archivos que tu agente lee antes de escribir la primera línea de UI.

  1. 01

    Elige tu personalidad

    Duna para un estudio de pilates, Umbra para un box de HIIT, Eclipse para el panel de tu SaaS. Cada una cambia la tipografía, las curvas, el aire y la velocidad, no solo el color. Toca una y mira la misma página cambiar.

    Personalidades
    Norte
    Hecho con cuidado

    Lo que haces, contado con tu voz.

    Una página que suena a tu marca y no a plantilla, en cada pantalla que agregues.

    Plan mensual Más elegido

    $299 MXN / mes

    • Todo lo esencial
    • Soporte en tu idioma
    • Ana Ruiz
    • Iván Paz
    • Sofía Luna
    Te escribe una persona, no un bot.
    La misma página en Duna Duna Alba Brisa Umbra Terra Eclipse
  2. theme.css Los diales de tu personalidad 
    :root {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #1b1a17;
  --eui-ink: #1b1a17;
  --eui-paper: #f2efe8;
  --eui-tint: 0%;
    shadcn.css Los bloques :root y .dark 
    :root {
  --radius: 0rem;
  --background: oklch(0.953 0.01 87.5);
  --foreground: oklch(0.218 0.006 91.6);
  --card: oklch(0.953 0.01 87.5);
  --card-foreground: oklch(0.218 0.006 91.6);
  --popover: oklch(0.953 0.01 87.5);
    DESIGN.md Las instrucciones para tu IA 
    ## Reglas

1. **Solo tokens.** Nada de hex, `rgb()`, `white`, `black` ni la paleta de
   Tailwind (`gray-500`, `blue-600`). Si falta un color, es una decisión de
   diseño, no un valor que inventar.
2. **Profundidad por capas y bordes de 1px.** Fondo, tarjeta, elevada: cada
   capa con su borde. La sombra es solo para lo que flota (menús, popovers,
    02

    Descarga tres archivos

    Su theme.css para cualquier proyecto, su shadcn.css si ya usas shadcn/ui y su DESIGN.md para tu agente. Gratis, sin correo y sin cuenta.

    Cómo usarla
  3. 03

    Pídele una pantalla

    Con el DESIGN.md en tu proyecto, tu agente sabe qué tokens usar, cómo se mueve tu marca y qué no hacer: hex sueltos, gray-500, tres botones principales en la misma pantalla.

    Ver las instrucciones
    Tu agente · con DESIGN.md

    › Arma la página de precios con la personalidad Duna.

    Leo DESIGN.md: tinta sobre papel periódico, filetes de oro en vez de tarjetas, Fraunces para leer.

    Títulos con .eui-display. Una sola acción principal, en bg-primary.

    Tarjetas por capas con bordes de 1px. Nada de hex ni de gray-500.

    Lista: precios.html, con tu voz y contraste AA.

Más que un color

Cambiar el morado por azul no es personalidad

Una personalidad decide cinco cosas a la vez. La base se encarga de que, decidas lo que decidas, todo se siga leyendo y moviendo bien.

Voz
Fraunces en los títulos o Archivo condensada en mayúsculas, y cómo hablan los botones.
Forma
De todo recto a todo en pastilla, con el borde tan marcado como tu marca.
Color
Tu marca, la tinta y el papel. El contraste del texto se ajusta solo.
Aire
Compacta como un panel o aireada como un spa, y cuánta sombra lleva lo que flota.
Ritmo
Si todo responde rápido, como Umbra, o se toma su tiempo, como Alba.

Para tu stack

En HTML, con shadcn/ui o desde tu agente

¿Usas Rails? Los componentes con vida existen como gema, con ViewComponent y Stimulus; llegan después. Mientras, míralos en el catálogo.

Precios

Gratis para empezar. El kit, para terminar.

Tu personalidad y las instrucciones para tu IA no cuestan nada. El kit es para no empezar cada página en blanco.

Gratis

Tu personalidad

Para que tu IA diseñe con tu voz desde hoy.

$0 USD

Para siempre, sin correo y sin cuenta.

  • El motor, eclipse-ui.css, con sus fuentes
  • Las 6 personalidades de partida
  • Por cada una, su theme.css, su shadcn.css y su DESIGN.md
  • Contraste AA medido en claro y en oscuro
  • Uso comercial, también en proyectos de clientes
Elige tu personalidad
Precio de lanzamiento

Pago único

El kit

Todo lo gratis, más páginas de dónde partir y un skill que sabe las reglas.

$33.33 USD

Un solo pago, sin suscripción.

Después, 48 USD.

  • Todo lo gratis, en un zip
  • Plantillas de landing, precios, panel y acceso
  • En HTML con CSS y en Next con shadcn/ui
  • piezas.css: botones, campos y tarjetas en CSS puro
  • Un skill para Claude Code, Cursor y AGENTS.md
  • Las actualizaciones de la versión 1
  • Tu propia personalidad Próximamente

La venta abre muy pronto

Precios en USD. El kit se paga una vez con Stripe · Venta final, sin reembolsos · Términos

Lo que trae el zip y preguntas

Elige una antes de tu próximo prompt

Gratis, sin cuenta y sin correo. Tres archivos, y tu agente ya sabe cómo se ve tu marca.

Encuentra tu personalidad Ver componentes