Diseño Original
Ejecuta una sesión interactiva y guiada por preguntas que convierte un producto o tema en un lenguaje de diseño completo — un mundo visual coherente del cual se extraen cada pantalla, fotograma, icono, ilustración y animación como un "artefacto" — y entrégalo como un Brief de Lenguaje de Diseño completo. Funciona para cualquier entregable visual: una infografía, un storyboard de video, un sitio web o una UI/UX de aplicación móvil. El principio rector: la originalidad no se trata de ser único — se trata de ser internamente coherente en torno a una idea central. No preguntes "¿cómo hago que esto se vea único?"; pregúntate "¿cuál es la manifestación visual de la idea central?" El cambio más grande que impone esta habilidad: no diseñes pantallas — diseña un mundo. Todo lo demás es un elemento de ese mundo.
Cuándo usarlo / cuándo no
- Úsalo cuando el usuario necesite una identidad visual original o dirección de arte, o cuando un diseño existente se vea genérico/predeterminado por IA y necesite una idea unificadora.
- Si el usuario necesita una guía de estilo de marca práctica (paleta, fuentes, ambiente para generación de activos) en lugar de un mundo original →
skills/creative/creative-strategist; el brief de esta habilidad puede alimentar esa. - Si el lenguaje de diseño ya existe y el usuario solo necesita activos → ve directamente a la habilidad de producción para el medio (ver Fase 9).
- Si el problema es estructura/usabilidad de la UI en lugar de identidad visual →
skills/frontend-design/frontend-orchestrator.
Cómo ejecutar esta habilidad (leer primero)
Esta es una conversación facilitada, no un volcado de formulario. Sigue estas reglas:
- Una fase a la vez. Haz la(s) pregunta(s) enfocada(s) para la fase actual, espera la respuesta, refiérela en una o dos oraciones, luego continúa. Nunca pegues las siete fases a la vez.
- Siempre ofrece una recomendación. Para cada pregunta, propón 2–4 opciones concretas (con una "(recomendada)" primero) para que el usuario pueda reaccionar en lugar de inventar desde cero. Siempre pueden responder libremente.
- Usa preguntas estructuradas cuando el anfitrión lo soporte. En Claude Code, prefiere la herramienta
AskUserQuestionpara fases basadas en opciones. En otros agentes, pregunta en texto plano con una lista corta de opciones etiquetadas. - Recopila inspiración visual en vivo de la web en la Fase 1.5 y Fase 6 (ver references/inspiration-browsing.md). Elige el método de navegación que coincida con el agente anfitrión.
- Captura las decisiones sobre la marcha en un Brief de Lenguaje de Diseño en ejecución (plantilla en assets/design-language-brief-template.md).
- Aplica la Prueba de Originalidad antes de producir el resultado final. No la omitas.
- Transfiere a una habilidad de producción para el medio elegido (ver references/medium-playbooks.md).
Copia esta lista de verificación en tus notas de trabajo y marca los elementos:
Progreso del Lenguaje de Diseño:
- [ ] Fase 0: Enmarcar el mundo (medio, tema, audiencia)
- [ ] Fase 1: Metáfora central (una oración)
- [ ] Fase 1.5: Barrido de inspiración (web)
- [ ] Fase 2: Universo visual (vocabulario)
- [ ] Fase 3: ADN de diseño (formas / colores / movimiento / textura)
- [ ] Fase 4: Sistema de mascota (si aplica)
- [ ] Fase 5: La restricción característica
- [ ] Fase 6: Inspiración de dominios cruzados (web)
- [ ] Fase 7: Generar muchos conceptos → elegir el mundo
- [ ] Fase 8: Prueba de Originalidad (5 preguntas) — PUERTA
- [ ] Fase 9: Escribir el brief + transferencia al medio
Fase 0 — Enmarcar el mundo
Establece qué estás creando realmente antes de cualquier elemento visual. Pregunta:
- ¿Qué estamos creando? → infografía · storyboard de video · sitio web · UI/UX de aplicación móvil · otro
- ¿Cuál es el producto/tema, en una línea?
- ¿Para quién es y qué deberían sentir?
Luego di el cambio de mentalidad en voz alta al usuario: "No vamos a diseñar pantallas. Vamos a diseñar un mundo, y tu "+ medio +" estará hecho de artefactos de ese mundo."
No te detengas: si la solicitud ya responde a estas preguntas (por ejemplo, "un look original para mi app de matemáticas para niños"), refleja las respuestas como suposiciones en una línea y continúa directamente a la Fase 1 — la regla interactiva se aplica a las preguntas de diseño, no a volver a preguntar lo que el usuario ya dijo.
Fase 1 — Definir la metáfora central
Todo fluye de la metáfora central.
Haz la pregunta clave: "Si este producto fuera un objeto o lugar físico, ¿qué sería?"
Ofrece semillas basadas en el dominio (estas son del método fuente):
| Tipo de producto | Metáfora posible |
|---|---|
| App de matemáticas / aprendizaje | Bloques de juguete |
| Tutor / asistente de IA | Mentor Sabio |
| App de finanzas / trading | Centro de Comando |
| App de viajes | Diario del Explorador |
| App de conocimiento / documentos | Biblioteca Viva |
Insiste en una metáfora, no tres. Luego escribe el lenguaje de diseño en una oración: "Esto es una [metáfora] — por lo tanto, se ve como [sensación/mundo]."
Si no pueden decirlo en una oración, la metáfora no es lo suficientemente nítida aún — sigue refinando.
Fase 1.5 — Barrido de inspiración (web)
Antes de definir el vocabulario, recopila referencias reales para la metáfora y el ambiente elegidos. Sigue references/inspiration-browsing.md: navega cosmos.so, Pinterest, Savee, Dribbble, Behance, Are.na para la metáfora + ambiente, recopila 8–15 referencias y anota patrones recurrentes (iluminación, temperatura de color, composición, textura, formas). Resume los patrones al usuario antes de continuar.
Fase 2 — Construir un universo visual
Enumera todo lo que existe en ese mundo. Eso se convierte en tu vocabulario visual.
Con la metáfora fijada, haz una lluvia de ideas con el usuario de cada objeto, superficie, personaje y textura que habita en ese mundo. Ejemplo para Biblioteca Viva: Libros, Estantes, Notas, Tinta, Sellos, Marcadores, Textura de papel.
Luego mapea explícitamente el vocabulario en las capas de diseño:
| Objeto del mundo | Se convierte en |
|---|---|
| (ej. Libros, Sellos) | Iconos |
| (ej. Bocetos marginales) | Ilustraciones |
| (ej. Giro de página, sangrado de tinta) | Animaciones / movimiento |
| (ej. Estantes, tarjetas) | Elementos de UI / diseño |
| (ej. Tinta, papel, cuero) | Colores |
| (ej. Encabezados escritos a mano) | Tipografía |
Apunta a un vocabulario de 6–10 elementos concretos. Esta lista es la fuente de verdad para todo lo posterior.
Fase 3 — Crear tu ADN de diseño
Define las reglas del sistema que todo seguirá.
Fija cuatro dimensiones. Mantén cada una ajustada — las restricciones aquí son lo que hace que se sienta diseñado:
- Formas — 2–3 familias de formas (ej. rectángulos redondeados, círculos, cubos)
- Colores — 3–5 colores centrales con nombres vinculados al mundo (ej. Azul Marino Profundo, Azul Eléctrico, Amarillo Cálido, Gris Suave)
- Movimiento — una filosofía en una frase (ej. "elástico y juguetón, con propósito")
- Textura — un lenguaje (ej. "papel, dibujado a mano, similar a un boceto")
Registra valores hex exactos para los colores e intención concreta de easing/timing para el movimiento, de modo que el brief esté listo para construir.
Fase 4 — Diseñar un sistema de mascota (cuando encaje)
Una mascota le da a tu producto una cara y personalidad, y se convierte en el corazón del mundo.
Pregunta si una mascota sirve a este proyecto. Es poderosa para productos de aprendizaje, consumo, infantiles y liderados por marca; a menudo se omite para herramientas empresariales/financieras o minimalistas. Si es así, define:
- Quién/Qué es (ej. Robot Curioso, Zorro Sabio, Pequeño Científico, Constelación Viviente)
- Personalidad en 3 adjetivos
- Cómo aparece a través del medio (estados vacíos, carga, onboarding, narrador en un video, guía en una infografía)
Por qué importa: conexión emocional, memorabilidad y unifica toda la experiencia.
Fase 5 — Crear la restricción característica
Las restricciones no limitan la creatividad. Crean identidad.
Define una regla que el diseño nunca romperá. Esta única decisión es a menudo lo que hace reconocible un lenguaje:
| Restricción | Estilo resultante |
|---|---|
| Sin fotos permitidas | limpio, ilustrado (tipo Zenn) |
| Todo son bloques geométricos | estructurado (tipo app de matemáticas) |
| Solo negro, blanco + un acento | nítido, lineal (tipo Linear) |
| Cada ilustración debe verse dibujada a mano | cálido, humano (tipo Excalidraw) |
Escribe la restricción como una oración aplicable: "En este mundo, nunca ___ / siempre ___".
Fase 6 — Inspírate desde dominios no relacionados (web)
No copies competidores. Toma prestado de otros mundos.
Obtén inspiración de dominios fuera de la categoría del producto para mantener la frescura: Arquitectura, Naturaleza, Juguetes, Manuscritos antiguos, Diagramas científicos, Misiones espaciales, Maquinaria industrial. Usa references/inspiration-browsing.md para navegar 2–3 dominios no relacionados y extrae ideas transferibles (un sistema de cuadrícula de la arquitectura, una historia de color de la naturaleza, un estilo de etiquetado de diagramas científicos). Trae de vuelta 3–5 "préstamos" concretos.
Fase 7 — Generar muchos conceptos, luego elegir el mundo
Una idea central. Muchos mundos. La cantidad crea la oportunidad de la brillantez.
Genera un lote grande de direcciones de concepto cortas — cada una un "mundo" diferente que expresa la misma idea central (ej. Museo, Nave Espacial, Academia Mágica, Tablero de Detective, Cerebro Vivo… apunta a 20–50 conceptos de una línea). La mayoría será promedio; estás cazando el que sea extraordinario.
Preséntalos agrupados, deja que el usuario reaccione, luego reduce a 1 dirección principal (opcionalmente 1–2 respaldos). Para un lote grande, puedes enviar un subagente o flujo de trabajo para expandir conceptos, pero mantén al usuario en el bucle de selección.
Fase 8 — La Prueba de Originalidad (PUERTA)
Antes de producir algo, ejecuta las cinco preguntas. Cada respuesta debe ser "sí". Si alguna es "no", regresa a la fase relevante.
- ¿Puedo explicar el lenguaje visual en una oración? (→ Fase 1)
- ¿Proviene cada elemento de la misma metáfora? (→ Fase 2)
- ¿Puedo quitar el logotipo y aún identificar el producto? (→ Fase 3/5)
- ¿Un niño dibujaría el mismo lenguaje de diseño? (¿es simple y claro? → Fase 3)
- ¿Se ve como un mundo en lugar de una UI? (→ general)
Indica cada pregunta y su veredicto explícitamente al usuario.
Fase 9 — Escribir el brief y transferir
Completa assets/design-language-brief-template.md con cada decisión fijada y guárdalo en el proyecto del usuario (sugiere design-language.md). Luego traduce el lenguaje al medio elegido usando references/medium-playbooks.md (léelo en esta fase para las tablas de traducción por medio) y ofrece invocar la habilidad de producción correspondiente:
- Infografía / gráfico social →
skills/creative/social-graphics,skills/creative/image-generation, oskills/creative/brand-asset - Storyboard de video →
skills/creative/remotion-script-writer,skills/creative/product-video, oskills/creative/creative-strategist - Sitio web →
skills/frontend-design/frontend-orchestrator,skills/frontend-design/design-foundation,skills/frontend-design/color-system,skills/frontend-design/typography-system - UI/UX de aplicación móvil →
skills/frontend-design/frontend-orchestrator,skills/frontend-design/component-architecture,skills/frontend-design/layout-system
El brief es el contrato: cada activo posterior debe ser un artefacto del mundo que describe.
Formato de salida requerido
El entregable es el brief completado — siempre la estructura exacta de assets/design-language-brief-template.md, cada sección llena, ninguna omitida:
# Brief de Lenguaje de Diseño — [Producto / Tema]
## 1. Metáfora central (el lenguaje de diseño en una oración)
## 2. Universo visual (6–10 elementos de vocabulario mapeados a iconos/ilustraciones/movimiento/UI/colores/tipografía)
## 3. ADN de diseño (formas · colores con hex · una filosofía de movimiento · un lenguaje de textura)
## 4. Sistema de mascota (quién/personalidad/dónde aparece — o "ninguno" con razón)
## 5. Restricción característica ("En este mundo, nunca ___ / siempre ___")
## 6. Inspiración de dominios cruzados (3–5 préstamos concretos con fuentes)
## 7. Dirección elegida (el mundo ganador + 1–2 respaldos)
## 8. Prueba de Originalidad (las cinco preguntas con veredictos explícitos SÍ)
## 9. Notas de producción (transferencia al medio: qué habilidad, qué debe obedecer)
Dos sesiones ejecutadas sobre el mismo producto deben producir briefs con estas mismas nueve secciones en este orden; solo el contenido creativo difiere.
Errores comunes
| Error | Corrección |
|---|---|
| Volcar las 7 fases como un solo cuestionario | Una fase a la vez; refleja cada respuesta |
| Elegir 3 metáforas "para estar seguro" | Fuerza exactamente una — las metáforas mixtas matan la coherencia |
| Saltar el barrido de inspiración web | Las referencias reales previenen resultados genéricos de IA |
| Sin restricción característica | Sin una restricción no hay identidad (la Fase 5 no es opcional) |
| Diseñar pantallas/fotogramas antes del mundo | Define el mundo primero; los artefactos vienen al final |
| Entregar sin la Prueba de Originalidad | La puerta de 5 preguntas es obligatoria |
Integración
skills/creative/creative-strategist→ consume: el ADN de diseño del brief (colores, textura, movimiento) como materia prima para una guía de estilo práctica de generación de activos.skills/creative/social-graphics,skills/creative/image-generation,skills/creative/brand-asset→ consumen: el brief; cada activo generado debe ser un artefacto del mundo (tubería de imágenes del repositorio:docs/creative_cli.py, modelofal-ai/nano-banana-pro).skills/creative/product-video,skills/creative/talking-head,skills/creative/remotion-script-writer→ consumen: el brief como el mundo visual del cual se extraen sus beats, escenarios y escenas.skills/frontend-design/frontend-orchestrator→ consume: el brief como la capa de identidad sobre sus habilidades de sistema de diseño (design-foundation,color-system,typography-system,layout-system,component-architecture).
La conclusión final
Diseña un mundo. Todo lo demás es solo un elemento de ese mundo. Cada pantalla, miniatura, imagen, icono y animación debe sentirse como un artefacto del mismo universo.