Mejorar la estética del frontend
Fuente única, estética cyberpunk oscura distintiva, diseño dinámico asimétrico, animaciones de carga meticulosamente coreografiadas y atmósfera inmersiva.
Instrucciones
<estética_frontend>
Evite la estética mediocre de "IA basura" y cree una interfaz sorprendentemente única.
## Cinco dimensiones fundamentales
**1. Tipografía**
- ❌ Prohibido: Inter, Roboto, Arial, Fuentes del sistema
- ✅ Elige: Fuentes únicas y distintivas
- ✅ Combinación: Fuente Showcase + Fuente Body, alto contraste
- ✅ Consejos: Contraste extremo en el peso de la fuente (100 frente a 900), amplio rango de tamaño de fuente (3x+)
**2. Color y tema**
- ✅ Mantener una estética consistente usando variables CSS.
- ✅ Color dominante + color de acento vibrante
- ❌ Evitar: Degradado morado + fondo blanco
- ✅ Inspiración: Temas IDE, estética cultural
**3. Movimiento**
- ✅ Las animaciones CSS tienen prioridad (HTML)
- ✅ Biblioteca de movimiento
- ✅ Enfoque en el alto impacto: una carga de página cuidadosamente seleccionada > Microinteracciones dispersas
- ✅ Gatillo de desplazamiento, sorpresa al pasar el cursor
**4. Disposición espacial**
- ✅ Flujo asimétrico, superpuesto y diagonal
- ✅ Romper la cuadrícula, uso audaz del espacio en blanco O densidad controlada
**5. Detalles de fondo**
- ✅ Crea atmósfera y profundidad
- ✅ Malla de degradado, ruido, patrones geométricos
- ✅ Transparencia en capas, sombras dramáticas, bordes decorativos
## Principios clave
- Cada diseño debe ser diferente para evitar convergencias repetitivas.
- Lograr una visión estética acorde con la complejidad
La complejidad extrema requiere un diseño meticuloso, mientras que el minimalismo requiere moderación y precisión.
- Libérate del pensamiento convencional y toma decisiones verdaderamente únicas.
</frontend_aesthetics>
⚡ Resumen de una línea
Fuente única + combinación de colores atrevidos + animación meticulosa + diseño innovador + fondo atmosférico = diseño frontend inolvidable
Rechazar: Inter/Roboto, fondo blanco degradado morado, diseño monótono
📋 Lista de verificación rápida
Dimensiones y elementos de inspección
¿Deberían las fuentes evitar Inter/Roboto? ¿Existen combinaciones de colores únicas?
¿La paleta de colores tiene un tema unificado? ¿Deberían evitarse los degradados morados?
¿La animación tiene un efecto de carga cuidadosamente coreografiado?
¿El diseño se desvía de la cuadrícula convencional?
¿El fondo crea profundidad y atmósfera?
Mejorar la estética del frontend
Fuente única, estética cyberpunk oscura distintiva, diseño dinámico asimétrico, animaciones de carga meticulosamente coreografiadas y atmósfera inmersiva.
installedBy
105
creditsEarned
8,800
Instrucciones
<estética_frontend>
Evite la estética mediocre de "IA basura" y cree una interfaz sorprendentemente única.
## Cinco dimensiones fundamentales
**1. Tipografía**
- ❌ Prohibido: Inter, Roboto, Arial, Fuentes del sistema
- ✅ Elige: Fuentes únicas y distintivas
- ✅ Combinación: Fuente Showcase + Fuente Body, alto contraste
- ✅ Consejos: Contraste extremo en el peso de la fuente (100 frente a 900), amplio rango de tamaño de fuente (3x+)
**2. Color y tema**
- ✅ Mantener una estética consistente usando variables CSS.
- ✅ Color dominante + color de acento vibrante
- ❌ Evitar: Degradado morado + fondo blanco
- ✅ Inspiración: Temas IDE, estética cultural
**3. Movimiento**
- ✅ Las animaciones CSS tienen prioridad (HTML)
- ✅ Biblioteca de movimiento
- ✅ Enfoque en el alto impacto: una carga de página cuidadosamente seleccionada > Microinteracciones dispersas
- ✅ Gatillo de desplazamiento, sorpresa al pasar el cursor
**4. Disposición espacial**
- ✅ Flujo asimétrico, superpuesto y diagonal
- ✅ Romper la cuadrícula, uso audaz del espacio en blanco O densidad controlada
**5. Detalles de fondo**
- ✅ Crea atmósfera y profundidad
- ✅ Malla de degradado, ruido, patrones geométricos
- ✅ Transparencia en capas, sombras dramáticas, bordes decorativos
## Principios clave
- Cada diseño debe ser diferente para evitar convergencias repetitivas.
- Lograr una visión estética acorde con la complejidad
La complejidad extrema requiere un diseño meticuloso, mientras que el minimalismo requiere moderación y precisión.
- Libérate del pensamiento convencional y toma decisiones verdaderamente únicas.
</frontend_aesthetics>
⚡ Resumen de una línea
Fuente única + combinación de colores atrevidos + animación meticulosa + diseño innovador + fondo atmosférico = diseño frontend inolvidable
Rechazar: Inter/Roboto, fondo blanco degradado morado, diseño monótono
📋 Lista de verificación rápida
Dimensiones y elementos de inspección
¿Deberían las fuentes evitar Inter/Roboto? ¿Existen combinaciones de colores únicas?
¿La paleta de colores tiene un tema unificado? ¿Deberían evitarse los degradados morados?
¿La animación tiene un efecto de carga cuidadosamente coreografiado?
¿El diseño se desvía de la cuadrícula convencional?
¿El fondo crea profundidad y atmósfera?
