Dirección de diseño
Un diseño es distintivo cuando alguien que conoce el campo lo atribuiría a este único producto. La usabilidad proviene de la estructura familiar; la distinción proviene de lo que solo este producto tiene: su marca, su mundo, sus recursos gráficos y un movimiento característico. Eso viene de la persona, por lo que este skill pregunta antes de dibujar.
Un generador por sí solo converge en los mismos pocos estilos (defaults.md). Cada decisión a continuación proviene de la entrevista o se verifica contra esa lista; nada se elige porque sea lo primero que viene a la mente.
Se completa cuando una dirección está escrita, elegida por la persona, y cada compilación posterior la lee.
1. Recopilar lo que existe
Pide y lee todo lo que ya define la marca: archivos de logotipo, colores, fuentes, guías de
marca, fotografía, ilustraciones, presentaciones o páginas anteriores, un archivo de sistema de diseño en el repositorio,
y el archivo de proyecto del skill product-ui (.claude/product-ui.md) si existe. Un
sistema existente es el punto de partida; la dirección lo extiende y nunca lo contradice. Registra
qué activos existen y cuáles faltan.
2. Entrevista
Ejecuta interview.md: algunas preguntas por ronda, cada ronda basándose en las respuestas anteriores. Pregunta, escucha, sigue la respuesta sorprendente un nivel más profundo. La ronda termina cuando puedas describir el mundo, la personalidad y las anti-referencias del producto en un párrafo y la persona está de acuerdo.
3. Modo
Decide el modo a partir de la entrevista:
- Operar (una aplicación en la que las personas trabajan): la estructura, la navegación y los controles siguen siendo los familiares de la categoría. La dirección contribuye con tipo, paleta, densidad, recursos gráficos en las áreas tranquilas (encabezados, estados vacíos, incorporación, carga) y un movimiento característico.
- Persuadir (una página de aterrizaje, una campaña, una presentación): la dirección puede moldear toda la página — composición, imágenes, movimiento, diseño.
Un producto con ambos obtiene una dirección y la aplica por modo.
4. Proponer direcciones
Escribe dos o tres direcciones que difieran a simple vista, cada una a partir del material de la entrevista. Cada una nombra:
- tokens: paleta (4–6 colores con nombre y roles), emparejamiento tipográfico y escala, radio, bordes, elevación, densidad. Constrúyelos con tokens.md a partir de los activos de marca del paso 1 — un producto de referencia presta sus cualidades (velocidad, densidad), nunca sus colores ni tipo;
- recursos gráficos: un lenguaje de formas y geometría tomado del mundo del producto, y una receta para fondos generados, patrones e imágenes de relleno construidas a partir de esas formas;
- imágenes: qué fotografía o ilustración muestra, y cómo se recorta y trata;
- estructura: cuadrícula, ritmo, cómo se compone una pantalla o página;
- voz: tres palabras para cómo habla la interfaz, y una oración de ejemplo para cada uno de un botón, un estado vacío y un error;
- movimiento característico: una idea concreta y nombrable que el espectador recuerda ("estado dibujado como…");
- una muestra: una pantalla o sección real renderizada en ella, con contenido real.
Muestra las muestras una al lado de la otra, del mismo tamaño, con el mismo contenido. La persona elige una, o combina partes, y dice por qué.
Cada número y etiqueta en una muestra necesita una definición con la que la persona esté de acuerdo ("usuarios activos": ¿con sesión iniciada? ¿en una sesión hoy?). Recoge las que cuestionen como definiciones abiertas; son preguntas del producto y pasan al registro del paso 6.
Cuando la persona dice que todavía parece genérico pero no puede nombrar por qué, divide la superficie en conmutadores independientes — tipo de letra, paleta, forma (radio, bordes, chips), densidad, estilo de icono — en la misma pantalla, y permite que cambien cada uno hasta que la sensación desaparezca. El conmutador que la elimina nombra la causa.
5. Verificar distinción
Compara la muestra elegida con defaults.md y con las anti-referencias de la persona. Para cada coincidencia, cambia la decisión que la produjo, o registra por qué este producto la mantiene. Luego la prueba de atribución, ponderada por el nivel de distinción superficial de la entrevista: con el logotipo cubierto, ¿alguien que conoce el campo nombraría este producto? En un nivel alto, "podría ser de cualquiera" te devuelve al paso 4 con el elemento más débil. En un nivel bajo, un resultado limpio y familiar pasa, y el registro lo dice.
La distinción nunca cuesta usabilidad: un movimiento característico que oculta un control, reduce el contraste o rompe un patrón familiar de la categoría se traslada a un área tranquila o se elimina.
6. Registrar
Escribe la dirección en la sección "Dirección" del archivo de proyecto (.claude/product-ui.md,
o donde CLAUDE.md diga que el proyecto guarda sus decisiones de diseño; créalo a partir de la
plantilla product-ui cuando falte): la fecha, modo, tokens, recursos, receta de imágenes,
estructura, voz, movimiento característico, las anti-referencias, las definiciones abiertas y las respuestas de la entrevista que
las justifican. Coloca los tokens en el archivo de tokens del código. Las compilaciones y revisiones posteriores leen
el archivo de proyecto primero.