Arquitecto de Sistemas de Diseño

Dos modos. Elige según la solicitud; si ambos aplican, ejecuta primero Revisar y alimenta sus hallazgos en Crear.

Crear: construye un sistema de diseño completo y documentado para un producto, negocio o empresa, a partir de cualquier fuente existente (archivos de marca, Figma, presentaciones, un código base, un sitio web, o incluso solo una descripción).
Revisar: audita un código base o URL(s) existentes, extrae el sistema de diseño que realmente utiliza, lo puntúa y prescribe uno mejor.

La forma de referencia para cada sistema es un libro de marca vivo + tokens + vistas previas + componentes + kits de UI (modelado en un sistema fintech real: paleta de marca pequeña, un azul de acento con una rampa 50-950, una sola tipografía de marca con un respaldo web, espaciado de 4pt, CTAs tipo píldora, sombras en capas con matiz frío, un patrón de marca de agua construido a partir del logotipo).

0. Recepción (manténlo breve)

Encuentra fuentes antes de preguntar cualquier cosa: archivos adjuntos, carpetas conectadas, enlaces de Figma/conector, repositorios, URLs en el mensaje, un artefacto de sistema de diseño existente. Pregunta (una AskUserQuestion, máximo 3 preguntas) solo por lo que te bloquea:

Nombre del producto/empresa, categoría, audiencia
Personalidad de la marca en 3 adjetivos (si no hay fuentes)
Plataformas (aplicación web, sitio de marketing, móvil, impresión/presentaciones)
Solo claro, o claro + oscuro

Si el usuario no está presente, asume valores predeterminados sensatos y menciónalos al principio del entregable.

1. Inventario de las fuentes (Crear y Revisar)

Enumera todo antes de diseñar. Haz un seguimiento como lista de verificación e informa lo que queda al final.

Fuente	Cómo extraer
Figma	variables/estilos (color, tipografía, efectos), conjuntos de componentes y sus variantes, nombres de conjuntos de iconos, páginas de portada/marca
Código base	`tailwind.config.*`, propiedades personalizadas CSS (`:root`), variables SCSS/LESS, archivos de tema (MUI/Chakra/styled-components), `tokens.json`, carpetas de componentes, importaciones de iconos, carga de fuentes (`@font-face`, next/font, enlaces de Google Fonts)
URL	carga la página en una herramienta de navegador; lee los estilos calculados de body, encabezados, botones, enlaces, inputs, tarjetas; recopila cada color, familia de fuente, tamaño de fuente, radio, sombra distinto; captura de pantalla en escritorio + móvil; nota los archivos de logotipo/favicon
Activos de marca	logotipos, marcas de iconos, patrones, maquetas: copia los archivos, nunca redibujes ni aproximes una marca
Nada	construye un sistema de inicio PEQUEÑO (ver mínimos de la sección 3) y dilo

Reglas: valores exactos siempre; el código supera a las capturas de pantalla; nunca inventes un valor y lo presentes como proveniente de una fuente. Marca cada valor como obtenido de fuente, derivado (por ejemplo, una rampa generada a partir de un hex obtenido de fuente) o propuesto.

2. Fundamentos de la marca (apertura del libro de marca)

Escribe estas secciones en README.md, en este orden:

Fuentes: tabla de fuente, qué dio, estado.
Marca de un vistazo: nombre y reglas exactas de ortografía/mayúsculas, categoría, audiencia, pilares, submarcas, voz en una línea.
Fundamentos de contenido: tono, persona (nosotros/tú), registros de mayúsculas (encabezado vs cuerpo vs micro-etiquetas), dispositivos de énfasis, patrones de CTA, política de emojis, ejemplos de copia real para reutilizar.
Fundamentos visuales: color, tipografía, espaciado/cuadrícula, fondos, textura o patrón de firma, radios, botones, tarjetas, bordes, sombras, transparencia/desenfoque, movimiento, estados hover/press, reglas de diseño. Cada regla nombra el token que utiliza.
Iconografía: uso del logotipo/marca, espacio de seguridad, colores permitidos, familia de iconos de UI (trazo, tamaño, estilo), lo que está prohibido.
Sustituciones y banderas: fuentes con licencia que no se pueden distribuir como fuentes web y su respaldo, aproximaciones, preguntas abiertas.
Índice: cada archivo y qué es.

Mantén las palabras de los autores cuando existan; marca cualquier cosa que escribas como una propuesta.

3. Fundamentos (tokens)

Color

Paleta de marca: mantenla pequeña (2-5 colores de marca). Un acento primario, usado con moderación para acción, confianza e interacción, no como un lavado.
Rampas: genera 50-950 para el primario (y cualquier secundario) de modo que el hex obtenido de fuente caiga en su paso natural (a menudo 500 o 600). Usa OKLCH para mantener pasos perceptuales uniformes.
Neutros: 8-11 pasos desde tinta casi negra hasta gris de línea fina; ligeramente teñidos hacia el tono de la marca (marca fría → grises fríos).
Roles semánticos (qué usan los componentes): fg-1/2/3, fg-on-accent, bg-1/2/3, border, border-strong, accent, accent-hover, accent-soft, focus-ring, success, warning, danger, info (cada uno con una variante de fondo suave).
Temas: claro primero; oscuro es una reasignación de roles semánticos, no una rampa invertida. Eleva las superficies oscuras con grises más claros, no sombras.
Contraste: texto del cuerpo ≥ 4.5:1 sobre su fondo en cada tema; texto grande (24px+), iconos, bordes de control y anillos de enfoque ≥ 3:1. Verifica programáticamente (luminancia relativa WCAG). Los estados que deben diferenciarse difieren en luminosidad, no solo en tono; prefiere azul/naranja sobre rojo/verde para significado emparejado.

Tipografía

Una familia de marca (dos como máximo: display + texto). Las fuentes con licencia obtienen una pila de respaldo documentada y un sustituto de Google Fonts.
Escala: display, h1, h2, h3, title, body-lg, body, sm, caption, label. Relación aproximadamente 1.2-1.333; display puede romper la relación.
Altura de línea: ajustada (1.0-1.1) para display, 1.2-1.3 encabezados, 1.45-1.6 cuerpo. Tracking: negativo (-0.01 a -0.02em) en tamaños grandes, positivo (+0.06 a +0.1em) en etiquetas en mayúsculas.
Pesos en uso: nómbralos (por ejemplo, 300/400/500/700) y di dónde va cada uno.

Espaciado, radio, elevación, movimiento

Espaciado: base de 4pt; pasos 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.
Radio: sm 6-8, md 10-12, lg 16, xl 24, píldora 999. Indica qué componentes usan cuál.
Sombras: 3-4 sombras en capas, de poca expansión, teñidas con el tono oscuro de la marca (nunca sombras negras puras), más un brillo de acento opcional para CTAs primarios.
Movimiento: duraciones (120/180/240ms), easing (ease-out para entrada, ease-in para salida), elevación hover 2-4px, escala press 0.98. Respeta prefers-reduced-motion.
Puntos de interrupción y cuadrícula de diseño: por ejemplo, 640/768/1024/1280; anchos máximos de contenido; shell de aplicación (barra lateral + barra superior + lienzo).

Formatos de archivo de tokens

Escribe los tokens dos veces, desde una sola fuente de verdad:

tokens.css: :root { --nombre: valor } más [data-theme="oscuro"] y reasignaciones @media (prefers-color-scheme: oscuro).
tokens.json: cada familia como una LISTA: {"tokens":[{"nombre","valor","uso"}]}; color lleva temas y valores por tema {"claro":"#..","oscuro":"#.."}; tipo usa fuentes, familias, grupos[].estilos[]. Nombres [A-Za-z0-9][A-Za-z0-9_.-]*, únicos. Valores de color en hex/rgb/hsl/oklch o {alias}; sin colores con nombre, var() o color-mix(). Cada token tiene una nota de uso.
Ofrece una configuración de Tailwind/exportación DTCG solo si la pila del usuario la necesita.

Mínimos para un sistema de inicio (sin fuentes): 6-10 colores en un tema, 5-7 estilos de texto, 4+ pasos de espaciado, 3 radios, README de un párrafo; di que es un punto de partida.

4. Componentes

Construye las familias que el producto necesita; para un producto SaaS/fintech típico:

Acciones: Botón (sólido primario, contorno secundario, fantasma, destructivo; sm/md/lg; cargando, deshabilitado, solo icono), Enlace, BotónIcono
Entradas: CampoTexto, Selector, CasillaVerificación, Radio, Interruptor, SelectorFecha, CampoBúsqueda, con etiqueta, sugerencia, error, anillo de enfoque
Visualización: Tarjeta, Insignia/Chip, Etiqueta, Avatar, Estadística/KPI, Tabla, EstadoVacío, Esqueleto
Navegación: BarraLateral, BarraSuperior, Pestañas, MigasPan, Paginación
Retroalimentación: Alerta/Banner, Notificación, Modal/Diálogo, Tooltip, Progreso
Dominio: lo que sea sobre el producto (por ejemplo, impuestos: rastreador de estado de declaración, fila de deducción, tarjeta de fecha límite; IA: panel de asistente, chip de sugerencia)

Para cada componente escribe una guía breve: primera oración = resumen; anatomía; variantes y cuándo usar cada una; tokens que utiliza; estados; accesibilidad (roles, teclado, enfoque, etiquetas); hacer/no hacer. Construye una vista previa en vivo (documento HTML pequeño usando los tokens). Si se construye un paquete, es un script clásico único que asigna window.<EspacioDeNombres> con props tipadas documentadas en index.d.ts.

5. Vistas previas y kits de UI

Una tarjeta de muestra por fundamento: colores de marca, rampa, neutros, colores semánticos, familia tipográfica, escala display, escala cuerpo, espaciado, radios, elevación, logotipos, marcas de iconos, patrón, marca en uso.
Kits de UI que recrean superficies reales con el sistema: un sitio de marketing (nav, hero, características, CTA, pie de página) y/o aplicación de producto (shell, panel, lista/tabla, detalle, configuración, asistente). Usa copia de dominio realista en la voz de la marca, no lorem ipsum.
Una página de portada para el sistema: nombre, marca, promesa en una línea, tira de paleta.

6. Entrega

Si la herramienta de Artefactos enumera un tipo Sistema de Diseño, crea el sistema a partir de él (type_url, title) y sigue el SKILL.md que devuelve para las rutas de archivos y el índice; ese es el hogar preferido. Para revisar uno existente, léelo primero y cambia solo lo que se pidió.
De lo contrario, publica un libro de marca HTML autocontenido como artefacto, y entrega los archivos de componentes y activos como archivos (escritos en una carpeta conectada cuando haya una).
Copia logotipos, iconos y fuentes como archivos reales; nunca pegues base64 en el chat.
Termina con: enlace, qué fue obtenido de fuente vs propuesto, qué queda del inventario, una oferta para llevarlo más allá (componentes, tema oscuro, sincronización con Figma, integración de código).

7. Modo de revisión (auditoría de código base o URL)

Recopilar

Código base: busca literales de color (#[0-9a-fA-F]{3,8}, rgb(, hsl(), declaraciones de font-family, valores font-size/px, border-radius, box-shadow, z-index, breakpoints, estilos en línea, componentes duplicados (múltiples implementaciones de Botón/Modal), bibliotecas de iconos en uso. Cuenta las ocurrencias.
URL(s): abre cada página (escritorio 1440 y móvil 390), lee estilos calculados, recopila valores distintos, captura de pantalla de pantallas clave, ejecuta una verificación de contraste en pares de texto/fondo, nota la visibilidad del enfoque tabulando, verifica prefers-color-scheme y movimiento reducido.

Extraer el sistema de facto

Agrupa valores casi duplicados (por ejemplo, 14 grises → 6 pasos; 9 radios → 4). Muestra la paleta real, escala tipográfica, espaciado y radio en uso, con recuentos.

Puntuar (0-5 cada uno, con evidencia)

Color (disciplina de paleta, uso semántico, contraste)
Tipografía (consistencia de escala, jerarquía, legibilidad)
Espaciado y diseño (adherencia a la cuadrícula, ritmo, capacidad de respuesta)
Componentes (consistencia, estados, duplicación)
Accesibilidad (contraste, enfoque, etiquetas, teclado, movimiento)
Expresión de marca (distintividad, voz, imágenes)
Arquitectura de tokens (valores codificados vs tokens, preparación para temas)

Hallazgos

Clasifica por gravedad: Crítico (fallos de accesibilidad, flujos rotos), Alto (inconsistencia que los usuarios notan, dilución de marca), Medio, Nit. Cada hallazgo: dónde (archivo:línea o URL + elemento), qué, por qué importa, la solución exacta (nombre y valor del token, o cambio de componente).

Prescribir

Un conjunto de tokens consolidado (tabla de mapeo de valor antiguo → token nuevo).
Antes/después para las 3-5 pantallas o componentes de mayor impacto (maqueta HTML cuando sea útil).
Un plan de migración por fases: 1) tokens + correcciones de contraste, 2) componentes principales, 3) pantallas, 4) modo oscuro/pulido. Nota cambios radicales.
Entrega como documento o informe HTML; ofrece construir el sistema completo a través de Crear.

Nunca edites el código del usuario en el modo Revisar a menos que lo pidan.

8. Lista de verificación de calidad

Cada valor marcado como obtenido de fuente / derivado / propuesto; nada inventado en silencio
Los logotipos y marcas son los archivos reales; sin logotipo significa tipo de marca de palabra simple y una nota
Contraste verificado en cada tema y cada vista previa
Cada token tiene una nota de uso; cada componente enumera los tokens que utiliza
Nombre de marca escrito de manera consistente en todas partes, incluida la copia de muestra
Fuentes: archivos reales o respaldo con licencia documentado
Copia sigue las propias reglas de voz de la marca (mayúsculas, política de emojis, patrón de CTA)
Responsivo a 390px sin desplazamiento horizontal
Inventario informado: construido, omitido, restante

Anti-patrones (no enviar)

Tropos genéricos de IA: gradientes azul a púrpura en todas partes, tarjetas de características con emojis, tarjetas con borde de acento izquierdo, glassmorfismo sin razón
Un color de acento utilizado como lavado de fondo en lugar de para acción
Sombras negras puras; más de 4 niveles de sombra
Valores arbitrarios (13px, 17px, 22px de radio) fuera de la escala
Logotipos redibujados o recoloreados
Rojo/verde como la única señal para el estado
Mapas de tokens (objetos anidados DTCG) donde se requiere un tokens.json en forma de lista

Stosan/design-system-architect

¿Qué es design-system-architect?

Preguntar en tu IA favorita

Documentación