Rango de Diseño

¿Qué hace Rango de Diseño?

Por defecto, Claude diseña cada producto de la misma manera: Inter o Geist, un degradado índigo/violeta, un héroe centrado con dos botones, tres tarjetas de características con iconos en círculos teñidos, todo rounded-2xl y sombras grises suaves. Se ve bien, y se ve como cualquier otro sitio hecho por IA. Esta skill existe para romper ese patrón a propósito.

El movimiento central es simple: no elijas el estilo tú mismo, tíralo. Cuando se le pide a un modelo que "elija un estilo", siempre cae en las mismas pocas opciones, así que la elección se delega a un script que muestrea una biblioteca de direcciones coherentes y se aleja de lo que el proyecto ha usado recientemente. Tu trabajo es entonces comprometerte completamente con esa dirección y ejecutarla con oficio.

Flujo de trabajo

1. Lee la situación

• ¿Qué se está construyendo? Mapea a un tipo de producto: marketing (las páginas de aterrizaje, sitios, portafolios también cuentan aquí si prefieres), saas (pantallas de aplicaciones donde la gente trabaja), dashboard (analíticas, administración, monitoreo), ecommerce (tiendas, páginas de productos y categorías), mobile (pantallas de aplicaciones nativas o móviles primero), portfolio.
• ¿Hay una marca o sistema de diseño existente? Si el proyecto ya tiene tokens establecidos, un design-direction.md, o el usuario está pidiendo una característica dentro de una aplicación existente, mantén su dirección. La variedad es para proyectos nuevos, rediseños, y cuando el usuario pide algo diferente. La consistencia dentro de un producto es una característica; la uniformidad entre productos es el error.
• ¿El usuario mencionó una vibra? ("lujoso", "juguetón", "oscuro y técnico"). Tradúcelo en filtros (--energy, --mode) o un --show <id> específico, pero aún así muestra alternativas a menos que fueran específicas.
• Archivo de gustos. Si references/taste.md tiene contenido, léelo. Contiene los amores y odios personales del usuario y anula la biblioteca cuando entran en conflicto. Sus líneas exclude: y favor: son aplicadas automáticamente por el script de tirada; el resto (fuentes favoritas, colores, movimientos que les encantaron) es para que tú lo integres en la dirección que se construya.

2. Tira direcciones

python3 <skill-dir>/scripts/roll.py --product <tipo> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

Ejecútalo desde la raíz del proyecto. Lee dos historiales, el .design-history.json del proyecto y un ~/.claude/design-range-history.json compartido que cubre todos los proyectos, y se aleja de ambos, para que el siguiente producto no tenga el mismo aspecto que el anterior. También dispersa los colores de acento: la paleta de cada opción se elige de modo que su tono de acento esté lejos de las otras opciones y de los acentos usados recientemente, lo que evita que la "variedad" se reduzca a una familia de colores con diferentes fuentes. Imprime 3 opciones contrastantes, cada una como un resumen completo: estado de ánimo, fuentes con URLs CSS listas, una paleta nombrada, un arquetipo de diseño, lenguaje de formas, movimiento, movimientos característicos, cosas a evitar y un bloque @theme de Tailwind v4.

Otros comandos: --list (todas las direcciones), --show <id> --product <tipo> (una dirección completa, opcionalmente --font N --palette N --layout <id>).

3. Deja que el usuario elija (cuando está presente)

Presenta las opciones de forma compacta, cada una en un bloque corto: nombre, estado de ánimo en una línea, el par de fuentes, la paleta como valores hex, la idea de diseño. Pregunta cuál, y menciona que pueden mezclar ("las fuentes de la opción 2 con la paleta de la opción 3") o volver a tirar.

Si el usuario dijo "solo constrúyelo", o estás trabajando sin un humano en el bucle, elige por ellos, y elige por adecuación. La aleatoriedad está ahí para romper tus hábitos, no para poner una estética de discoteca en un planificador de cenas. Para cada opción pregúntate: ¿los clientes de esta marca se reconocerían en ella? ¿El estado de ánimo se adapta a lo que hace el producto (tranquilo para bienestar y dinero, enérgico para deporte y vida nocturna, preciso para datos, cálido para comida y hogar)? Elige la opción que mejor se ajuste. Si ninguna encaja, vuelve a tirar una vez (--count 4, o filtra con --energy/--mode) y elige del nuevo conjunto. Una elección sorprendente es buena cuando puedes decir en una frase por qué se adapta al producto; di esa frase cuando informes qué dirección usaste. No detengas la construcción esperando una decisión que nadie va a tomar.

4. Regístrala y escribe un archivo de dirección

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <id-diseño> --product <tipo>

Esto escribe tanto el historial del proyecto como el compartido. Luego guarda el resumen elegido como design-direction.md en la raíz del proyecto. Las sesiones futuras (y tú, dentro de una hora) lo leerán para mantenerse consistentes dentro de este producto, y el historial compartido evita que el próximo producto tenga el mismo aspecto.

5. Constrúyelo

Lee la referencia de plataforma correspondiente antes de construir, porque cada tipo de producto tiene sus propias reglas de oficio:

Producto	Leer
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

Stack: React + Tailwind por defecto (ver "Configuración del stack" más abajo). Luego:

• Conecta los tokens primero. Carga las fuentes, pega el bloque @theme, y estiliza con los nombres semánticos (bg-bg, bg-surface, text-text, text-muted, border-border, bg-accent, font-display). El script ya ha verificado el contraste: usa text-accent-ink siempre que un texto de color de acento esté sobre bg o surface (es igual al acento cuando el acento ya es legible), y text-on-accent para etiquetas sobre botones e insignias rellenas de acento. Si el resumen muestra una línea Contrast, te dice qué se ajustó. Las clases de paleta Tailwind puras como indigo-500 o slate-100 son la forma en que el aspecto predeterminado se filtra, así que mantenlas fuera de los componentes.

• Comprométete con la dirección. Usa al menos dos de sus movimientos característicos de forma visible, y trata la lista "evitar" como restricciones estrictas. Una dirección aplicada tímidamente (fuentes correctas, todo lo demás por defecto) colapsa de nuevo al aspecto genérico. Si el resumen dice radio 0, nada es redondeado. Si dice sombras con desplazamiento duro, no las hay borrosas.

• Deja que el arquetipo de diseño dé forma a la página. El diseño tirado (por ejemplo, sticky-scroll-story, three-pane, hub-and-sheet) está ahí para romper el esqueleto de héroe centrado + tres tarjetas. Construye alrededor de él.

• Extiende la paleta, no la reemplaces. Necesitarás tonos de hover, activos y sutiles. Déralos de los colores dados (color-mix(in oklch, var(--color-accent) 85%, black), o modificadores de opacidad como bg-accent/10) en lugar de recurrir a nuevos matices.

• Contenido real. Escribe texto plausible y específico para el producto. El Lorem ipsum y "Característica uno" ocultan si el diseño realmente funciona.

• Haz que se mueva. Las páginas estáticas se sienten como plantillas, y el archivo de gustos del usuario pide movimiento en cada construcción. Cada construcción recibe los cuatro siguientes, expresados en la personalidad de movimiento de la dirección (rápido para brutalista y deportivo, elástico para juguete, lento y cinematográfico para cinema, suave para orgánico, escalonado para sistema operativo retro):

  1. Coreografía de entrada al cargar: las piezas del héroe llegan en una secuencia escalonada corta (titular, luego copia, luego acciones, con 60-120ms de separación), no todas a la vez y no con un desvanecimiento lento.
  2. Feedback al pasar el cursor y al presionar en todo lo que se pueda hacer clic, al estilo de la dirección: una presión de sombra dura, una escala elástica, un deslizamiento subrayado, un brillo, un bamboleo.
  3. Una animación característica tomada de los campos motion o signature del resumen (brillo, glifo giratorio, mancha morphing, Ken Burns, máquina de escribir, marquesina, formas rotatorias). Es el momento que la gente recuerda, así que dale un lugar visible.
  4. Revelaciones al hacer scroll para secciones debajo del pliegue donde encajen (IntersectionObserver o CSS animation-timeline: view() con un fallback).

  Anima transform y opacity en lugar de propiedades de diseño para que sea suave, mantén el feedback de la interfaz de usuario por debajo de ~300ms, y pon todo lo decorativo detrás de @media (prefers-reduced-motion: no-preference) (o desactívalo bajo reduce) para que las personas que desactivan el movimiento obtengan una página completa y tranquila.

6. Verificación de uniformidad antes de terminar

Mira lo que construiste y corrige cualquiera de estas cosas a menos que la dirección las pida explícitamente:

• Inter, Roboto, Arial, o system-ui como la fuente de visualización visible
• Degradado púrpura/índigo/azul a violeta en cualquier lugar
• Héroe centrado, titular + subtítulo + dos botones, luego una cuadrícula de 3 tarjetas con iconos
• Cada contenedor rounded-xl/2xl con shadow-md/lg
• Iconos dentro de círculos teñidos de pastel
• Página gris-50 con tarjetas blancas como la única idea visual
• Todo el texto en los mismos pocos tamaños; sin contraste tipográfico
• Texto degradado en el titular (a menos que sea Y2K Chrome o Glass Aurora)

Luego, una pasada rápida de oficio: contraste de texto que cumpla WCAG AA (4.5:1 cuerpo, 3:1 texto grande; ajusta muted si una paleta falla en su fondo), cada elemento interactivo tiene estados de hover, focus-visible y deshabilitado, funciona a 375px de ancho, y las animaciones respetan prefers-reduced-motion.

Configuración del stack

Tailwind v4 (por defecto): pon los <link> de las fuentes en index.html (o next/font / @import url(...) al principio del CSS), luego el bloque @theme tirado en el archivo CSS principal después de @import "tailwindcss";. Clases como bg-accent, font-display, text-muted funcionan automáticamente.

Tailwind v3: pon los mismos valores bajo theme.extend.colors y theme.extend.fontFamily en tailwind.config.js con los mismos nombres.

Next.js: prefiere next/font/google para fuentes de Google (mismos nombres, guiones bajos para espacios) y mapea las variables CSS. Las fuentes de Fontshare se cargan a través de la URL CSS.

React Native / Expo (para mobile): usa NativeWind con la paleta en tailwind.config.js, y carga las fuentes con @expo-google-fonts/<nombre-fuente> o expo-font. Las fuentes de Fontshare necesitan los archivos de fuente descargados en assets/fonts. Si el usuario solo quiere un mockup visual, una página web React del tamaño de un móvil (marco 390x844) está bien y es mucho más rápida; pregunta si no está claro.

Vistas previas de archivo único: si aún no hay proyecto y el usuario solo quiere verlo, es aceptable un archivo HTML único con el CDN de Tailwind (<script src="https://cdn.tailwindcss.com"></script> para configuración v3, o @tailwindcss/browser@4 con un <style type="text/tailwindcss">@theme {...}</style> en línea) más React a través de ESM.

Cuando el usuario quiere aún más variedad

• Volver a tirar: ejecuta el script de nuevo; ya evita selecciones recientes.
• Remezclar: toma el tipo de una dirección con la paleta de otra. Verifica que el resultado aún se sienta coherente (una fuente de píxeles con una paleta de lujo es una broma, que está bien solo si ese es el objetivo).
• Nueva dirección: si el usuario describe un aspecto que la biblioteca no tiene, agrégalo a assets/directions.json con la misma forma para que se una a futuras tiradas. Verifica que sus fuentes existan en Google Fonts o Fontshare.
• Gusto: cuando el usuario diga lo que ama u odia ("nunca uses serif", "me encanta el brutalismo"), ofrécete a agregarlo a references/taste.md para que se aplique cada vez.