Tutorial: Tarea 3: Diseñar una web completa a partir de un design system

Visión General

¿Qué vas a conseguir con este tutorial?

El reto: Diseñar una web completa a partir de un design system previo y su dirección de arte: estructura de páginas, wireframes detallados y especificaciones de diseño para cada sección.

La solución: ChatGPT Business o Claude Business generan la arquitectura de información, la estructura de cada página y las especificaciones detalladas de diseño (layout, componentes, contenido) a partir del design system y el brandwriting previamente definidos. El resultado es un documento de diseño completo que el equipo de desarrollo puede implementar directamente.

📈 Impacto esperado: Reduce el tiempo de diseño y especificación de una web de 5-10 días a 2-3 días, con un documento de diseño completo y coherente listo para desarrollo.

💡 Alternativa: Claude Business puede usarse como alternativa si no tienes acceso a ChatGPT Business.

Contexto

¿En qué situación se aplica este tutorial?

Con el design system y el contenido ya definidos, el diseño de la web se convierte en un proceso de aplicación sistemática. La IA puede generar las especificaciones de cada página de forma coherente, acelerando el trabajo del diseñador que puede centrarse en las decisiones de UX de alto nivel.

Preparación

Datos que necesitas tener listos

Design system aprobado por el cliente (colores, tipografías, componentes), wireframes o sitemap del sitio, contenidos de cada página (textos, imágenes, vídeos), CMS o tecnología de desarrollo a usar.

Paso 01

Paso 1: Abre ChatGPT Business y crea un nuevo chat o proyect...

Paso 1: Abre ChatGPT Business y crea un nuevo chat o proyecto.

Paso 02

Paso 2: Prepara los datos necesarios: Design system aprobado...

Paso 2: Prepara los datos necesarios: Design system aprobado por el cliente (colores, tipografías, componentes), wiref.

Paso 03

Paso 3: Copia el prompt y ajusta los campos entre corchetes...

Paso 3: Copia el prompt y ajusta los campos entre corchetes con tu información real.

Paso 04

Paso 4: Revisa el resultado con criterio directivo antes de...

Paso 4: Revisa el resultado con criterio directivo antes de tomar decisiones.

Prompt

Prompt completo listo para usar

Copia este prompt, sustituye los valores entre corchetes [VALOR] por los datos reales de tu organización y ejecútalo en ChatGPT Business.

Prompt — Tarea 3: Diseñar una web completa a partir de un design system

Actúa como diseñador UX/UI senior especializado en webs de servicios profesionales y agencias creativas. Tienes el design system y el contenido de la web de [empresa] ya definidos. DOCUMENTOS A ADJUNTAR: - Design system completo: [adjunta o describe] - Contenido y brandwriting: [adjunta] - Páginas a diseñar: [lista — ej. Home, Servicios, Sobre nosotros, Portfolio, Contacto] PARA CADA PÁGINA, ENTREGA: 1. ESTRUCTURA: secciones en orden con nombre, propósito y altura aproximada de cada una 2. HERO: descripción detallada del layout (columnas, imagen/video/animación, posición de texto, CTAs principales y secundarios) 3. SECCIONES PRINCIPALES: para cada sección, especifica componentes utilizados, contenido, layout (grid/flex), comportamiento responsive y animaciones de entrada 4. NAVEGACIÓN: estructura del menú principal (sticky/fixed/scroll-away), menú móvil (hamburger/drawer), footer (columnas, contenido) 5. INTERACCIONES CLAVE: hover states de tarjetas y botones, animaciones de scroll (parallax, fade-in), comportamiento del formulario de contacto 6. ESPECIFICACIONES TÉCNICAS: breakpoints (mobile 375px, tablet 768px, desktop 1280px, wide 1440px), comportamiento de cada sección en móvil 7. ASSETS NECESARIOS: lista de imágenes, iconos, videos y elementos gráficos necesarios con descripción y dimensiones Formato: especificación técnica lista para entregar a un desarrollador. Idioma: español. RESTRICCIONES Y CONDICIONES: - Las especificaciones de diseño generadas por IA deben revisarse con el cliente antes del desarrollo; algunos detalles de interacción requieren validación con el equipo técnico. - No publiques la web sin pruebas de usabilidad en los principales navegadores y dispositivos. - No implementes funcionalidades no acordadas con el cliente sin aprobación previa.

⚠️ Advertencia: Las especificaciones de diseño generadas por IA deben revisarse con el cliente antes del desarrollo. Algunos detalles de UX y accesibilidad requieren validación con usuarios reales.

Siguiente paso

¿Qué hacer ahora?

Ahora que has completado este tutorial, hay dos caminos naturales:

Tutorial relacionado · ChatGPT Business

Explorar más tutoriales de ChatGPT Business

Descubre otros casos de uso de ChatGPT Business para directivos en funciones de Operaciones.

Biblioteca completa

Ver todos los tutoriales

Explora los tutoriales del programa organizados por herramienta, función y nivel de dificultad.

💡 Para sacarle más partido: Una vez que hayas usado este tutorial en una situación real, guarda el prompt con las variables ya rellenadas para tu organización. La próxima vez que necesites resolver un reto similar, tendrás el prompt listo y el proceso será mucho más rápido.

Tarea 3: Diseñar una web completa a partir de un design system con ChatGPT Business