Diseño Frontend
Crea interfaces frontend memorables que destaquen de la estética genérica generada por IA, mediante decisiones creativas audaces.
Consulta también:
ui-designpara fundamentos (tipografía, color, espaciado),web-designpara patrones CSS.
Instalación
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
QUÉ HACE Esta Habilidad
Guía la creación de interfaces web visualmente distintivas mediante:
- Establecer una dirección estética audaz antes de codificar
- Tomar decisiones intencionales sobre tipografía, color y espacio
- Implementar movimiento y microinteracciones que deleiten
- Evitar los patrones predecibles que marcan las UIs generadas por IA
CUÁNDO Usarla
- Al construir un nuevo componente, página o aplicación web
- Al crear landing pages, sitios de marketing o UIs de producto
- Al rediseñar interfaces para hacerlas más memorables
- En cualquier trabajo frontend donde el impacto visual sea importante
PALABRAS CLAVE
diseño frontend, ui web, diseño ui, landing page, ui creativo, estética web, tipografía, diseño visual, diseño de movimiento, interfaz distintiva
Proceso de Pensamiento de Diseño
Antes de escribir código, comprométete con una dirección estética:
1. Entender el Contexto
- Propósito: ¿Qué problema resuelve esta interfaz?
- Audiencia: ¿Quién la usa y qué espera?
- Restricciones: Framework, rendimiento, requisitos de accesibilidad
2. Elegir una Dirección Audaz
Elige una estética extrema — la mediocridad se olvida:
| Dirección | Características |
|---|---|
| Brutalmente Minimalista | Crudo, esencial, nada extra |
| Caos Maximalista | Denso, en capas, abrumador intencionadamente |
| Retro-Futurista | Combina estética vintage con tecnología moderna |
| Orgánica/Natural | Suave, fluida, inspirada en la naturaleza |
| Lujo/Refinado | Materiales premium, elegancia sutil |
| Juguetona/Como un Juguete | Divertida, accesible, brillante |
| Editorial/Revista | Centrada en tipografía, basada en rejilla |
| Brutalista/Cruda | Estructura expuesta, anti-diseño |
| Art Decó/Geométrica | Formas audaces, simetría, ornamentación |
| Industrial/Utilitaria | Funcionalidad ante todo, robusta |
3. Identificar el Elemento Memorable
¿Qué única cosa recordará alguien de esta interfaz? Comprométete con ello.
Pautas Estéticas
Tipografía
NUNCA uses fuentes genéricas:
- Arial, Helvetica, system-ui
- Inter, Roboto (a menos que sea muy intencional)
SÍ elige fuentes distintivas:
- Combina una fuente display con carácter con una fuente de cuerpo refinada
- Explora: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
/* Ejemplo de combinación */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
Color y Tema
- Comprométete con una paleta cohesionada — no te refugies en opciones seguras
- Dominante + acento funciona mejor que colores distribuidos uniformemente
- Usa variables CSS para consistencia
- Evita los gradientes morados sobre blanco (el "estilo IA por defecto")
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
Composición Espacial
Rompe las expectativas:
- Asimetría sobre el equilibrio perfecto
- Superposición intencional de elementos
- Flujo diagonal o diseños no convencionales
- Espacio negativo generoso O densidad controlada — nada intermedio
- Elementos que rompen la rejilla para atraer la atención
Movimiento e Interacción
Céntrate en momentos de alto impacto:
- Carga de página: Revelaciones escalonadas con
animation-delay - Animaciones activadas por scroll que sorprendan
- Estados hover con personalidad
- Prefiere animaciones CSS para HTML; librería Motion para React
/* Entrada escalonada */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Fondos y Atmósfera
Crea profundidad y ambiente:
- Mallas de gradiente y gradientes de múltiples paradas
- Texturas de ruido y superposiciones de grano
- Patrones geométricos o rejillas sutiles
- Transparencias en capas
- Sombras dramáticas o planitud total
- Cursores personalizados para elementos interactivos
Principios de Implementación
Iguala la Complejidad a la Visión
- Visión maximalista → código elaborado con animaciones extensas
- Visión minimalista → restricción, precisión, espaciado perfecto
- Elegancia = ejecutar bien la visión, no añadir más
Varía entre Generaciones
Nunca converjas en los mismos patrones:
- Alterna temas claros/oscuros
- Usa distintas familias de fuentes cada vez
- Explora diferentes direcciones estéticas
- Cada diseño debe sentirse único
NUNCA HAGAS
- NUNCA uses familias de fuentes genéricas (Inter, Roboto, Arial, fuentes del sistema)
- NUNCA uses gradientes morados sobre fondos blancos — la "estética IA"
- NUNCA uses diseños predecibles y de plantilla
- NUNCA omitas la fase de pensamiento de diseño — comprende antes de construir
- NUNCA te refugies en estéticas seguras e intermedias — comprométete con una dirección
- NUNCA olvides que un diseño distintivo requiere código distintivo
- NUNCA converjas en los mismos patrones entre generaciones — varía intencionadamente
- NUNCA añadas complejidad sin propósito — tanto el minimalismo como el maximalismo requieren intención