Generador de Código UI Web — Generador de Código UI Premium

Genera código UI que parece un proyecto destacado de Dribbble o Behance — NO una salida genérica de IA. El objetivo es producir código indistinguible del trabajo de un diseñador de producto senior en estudios de primer nivel.

Problema Principal que Resuelve Esta Habilidad

La UI generada por IA suele verse "técnicamente correcta pero sin alma":

Diseños planos y sin vida, sin emoción visual
Cuadrícula mecánica sin ritmo ni espacio para respirar
Colores genéricos que no crean atmósfera
Sin profundidad, sin luz, sin dimensión
Texto que simplemente "está ahí" sin llamar la atención

Esta habilidad transforma la salida en experiencias visuales de grado de diseño.

Cuándo Usarla

ESTA habilidad DEBE ser invocada cuando:

Se construye cualquier página web, aplicación o página de aterrizaje
Se crean componentes de UI que necesitan pulido
El usuario espera un resultado visual hermoso y moderno
Cualquier tarea de HTML/CSS/JS, React o Vue con expectativas de calidad visual

EL SISTEMA DE DISEÑO

1. Fondo: Atmósfera de Degradado Difuso

NUNCA uses colores sólidos planos. Los fondos deben crear atmósfera y emoción.

Técnica — Degradados Difusos en Capas:

/* Capa de fondo 1: degradado base */
body {
  background: #0a0a0f;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(78, 205, 196, 0.06) 0%, transparent 50%);
}

/* Versión para tema claro: */
body.light {
  background: #f8f6f4;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 60%, rgba(251, 191, 146, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(147, 197, 253, 0.08) 0%, transparent 40%);
}

Reglas:

Usa 2-4 capas de radial-gradient con diferentes posiciones y colores
Mantén la opacidad BAJA (0.06-0.15 en oscuro, 0.08-0.15 en claro)
Los colores deben ser complementarios o análogos — NO aleatorios
Posiciona los degradados fuera del centro y en los bordes para una sensación natural
Usa forma ellipse, no circle — más orgánico

Paletas de colores de ambiente para fondos:

Calma/Tech: púrpura-azul + verde azulado (rgba(120,119,198) + rgba(78,205,196))
Cálido/Creativo: naranja-rosa + dorado (rgba(255,107,107) + rgba(255,193,68))
Fresco/Naturaleza: verde + azul (rgba(52,211,153) + rgba(96,165,250))
Premium/Lujo: púrpura profundo + rosa (rgba(139,92,246) + rgba(244,114,182))
Neutral/Corporativo: gris azulado + plata (rgba(100,116,139) + rgba(148,163,184))

2. Tipografía: Jerarquía Cinematográfica

La diferencia #1 entre UI amateur y profesional: contraste tipográfico extremo.

/* Título principal — domina la pantalla */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* Título de sección — ancla el contenido */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Subtítulo / título de tarjeta */
.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Texto de cuerpo — deliberadamente ligero */
.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px; /* medida de lectura */
}

/* Etiqueta pequeña */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

Reglas:

Proporción de tamaño título-cuerpo: mínimo 3:1 (ej., 48px título / 16px cuerpo)
Texto principal: SIEMPRE usa clamp() para escalado fluido
Espaciado entre letras: NEGATIVO en títulos (-0.02 a -0.04em), POSITIVO en etiquetas (+0.03 a +0.06em)
Altura de línea: 1.0-1.1 para títulos, 1.5-1.6 para cuerpo
Máximo una pantalla debe tener 2-3 tamaños de fuente, no más
Contraste de peso: 700 títulos / 400 cuerpo — nunca uses 500 para todo

3. Diseño: Respira y Bento

La Regla de la Respiración: El 60% de la pantalla debe ser ESPACIO VACÍO. El contenido es valioso — rodéalo de aire.

Escala de espaciado:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: clamp(80px, 12vw, 160px);
}

Cuadrícula Bento (para secciones de características, paneles de control):

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

/* Tarjeta de característica que abarca 2 columnas */
.bento-item-wide { grid-column: span 2; }
/* Tarjeta principal que abarca 2 columnas + 2 filas */
.bento-item-hero { grid-column: span 2; grid-row: span 2; }
/* Tarjeta alta */
.bento-item-tall { grid-row: span 2; }

Reglas:

Relleno vertical de sección: 80-160px (usa --space-section)
Ancho máximo de contenido: 1120px (no 1200 — un poco más ajustado se siente más diseñado)
Relleno lateral de página: 48-80px en escritorio, 20-24px en móvil
Relleno de tarjeta: 32-48px (generoso, no apretado)
Entre título y texto de cuerpo: 16-24px
Entre secciones de tarjetas: espacio de 16-20px
Sección principal: contenido centrado verticalmente, altura mínima de 80vh
NUNCA llenes todo el ancho — deja márgenes generosos

4. Tarjetas y Superficies: Vidrio con Alma

/* === Tarjeta de vidrio para tema oscuro === */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reflexión de luz en el borde superior */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* Hover: elevar + brillo */
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* === Tarjeta de vidrio para tema claro === */
.card-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

Reglas:

Radio de borde: 20-32px para tarjetas (GRANDE — este es el aspecto moderno)
Borde: siempre rgba, nunca colores sólidos — máximo opacidad 0.06-0.1
Siempre agrega un destello en el borde superior (truco de ::before con linear-gradient)
El hover debe incluir translateY (elevación) Y sombra mejorada
Las tarjetas claras usan sombra inset para brillo interno
Relleno de tarjeta: mínimo 32px, nunca menos

5. Botones: Píldora + Emoción

/* CTA principal — píldora con presencia */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Secundario / fantasma — píldora con borde sutil */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: rgba(var(--text-rgb), 0.3);
}

Reglas:

TODOS los botones usan border-radius: 50px (forma de píldora)
Botón primario: relleno sólido + brillo de sombra del color correspondiente
Botón secundario: transparente/fantasma con borde fino
Relleno: 14-16px vertical, 28-36px horizontal (generoso)
Hover: SIEMPRE translateY + aumento de escala + aumento de brillo
Activo: scale(0.97) con transición rápida (100ms)
Nunca uses botones cuadrados o ligeramente redondeados — siempre píldora completa

6. Iconos: Solo SVG — NUNCA Emoji

REGLA ABSOLUTA: Nunca uses emoji (🎬🎮💼🎵) como iconos de UI. Esta es la señal #1 de código amateur generado por IA.

Opción A: Iconos Lucide vía CDN (PREFERIDA)

Lucide es la biblioteca de iconos de código abierto más moderna y ligera (más de 1000 iconos).

<!-- Agregar al <head> -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- Usar en HTML con el atributo data-lucide -->
<i data-lucide="music" class="icon"></i>
<i data-lucide="play" class="icon"></i>
<i data-lucide="search" class="icon"></i>
<i data-lucide="heart" class="icon"></i>

<!-- Inicializar al final del body -->
<script>lucide.createIcons();</script>

/* Estilizar iconos con CSS */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
}

Nombres de iconos comunes: home, search, settings, user, heart, play, pause, skip-forward, skip-back, volume-2, music, headphones, mic, star, bookmark, share-2, download, arrow-left, arrow-right, chevron-down, plus, x, check, bell, mail, calendar, clock, globe, camera, image, film, book-open, briefcase, code, terminal, zap, trending-up, bar-chart-2, pie-chart, layers, grid, list, filter, edit-3, trash-2, eye, eye-off, lock, unlock, sun, moon, menu, more-horizontal, more-vertical, external-link, link, send, message-circle, phone, map-pin

Opción B: SVG en línea (cuando no haya CDN disponible)

Escribe rutas SVG mínimas directamente. Mantén los iconos simples (un solo path, viewBox 24x24):

<!-- Icono de reproducción -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="5 3 19 12 5 21 5 3"/>
</svg>

<!-- Icono de búsqueda -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- Icono de inicio -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
</svg>

Reglas de estilo de iconos:

Tamaño: 18-24px para estándar, 16px para compacto, 28-32px para iconos de características
Grosor de trazo: 1.5-2 (más delgado = más refinado)
Color: usa currentColor para que los iconos hereden el color del texto
Contenedor de icono: envuelve en un div redondeado con fondo sutil para énfasis

/* Contenedor de icono — da un "hogar" a los iconos */
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

7. Tokens de Color

:root {
  /* Tema oscuro (predeterminado) */
  --bg: #0a0a0f;
  --text-primary: #f0f0f3;
  --text-secondary: #8b8b99;
  --text-muted: #4a4a58;
  --accent: #6366f1;        /* índigo — cambiar según proyecto */
  --accent-rgb: 99, 102, 241;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.06);
  --text-rgb: 240, 240, 243;
}

/* Tema claro */
:root.light {
  --bg: #f8f6f4;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b80;
  --text-muted: #a0a0b0;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-border: rgba(255, 255, 255, 0.7);
  --text-rgb: 26, 26, 46;
}

Opciones de color de acento (elige UNO por proyecto):

Índigo: #6366f1 — tecnología, IA, SaaS
Azul: #3b82f6 — confianza, corporativo, finanzas
Violeta: #8b5cf6 — creativo, premium
Rosa: #f43f5e — audaz, energía, social
Ámbar: #f59e0b — cálido, cripto, fintech
Esmeralda: #10b981 — salud, naturaleza, crecimiento
Cian: #06b6d4 — fresco, moderno, viajes

7. Microinteracciones y Movimiento

/* Preajustes de transición */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

/* Hover de tarjeta — flotar hacia arriba */
.card { transition: all 0.4s var(--ease-out-expo); }
.card:hover { transform: translateY(-4px); }

/* Hover de botón — escala con rebote */
.btn { transition: all 0.25s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px) scale(1.03); }

/* Animación de entrada sutil */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}

Reglas:

Tarjetas: 0.4s ease-out-expo, translateY(-4px) en hover
Botones: 0.25s rebote, translateY(-2px) + scale(1.03)
Entradas: 0.2s smooth, cambio de color de borde + brillo sutil
NUNCA uses transition: all 0.3s ease — esta es la señal de IA
Activo/presionado: scale(0.97), duración 0.1s
Carga de página: animación fadeUp escalonada (0.1s de retraso por elemento)

8. Elementos de Profundidad Visual

Agrega estos para crear la sensación de "diseñado":

/* Orbe de degradado flotante (decorativo) */
.orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Superposición de textura de ruido (sutil) */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* Gradiente lineal sutil en secciones */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--text-rgb), 0.08) 50%, transparent);
}

/* Sombra larga para elementos de héroe */
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%);
  filter: blur(80px);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  pointer-events: none;
}

Reglas de capas de profundidad:

Los orbes deben estar DETRÁS del contenido (z-index: 0), el contenido encima (z-index: 1)
La superposición de ruido debe ser la última capa (z-index: 9999) pero casi invisible (opacidad 0.01-0.03)
Usa 1-2 orbes decorativos por página, no más — demasiados se ven recargados
Cada orbe debe tener un color diferente que combine con la paleta de acento
Tamaños de orbe: 300-600px (más grandes = más sutiles y atmosféricos)
Las secciones con fondo completo pueden usar un solo orbe grande centrado detrás

INSTALACIÓN Y USO RÁPIDO

Este es un skill de agente de IA. No requiere instalación. Para usarlo:

Asegúrate de tener esta habilidad referenciada en la configuración de tu agente de IA
Pídele al agente que "genere una página de inicio con diseño premium" o "cree un panel de control moderno"
La habilidad aplicará automáticamente el sistema de diseño descrito anteriormente

Ejemplos de prompts:

"Crea una landing page moderna para una startup de IA con efecto vidrio esmerilado y degradados difusos"
"Diseña un panel de administración con una cuadrícula Bento y tipografía cinematográfica"
"Genera una página de portafolio personal con iconos Lucide y animaciones de entrada"

Dependencias opcionales:

lucide (iconos) — cargado vía CDN, no requiere paquete npm

COMPATIBILIDAD DE PLATAFORMAS

Plataforma/Agente	Compatibilidad	Notas
Claude Code	✅ Completa	Se activa automáticamente para tareas de UI
Cursor	✅ Completa	Funciona con cualquier contexto de frontend
Codex CLI	✅ Completa	Usa las reglas de sistema de diseño directamente
OpenAI o1	✅ Completa	Funciona mejor con la especificación de diseño completa
GitHub Copilot Chat	⚠️ Parcial	Puede aplicar reglas de estilo pero no todo el sistema

GARANTÍA DE CALIDAD

Antes de que la habilidad considere su salida como completa, DEBE verificar:

MLiang0920/mliang-ui-design-skill

¿Qué es mliang-ui-design-skill?

Preguntar en tu IA favorita

Documentación

Generador de Código UI Web — Generador de Código UI Premium

Problema Principal que Resuelve Esta Habilidad

Cuándo Usarla

EL SISTEMA DE DISEÑO

1. Fondo: Atmósfera de Degradado Difuso

2. Tipografía: Jerarquía Cinematográfica

3. Diseño: Respira y Bento

4. Tarjetas y Superficies: Vidrio con Alma

5. Botones: Píldora + Emoción

6. Iconos: Solo SVG — NUNCA Emoji

7. Tokens de Color

7. Microinteracciones y Movimiento

8. Elementos de Profundidad Visual

INSTALACIÓN Y USO RÁPIDO

COMPATIBILIDAD DE PLATAFORMAS

GARANTÍA DE CALIDAD

Skills relacionados

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me