## Instrucciones

### Misión principal

**Antecedentes:** Los creadores (fotógrafos, ilustradores, diseñadores, artistas, etc.) necesitan un portafolio profesional en línea para mostrar su trabajo y atraer clientes o empleadores potenciales. Los sitios web de portafolio tradicionales son costosos, requieren mucho tiempo para crearlos y son difíciles de personalizar para reflejar las características estéticas personales. Esta habilidad busca generar rápidamente un sitio web de portafolio que combine belleza visual con funcionalidad completa.

**Objetivos específicos:**

- Generar un sitio web de portafolio completo con visualización de trabajos, filtrado por categoría y detalles de los trabajos.

- Estilo visual altamente alineado con el posicionamiento estético y el temperamento de trabajo del creador.

- Experiencia interactiva fluida, compatible con múltiples métodos de navegación (cuadrícula/mampostería/carrusel, etc.).

- Diseño responsivo, adaptado para ordenadores de escritorio y dispositivos móviles.

- Opcional: Incluir biografía personal, información de contacto y otros módulos auxiliares.

**Restricciones clave:**

- La estética es la principal ventaja competitiva; hay que evitar el diseño repetitivo y mediocre.

- Los métodos de presentación del trabajo deben resaltar el trabajo en sí, evitando un diseño excesivo que eclipse el contenido.

- La velocidad de carga y la experiencia de navegación deben ser fluidas.

**Antes de comenzar formalmente la tarea, confirme primero con el usuario si ha proporcionado sus muestras de trabajo. Proceda con la tarea únicamente después de confirmar que los materiales están disponibles.**

### Paso 1: Comprender el posicionamiento del creador y sus preferencias estéticas

**Objetivo:** Comprender a fondo el posicionamiento estilístico del creador, su público objetivo y sus tendencias estéticas para establecer una dirección clara para el diseño posterior.

**Comportamiento:**

- Analizar las **"{muestras de trabajo}"** proporcionadas por el usuario (enlaces o archivos de imágenes/vídeos), identificando las características del estilo visual (tono de color, composición, ambiente, temática, etc.).

- Lea atentamente la **"{descripción de preferencia estética}"** proporcionada por el usuario, extrayendo las palabras clave:

- Ambiente general (por ejemplo, minimalista, vintage, vanguardista, cálido, fresco, artístico, comercial, etc.)

- Estilos de referencia (por ejemplo, estilo japonés, moda europea/estadounidense, Bauhaus, fauvismo, cyberpunk, etc.)

- Tendencias cromáticas (por ejemplo, blanco/negro/gris, colores Morandi, alta saturación, degradados, etc.)

- Preferencias de diseño (por ejemplo, amplio espacio en blanco, collage denso, simétrico, irregular, etc.)

- Si el usuario proporciona **"{enlaces a sitios web de referencia}"**, visite y analice su lenguaje de diseño, métodos de interacción y características de diseño.

- Evaluar exhaustivamente el tipo de público objetivo (clientes potenciales, instituciones artísticas, aficionados en general, etc.), determinando el punto de equilibrio entre profesionalismo y accesibilidad.

**Resultado:** Formar internamente un "perfil estético" claro que contenga de 3 a 5 palabras clave de diseño principales y descripciones específicas de la dirección visual.

**Tras finalizar el trabajo, confirme con el usuario si el resultado es satisfactorio. En caso contrario, realice los ajustes necesarios en función de sus comentarios hasta que quede satisfecho.**

### Paso 2: Planificar la estructura de la cartera y los métodos de interacción

**Objetivo:** Diseñar la arquitectura de información y la experiencia de navegación más adecuadas en función de la cantidad y el tipo de trabajo, así como de las necesidades del usuario.

**Comportamiento:**

- Contar el número de obras y planificar el sistema de clasificación según las **"{categorías de obras}"** (por ejemplo, retrato/paisaje/naturaleza muerta, o por proyecto/serie/año, etc.).

- Determinar el método de diseño de la página de inicio:

- **Diseño en cuadrícula:** Adecuado para tamaños de trabajo uniformes, que requieren un orden impecable.

- **Diseño de mampostería (cascada):** Adecuado para diversos tamaños de obra, enfatizando la riqueza visual.

- **Carrusel a pantalla completa:** Adecuado para pocas obras, cada una de las cuales requiere una visualización inmersiva.

- **Diseño híbrido:** Combinación de varios métodos, como imagen principal + cuadrícula inferior

- Interacción de filtrado de categorías de diseño:

- Navegación superior/lateral para cambiar de categoría

- Filtrado de clics en la nube de etiquetas

- Selección de menú desplegable

- Método de visualización de la página de detalles del plan de trabajo:

- Visualización de **superposición modal** sin navegación de página.

- **Página de detalles independiente** con soporte para navegación izquierda/derecha

- Incluir información: título de la obra, descripción de la creación, parámetros técnicos (opcional), recomendaciones de trabajos relacionados (opcional).

- Determinar los módulos auxiliares:

- **Página Acerca de:** Foto del creador, declaración personal, experiencia

- **Módulo de contacto:** Correo electrónico, enlaces a redes sociales, formulario de consulta de colaboración (opcional)

**Resultado:** Diagrama claro de la estructura del sitio web (incluida la lista de páginas/módulos) y descripción del flujo de interacción.

### Paso 3: Diseñar el sistema visual (Paso principal)

**Objetivo:** Basándose en el perfil estético, diseñar un sistema de lenguaje visual completo que garantice que cada elemento del sitio web contribuya a la estética general.

**Comportamiento:**

**Diseño del sistema de color:**

- Basándose en **"{preferencias estéticas}"** y tonos de color de trabajo, determine el color principal, el color de acento, el color de fondo y el color del texto.

- Si la obra en sí es colorida, el fondo debe usar colores neutros (blanco/gris/negro) para resaltar la obra.

- Si el trabajo es en blanco y negro o de tonos fríos, considere usar colores de fondo cálidos o colores de acento para agregar profundidad.

- Proporcione códigos de color específicos (Hexadecimal) y descripciones de los escenarios de uso.

**Diseño del sistema tipográfico:**

- Elija combinaciones de fuentes que coincidan con el estilo:

- **Fuente del título:** Puede ser más distintiva, reflejando el tono del estilo (por ejemplo, una fuente con serifa muestra elegancia, una sin serifa muestra modernidad, una manuscrita muestra calidez).

- **Fuente del cuerpo del texto:** Priorice la legibilidad; normalmente se elige una fuente sans-serif limpia.

- Especifique los nombres exactos de las fuentes (por ejemplo, Playfair Display, Helvetica Neue, Noto Serif SC, etc.).

- Definir la jerarquía del tamaño de fuente (por ejemplo, títulos 32-48px, subtítulos 18-24px, cuerpo 14-16px)

**Principios de diseño y espacios en blanco:**

- Determinar la proporción de espacio en blanco en función de las preferencias estéticas:

- **Estilo minimalista:** Abundante espacio en blanco, menos obras por pantalla (2-4)

- **Estilo sofisticado:** Disposición compacta, más obras por pantalla (6-12)

- Defina valores específicos para los márgenes y el espaciado (por ejemplo, margen de página 80px, espaciado de trabajo 24px).

- Determinar el método de alineación (centrado, alineado a la izquierda, desplazamiento irregular, etc.)

**Diseño de detalles visuales:**

- Estilo de la tarjeta de trabajo: esquinas redondeadas/afiladas, con sombra/sin sombra, con borde/sin borde

- Efectos al pasar el cursor: zoom, superposición, aparición de información, cambio de color, etc.

- Animaciones de transición: fundido de entrada/salida, deslizamiento, cambio de velocidad y curvas de suavizado.

- Estilo de la barra de navegación: fija/oculta, transparente/sólida, subrayada/resaltada en bloque

**Creación de ambiente general:**

- **Si el estilo es artístico:** Añade texturas sutiles, elementos irregulares y tipografía creativa.

- **Si se trata de un estilo comercial:** Mantenga la moderación, el profesionalismo, haciendo hincapié en la calidad del trabajo y la claridad de la información.

- **Si prefieres un estilo personal:** Añade elementos dibujados a mano, iconos únicos y huevos de Pascua interactivos distintivos.

**Estándares de calidad:**

- Combinación de colores armoniosa, no más de 4 colores principales.

- Combinaciones de fuentes de no más de 2-3 tipos, jerarquía clara.

- Elementos visuales unificados en estilo, evitando la sensación de mosaico.

- El diseño general debe tener "elementos memorables" pero sin acaparar demasiado la atención.

**Resultado:** Un "Documento de especificaciones de diseño visual" detallado que contiene parámetros específicos e instrucciones de uso para colores, fuentes, diseño y detalles.

### Paso 4: Organizar el contenido y los metadatos del trabajo

**Objetivo:** Organizar las muestras de trabajo proporcionadas por los usuarios en datos estructurados, preparando el contenido para la generación del sitio web.

**Comportamiento:**

- Extraer/organizar la siguiente información para cada trabajo:

- **Archivo de trabajo:** URL de la imagen o enlace del vídeo (de **"{ejemplos de trabajo}"**)

- **Título de la obra:** Utilice **"{lista de títulos de obras}"** si se proporciona; de lo contrario, genere títulos descriptivos concisos.

- **Categoría de trabajo:** Etiqueta según **"{categorías de trabajo}"** (admite múltiples etiquetas)

- **Descripción del trabajo (opcional):** Utilice **"{descripción del trabajo}"** si se proporciona; de lo contrario, déjelo en blanco o genere una breve descripción.

- **Hora de creación/información del proyecto (opcional):** Agregar si el usuario proporciona

- Organizar las obras por categoría o en orden cronológico, determinando la prioridad de visualización (qué obras destacar en la página de inicio).

- Si la cantidad de trabajo es grande (>20 piezas), sugiera paginación o carga diferida para evitar una carga inicial lenta.

- Preparar el contenido de la biografía personal:

- Nombre del creador/nombre artístico (de **"{información personal}"**)

- Declaración personal/filosofía creativa (de **"{biografía personal}"**, se sugiere que el usuario la complete si no se proporciona)

- Información de contacto (correo electrónico, Instagram, Behance, etc., de **"{información de contacto}"**)

**Salida:** Lista de datos de trabajo estructurada (formato JSON o de tabla) que contiene todos los campos requeridos.

---

###

### Paso 5: Generar sitio web de portafolio

**Objetivo:** Transformar el diseño visual y los datos de contenido en un sitio web interactivo.

**Comportamiento:**

- Redactar instrucciones detalladas para la generación de sitios web, incluyendo:

- **Estructura general:** Diseño de página (página de inicio, Acerca de, Contacto, etc.) y método de navegación.

- **Sistema visual:** Referencia completa al diseño del paso 3 en cuanto a color, fuente, diseño y parámetros de detalle.

- **Lógica de interacción:**

- Implementación de filtrado por categorías (funciona el filtrado al hacer clic en las etiquetas).

- Método de visualización de los detalles del trabajo tras hacer clic (modal o navegación)

- Detalles de los efectos y animaciones al pasar el cursor

- Reglas de adaptación responsiva (cómo se ajusta el diseño en dispositivos móviles)

- **Población de contenido:** Referencia Paso 4: datos de trabajo organizados e información personal

- **Optimización del rendimiento:** Carga diferida de imágenes, desplazamiento suave, animaciones de carga, etc.

- Especificar claramente los requisitos estéticos en las instrucciones, por ejemplo:

- "El ambiente general debe reflejar {palabras clave estéticas}, evitando diseños estandarizados".

- "Los efectos al pasar el cursor sobre las tarjetas de trabajo deben ser sutiles y refinados, no exagerados".

- "Las transiciones de color deben ser naturales, las animaciones deben ser fluidas (se sugiere un tiempo de respuesta de 300-500 ms)".

- Llamar a la herramienta generateWebpage, pasando:

- **Instrucción:** Instrucciones detalladas arriba

- **Referencias:** Si hay identificadores de materiales/artefactos de referencia, inclúyalos para proporcionar contexto.

**Estándares de calidad:**

- El sitio web carga e interactúa con normalidad.

- La presentación visual se ajusta a las especificaciones de diseño, sin errores de estilo evidentes.

- Visualización de trabajo completa, funciones de filtrado de categorías normales

- Buena adaptación a dispositivos móviles

**Resultado:** Sitio web de portafolio generado (se muestra automáticamente en la conversación).

---

## Especificaciones de salida

**Entregables:**

1. **Sitio web de portafolio personal (Entregable principal):**

- Incluye visualización de trabajos en la página de inicio, filtrado por categoría, detalles de los trabajos, biografía personal, información de contacto y otros módulos.

- Estilo visual altamente alineado con las preferencias estéticas del usuario.

- Interacción fluida, diseño adaptable

- Enlace a la página web que se puede compartir directamente

2. **Explicación del diseño visual (Auxiliar):**

- Breve explicación del proceso de diseño: por qué se eligieron estos colores, fuentes y diseños.

- Enumerar los parámetros de diseño principales (códigos de color, nombres de fuentes, dimensiones clave)

- Ayuda a los usuarios a comprender la lógica del diseño o a realizar ajustes futuros.

**Requisitos de formato:**

- El sitio web es una página HTML interactiva que se muestra automáticamente en la conversación.

- Explicación del diseño presentada en formato de texto conciso, puede incluir una lista de parámetros clave.

**Estándares de calidad:**

- **Nivel estético:** El sitio web presenta efectos visuales profesionales, refinados y memorables, evitando la sensación de plantillas predefinidas y mediocres.

- **Funcionamiento completo:** Las funciones principales, como la visualización del trabajo, el filtrado por categorías y la visualización de detalles, funcionan con normalidad.

- **Experiencia de usuario:** Carga fluida, interacción natural, buena adaptación a dispositivos móviles.

- **Precisión del contenido:** Todas las obras e información textual son precisas, sin omisiones ni errores.

---

## Estilo y presentación (Sección principal)

### Filosofía estética

El diseño de un sitio web de portafolio debe seguir el principio de que "el trabajo es lo primero, el diseño es secundario". Todos los elementos de diseño (color, tipografía, maquetación, animación) deben estar al servicio de la presentación del trabajo, no eclipsarlo. Asimismo, el diseño en sí debe tener buen gusto y atención al detalle, reflejando los estándares profesionales del creador.

### Puntos de diseño visual

**Aplicación del color:**

- Los colores de fondo suelen utilizar colores neutros (blanco/gris claro/gris oscuro/negro), lo que convierte a los colores de trabajo en los protagonistas.

- Los colores de acento (botones, enlaces, resaltados) deben usarse con moderación, armonizando con los tonos de color de trabajo.

- Evite combinaciones de colores demasiado brillantes o que contrasten entre sí.

- Permite ajustar dinámicamente los colores de la interfaz en función de los colores primarios de trabajo (técnica avanzada).

**Selección de fuente:**

- Prioriza las fuentes con buen gusto para el diseño, pero sin que sean demasiado ostentosas.

- **Recomendaciones de fuentes en inglés:** Playfair Display (elegante), Montserrat (moderna), Lora (clásica), Raleway (limpia)

- **Recomendaciones de fuentes chinas:** Source Han Serif (elegante), Source Han Sans (moderna), LXGW WenKai (cálida), Zcool QingKe HuangYou (potente)

- Las combinaciones de fuentes deben tener contraste (serif + sans-serif, o negrita + fina), pero no más de 3 tipos.

**Estética del diseño:**

- **Estilo minimalista:** Abundante espacio en blanco, 2-4 obras por pantalla, alineadas al centro, enfatizando el espacio para respirar.

- **Estilo de revista:** Diseño en cuadrícula, tamaños de página uniformes, pulcro y ordenado, enfatizando el profesionalismo.

- **Estilo artístico:** Diseño irregular, tamaños de obra variados, puede romper la cuadrícula, enfatizando la creatividad.

- **Estilo inmersivo:** Carrusel a pantalla completa, muestra una obra a la vez, enfatizando el impacto.

- Independientemente del estilo, mantenga el equilibrio y el ritmo visual.

**Detalles de la interacción:**

- **Los efectos al pasar el cursor deben ser sutiles y refinados:**

- Ligero zoom de imagen (escala: 1,05) + superposición semitransparente + aparición gradual del título

- O bien: cambio de saturación/brillo + resaltado del borde

- Evitar animaciones excesivamente exageradas (rotación, volteo, parpadeo).

- Duración de la animación de transición sugerida: 300-500 ms, utilizando la función de transición de entrada y salida.

- La experiencia de desplazamiento debe ser fluida, se pueden agregar efectos de paralaje para mayor profundidad.

- Las animaciones de carga deben ser sencillas y elegantes, evitando iconos de carga llamativos.

**Diseño adaptable:**

- **Escritorio:** Aproveche al máximo las ventajas de la pantalla panorámica, la cuadrícula de varias columnas o la visualización de imágenes grandes.

- **Tableta:** Ajustar a 2-3 columnas, manteniendo el equilibrio visual.

- **Móvil:** Columna simple o doble, mayor área de pulsación, navegación simplificada.

- La información clave (título, navegación, contacto) debe ser claramente visible en todos los dispositivos.

### Referencias de estilo comunes

- **Minimalismo:** Abundante espacio en blanco, colores primarios negro/blanco/gris, fuentes sans-serif, iconos sencillos, eliminación de toda decoración.

- **Estilo japonés fresco:** Tonos suaves (blanco roto, madera clara, azul brumoso), tipografías manuscritas, detalles cálidos y delicados.

- **Editorial de moda:** Alto contraste, tipografías llamativas, diseño asimétrico, estilo fotográfico en blanco y negro.

- **Estilo vintage:** Texturas envejecidas, tonos amarillos cálidos, tipografías con serifa, grano, calidad cinematográfica.

- **Tecnología/Futurismo:** Fondos oscuros, colores fluorescentes de acento, formas geométricas, efectos dinámicos, elementos ciberpunk.

- **Galería de Arte:** Fondo blanco puro, amplio espacio en blanco, exposición de obras centrada, navegación mínima, simulación de la experiencia de una galería física.

### Errores de diseño que se deben evitar

- ❌ Abuso de degradados, sombras y efectos, aspecto barato

- ❌ Demasiadas fuentes o fuentes demasiado elaboradas, lo que afecta a la legibilidad.

- ❌ Conflictos de color o saturación excesiva, fatiga visual

- ❌ Diseño recargado, falta de espacio para respirar entre las obras.

- ❌ Animaciones demasiado complejas o lentas, lo que afecta la experiencia.

- ❌ Mala adaptación a dispositivos móviles, texto demasiado pequeño o botones difíciles de pulsar

- ❌ Diseño excesivo, dejando que el diseño le robe el protagonismo al trabajo