Cómo obtener resultados pulidos con kits de diseño de IA

Establece como regla que cada componente use design tokens del sistema global, nunca colores ni tamaños de fuente codificados directamente. Agrega esto a las instrucciones de tu proyecto (CLAUDE.md, .cursorrules o equivalente):

## Design system

Every component must use the global design system via semantic tokens.
Use `bg-background`, `text-foreground`, `bg-card`, `text-primary`,
`border-border`, etc. Never hardcode colors like `bg-neutral-950` or
`text-white`. Typography uses the heading and body font variables, not
literal font-family values.

Before submitting a component, verify it contains zero hardcoded color
or font values. Run a review pass if needed.

Cuando cada componente toma de la misma capa de tokens, cambiar el kit de diseño repinta todo el producto. Sin esta regla, el primer kit se aplica bien pero cada cambio posterior implica rastrear valores fijos en cincuenta archivos.

Un agente que construye un dropdown desde cero lo hará funcionar más o menos. Un agente que estiliza un dropdown de Radix UI con los tokens de tu kit lo hará accesible, navegable por teclado, animado y visualmente consistente. El trabajo de interacción ya está resuelto, así que el agente solo tiene que aplicar el aspecto visual.

Las bibliotecas de componentes que mejor funcionan con kits de diseño:

• [shadcn/ui](https://ui.shadcn.com/) copia componentes en tu proyecto como código fuente. Ya usan variables CSS, así que los tokens de un kit de diseño encajan directamente. Identity Forge incluye un registro shadcn que instala los tokens de un kit con un solo comando.
• [Radix UI](https://www.radix-ui.com/) proporciona las primitivas sin estilo debajo de shadcn. Úsalo directamente cuando quieras control total sobre el markup y los estilos manteniendo el comportamiento de accesibilidad e interacción.
• [Base UI](https://base-ui.com/) es otra biblioteca de primitivas sin estilo con una API mínima. Útil cuando el nivel de abstracción de Radix resulta excesivo para tu caso de uso.

La división es la misma en cada caso: la biblioteca se encarga del comportamiento (gestión del foco, navegación por teclado, anuncios para lectores de pantalla, bloqueo de scroll, posicionamiento de portales) y el kit de diseño se encarga del aspecto (colores, tipografía, espaciado, formas, elevación). Puedes cambiar el kit sin tocar los componentes, o cambiar la biblioteca de componentes sin tocar el kit.

Antes de comprometerte con un kit de diseño, genera algunas imágenes de cómo podría verse el producto. Los modelos de imagen son buenos en estado de ánimo, composición y relaciones de color. Son malos produciendo un sistema a partir del cual se pueda construir. Úsalos para lo primero, no para lo segundo.

1. 1

   Generar imágenes de referencia visual

   Usa un modelo de imagen (gpt-image-1 funciona bien a través de la CLI de Codex) para explorar direcciones visuales. Genera de tres a cinco opciones con diferentes estados de ánimo.

   Copy

   codex exec "generate an image of a SaaS dashboard with warm, earthy tones and generous whitespace"

2. 2

   Elegir la dirección

   Elige la imagen que capture cómo debería sentirse el producto. Estás eligiendo un estado de ánimo, no un layout.

3. 3

   Crear el kit

   Deja que tu agente cree un kit de diseño en Identity Forge que coincida con la dirección elegida. O usa la pipeline de extracción para extraer tokens de una referencia existente.

4. 4

   Mantener en Identity Forge

   A partir de aquí, el kit es la fuente de verdad. Refínalo en Studio, versionalo y expórtalo a tu agente. La imagen te dio la dirección; el kit la mantiene consistente.

Los modelos de imagen son buenos en la parte de exploración. No son buenos produciendo algo a partir de lo cual un agente pueda construir directamente. Una imagen no puede decirle a un agente qué border-radius usar en una card. Un kit sí puede.

La técnica menos utilizada: en lugar de aceptar la primera versión de una sección, pídele a tu agente que construya tres variaciones con diferentes layouts, densidades o patrones de énfasis.

Build three variations of the pricing section:
1. A compact horizontal layout with all plans visible at once
2. A card-based layout with the recommended plan highlighted
3. A comparison table with feature rows

Use the active design kit for all three. Keep each in a
separate component file so I can compare them side by side.

Esto cuesta unos pocos minutos extra de tiempo del agente y evita que el proyecto termine viéndose como el resultado predeterminado del modelo. El agente aplica el mismo kit de diseño a cada variación, así que las tres están alineadas con la marca. Tú eliges la que se adapte al contenido, a la audiencia y al ritmo de la página.

Nada de esto es difícil por separado. Se acumula. Los tokens obligatorios significan que el kit realmente controla el aspecto. Las buenas primitivas de componentes significan que las interacciones simplemente funcionan. Una referencia visual real significa que el estado de ánimo es intencional, no accidental. Y elegir entre tres opciones significa que el layout se adapta al contenido en lugar de adaptarse al predeterminado del modelo. El resultado parece que alguien tomó decisiones de diseño, porque alguien lo hizo.