Mejora estética del frontend
Instrucciones
Evita la estética mediocre de la "IA chapucera" y crea una interfaz sorprendentemente única.
## Cinco dimensiones principales
**1. Tipografía**
- ❌ Prohibido: Inter, Roboto, Arial, Fuentes del sistema
- ✅ Elige: Fuentes únicas y distintivas
- ✅ Combinación: Fuente de presentación + Fuente de cuerpo, alto contraste
- ✅ Consejos: Contraste extremo de grosor de fuente (100 vs 900), amplio rango de tamaño de fuente (3x+)
**2. Color y temática**
- ✅ Mantén una estética coherente utilizando 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: Carga de página cuidadosamente seleccionada > Microinteracciones dispersas
- ✅ Activador de desplazamiento, sorpresa al pasar el ratón
**4. Distribución espacial**
- ✅ Flujo asimétrico, superpuesto y diagonal
- ✅ Rompe la cuadrícula, usa el espacio en blanco con audacia O con densidad controlada
**5. Antecedentes**
- ✅ Crea atmósfera y profundidad
- ✅ Malla degradada, ruido, patrones geométricos
- ✅ Transparencia por capas, sombras dramáticas, bordes decorativos
## Principios clave
- Cada diseño debe ser diferente para evitar la convergencia repetitiva.
- Lograr una visión estética acorde con la complejidad.
La extrema complejidad requiere un diseño meticuloso, mientras que el minimalismo exige moderación y precisión.
Libérate del pensamiento convencional y toma decisiones verdaderamente únicas.
⚡ Resumen en una línea
Tipografía única + esquema de color llamativo + animación meticulosa + diseño innovador + fondo evocador = diseño front-end inolvidable
Rechazar: Inter/Roboto, fondo blanco con degradado morado, diseño monótono.
📋 Lista de verificación rápida
Dimensiones y elementos de inspección
¿Deberían evitarse las fuentes Inter/Roboto? ¿Existen combinaciones de colores únicas?
¿La paleta de colores tiene un tema unificado? ¿Deberían evitarse los degradados morados?
¿La animación incluye un efecto de carga cuidadosamente coreografiado?
¿El diseño se desvía de la cuadrícula convencional?
¿El fondo crea profundidad y atmósfera?
Descripción
Recomendado por
nene@YouMind
Por qué recomendamos esta habilidad
¿Cansado de los diseños genéricos de "AI slop"? Esta habilidad te ayudará a salir de la mediocridad, creando impresionantes interfaces frontend con tipografía única, colores atrevidos, animaciones ingeniosas, diseños espaciales innovadores y fondos con profundidad. Ofrece una guía estética práctica para que tu trabajo destaque entre la multitud de sitios web y logre un verdadero avance visual.
• Personalidad tipográfica única • Estética ciberpunk oscura • Diseño asimétrico y dinámico • Animaciones de carga cuidadosamente orquestadas • Creación de atmósfera inmersiva
Habilidades relacionadas
Ver todo
Página webCreador de páginas explorables
Un informe explica. Una página permite que la gente averigüe por sí misma. YouMind ya puede crear páginas web. El Creador de Páginas Explorables decide qué construir: convierte un estudio, un conjunto de datos o un tema en una única página interactiva en la tradición de los gráficos de redacción y las explicaciones explorables: narrativa guiada por el desplazamiento, gráficos reales, controles que se pueden mover, fuentes que se pueden consultar. Planifica antes de codificar. Primero apruebas un plan de construcción: la pregunta única que responde la página, el momento revelador — el instante en que el lector debería sentir "oh" — un eje de desplazamiento de cinco a ocho secciones, de dos a cuatro interacciones cada una justificada por lo que el lector aprende al moverla, y un contrato de datos que enumera cada número y su origen. Luego crea un único archivo HTML autocontenido sin paso de compilación. Marcado semántico. Todos los números en una única constante DATA editable al principio. Revelaciones de desplazamiento que no se rompen en un teléfono. Cada control es un elemento de formulario real y operativo con teclado, con texto en vivo que describe su valor actual. La accesibilidad está integrada, no añadida: contraste 4.5:1, anillos de foco visibles, texto alternativo en todas partes, ningún significado se transmite solo con el color, se respeta el movimiento reducido, responsivo desde 360px. Antes de entregar, ejecuta una autoevaluación de cinco puntos e informa los resultados honestamente: ¿el momento revelador realmente impacta?, ¿la página sigue siendo legible con JavaScript desactivado?, ¿el orden de tabulación es sensato?, ¿cada número es rastreable?, ¿hay algo animado que el lector quiera detener. Dos reglas que no romperá: nunca inventa datos para hacer que un gráfico se vea bien, y te avisa cuando tus números contradicen tu borrador. Para investigadores, analistas, periodistas, educadores, fundadores independientes y consultores que quieren que su trabajo sea explorado en lugar de ser leído por encima.
Página webWeb de luz diurna suave
Sistema de diseño web con estilo de luz diurna suave: lienzo azul celeste claro (#ebf5ff), tipografía de display de gran tamaño con peso fijo 500 (máximo 148px en diseño responsive), tarjetas con esquinas redondeadas de 32px + píldoras de 9999px, CTA sólido casi negro #181d27, bloques de color pastel e ilustraciones 3D de arcilla flotantes. La profundidad se logra solo por el desplazamiento tonal del lienzo a las tarjetas, sin sombras en las tarjetas de contenido. Adecuado para necesidades como "estilo de luz diurna suave", "página de aterrizaje con ilustración 3D", "lienzo azul celeste", "estilo de tarjetas redondeadas", "sitio web de SaaS", "estilo Linear/Framer", entre otros. Incluye restricciones de accesibilidad y diseño responsive integradas.
Página webEstilo Fashion Creative Design
Sistema de diseño web con estilo de póster editorial de moda: lienzo de papel crema cálido (#fffef7), títulos extra grandes con peso 300 (64–84px), fotografía de borde a borde, sin sombras, tarjetas con ángulos rectos + botones con radio de píldora de 1440px. Adecuado para necesidades como «estilo de diseño de moda», «maquetación de revista», «estilo póster», «página web de libro de arte», «portafolio de estudio», «página de galería», etc. Puede reescribir cualquier contenido en páginas con estilo editorial de alta moda.
Mejora estética del frontend
Instrucciones
Evita la estética mediocre de la "IA chapucera" y crea una interfaz sorprendentemente única.
## Cinco dimensiones principales
**1. Tipografía**
- ❌ Prohibido: Inter, Roboto, Arial, Fuentes del sistema
- ✅ Elige: Fuentes únicas y distintivas
- ✅ Combinación: Fuente de presentación + Fuente de cuerpo, alto contraste
- ✅ Consejos: Contraste extremo de grosor de fuente (100 vs 900), amplio rango de tamaño de fuente (3x+)
**2. Color y temática**
- ✅ Mantén una estética coherente utilizando 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: Carga de página cuidadosamente seleccionada > Microinteracciones dispersas
- ✅ Activador de desplazamiento, sorpresa al pasar el ratón
**4. Distribución espacial**
- ✅ Flujo asimétrico, superpuesto y diagonal
- ✅ Rompe la cuadrícula, usa el espacio en blanco con audacia O con densidad controlada
**5. Antecedentes**
- ✅ Crea atmósfera y profundidad
- ✅ Malla degradada, ruido, patrones geométricos
- ✅ Transparencia por capas, sombras dramáticas, bordes decorativos
## Principios clave
- Cada diseño debe ser diferente para evitar la convergencia repetitiva.
- Lograr una visión estética acorde con la complejidad.
La extrema complejidad requiere un diseño meticuloso, mientras que el minimalismo exige moderación y precisión.
Libérate del pensamiento convencional y toma decisiones verdaderamente únicas.
⚡ Resumen en una línea
Tipografía única + esquema de color llamativo + animación meticulosa + diseño innovador + fondo evocador = diseño front-end inolvidable
Rechazar: Inter/Roboto, fondo blanco con degradado morado, diseño monótono.
📋 Lista de verificación rápida
Dimensiones y elementos de inspección
¿Deberían evitarse las fuentes Inter/Roboto? ¿Existen combinaciones de colores únicas?
¿La paleta de colores tiene un tema unificado? ¿Deberían evitarse los degradados morados?
¿La animación incluye un efecto de carga cuidadosamente coreografiado?
¿El diseño se desvía de la cuadrícula convencional?
¿El fondo crea profundidad y atmósfera?
Descripción
Recomendado por
nene@YouMind
Por qué recomendamos esta habilidad
¿Cansado de los diseños genéricos de "AI slop"? Esta habilidad te ayudará a salir de la mediocridad, creando impresionantes interfaces frontend con tipografía única, colores atrevidos, animaciones ingeniosas, diseños espaciales innovadores y fondos con profundidad. Ofrece una guía estética práctica para que tu trabajo destaque entre la multitud de sitios web y logre un verdadero avance visual.
• Personalidad tipográfica única • Estética ciberpunk oscura • Diseño asimétrico y dinámico • Animaciones de carga cuidadosamente orquestadas • Creación de atmósfera inmersiva
Habilidades relacionadas
Ver todoPágina webCreador de páginas explorables
Un informe explica. Una página permite que la gente averigüe por sí misma. YouMind ya puede crear páginas web. El Creador de Páginas Explorables decide qué construir: convierte un estudio, un conjunto de datos o un tema en una única página interactiva en la tradición de los gráficos de redacción y las explicaciones explorables: narrativa guiada por el desplazamiento, gráficos reales, controles que se pueden mover, fuentes que se pueden consultar. Planifica antes de codificar. Primero apruebas un plan de construcción: la pregunta única que responde la página, el momento revelador — el instante en que el lector debería sentir "oh" — un eje de desplazamiento de cinco a ocho secciones, de dos a cuatro interacciones cada una justificada por lo que el lector aprende al moverla, y un contrato de datos que enumera cada número y su origen. Luego crea un único archivo HTML autocontenido sin paso de compilación. Marcado semántico. Todos los números en una única constante DATA editable al principio. Revelaciones de desplazamiento que no se rompen en un teléfono. Cada control es un elemento de formulario real y operativo con teclado, con texto en vivo que describe su valor actual. La accesibilidad está integrada, no añadida: contraste 4.5:1, anillos de foco visibles, texto alternativo en todas partes, ningún significado se transmite solo con el color, se respeta el movimiento reducido, responsivo desde 360px. Antes de entregar, ejecuta una autoevaluación de cinco puntos e informa los resultados honestamente: ¿el momento revelador realmente impacta?, ¿la página sigue siendo legible con JavaScript desactivado?, ¿el orden de tabulación es sensato?, ¿cada número es rastreable?, ¿hay algo animado que el lector quiera detener. Dos reglas que no romperá: nunca inventa datos para hacer que un gráfico se vea bien, y te avisa cuando tus números contradicen tu borrador. Para investigadores, analistas, periodistas, educadores, fundadores independientes y consultores que quieren que su trabajo sea explorado en lugar de ser leído por encima.
Página webWeb de luz diurna suave
Sistema de diseño web con estilo de luz diurna suave: lienzo azul celeste claro (#ebf5ff), tipografía de display de gran tamaño con peso fijo 500 (máximo 148px en diseño responsive), tarjetas con esquinas redondeadas de 32px + píldoras de 9999px, CTA sólido casi negro #181d27, bloques de color pastel e ilustraciones 3D de arcilla flotantes. La profundidad se logra solo por el desplazamiento tonal del lienzo a las tarjetas, sin sombras en las tarjetas de contenido. Adecuado para necesidades como "estilo de luz diurna suave", "página de aterrizaje con ilustración 3D", "lienzo azul celeste", "estilo de tarjetas redondeadas", "sitio web de SaaS", "estilo Linear/Framer", entre otros. Incluye restricciones de accesibilidad y diseño responsive integradas.
Página webEstilo Fashion Creative Design
Sistema de diseño web con estilo de póster editorial de moda: lienzo de papel crema cálido (#fffef7), títulos extra grandes con peso 300 (64–84px), fotografía de borde a borde, sin sombras, tarjetas con ángulos rectos + botones con radio de píldora de 1440px. Adecuado para necesidades como «estilo de diseño de moda», «maquetación de revista», «estilo póster», «página web de libro de arte», «portafolio de estudio», «página de galería», etc. Puede reescribir cualquier contenido en páginas con estilo editorial de alta moda.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.