Diseñar una web desde un design system con ChatGPT

Antes de empezar

Lo que necesitas para completar este tutorial

Lo que conseguiras al terminar

Si sigues estos pasos, en 60-90 minutos tendras:

✓ Mapa de sitio y árbol de contenidos priorizado
✓ Kit de componentes y variables de design tokens (JSON/CSS)
✓ Prototipo HTML/CSS responsive inicial y checklist de entrega para desarrolladores

Antes de empezar, asegurate de tener lo siguiente:

Obligatorio Acceso a ChatGPT Business con capacidad para cargar archivos y usar prompts avanzados.

Obligatorio Design system vigente: archivo Figma/Sketch/Adobe (o un documento con tokens, paleta, tipografías y componentes) y guía de marca.

Recomendado Acceso a un entorno de pruebas (staging) donde desplegar HTML/CSS para ver resultados rápidamente.

Recomendado Contacto técnico (lead front-end o agencia) para validar decisiones de implementación y estimaciones.

Transferencia internacional de datos: ChatGPT procesa datos en servidores externos. Sin acuerdo de procesamiento de datos (DPA) firmado, no introduzcas datos personales, financieros confidenciales ni datos especialmente protegidos. Verifica con tu departamento legal o IT antes de usar datos reales de tu empresa.

El caso

LumenLogística SA, sector logística y distribución — el problema real

LumenLogística necesita renovar su web corporativa para alinear la experiencia digital con su nuevo design system tras una reestructuración de marca. El equipo directivo requiere un entregable que permita a desarrollo y marketing ejecutar rápidamente sin largos ciclos de revisión.

Con ChatGPT y el prompt de este tutorial, puede resolver este reto en 60-90 minutos — sin conocimientos tecnicos previos.

Situacion real
Datos + contexto

→

ChatGPT
Prompt estructurado

→

Output ejecutivo
Listo para usar

Por que funciona: ChatGPT sintetiza información visual y textual en artefactos estructurados y reproducibles, convirtiendo tokens y reglas de diseño en código base y documentación. Genera versiones iterables que permiten al equipo directivo validar decisiones estratégicas con ejemplos concretos y cronogramas de implementación.

Contexto

Cuando usar este tutorial

✓ Usalo cuando...	× No lo uses cuando...
Necesitas pasar rápido de diseño a implementación con recursos limitados Debes alinear varias áreas (marketing, producto, TI) con un entregable común Buscas un prototipo HTML/CSS inicial y un plan de trabajo priorizado	Cuando el design system está incompleto o contradictorio en definiciones clave Cuando la organización requiere auditoría legal o de accesibilidad que deba realizarse externamente antes del diseño Para desarrollar integraciones backend complejas o lógica de negocio específica (p. ej. ERP) sin equipo técnico

Paso 01

Preparar insumos y alcance

Defina qué contiene su design system y cuál es el alcance de la web a generar. Este paso reduce ambigüedad y asegura que ChatGPT reciba información completa para producir entregables útiles.

1
Inventario del design system Reúna el archivo principal (Figma/Sketch/Documento) y liste tokens (colores, tipografías, espacios), componentes y variantes. Entregar este inventario permite a ChatGPT mapear componentes a HTML/CSS y generar JSON de tokens.
2
Definir alcance de páginas Enumere las páginas necesarias (p. ej. Home, Servicios, Casos, Contacto, Área cliente) y priorice según objetivos comerciales. ChatGPT usará esa lista para generar el sitemap y plantillas por tipo de página.
3
Identificar restricciones Anote requisitos técnicos (CMS objetivo, frameworks preferidos, requisitos de accesibilidad y SEO). Comunicar estas restricciones evita propuestas no implementables.

Checkpoint: Listado de tokens y componentes, alcance de páginas priorizado y restricciones técnicas recogidas en un único documento.

Paso 02

Configurar el prompt y parámetros

Configure el prompt principal con la información del paso anterior y determine el formato de entrega (HTML/CSS, JSON, documentación ejecutiva). Esto garantiza que la salida sea utilizable por equipos técnicos y por la dirección.

1
Seleccionar formato de entrega Decida si necesita HTML estático, CSS modular (CSS variables o SASS), tokens en JSON y documentación en Markdown/PDF. Especifique esto en el prompt para obtener artefactos listos para handoff.
2
Definir prioridad de entregables Indique qué es más urgente (p. ej. Landing de producto frente a portal de clientes) para que ChatGPT priorice el backlog y el cronograma.
3
Ajustar nivel de detalle Determine si desea código de producción o prototipo rápido. Indique estándares de código (BEM, CSS Modules) y requisitos de accesibilidad para que la salida cumpla políticas internas.

Checkpoint: Prompt configurado con formato de entrega, prioridades y estándares de código claramente definidos.

Paso 03

Ejecutar el prompt principal

Este es el prompt central del tutorial. Cópialo completo, rellena las variables entre corchetes con los datos de tu empresa o situación, y envíalo.

1
Copia el prompt completo Selecciona todo el texto del prompt y cópialo. No modifiques la estructura — está diseñado para obtener el output más útil posible.
2
Rellena las variables entre corchetes Sustituye cada [VARIABLE] con información real de tu empresa. Cuanto más específico seas, mejor será el output.
3
Envía el prompt y espera la respuesta Pega el prompt en el chat y envíalo. El modelo puede tardar entre 10 y 60 segundos dependiendo de la complejidad.

Variables del prompt — sustituye cada [VARIABLE] con datos reales

[NOMBRE_EMPRESA]Nombre de la empresa que solicita la web (p. ej. LumenLogística SA)

[BRAND_GUIDELINES]Resumen o enlace al design system / guía de marca con tokens, componentes y reglas

[PAGINAS_PRIORITARIAS]Lista priorizada de páginas que deben entregarse primero (máx. 6), p. ej. Home, Servicios, Contacto

Prompt principal — Diseñar web desde design system Eres un experto en UX, front-end y design systems. Tu tarea es transformar el design system proporcionado y los requisitos comerciales en un paquete entregable ejecutable para el equipo de desarrollo y la dirección. Responde estructurado en secciones claras. Datos de referencia: Empresa: [NOMBRE_EMPRESA]. Sector: [SECTOR]. URL actual (si existe): [URL_ACTUAL]. Entregables solicitados: 1) Mapa de sitio y árbol de contenido priorizado; 2) Wireframes simples por tipo de página (texto + esquema de bloques); 3) Kit de componentes con tokens exportables (JSON) y ejemplos de uso; 4) Código base HTML/CSS responsive (páginas plantilla y ejemplos de componentes) con variables CSS o SASS; 5) Checklist de accesibilidad y SEO; 6) Backlog priorizado con estimación en días/hombre y riesgos. Inputs: Pegue aquí el resumen del design system o enlace al archivo: [BRAND_GUIDELINES]. Indique el CMS o framework objetivo: [CMS_O_FRAMEWORK]. Reglas clave de marca: [REGLAS_MARCA]. Restricciones técnicas relevantes: [RESTRICCIONES]. Público objetivo y objetivos comerciales (máximo 3): [OBJETIVOS_COMERCIALES]. Prioridad de páginas (máximo 6): [PAGINAS_PRIORITARIAS]. Estándares de código preferidos: [ESTANDARES_CODIGO] (ej.: BEM, CSS Modules, SASS). Requisitos de accesibilidad: [REQUISITOS_ACCESIBILIDAD] (ej.: WCAG 2.1 AA). Salida requerida: - Sección 1: Resumen ejecutivo (máx. 300 palabras) con objetivos, alcance y prioridades. - Sección 2: Sitemap con árbol y justificación de priorización. - Sección 3: Plantillas por tipo de página: descripción, wireframe textual y lista de componentes necesarios. - Sección 4: Kit de componentes: para cada componente incluya nombre, variantes, tokens usados (color, tipografía, espaciado), HTML de ejemplo y CSS modular (variables o SASS). Entregue tokens en formato JSON listo para import. - Sección 5: Código base: entregue 2 páginas HTML completas (Home y una plantilla interior) y ejemplos de 5 componentes críticos codificados con CSS variables. Incluya comentarios de implementación y lista de archivos a entregar. - Sección 6: Checklist de QA (accesibilidad, SEO, rendimiento) y criterios de aceptación por componente. - Sección 7: Backlog priorizado para 3 sprints (tareas, complejidad estimada en días/hombre, dependencias y riesgos). - Sección 8: Handoff ejecutivo: documento de 1 página para la Dirección con timeline, coste estimado y KPIs. Formato de salida: entregue en un paquete estructurado (JSON a ser descargado) y adicionalmente un resumen ejecutivo en texto plano. Usa lenguaje ejecutivo y claro; prioriza implementabilidad sobre perfección estética. Si falta información crítica, devuelve una lista de preguntas concretas (máx. 8) que permitan completar el entregable. No incluyas assets binarios; referencia rutas y nombres de archivos sugeridos. Mantén el código lo más simple posible y preparado para iteración por el equipo de front-end.

Checkpoint: El modelo ha respondido con un output estructurado que incluye las secciones solicitadas en el prompt.

Paso 04

Iterar y preparar handoff

Valide la salida con stakeholders clave y refine el materiales hasta que sea apto para desarrollo. Este paso asegura calidad, cumplimiento de la marca y factibilidad técnica.

1
Revisión ejecutiva y técnica Comparta el entregable con marketing, producto y desarrollo para detectar discrepancias en contenido, accesibilidad o viabilidad técnica. Recabe feedback por prioridades.
2
Generar artefactos finales Solicite a ChatGPT versiones finales: resumen ejecutivo de una página, backlog priorizado para sprints y checklist de QA con criterios de aceptación claros para cada componente.

Checkpoint: Entregables validados por las áreas relevantes y lista de tareas priorizada lista para ejecutar en sprints.

Iteracion

Prompts para refinar el output

Estos son los ajustes mas frecuentes que se piden despues del primer output. Copialos directamente en el chat:

Hacer el output más específico

cuando el output es demasiado genérico. "Ajusta el entregable anterior para que incluya: 1) valores exactos de tokens (HEX/RGBA, sizes en rem), 2) ejemplos de copy para encabezados y CTAs por página, 3) estimaciones de tiempo por tarea en horas. Mantén el mismo formato y añade una tabla simple de dependencias."

Cambiar el nivel de detalle

cuando necesitas más o menos profundidad. "Vuelve a generar las plantillas de página con más detalle técnico: incluye estructura de DOM con clases sugeridas (siguiendo [ESTANDARES_CODIGO]), atributos ARIA esenciales, y un ejemplo de test de aceptación para cada componente. Si quieres menos detalle, resume cada plantilla en 3 bullets ejecutivos."

Adaptar el tono

cuando el tono no es el adecuado para tu audiencia. "Reescribe el resumen ejecutivo y el handoff en un tono más formal y conciso, dirigido al Comité de Dirección. Máximo 200 palabras y con 3 KPIs propuestos."

Versión ejecutiva resumida

para compartir con el Comité de Dirección. "Genera una página ejecutiva de 1 hoja con: objetivo del proyecto, entregables clave, timeline de 8 semanas, coste estimado por fase y 5 métricas para seguimiento. Usa titular breve y bullets claros."

Resultado

Que vas a obtener

Este es el tipo de output que genera ChatGPT con el prompt de este tutorial. El contenido varia segun tu empresa y situacion, pero la estructura es siempre esta:

Ejemplo de output — LumenLogística SA, sector logística y distribución

Estructura del output

El prompt genera un paquete estructurado en secciones: resumen ejecutivo, sitemap, plantillas, kit de componentes (incluyendo tokens JSON), código base de ejemplo, checklist de QA y backlog priorizado. Cada sección debe ser reutilizable por equipos técnicos y directivos.

Senales de un buen output

Contiene tokens exportables en JSON y CSS variables claramente nombradas
Incluye HTML/CSS funcional para al menos 2 plantillas y 5 componentes claves
Backlog con estimaciones y dependencias listo para distribuir entre sprints
Resumen ejecutivo con timeline y métricas para la dirección

Senal de que el output es bueno: El entregable incluye tokens JSON, código HTML/CSS funcional y un backlog priorizado con estimaciones y criterios de aceptación.

Costes

Inversion y retorno

20$ ChatGPT Business / mes

15-60 min por ejecución (según detalle solicitado) Por ejecucion del tutorial

∞ Reutilizaciones del prompt

ROI: La automatización de especificaciones y de código base reduce el tiempo de preparación en fases de diseño y handoff, acortando el time-to-market y disminuyendo retrabajos. Para una empresa mediana, eso puede traducirse en semanas de ahorro en entregas y menor coste de horas de desarrolladores senior.

Errores frecuentes

Que hacer cuando algo no funciona

Sintoma	Causa probable	Solucion exacta
Output con nombres de tokens inconsistentes	Design system proporcionado con nomenclatura mixta o falta de normalización	Proporciona una lista única y normalizada de tokens (color_primario, spacing_sm, font_base) y pide re-generar el kit indicando 'usar nomenclatura exacta suministrada'.
HTML demasiado genérico o sin clases útiles	Solicitud inicial no especificó estándares de código	Reenvía una iteración indicando el estándar de código exacto (p. ej. 'Sigue BEM para clases y usa CSS variables') y solicita ejemplos de DOM con clases.
Salidas que violan reglas de accesibilidad	No se proporcionaron requisitos WCAG concretos en el prompt	Añade al prompt 'Cumple WCAG 2.1 AA' y solicita lista de attributes ARIA y pruebas de contraste con valores exactos.
Backlog sin estimaciones realistas	Falta información sobre equipo y capacidad	Incluye en el prompt el perfil del equipo (número de desarrolladores, experiencia) y solicita estimaciones en días/hombre por rol.
El modelo pide archivos que no existen	Se hicieron referencias ambiguas al design system o a recursos externos	Aporta enlaces reales o marca 'NO DISPONIBLE' en las variables y pide alternativas (p. ej. paleta propuesta) para continuar.

Modo avanzado

Como hacer este tutorial con ChatGPT en modo avanzado

Usa el modo agente de ChatGPT para subir archivos del design system, ejecutar validaciones automáticas y generar artefactos iterativos. El agente puede orquestar pasos: validar tokens, generar código, y entregar paquetes descargables, acelerando la iteración técnica.

Modo avanzado

Flujo de trabajo avanzado

1
Subir el archivo del design system (Figma/JSON) al agent y pedir extracción automática de tokens y componentes.
2
Solicitar al agent que genere los artefactos iniciales (tokens JSON, HTML/CSS de ejemplo) en una carpeta estructurada.
3
Pedir pruebas automáticas: checks de contraste, validación de estructura ARIA y pruebas básicas de rendimiento (estimadas).
4
Solicitar un paquete ZIP listo para handoff con README, backlog y resumen ejecutivo.

Actúa como agente técnico. He subido el design system como [ARCHIVO_DS]. Extrae automáticamente tokens (colores, tipografías, spacing), identifica componentes y variantes, y genera: 1) tokens.json; 2) carpeta /templates con home.html e interior.html; 3) carpeta /components con 5 componentes críticos en HTML y CSS variables; 4) README con instrucciones de despliegue y checklist de QA. Ejecuta comprobaciones de contraste y reporta problemas con propuestas de corrección. Si detectas información faltante, lista preguntas concretas (máx. 8). Empaqueta todo en un zip llamado [NOMBRE_EMPRESA]_handoff.zip y proporciona una lista de archivos, tamaño estimado y tiempo estimado para completar el restante desarrollo (en días/hombre).

Cuando usar el modo avanzado en este tutorial: Particularmente valioso cuando el design system está en un archivo digital (Figma/JSON) y se dispone de permisos para cargar activos: el agente acelera extracción, validación y empaquetado automático.

Siguiente paso

Que hacer ahora?

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

Tutorial relacionado · ChatGPT

Explorar mas tutoriales de ChatGPT

Descubre otros casos de uso de ChatGPT para directivos en diferentes funciones y sectores.

Biblioteca completa

Ver todos los tutoriales

Explora los tutoriales del programa organizados por herramienta, funcion y nivel de dificultad.

Para sacarle mas partido: Después del primer handoff, realice una sesión de revisión de 60 minutos con desarrollo y marketing usando el entregable; capture 3 mejoras críticas y reitere el prompt solicitando cambios puntuales para dejar la versión lista para producción.

Alternativa segura

Puedo hacer esto sin que mis datos salgan de la empresa?

Si. Este caso de uso trabaja con datos que, por su naturaleza confidencial, estrategica o regulada, son candidatos optimos para ejecutarse con un modelo de lenguaje open source desplegado en infraestructura propia (on-premises o nube privada). Con esta configuracion, ningun dato abandona nunca los servidores de tu organizacion y el modelo no puede ser entrenado con tu informacion.

Modelos recomendados

Llama 3.3 70B — Ideal para analisis de documentos largos y generacion de texto estructurado (contexto 128K tokens).

Mistral Large 2 — Excelente para extraccion de informacion y clasificacion con alta precision.

Qwen 2.5 72B — Especialmente potente para analisis de datos tabulares y financieros.

Plataformas de despliegue

Ollama — Para equipos pequenos o uso individual en hardware propio.

vLLM — Para entornos de produccion con multiples usuarios simultaneos.

LM Studio — Para pruebas y uso individual sin configuracion de servidor.

Infraestructura minima

Para un modelo de 70B parametros en produccion:

GPU: 2x NVIDIA A100 40GB o 4x RTX 4090.

RAM: 128GB minimo.

Alternativa cloud privada: AWS Private Cloud, Azure Government o Google Cloud Confidential Computing.

Garantia de privacidad: Con un modelo on-premises correctamente configurado, los datos nunca salen de tu red corporativa, el modelo no se entrena con tu informacion, no hay transferencia internacional de datos y el cumplimiento normativo es total incluso para datos del art. 9 RGPD.

Necesitas implementar esta solucion en tu organizacion?

La configuracion de modelos open source on-premises requiere un proveedor tecnico especializado. Agere puede ayudarte a desplegar esta solucion en tu infraestructura de forma segura, con garantias legales y sin que tus datos salgan nunca de tu organizacion.

Contactar con Agere Conocer Agere