El problema: las interfaces creadas por IA se ven todas iguales
Pídele a cualquier agente de codificación que "construya una landing page" y obtendrás lo mismo: un hero en Tailwind gray-950, un degradado violeta, la fuente Inter y tres tarjetas de características. Es competente pero completamente genérico, porque el modelo no tiene memoria de tu marca entre prompts. Si añades una segunda página, el estilo deriva: diferente espaciado, un azul ligeramente distinto, una nueva forma para los botones. No hay una fuente de verdad para la apariencia, por lo que no hay consistencia.
Un sistema de diseño soluciona esto. Cuando el agente tiene un conjunto de tokens semánticos, una combinación de tipografías fija y reglas escritas que seguir, cada pantalla que genera hace referencia a las mismas variables en lugar de volver a adivinar. Esa es la diferencia entre un demo y un producto.
Un kit de diseño real, en vista previa
Un kit es un sistema completo, no solo una paleta. A continuación se muestra una vista previa en vivo del kit gratuito ambient-sage: los mismos tokens, fuentes y tratamientos que recibe un agente cuando lo aplica. Todo lo que aparece en esta página podría repintarse simplemente cambiando el kit.
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Dashboard
Welcome back — here's how AmbientSage is performing today.
Active users
15.1k
+5%Trending up this month
vs. previous 30 days
MRR
$49.1k
+3%Strong recurring growth
Net of churn
Retention
89%
+2%Engagement above target
Rolling 28-day window
NPS
69
+3Meets growth projections
Survey · n=1,204
Total revenue
Last 12 months
$49.1k+18.2%
Recent sales
You closed 265 deals this month.
Alex Rivera
alex@ambientsage.com
Mira Okonkwo
mira@ambientsage.com
Jonas Feld
jonas@ambientsage.com
Sana Qureshi
sana@ambientsage.com
Theo Lindgren
theo@ambientsage.com
Recent transactions
View all| Customer | Status | Date | Amount |
|---|---|---|---|
AR Alex Rivera Founder & CEO | Paid | 2m ago | $1,999.00 |
MO Mira Okonkwo Head of Product | Pending | 1h ago | $39.00 |
JF Jonas Feld Design Lead | Processing | 3h ago | $299.00 |
SQ Sana Qureshi Engineering Lead | Paid | Yesterday | $99.00 |
TL Theo Lindgren Brand Director | Refunded | 2d ago | $2,400.00 |
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Guías por herramienta
La mecánica varía según la herramienta: los agentes de codificación ejecutan un servidor MCP local, mientras que los constructores web utilizan el registro de shadcn o el DESIGN.md exportado. Elige tu herramienta:
- Dale a Claude Code un sistema de diseño: MCP vía
.mcp.json, oidentityforge apply. - Dale a Cursor un sistema de diseño: MCP vía
.cursor/mcp.json. - Dale a Windsurf un sistema de diseño: configuración manual de MCP para Cascade, además de la ruta por CLI.
- Dale a v0 un sistema de diseño: el registro de shadcn + DESIGN.md como brief.
- Dale a Lovable un sistema de diseño: conocimiento del proyecto +
shadcn adden el repositorio. - Dale a Bolt un sistema de diseño: ejecuta
shadcn adddirectamente en la terminal de Bolt.
Lo que el agente recibe realmente
Independientemente de cómo lo instales, la carga útil consta de las mismas tres cosas:
- Un DESIGN.md: el brief escrito: la intención del diseño, el sistema tipográfico, reglas de espaciado y disposición, tratamientos de componentes, motivos distintivos y qué hacer y qué no hacer. Esto es lo que evita que el agente recurra a lo genérico por defecto. Qué es un DESIGN.md y cómo generar uno.
- Tokens de color semánticos: 28 roles (background, foreground, primary, muted, card, border, chart-1…5, y más) tanto en modo claro como oscuro. El agente aplica estilos basándose en nombres de roles, no en hex crudos, para que los temas sean coherentes. Tokens de color semánticos explicados.
- Exportaciones de frameworks: el mismo sistema como variables CSS,
@themede Tailwind v3/v4, un elemento del registro de shadcn o JSON de DTCG/W3C. El agente conecta lo que coincida con tu stack.
Elegir un kit
Explora kits por estilo visual para ver sistemas completos en contexto: tipografía, color, superficies y reglas de construcción. Cada kit tiene un slug estable; una vez que lo conozcas, el agente puede omitir la búsqueda y aplicarlo directamente. Si ya tienes colores de marca, la herramienta MCP match_palette encuentra los kits que mejor encajan perceptualmente.
Deja que el agente elija
Con el servidor MCP conectado, no tienes que elegir un slug tú mismo. Dile al agente cuál es tu producto, tu audiencia y el ambiente deseado. Puede usar search_themes para hacer una preselección, get_design_md para leer el brief y apply_theme para instalar el kit elegido.
Preguntas frecuentes
¿Qué es un sistema de diseño para un agente de codificación con IA?
Es un conjunto fijo de decisiones de diseño: tokens de color semánticos para modo claro y oscuro, una combinación tipográfica, reglas de espaciado y disposición, y un DESIGN.md escrito. El agente hace referencia a esas decisiones en lugar de volver a inventar el estilo para cada pantalla.
¿Necesito una cuenta o una clave API para usar Identity Forge con mi agente?
No. Los kits gratuitos y el registro de shadcn funcionan sin cuenta. Una clave API (desde /account/api-keys) solo es necesaria para datos propios, una mayor cuota de API y kits Pro.
¿Con qué herramientas funciona esto?
Agentes de codificación: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, VS Code/Copilot, opencode: ejecuta el servidor MCP local. Constructores web: v0, Lovable, Bolt: consumen el elemento del registro de shadcn o el DESIGN.md y los tokens exportados.
¿Es esto diferente a simplemente pedirle al agente una paleta de colores?
Sí. Una paleta es un puñado de colores. Un kit es un sistema completo y coherente: 28 tokens semánticos en modo claro y oscuro, fuentes reales, reglas de diseño y componentes, motivos, y qué hacer y qué no hacer, serializados en un DESIGN.md y exportables como tokens de shadcn/Tailwind/DTCG.