Design System y Dirección de Arte con ChatGPT

Antes de empezar

Lo que necesitas para completar este tutorial

Lo que conseguiras al terminar

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

✓ Design tokens (colores, tipografía, espaciado) documentados
✓ Kit de componentes con ejemplos y reglas de uso
✓ Resumen ejecutivo para aprobación directiva

Antes de empezar, asegurate de tener lo siguiente:

Obligatorio Acceso a ChatGPT Business con capacidad de exportar texto y archivos.

Obligatorio Brief de producto o web con objetivo, público objetivo y ejemplos de referencia.

Recomendado Inventario básico de interfaz (pantallas clave o URLs existentes).

Recomendado Guía de marca existente (logotipos, paleta primaria, tono de comunicación).

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

ElectroNova Retail SL, sector retail electrónico — el problema real

ElectroNova está lanzando una nueva plataforma de comercio electrónico y carece de un design system coherente; el equipo de marketing y el equipo de producto generan propuestas visuales inconsistentes que retrasan el desarrollo. Esto provoca un aumento de retrabajo y pérdida de tiempo en aprobaciones con el Comité de Dirección.

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

Situacion real
Datos + contexto

→

ChatGPT
Prompt estructurado

→

Output ejecutivo
Listo para usar

Por que funciona: ChatGPT sintetiza requisitos de marca y objetivos de negocio en especificaciones técnicas reproducibles, incluyendo tokens y ejemplos de código. Su capacidad para generar documentación estructurada y versiones ejecutivas facilita la toma de decisiones de la dirección y la transferencia al equipo de desarrollo.

Contexto

Cuando usar este tutorial

✓ Usalo cuando...	× No lo uses cuando...
Necesita alinear rápidamente equipos de diseño y desarrollo antes de una fase de sprint Quiere producir entregables técnicos (CSS variables, snippets, guidelines) para integración inmediata Busca validar opciones de dirección de arte con un resumen ejecutivo para Comité de Dirección	Cuando se requiere auditoría visual exhaustiva de identidad por agencias externas Cuando la identidad visual está en revisión estratégica profunda y aún no hay directrices de marca Cuando la decisión creativa requiere procesos participativos largos con usuarios finales

Paso 01

Recopilar brief y referencias

Reúna la información esencial: objetivos del sitio, perfiles de usuario, ejemplos de referencia y cualquier guía de marca existente. Este insumo es crítico para que ChatGPT genere un design system alineado al negocio.

1
Documentar objetivos de negocio Anote 3 objetivos concretos (por ejemplo: aumentar conversión B2C 15% en 6 meses). Esto orienta decisiones de prioridad en componentes y patrones.
2
Describir público objetivo Defina segmentos clave con datos demográficos y comportamentales. Ejemplo: 'Compradores tech de 25-44 años, valoran especificaciones técnicas y reseñas'.
3
Recolectar referencias visuales Incluya 4-6 URLs o capturas de sitios de referencia y capture notas: qué funciona y qué no para su marca. Esto guía la dirección de arte y tono.

Checkpoint: Cuenta con un brief estructurado (objetivos, públicos, referencias) listo para insertar en el prompt.

Paso 02

Definir alcance del design system

Determine el alcance inicial: tokens, componentes atómicos, patrones de página y entregables técnicos. Evite intentar cubrir todo; priorice pantallas y componentes críticos para el primer sprint.

1
Priorizar pantallas clave Seleccione 3-5 pantallas críticas (ej.: home, ficha de producto, checkout, perfil de usuario) que definan la mayoría de patrones.
2
Listar componentes esenciales Enumere componentes necesarios (cabecera, botón primario, tarjetas de producto, formularios) y su estado (maqueta, implementación, pendiente).
3
Decidir entregables técnicos Especifique qué necesita el equipo de desarrollo (CSS variables, tokens JSON, snippets HTML/CSS, guía de accesibilidad).

Checkpoint: Alcance acordado con lista priorizada de pantallas y componentes y entregables técnicos 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 o proyecto (p. ej. ElectroNova Retail SL)

[OBJETIVO_WEB]Objetivo principal del sitio (p. ej. aumentar conversión en ficha de producto 15% en 6 meses)

[PÚBLICO_OBJETIVO]Descripción del público objetivo principal (p. ej. compradores tech, 25-44 años)

Prompt principal — Definir design system y arte Eres un experto en diseño de productos digitales y design systems. Genera un design system y una dirección de arte completos para la web de [NOMBRE_EMPRESA] con el objetivo de [OBJETIVO_WEB]. Público objetivo: [PÚBLICO_OBJETIVO]. Tono de la marca: [TONO]. Paleta primaria sugerida: [PALETA_PRIMARIA] (si no hay, propón una coherente). Entregables requeridos: 1) Design tokens (colores con ratios de contraste WCAG, tipografías con escalas y tamaños, espaciado con sistema de 4/8px, sombras y radios) en formato JSON y CSS variables; 2) Kit de componentes priorizado (botones, inputs, tarjetas, nav, footer, modales) con reglas de uso, estados y ejemplos HTML/CSS; 3) 3 ejemplos de pantallas (home, ficha de producto, checkout) con mockup textual y notas de interacción; 4) Pautas de accesibilidad y rendimiento (contrastes, foco, ayudas ARIA, carga crítica); 5) Assets y especificaciones para equipo visual (logos, variantes, uso de fotografía y iconografía); 6) Guía de migración para integrar el design system en repositorio (naming conventions, tokens JSON, ejemplo de pipeline CI para actualización de tokens); 7) Checklist ejecutivo de 1 página para aprobación por Comité de Dirección. Para cada sección proporciona: a) explicación ejecutiva (2-3 frases), b) entregable técnico (código JSON/CSS mínimo viable), c) ejemplos concretos aplicados a [NOMBRE_EMPRESA] que muestren cómo se aplican tokens a un botón primario y una tarjeta de producto. Prioriza claridad y reproducibilidad: usa nomenclatura consistente (ej: --color-primary, --space-4), menciona ratios de contraste exactos y proporciona snippets listos para copiar. Al final añade una sección 'Riesgos y mitigaciones' breve y tres recomendaciones priorizadas para los próximos 90 días. Responde en español y estructura el output en secciones claramente tituladas.

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

Paso 04

Iterar y validar con stakeholders

Refine el output en dos ciclos: técnico y ejecutivo. Valide tokens y componentes con diseño y verifique la viabilidad técnica con desarrollo antes de aprobar la guía final.

1
Revisar con diseño Solicite a diseño pruebas visuales de botones, tarjetas y formularios basadas en los tokens. Ajuste tipografías y espaciados según proporción de marca.
2
Validar con desarrollo Entregue el JSON de tokens y snippets CSS a desarrollo para comprobar integrabilidad y rendimiento; ajuste variables según feedback.

Checkpoint: Design system validado en prototipos y con confirmación técnica para integrar en el sprint de desarrollo.

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. "Toma el output anterior y reemplaza las generalidades por especificaciones concretas para [NOMBRE_EMPRESA]. Para cada token de color, añade el hex, RGB y ratio WCAG respecto al blanco y al texto principal. Para cada componente, añade un ejemplo de uso en contexto comercial (ej.: tarjeta de producto destacando oferta)."

Cambiar el nivel de detalle

cuando necesitas más o menos profundidad. "Genera dos versiones del mismo design system: 1) Resumen ejecutiva de una página con decisiones clave y 2) Documento técnico detallado con JSON de tokens, snippets CSS/HTML y especificaciones de accesibilidad."

Adaptar el tono

cuando el tono no es el adecuado para tu audiencia. "Reescribe la 'Dirección de arte' y el 'Resumen ejecutivo' en un tono más [TONO] (sustituir por corporativo/innovador/neutral). Mantén los entregables técnicos intactos; solo cambia el lenguaje de presentación."

Versión ejecutiva resumida

para compartir con el Comité de Dirección. "Extrae un resumen de 1 página que incluya: objetivo, impacto esperado (KPIs), coste estimado de implementación, riesgos principales y tres decisiones visuales recomendadas. Usa lenguaje ejecutivo, sin jerga técnica."

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 — ElectroNova Retail SL, sector retail electrónico

Estructura del output

El output debe estructurarse en secciones: Resumen ejecutivo, Design tokens (JSON y CSS), Kit de componentes (descripciones y snippets), Ejemplos de pantallas, Pautas de accesibilidad, Guía de migración técnica, Riesgos y recomendaciones. Cada sección debe incluir explicación ejecutiva y entregable técnico listo para copiar.

Senales de un buen output

Contiene JSON de tokens y CSS variables claros
Incluye ratios de contraste WCAG y comprobaciones de accesibilidad
Presenta snippets HTML/CSS aplicables sin ambigüedad
Incluye resumen ejecutivo con KPIs y roadmap a 90 días

Senal de que el output es bueno: La señal clave es un JSON de tokens y ejemplos CSS que permite a desarrollo integrar el design system sin reinterpretación adicional.

Costes

Inversion y retorno

30$ ChatGPT Business / mes

15-45 min Por ejecucion del tutorial

∞ Reutilizaciones del prompt

ROI: Inversión baja frente al tiempo que se ahorra reduciendo retrabajo entre diseño y desarrollo; un design system bien definido puede reducir un 20-40% el tiempo de implementación de interfaces. Para la dirección, acelera la toma de decisiones y mejora la trazabilidad de cambios visuales.

Errores frecuentes

Que hacer cuando algo no funciona

Sintoma	Causa probable	Solucion exacta
Output demasiado genérico sin tokens concretos	Prompt insuficientemente específico o falta de brief detallado	Reejecutar el prompt añadiendo ejemplos concretos y valores de empresa en [NOMBRE_EMPRESA], [OBJETIVO_WEB] y [PÚBLICO_OBJETIVO]; usar la iteración 'Hacer el output más específico'.
Contrastes de color no cumplan WCAG	Paleta propuesta sin verificación técnica	Solicitar al modelo recalcular ratios y proponer alternativas accesibles; pedir colores alternativos con contraste mínimo 4.5:1 para texto normal.
Componentes sin estados interactivos definidos	Alcance mal definido o prompt que no solicitó estados	Pedir explícitamente 'incluye estados hover, focus, active, disabled' y reejecutar prompt para cada componente prioritario.
Código CSS no compatible con el stack front-end	No especificar framework o constraints técnicos	Indicar en el prompt el stack (p. ej. React + Styled Components o CSS puro) y pedir variantes de snippets adaptadas al stack.
Stakeholders no comprenden la propuesta ejecutiva	Tono demasiado técnico o extensos detalles	Generar la 'Versión ejecutiva resumida' de una página enfocada en KPIs, impacto y decisiones visuales prioritarias.

Modo avanzado

Como hacer este tutorial con ChatGPT en modo avanzado

En modo agente, ChatGPT puede ejecutar flujos iterativos con memoria de estado, generar archivos y coordinar acciones (p. ej. crear JSON y snippets separados). Use este modo para automatizar la entrega de múltiple artefactos y simulaciones de integración técnica.

Modo avanzado

Flujo de trabajo avanzado

1
Configurar el agente con el brief, objetivos y público objetivo como variables iniciales
2
Solicitar la generación automática de tokens en JSON y exportarlos como archivos separados
3
Solicitar snippets adaptados a frameworks específicos (React, Vue, CSS puro) y validar con pruebas unitarias básicas
4
Generar versiones ejecutivas y técnicas, luego crear checklist y plan de migración automatizado

Actúa como agente de producto: toma el brief de [NOMBRE_EMPRESA] y ejecuta las siguientes tareas en orden. 1) Genera JSON de design tokens y guárdalo en un archivo llamado tokens.json. 2) Genera un archivo styles.css con variables y snippets básicos. 3) Crea tres ejemplos de pantallas en archivos home.md, product.md y checkout.md con markup y notas de interacción. 4) Produce un resumen ejecutivo en executive_summary.md de una página con KPIs y recomendaciones a 90 días. Para cada archivo añade una breve nota de validación técnica (controles de contraste, dimensiones y dependencias). Reporta los enlaces a los archivos generados y resume los próximos pasos para integrar en el repositorio.

Cuando usar el modo avanzado en este tutorial: Úselo cuando necesite entregar múltiples artefactos listos para integrar y quiera automatizar la creación de archivos y versiones para diseño y desarrollo.

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 de validar el design system, programe una sesión de 60 minutos entre diseño y desarrollo para transferir conocimientos, subir tokens al repositorio y crear una tarea en el backlog para la primera implementación piloto.

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