🎨Web artística minimalista
Instrucciones
Crea una página web basada en el contenido proporcionado por el usuario. Los requisitos de estilo de la página web son los siguientes:
### I. Posicionamiento del estilo visual - **Estilo artístico dibujado a mano**: Adoptando un estilo de arte lineal, mezclando el diseño digital moderno con la estética tradicional dibujada a mano. - **Esquema de color**: Usando colores neutros (blanco roto/gris claro) como base, combinados con texto principal gris oscuro y usando rojo anaranjado (color de acento) como color focal visual. - **Tono de marca**: Refinado, artístico y cálido, dirigido a un grupo de usuarios exigentes. ### II. Principios de la estructura de diseño **Sección principal (diseño de la primera pantalla)** - Diseño de columna izquierda-derecha (proporción áurea 60:40) - Lado izquierdo: - Título de gran tamaño (fuente de visualización, 72-96px), fuente oscura, fuerte impacto visual - Datos clave resaltados en color de acento (por ejemplo, "15 ciudades, 4749 ubicaciones") - Texto de subtítulo conciso y potente, que indica la propuesta de valor principal - Amplio espacio en blanco, que crea una sensación de alta gama - Lado derecho: - Ilustraciones personalizadas dibujadas a mano, que ocupan el 50% del espacio visual - Estilo de ilustración consistente: dibujo lineal + acentos de color local - Contenido de la ilustración profundamente integrado con la historia de la marca - **Diseño de la barra de navegación** - Navegación superior minimalista, posicionamiento fijo - Logotipo + 2-3 elementos del menú principal - Grupo de iconos del lado derecho (búsqueda/favoritos/menú) - Fondo transparente o blanco puro con sombras sutiles - **Área de la tarjeta de contenido** - Diseño de cuadrícula de tarjetas (3-4 columnas, responsivo) - Cada tarjeta incluye: - Título (encabezado 3, 32-40px) - Descripción (2-3 líneas, 16-18px, altura de línea 1.6) - Ilustración dibujada a mano que la acompaña (consistente con el estilo visual principal) - Fondo claro (#F5F3F0), esquinas redondeadas (8-12px) - Estado al pasar el ratón: Ligeramente ascendente + sombra más profunda - ### III. Especificaciones del sistema de ilustración **Pautas para la creación de ilustraciones** 1. 2. **Procesamiento de líneas**: - Utilice líneas irregulares dibujadas a mano de 1-2px para simular una textura de pintura realista - Mantenga líneas suaves con un toque de artificialidad, evitando la excesiva mecanicidad. 3. **Uso del color:** - 80% líneas grises + 20% relleno del color de la marca - El rojo anaranjado se usa solo para enfatizar elementos (personas, ventanas, edificios clave) - El fondo usa un degradado beige (#FDFBF7 → #F5F1EB) - 5. **Composición de la escena:** - Escenas urbanas: mezcla de edificios emblemáticos + escenas de la vida cotidiana - Perspectiva superior o isométrica - Agregar figuras pequeñas para realzar la narrativa y la intimidad - 7. **Densidad de detalles:** - Detalles ricos en primer plano, plano medio moderadamente simplificado y fondo delineado - Mantener la jerarquía visual, guiando la vista hacia la información clave - 9. ### IV. Sistema de fuentes - **Fuente de visualización (Título):** Fuente serif, pesada y potente (p. ej., Freight Display, Tiempos) - **Fuente de cuerpo (Texto de cuerpo):** Sans-serif, altamente legible (p. ej., Inter, Manrope) - **Relación de tamaño de fuente**: Utiliza una escala modular (1.25 o 1.333) - - **Niveles de peso de fuente**: Ligero (300) / Regular (400) / Medio (500) / Negrita (700) - ### V. Detalles de interacción - - **Micro-animaciones**: Las tarjetas flotan hacia arriba 4-8px al pasar el ratón por encima, tiempo de transición 300-400ms - - **Estado de carga**: Utiliza una pantalla de esqueleto para mantener el tono de la marca - - **Puntos de interrupción responsivos**: - - Escritorio: 1440px+ - - Tableta: 768-1439px - - Móvil: 375-767px - - ### VI. Requisitos de salida del diseño Cada salida del diseño debe incluir: 1. 2. Jerarquía visual clara (lograda a través del tamaño/color/espacio en blanco) 3. 4. Al menos una ilustración personalizada (profundamente relacionada con el contenido, generada usando Nano Banana Pro) 5. 6. 2-3 resaltados de color de acento (no excediendo 7. 8. Amplio espacio para respirar (espaciado de sección ≥ 120px) 9. 10. Ruta de acción clara del usuario 11. --- **Filosofía de diseño**: Usar un lenguaje visual artístico para transmitir la singularidad y calidez de la marca. Cada píxel sirve para contar una historia, no simplemente para mostrar la funcionalidad. El diseño debe hacer que los usuarios sientan, "Esto es para personas que aprecian la vida", en lugar de un producto frío y comercial.
Todas las ilustraciones de la página web fueron generadas por nano banana pro.
Descripción
Recomendado por
nene@YouMind
Por qué recomendamos esta habilidad
Transforma tu contenido en una página web artística dibujada a mano, fusionando diseño moderno con estética tradicional, con ilustraciones personalizadas y colores y tipografía refinados para crear una web con calidez de marca y hacer destacar tu producto o servicio.
Convierte el contenido en una página web artística dibujada a mano. Las exquisitas ilustraciones lineales y la combinación de colores aportan calidez y gusto a tu información.
Habilidades relacionadas
Ver todo
Página webCreador de páginas explorables
Un informe explica. Una página permite que la gente descubra por sí misma. YouMind ya puede crear páginas web. Explorable Explainer decide qué construir: convierte una investigación, 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 impulsada por el desplazamiento, gráficos reales, controles que puedes mover y fuentes que puedes consultar. Planifica antes de codificar. Primero apruebas un plan de construcción: la pregunta que responde la página, la revelación — el momento en que el lector debería sentir "oh" — una estructura 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 de dónde proviene. 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, 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 enfoque visibles, texto alternativo en todas partes, ningún significado transmitido solo por el color, movimiento reducido respetado, diseño adaptable desde 360px. Antes de entregarlo, realiza una autoevaluación de cinco puntos e informa honestamente de los resultados: ¿la revelación realmente funciona?, ¿la página sigue siendo legible con JavaScript desactivado?, ¿el orden de tabulación es lógico?, ¿cada número es trazable?, ¿hay alguna animación que el lector quiera detener? Dos reglas que no romperá: nunca inventa datos para 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 hojeado.
Página webWeb de luz suave diurna
Sistema de diseño web de estilo de luz suave diurna: lienzo de azul cielo claro (#ebf5ff), tipografía de exhibición muy grande con peso de fuente fijo en 500 (máximo 148px en responsive), tarjetas con esquinas redondeadas de 32px y píldoras de 9999px, botón CTA sólido de color casi negro #181d27, bloques de colores pastel e ilustraciones 3D flotantes con textura de arcilla. La profundidad se logra únicamente con el desplazamiento de tonos de color del lienzo a las tarjetas, y estas no tienen ninguna sombra. Es adecuado para necesidades como «estilo de luz suave diurna», «página de aterrizaje con ilustraciones 3D», «lienzo azul claro», «estilo de tarjetas redondeadas», «sitio web SaaS», «estilo Linear/Framer», etc. Incluye restricciones de accesibilidad y diseño responsive.
Página webEstilo Fashion Creative Design
Sistema de diseño web de estilo editorial de moda y póster: lienzo de papel crema cálido (#fffef7), títulos extragrandes con peso de fuente 300 (64–84px), fotografía a sangre, sin sombras, tarjetas con esquinas rectas + botones con esquinas redondeadas tipo 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 álbum de arte», «portafolio de estudio», «página de galería», etc. Puede transformar cualquier contenido en una página de estilo editorial de alta costura.
🎨Web artística minimalista
Instrucciones
Crea una página web basada en el contenido proporcionado por el usuario. Los requisitos de estilo de la página web son los siguientes:
### I. Posicionamiento del estilo visual - **Estilo artístico dibujado a mano**: Adoptando un estilo de arte lineal, mezclando el diseño digital moderno con la estética tradicional dibujada a mano. - **Esquema de color**: Usando colores neutros (blanco roto/gris claro) como base, combinados con texto principal gris oscuro y usando rojo anaranjado (color de acento) como color focal visual. - **Tono de marca**: Refinado, artístico y cálido, dirigido a un grupo de usuarios exigentes. ### II. Principios de la estructura de diseño **Sección principal (diseño de la primera pantalla)** - Diseño de columna izquierda-derecha (proporción áurea 60:40) - Lado izquierdo: - Título de gran tamaño (fuente de visualización, 72-96px), fuente oscura, fuerte impacto visual - Datos clave resaltados en color de acento (por ejemplo, "15 ciudades, 4749 ubicaciones") - Texto de subtítulo conciso y potente, que indica la propuesta de valor principal - Amplio espacio en blanco, que crea una sensación de alta gama - Lado derecho: - Ilustraciones personalizadas dibujadas a mano, que ocupan el 50% del espacio visual - Estilo de ilustración consistente: dibujo lineal + acentos de color local - Contenido de la ilustración profundamente integrado con la historia de la marca - **Diseño de la barra de navegación** - Navegación superior minimalista, posicionamiento fijo - Logotipo + 2-3 elementos del menú principal - Grupo de iconos del lado derecho (búsqueda/favoritos/menú) - Fondo transparente o blanco puro con sombras sutiles - **Área de la tarjeta de contenido** - Diseño de cuadrícula de tarjetas (3-4 columnas, responsivo) - Cada tarjeta incluye: - Título (encabezado 3, 32-40px) - Descripción (2-3 líneas, 16-18px, altura de línea 1.6) - Ilustración dibujada a mano que la acompaña (consistente con el estilo visual principal) - Fondo claro (#F5F3F0), esquinas redondeadas (8-12px) - Estado al pasar el ratón: Ligeramente ascendente + sombra más profunda - ### III. Especificaciones del sistema de ilustración **Pautas para la creación de ilustraciones** 1. 2. **Procesamiento de líneas**: - Utilice líneas irregulares dibujadas a mano de 1-2px para simular una textura de pintura realista - Mantenga líneas suaves con un toque de artificialidad, evitando la excesiva mecanicidad. 3. **Uso del color:** - 80% líneas grises + 20% relleno del color de la marca - El rojo anaranjado se usa solo para enfatizar elementos (personas, ventanas, edificios clave) - El fondo usa un degradado beige (#FDFBF7 → #F5F1EB) - 5. **Composición de la escena:** - Escenas urbanas: mezcla de edificios emblemáticos + escenas de la vida cotidiana - Perspectiva superior o isométrica - Agregar figuras pequeñas para realzar la narrativa y la intimidad - 7. **Densidad de detalles:** - Detalles ricos en primer plano, plano medio moderadamente simplificado y fondo delineado - Mantener la jerarquía visual, guiando la vista hacia la información clave - 9. ### IV. Sistema de fuentes - **Fuente de visualización (Título):** Fuente serif, pesada y potente (p. ej., Freight Display, Tiempos) - **Fuente de cuerpo (Texto de cuerpo):** Sans-serif, altamente legible (p. ej., Inter, Manrope) - **Relación de tamaño de fuente**: Utiliza una escala modular (1.25 o 1.333) - - **Niveles de peso de fuente**: Ligero (300) / Regular (400) / Medio (500) / Negrita (700) - ### V. Detalles de interacción - - **Micro-animaciones**: Las tarjetas flotan hacia arriba 4-8px al pasar el ratón por encima, tiempo de transición 300-400ms - - **Estado de carga**: Utiliza una pantalla de esqueleto para mantener el tono de la marca - - **Puntos de interrupción responsivos**: - - Escritorio: 1440px+ - - Tableta: 768-1439px - - Móvil: 375-767px - - ### VI. Requisitos de salida del diseño Cada salida del diseño debe incluir: 1. 2. Jerarquía visual clara (lograda a través del tamaño/color/espacio en blanco) 3. 4. Al menos una ilustración personalizada (profundamente relacionada con el contenido, generada usando Nano Banana Pro) 5. 6. 2-3 resaltados de color de acento (no excediendo 7. 8. Amplio espacio para respirar (espaciado de sección ≥ 120px) 9. 10. Ruta de acción clara del usuario 11. --- **Filosofía de diseño**: Usar un lenguaje visual artístico para transmitir la singularidad y calidez de la marca. Cada píxel sirve para contar una historia, no simplemente para mostrar la funcionalidad. El diseño debe hacer que los usuarios sientan, "Esto es para personas que aprecian la vida", en lugar de un producto frío y comercial.
Todas las ilustraciones de la página web fueron generadas por nano banana pro.
Descripción
Recomendado por
nene@YouMind
Por qué recomendamos esta habilidad
Transforma tu contenido en una página web artística dibujada a mano, fusionando diseño moderno con estética tradicional, con ilustraciones personalizadas y colores y tipografía refinados para crear una web con calidez de marca y hacer destacar tu producto o servicio.
Convierte el contenido en una página web artística dibujada a mano. Las exquisitas ilustraciones lineales y la combinación de colores aportan calidez y gusto a tu información.
Habilidades relacionadas
Ver todoPágina webCreador de páginas explorables
Un informe explica. Una página permite que la gente descubra por sí misma. YouMind ya puede crear páginas web. Explorable Explainer decide qué construir: convierte una investigación, 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 impulsada por el desplazamiento, gráficos reales, controles que puedes mover y fuentes que puedes consultar. Planifica antes de codificar. Primero apruebas un plan de construcción: la pregunta que responde la página, la revelación — el momento en que el lector debería sentir "oh" — una estructura 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 de dónde proviene. 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, 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 enfoque visibles, texto alternativo en todas partes, ningún significado transmitido solo por el color, movimiento reducido respetado, diseño adaptable desde 360px. Antes de entregarlo, realiza una autoevaluación de cinco puntos e informa honestamente de los resultados: ¿la revelación realmente funciona?, ¿la página sigue siendo legible con JavaScript desactivado?, ¿el orden de tabulación es lógico?, ¿cada número es trazable?, ¿hay alguna animación que el lector quiera detener? Dos reglas que no romperá: nunca inventa datos para 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 hojeado.
Página webWeb de luz suave diurna
Sistema de diseño web de estilo de luz suave diurna: lienzo de azul cielo claro (#ebf5ff), tipografía de exhibición muy grande con peso de fuente fijo en 500 (máximo 148px en responsive), tarjetas con esquinas redondeadas de 32px y píldoras de 9999px, botón CTA sólido de color casi negro #181d27, bloques de colores pastel e ilustraciones 3D flotantes con textura de arcilla. La profundidad se logra únicamente con el desplazamiento de tonos de color del lienzo a las tarjetas, y estas no tienen ninguna sombra. Es adecuado para necesidades como «estilo de luz suave diurna», «página de aterrizaje con ilustraciones 3D», «lienzo azul claro», «estilo de tarjetas redondeadas», «sitio web SaaS», «estilo Linear/Framer», etc. Incluye restricciones de accesibilidad y diseño responsive.
Página webEstilo Fashion Creative Design
Sistema de diseño web de estilo editorial de moda y póster: lienzo de papel crema cálido (#fffef7), títulos extragrandes con peso de fuente 300 (64–84px), fotografía a sangre, sin sombras, tarjetas con esquinas rectas + botones con esquinas redondeadas tipo 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 álbum de arte», «portafolio de estudio», «página de galería», etc. Puede transformar cualquier contenido en una página de estilo editorial de alta costura.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.