GuíaIntermedio

Crea tu sistema de diseño ANTES de construir · que tu app no se vea "hecha por IA al azar"

Hay una razón por la que las apps hechas con IA a veces se ven amateur, aunque funcionen: no tienen un sistema de diseño. Cada pantalla que la IA genera por su cuenta usa colores distintos, espaciados distintos, botones distintos — y el resultado parece hecho por cinco personas que no se hablaron. La solución no es "darle más gusto" a cada pantalla; es construir UNA vez un sistema de diseño y hacer que la IA lo respete siempre. Y el error más común es dejarlo para el final: lo PRIMERO que debes pedirle a tu IA, antes de cualquier pantalla, es que construya tu sistema de diseño. En esta guía verás qué secciones debe tener (las mismas que usan los productos premium), cómo se ve uno profesional de verdad, y dos prompts listos para que tu IA —Claude, Codex, Cursor, v0— te construya el tuyo con nivel de Silicon Valley.

Jun 22, 202613 min

¿Para quién es esto?

Para cualquiera que construya una app o web con IA y quiera que se vea profesional y coherente — no necesitas ser diseñador. Si tus pantallas se ven distintas entre sí o "como hechas por IA", esto lo resuelve de raíz. Funciona con Claude Code, Codex, Cursor, v0, Bolt o cualquier herramienta de diseño con IA.

El dolor · tu app se ve "hecha por IA al azar"

Le pides a la IA una pantalla y queda bien. Le pides otra, y usa otro tono de morado, otro tamaño de botón, otro espaciado. Una tercera, y aparece una sombra que no estaba en ninguna otra. Cada pantalla, por separado, no está mal — pero juntas, tu app se ve como hecha por cinco personas que no se pusieron de acuerdo. Eso es lo que hace que algo se vea amateur, aunque funcione perfecto.

Por qué pasa (no es culpa de la IA)

La IA, en cada pantalla nueva, toma decisiones de diseño desde cero — elige colores, tamaños y espaciados que se vean bien EN ESA pantalla, sin memoria de lo que decidió en las otras. No es que sea mala diseñando; es que no tiene una fuente de verdad que la obligue a ser consistente. Esa fuente de verdad es el sistema de diseño.

¿Qué es un sistema de diseño? (en cristiano)

Un sistema de diseño es un documento único con TODAS las reglas visuales de tu producto: qué colores existen y para qué, qué tamaños de texto, cuánto espacio entre las cosas, cómo son los botones, las tarjetas, las animaciones. La IA lo lee, y a partir de ahí toda pantalla que genere sale coherente — porque ya no inventa, sigue las reglas.

Imagínalo así · el manual de marca de una franquicia

Piensa en cualquier franquicia grande: todos sus locales se ven igual en el mundo entero porque siguen un manual de marca estricto — el mismo rojo, la misma tipografía, el mismo logo a la misma distancia. El sistema de diseño es ese manual para tu app: la IA es el empleado, y el manual hace que cada "local" (pantalla) se vea idéntico de bien.

La regla de oro · constrúyelo PRIMERO, no al final

Aquí está el error que comete casi todo el mundo: pedir pantallas primero y pensar en el diseño "después, cuando tenga tiempo". Para entonces ya tienes veinte pantallas inconsistentes y arreglarlas es un remiendo eterno. Lo PRIMERO que debes pedirle a tu IA, antes de la primera pantalla, es que construya tu sistema de diseño. Así todo lo que venga después nace coherente. Es la decisión que más eleva el acabado de tu producto, y casi no cuesta.

Las secciones que debe tener (el estándar de los productos premium)

Un sistema de diseño serio no es "una paleta de colores". Es exhaustivo. Estas son las secciones que tienen los sistemas de nivel enterprise (las mismas que usan productos tipo Linear, Vercel o Raycast), y que tu prompt debe pedir:

El esqueleto de un sistema de diseño completo

Filosofía / identidad: el ADN estético (¿minimalista? ¿oscuro premium? ¿colorido?) y los pilares de diseño.

Color: color de marca + escala de superficies (fondos por niveles) + escala de texto + bordes + colores semánticos (éxito/error/aviso) + paleta de gráficos.

Tipografía: la fuente, la escala de tamaños exacta, los pesos permitidos, alturas de línea y espaciado entre letras.

Espaciado y grid: la unidad base (ej. 8px) y todos los múltiplos permitidos.

Border-radius: las curvas de las esquinas por tipo de elemento.

Sombras / elevación: los niveles de profundidad.

Componentes: botones, tarjetas, inputs, modales, badges, tooltips, etc. — con sus valores exactos.

Movimiento / animación: duraciones, curvas de easing, qué se anima y qué no.

Estados: reposo, hover, foco, activo, deshabilitado, error, éxito.

Iconografía, layout, estados vacíos y anti-patrones (qué NUNCA hacer).

El secreto pro · flexible vs. no-negociable

Lo que separa un sistema amateur de uno legendario: distinguir lo flexible (lo que cada proyecto adapta, ej. el color de marca) de lo no-negociable (los valores exactos de espaciado, tamaños, opacidades, animaciones — que NO se tocan porque destruyen la armonía). Dile a tu IA que marque esa diferencia en tu sistema. Es lo que hace que se vea "afinado con bisturí" y no improvisado.

Cómo se ve uno profesional de verdad (fragmento de referencia)

Para que veas el NIVEL de detalle que debes exigir, aquí hay un fragmento del tipo de sistema que usamos para construir productos premium. Fíjate en la precisión — no dice "usa morado", dice exactamente qué morado y con qué opacidad para cada situación:

texto

COLOR DE MARCA (acento) — aparece SOLO en lo interactivo/activo, nunca decorativo
  Primary:  #8B5CF6   · Light: #A78BFA (texto/iconos) · Deep: #7C3AED (presionado)

SUPERFICIES (5 niveles de profundidad, no "negro plano"):
  surface-1 #0A0A0A (fondo)  · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (tarjetas)
  surface-4 #1A1A1A (dropdowns) · surface-5 #222222 (activo sobre elevado)

TEXTO (por opacidad, no por color):
  Primario #FFFFFF · Secundario rgba(255,255,255,0.70) · Terciario 0.45 · Apagado 0.28

TIPOGRAFÍA — Inter · base 14px · pesos SOLO 400/500/600/700 (nunca 300/800/900)
  BODY 12px · TITLE 16px · HERO 24px · letter-spacing 0.07em en labels en mayúscula

ESPACIADO — grid de 8px (4px micro). Nunca números impares (3,7,9,11px).
RADIUS — inputs 8px · tarjetas 12px · modales 16px (los hijos SIEMPRE menos que el padre)
ANIMACIÓN — solo opacity/transform/box-shadow · hover scale 1.02–1.05 · nunca animar width/height

Eso es solo el color y la tipografía

Y ese fragmento es apenas 2 de las ~14 secciones. Un sistema completo cubre componentes, movimiento, estados, layout y anti-patrones con el mismo nivel de precisión. Por eso un buen sistema de diseño tiene cientos de líneas — y por eso vale tanto: la IA nunca más tiene que adivinar.

Prompt 1 · Construir tu sistema desde cero

Si no tienes una marca definida, deja que la IA proponga la estética y arme el sistema completo. Cópialo y pégaselo a tu agente de diseño/código:

Pégalo a tu IA · sistema de diseño desde cerotexto

Antes de construir ninguna pantalla, quiero que creemos el SISTEMA DE DISEÑO de mi producto, para que todo lo que generes después sea coherente. Mi producto es: [describe tu app y para quién es]. Estética que me gusta: [ej. "oscura premium estilo Linear" / "clara y amigable" / "no sé, propón tú"].

Crea un documento de sistema de diseño COMPLETO y exhaustivo, con estas secciones, cada una con VALORES EXACTOS (no aproximaciones):
1. Filosofía/identidad y pilares de diseño.
2. Color: color de marca + escala de superficies/fondos por niveles + escala de texto por opacidad + bordes + colores semánticos (éxito/error/aviso/info) + paleta de gráficos.
3. Tipografía: fuente, escala de tamaños exacta, pesos permitidos, alturas de línea, letter-spacing.
4. Espaciado y grid (unidad base y múltiplos).
5. Border-radius por tipo de elemento.
6. Sombras/elevación por niveles.
7. Componentes (botones, tarjetas, inputs, modales, badges, tooltips, dropdowns) con sus valores.
8. Movimiento/animación (duraciones, easing, qué se anima y qué no).
9. Estados (reposo, hover, foco, activo, deshabilitado, error, éxito).
10. Iconografía, layout/grid, estados vacíos y una lista de ANTI-PATRONES (qué nunca hacer).

IMPORTANTE: marca claramente qué es FLEXIBLE (adaptable, ej. el color de marca) y qué es NO-NEGOCIABLE (los valores exactos que no se tocan). El objetivo: que el resultado se vea indistinguible de un producto premium de Silicon Valley. Guarda este sistema y respétalo en CADA pantalla que construyamos a partir de ahora.

Prompt 2 · Construir el sistema alrededor de TU marca

Si ya tienes colores, logo o una identidad, usa este para que la IA arme el sistema completo respetándolos:

Pégalo a tu IA · sistema de diseño desde tu marcatexto

Quiero crear el SISTEMA DE DISEÑO completo de mi producto a partir de mi marca actual, antes de construir pantallas. Mi marca: color(es) [pega tus colores/hex], tipografía [si tienes una], y este estilo/sensación [describe: serio, divertido, lujoso, etc.]. Mi producto es [descríbelo].

A partir de mi marca, construye un sistema de diseño COMPLETO y exhaustivo con valores EXACTOS, cubriendo: filosofía, color (mi marca + superficies + texto + bordes + semánticos + gráficos), tipografía (escala, pesos, alturas), espaciado/grid, border-radius, sombras, componentes (botones, tarjetas, inputs, modales, badges, tooltips), movimiento/animación, estados, iconografía, layout, estados vacíos y anti-patrones.

Reglas: respeta mis colores de marca como base; deriva las variantes (claras, oscuras, opacidades) a partir de ellos; marca qué es flexible y qué es no-negociable; y que el acabado se vea premium. Cuando termine, respétalo en cada pantalla que construyamos.

Tu regalo · un sistema de diseño COMPLETO, listo para copiar

Para que no partas de cero, aquí tienes un sistema de diseño completo y profesional — estética dark premium, neutra y genérica. Cópialo entero, pégaselo a tu IA, y dile "construye todo respetando este sistema". O cámbiale el color de marca (lo único flexible) y hazlo tuyo. Es el mismo nivel de rigor que usan los productos de Silicon Valley: cada valor está afinado, nada es al azar.

Sistema de diseño completo · cópialo y pégaselo a tu IAtexto

Construye TODO respetando este sistema de diseño. Lo único flexible es el color de marca; el resto son valores exactos, no los cambies.

=== FILOSOFÍA ===
Interfaz oscura premium, minimalista y precisa (estilo Linear/Vercel). Profundidad por capas, no plano. El color de marca aparece SOLO en lo interactivo/activo, nunca como decoración. Jerarquía por tamaño+peso+opacidad, no por color.

=== COLOR ===
Marca (FLEXIBLE — cámbialo por el tuyo): Primary #8B5CF6 · Light #A78BFA (texto/iconos) · Deep #7C3AED (presionado).
Superficies (5 niveles de profundidad): surface-1 #0A0A0A (fondo) · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (tarjetas) · surface-4 #1A1A1A (dropdowns/tooltips) · surface-5 #222222 (activo sobre elevado). Nunca saltes niveles.
Texto (por opacidad blanca): primario #FFFFFF · secundario rgba(255,255,255,0.70) · terciario 0.45 · cuaternario 0.28 · apagado 0.20.
Bordes (blanco con opacidad): fuerte 0.20 · normal 0.10 · sutil 0.08 · hairline 0.06.
Semánticos: éxito #10B981 · aviso #F59E0B · error #EF4444 · info #3B82F6 (fondo a 0.07-0.10, borde 0.15-0.22, texto color pleno).

=== TIPOGRAFÍA ===
Fuente: Inter (variable), antialiased, tabular-nums en números. Base 14px.
Escala (px): micro 9 · caption 10 · small 11 · body 12 · base 13 · subhead 14 · title 16 · heading 18 · display 20 · hero 24.
Pesos SOLO: 400 (cuerpo) · 500 (labels/nav) · 600 (títulos/botones) · 700 (números/KPIs). NUNCA 300, 800 ni 900.
Alturas de línea: labels/botones 1.0-1.2 · cuerpo 1.55 · código 1.6.
Labels en mayúscula: 10-11px, peso 600-700, letter-spacing 0.07em, color opacidad 0.28-0.40. Nunca el cuerpo en mayúscula.

=== ESPACIADO ===
Grid de 8px (4px solo micro-espaciado interno). Valores: 4·8·12·16·20·24·32·40·48·64. NUNCA números impares (3,7,9,11px) para layout.

=== BORDER-RADIUS ===
badges 4-6px · inputs/dropdown-items 8px · tarjetas 12-14px · modales 16px · hero 20px · círculo 50%. Regla: los hijos SIEMPRE con radio menor que el padre.

=== SOMBRAS ===
tarjetas: solo borde (sin sombra) · dropdowns: 0 8px 28px rgba(0,0,0,0.55) · modales: 0 32px 80px rgba(0,0,0,0.75). Glow de marca al hover en tarjetas interactivas: 0 0 0 1px rgba(MARCA,0.40), 0 8px 32px rgba(MARCA,0.16).

=== COMPONENTES (valores exactos) ===
Botón estándar: padding 8px 16px, radius 8px, font 12px peso 600. Primario: bg rgba(MARCA,0.20), borde rgba(MARCA,0.40), texto Light. Ghost: bg rgba(255,255,255,0.05), borde 0.08, texto 0.45.
Tarjeta: padding 12-16px, radius 12-14px, borde rgba(255,255,255,0.05), bg rgba(255,255,255,0.02). Hover: bg 0.045.
Input: padding 8px 12px, radius 8px, bg rgba(255,255,255,0.04-0.06), borde 0.10. Foco: borde rgba(MARCA,0.40) + sombra 0 0 0 3px rgba(MARCA,0.12).
Modal: bg #111111, borde 0.10, radius 16px, overlay rgba(0,0,0,0.72). Badge: 9px peso 700, padding 2px 6px, radius 4px.
Nav item activo: bg rgba(MARCA,0.15), texto Light, peso 600. Reposo: transparente, texto 0.45, peso 400.

=== MOVIMIENTO ===
Anima SOLO opacity, transform (scale/translate) y box-shadow. NUNCA width/height/padding/margin (causan reflow).
Duraciones: tap 0.08s · tooltip 0.12s · entrada/salida 0.15s · transición estándar 0.18-0.22s · ambiente (pulso) 2s+.
Hover botón: scale 1.02-1.05 · tap: scale 0.93-0.97. Easing estándar: cubic-bezier(0.16, 1, 0.3, 1).

=== ESTADOS (cada elemento interactivo) ===
Reposo · Hover (tint + scale, 80-180ms) · Foco (borde marca + anillo) · Activo (scale 0.93-0.97) · Deshabilitado (opacidad 0.35-0.50, sin puntero) · Error (borde rojo + texto error) · Éxito (flash verde 1800ms).

=== ICONOS / LAYOUT / VACÍOS ===
Iconos: lucide, 12-16px estándar, color hereda del texto. Layout: sidebar 64px (icono) o 176px (expandido), paneles 280-320px, contenido flex-1, máx 1440px. Estado vacío: ícono apagado 0.15 + título 0.35 + subtítulo 0.20 + CTA ghost.

=== ANTI-PATRONES (nunca) ===
Nunca peso 300/800/900 en UI · nunca color gris con nombre (usa rgba blanco) · nunca números impares de espaciado · nunca animar layout · nunca "transition: all" · nunca el color de marca en más del 15-20% de la pantalla · nunca el mismo radio (o mayor) en un hijo que en su padre.

Objetivo: que el resultado se vea indistinguible de un producto premium de Silicon Valley. Respeta estos valores en CADA pantalla.

Esto ya es un sistema usable de verdad

Lo de arriba no es un ejemplo de juguete: es un sistema de diseño funcional, con todos los valores afinados. Pégalo tal cual para una estética dark premium, o cambia el color de marca (#8B5CF6) por el tuyo. Si quieres algo más a tu medida, usa los Prompts 1 o 2 de arriba para que tu IA te genere uno propio con esta misma estructura.

El hábito · guárdalo donde la IA lo lea siempre

Un sistema de diseño solo sirve si la IA lo respeta SIEMPRE. Guárdalo en tu CLAUDE.md (o el archivo de instrucciones de tu agente) y, cada cierto tiempo, pídele que revise si alguna pantalla se salió de las reglas. El hábito: ninguna pantalla nueva sin que respete el sistema. Es lo mismo que el protocolo C-A-R, pero para el diseño.

En NeuralOS, el sistema de diseño viene de fábrica

Las apps que construyes en NeuralOS nacen sobre un sistema de diseño premium ya integrado (la estética Lux-Linear-Obsidian) — así que todo lo que generas sale coherente y con acabado profesional desde la primera pantalla, sin que tengas que montar el sistema tú. La visión: que no puedas construir algo feo o inconsistente por accidente.

CLAUDE.md / memoria · dónde guardar tu sistema de diseño

El sistema de diseño vive en la memoria de tu IA para que lo respete siempre. Así se guarda.

El protocolo C-A-R · audita también el diseño

En la fase de auditar, revisa que cada pantalla respete el sistema de diseño. La consistencia también se audita.

#diseno#ui#sistema-de-diseno#consistencia

¿Listo para construir?