mickzijdel/design-process

Proceso de diseño

Los modelos son capaces de una creatividad asombrosa, pero esa creatividad se ahoga por cómo están entrenados. Un modelo construye un diseño ficha a ficha, y cada vez que necesita tomar una decisión de diseño — qué colores usar, cómo organizar los elementos — completa las fichas que cree que agradarán más a todos. El diseño termina siendo repetitivo e insípido: el caso definitivo de diseño-por-comité. Un gran diseño comienza con el sentimiento y busca crear una respuesta emocional. Dobla las reglas y deleita a los usuarios con elecciones memorables e inesperadas — exactamente lo opuesto a hacer la elección más predecible en cada paso.

Este skill es un proceso de diseño reimaginado para agentes de IA, vagamente inspirado en el Doble Diamante: Descubrir nuevas ideas más allá del promedio explorando una variedad de direcciones y redactando briefs de diseño audaces; Definir una identidad de diseño individual yendo más allá de los patrones familiares y encadenando modelos; Entregar un resultado final impresionante puliendo los bordes ásperos y descuidados. (Adaptado de Anshu Chimala "Cómo convertir tu IA en un diseñador de clase mundial", con las reglas recurrentes de los mejores skills de diseño públicos incorporadas en referencias/anti-slop.md.)

Dos reglas están por encima de cada paso:

• El brief gana. Cuando el usuario ha fijado una dirección, una fuente, una paleta, una época — síguelo exactamente, incluso si aparece en una lista de "nunca por defecto". Redirigir un brief claro hacia tu propio gusto es un fracaso. Las listas se aplican solo cuando el brief deja un eje libre.
• Un 'tell' es un valor predeterminado alcanzado sin razón, no un patrón que aparece. Juzga por la intención. Cuando no estés seguro de si algo es un 'tell' o una decisión, trátalo como una decisión.

Los pasos

1. Puerta: ¿qué es esto y para quién es? Una línea cada uno: el producto, la audiencia, la única acción para la que existe la página, la plataforma y cualquier restricción de marca. Si el usuario no dio nada de eso, pregunta una vez (AskUserQuestion) — un brief que inventes es el brief promedio. La industria del sujeto, los materiales y el lenguaje vernáculo son de donde provienen las elecciones distintivas. En el mismo mensaje, establece las imágenes: verifica una ruta de generación (una clave en .env.agents o fnox, un servidor MCP de fal/replicate, el Codex CLI, herramientas de imagen integradas; consulta define.md). No se encuentra ninguna → pide una, o activos reales (capturas de pantalla del producto, fotos). Registra la respuesta en el brief; una página solo de texto es una decisión que el usuario toma, no un valor predeterminado en el que el agente cae.

2. Descubrir — ve amplio antes que profundo. Obtén variedad desde fuera del modelo. Ya sea sembrando la dirección desde una cadena aleatoria (String Seed of Thought) o obteniendo una inspiración específica y salvaje que el usuario traiga; cuando no tenga ninguna, genera una lista amplia de lenguajes de diseño y deja que reaccione. Cuando la composición y la jerarquía importan más que la inspiración sembrada en sí, haz un mockup de la pantalla primero con un modelo de imagen y construye a partir de eso en lugar de un brief solo de texto. Escribe la dirección elegida como un brief de diseño antes de cualquier código. Se desean varias direcciones → varios briefs, varias variantes desechables, cada una aislada. → referencias/discover.md

3. Construir la primera versión contra el brief. Comprométete con la dirección a fondo: tipografía real (elegida para este tema, cargada y verificada), un acento usado con poca frecuencia, una forma de página completa que no sea héroe → tres características → CTA → pie de página, un elemento emblemático que un visitante recordaría, cada estado diseñado. Verifica las elecciones contra la tabla de "nunca por defecto" en referencias/anti-slop.md a medida que avanzas, no después, y ejecuta su autoevaluación de seis ejes antes de la primera captura de pantalla.

4. Definir — el bucle de crítica. Captura la pantalla (escritorio y teléfono, en archivos). Despacha un subagente crítico de diseño en el modelo más fuerte disponible, en un contexto nuevo con solo las capturas de pantalla y la estética deseada (nunca el código, nunca la puntuación objetivo). Nombra las brechas con respecto a un nivel de estudio, o mejor aún, contra diseños de referencia reales, a ciegas, y puntúa /10. Arregla la brecha más grande, vuelve a capturar, vuelve a ejecutar con el mismo prompt. El bucle está acotado: dos rondas por defecto, luego detente en la primera de: se alcanzó el nivel / una ronda que no cambió nada / se agotó el presupuesto, y muéstraselo al usuario. Un umbral de puntuación por sí solo no es una salida; ningún bucle publicado ha terminado nunca en uno. → referencias/define.md, prompt en referencias/critic-prompt.md

5. Definir — activos reales. Cualquier página que lleve un elemento visual — un héroe, un arte de característica, una textura, un espacio de ilustración — obtiene imágenes generadas o reales por defecto, no degradados, formas o patrones CSS; los agentes se saltan este paso a menos que se les indique, y la decoración dibujada con código es la señal inequívoca. Donde lo merezca el movimiento, video (bucles con clave de croma, transiciones interpoladas por fotogramas clave). Las claves viven en un archivo env ignorado por git o en fnox, nunca en el código fuente. No se encontró ninguna ruta en la puerta y el usuario eligió solo texto → indícalo en la transferencia como una brecha conocida, y diseña de modo que el héroe se sostenga solo con tipografía y composición. → referencias/define.md

6. Entregar — restar, luego verificar. Recorre cada elemento preguntando qué se rompe si desaparece; elimina brillos, degradados, etiquetas redundantes, texto de relleno, controles personalizados peores que los nativos, secciones que una plantilla puso allí. Luego responsive, oscuro/claro, auditoría de accessibility, rendimiento y una captura de pantalla real del navegador en cada punto de quiebre. → referencias/deliver.md

7. Entregar — filtro de voz. Ejecuta el skill writing:voice-profile sobre cada cadena visible para el usuario (titulares, entradillas, botones, estados vacíos y de error) para que el texto se lea en el registro del usuario, no en el predeterminado del modelo; sin un perfil, sus reglas base más writing:humanizer siguen aplicándose. → referencias/deliver.md

flowchart LR
    G[Puerta: producto, audiencia,
una acción] --> D1[Descubrir:
semilla o prompt salvaje]
    D1 --> B[Brief de diseño]
    B --> V[Construir v1 contra brief]
    V --> S[Captura de pantalla]
    S --> C{Crítico /10
contexto nuevo}
    C -- "brechas" --> F[Arreglar brecha más grande]
    F --> S
    C -- "9+ o estancado" --> A[Imágenes / video reales
donde la personalidad es delgada]
    A --> P[Entregar: restar,
luego verificar]
    P --> W[Filtro de voz
sobre todo el texto]

Qué régimen

No todo trabajo de diseño merece el bucle completo. Elige el tratamiento, no si diseñar:

Trabajo	Haz
Un componente, un panel de configuración, una página de documentación, un rediseño pequeño	Pasos 1–3 + una sola mirada: construye completamente, captura escritorio y móvil juntos, arregla todo lo que muestre en un lote, confirma una vez, detente
Una página de aterrizaje, una pantalla principal, cualquier cosa que el usuario haya llamado "genérica" o quiera que destaque	El bucle completo, pasos 1–6, crítica acotada como arriba
El usuario quiere un abanico para elegir	Paso 2 tres o más veces en variantes aisladas, una captura de pantalla cada una, deja que elija, luego continúa desde el paso 3 con la ganadora

Referencia rápida

Síntoma	Movimiento
Cada ejecución luce igual (degradado púrpura, héroe dividido)	Siembra desde una cadena aleatoria, o nombra una inspiración salvaje — discover.md
"Hazlo único/aleatorio" no ayudó	No puede ser aleatorio pidiéndolo; la variedad debe venir de fuera del modelo
No tienes idea de qué dirección tomar	Prompt de lista amplia → el usuario reacciona → afina → construye el prompt
La disposición/jerarquía se siente mal pero la dirección es correcta	Haz un mockup de la pantalla con un modelo de imagen y construye a partir de él, junto al brief escrito — discover.md
El agente sigue diciendo "se ve bien" sobre su propio trabajo	Subagente crítico, contexto nuevo, solo captura de pantalla, mismo prompt cada ronda
El crítico nunca está satisfecho, se queman fichas	Limita a 2 rondas primero; detente en una puntuación estancada; haz que el listón sea concreto (selección a ciegas vs referencias reales)
Cada elección no predeterminada es la misma no predeterminada (Space Grotesk, crema + serif)	Un valor predeterminado de segundo orden sigue siendo un valor predeterminado; rota — anti-slop.md
La personalidad proviene de degradados CSS y blobs	Genera imágenes reales; shaders/3D solo en combinación con imágenes
No tienes una clave de generación de imágenes a mano	Pregunta en la puerta, u obtén activos reales del usuario; envía solo texto solo como su elección declarada
Se siente recargado, falta "premium"	Pasada de sustracción — deliver.md
Se ve bien en la revisión de código	No está terminado hasta que hayas visto la captura de pantalla

Terminado cuando

• Existe un brief escrito y el diseño enviado aún coincide con él.
• Elimina el nombre del producto del brief: alguien aún podría decir para qué es la página.
• El crítico puntuó 9+ (o ganó la comparación a ciegas) en un contexto nuevo, o el bucle alcanzó su límite y el usuario aceptó dónde está.
• Nada de la tabla de "nunca por defecto" sobrevive sin una razón escrita en el brief.
• Cada espacio visual contiene imágenes generadas o reales, o el brief registra la decisión de solo texto del usuario y la transferencia la nombra como una brecha.
• Cada elemento restante tiene un trabajo; el texto dice solo lo que el producto hace.
• Se han mirado las capturas de pantalla en anchos de teléfono y escritorio, claro y oscuro, y la auditoría de accessibility está limpia.
• Cada cadena visible para el usuario ha pasado por el filtro de voz; el texto se lee como el usuario lo escribiría, y la auditoría de voz no reporta palabras prohibidas.