Prompt del sistema de diseño Claude con ingeniería inversa para agentes de UI de IA sin basura

La mayoría de los prompts de "asistente de diseño" producen plantillas SaaS genéricas: degradados agresivos, decoraciones con emojis, tarjetas de esquinas redondeadas e Inter por todas partes. El Claude Design System Prompt de Trystan-SA rechaza explícitamente esos patrones. Es un prompt de sistema diseñado a la inversa (licencia MIT) que convierte a un LLM en un colaborador de diseño con opinión, consciente de la accesibilidad y resistente a la IA genérica.

Qué incluye

• claude/system-prompt.md — 20 capítulos que cubren disciplina de contenido, disciplina estética, jerarquía visual, accesibilidad WCAG, estados de interacción, pensamiento sistémico (componentes + tokens) y respeto al medio (CSS Grid real, oklch(), text-wrap: pretty).
• claude/skills/ — 14 procedimientos invocables agrupados en Producción (preguntas de descubrimiento, dirección estética frontend, wireframe, hacer una presentación, hacer un prototipo, hacer ajustable, generar variaciones), Sistema (extracción de sistema de diseño, extracción de componentes) y Revisión (auditoría de accesibilidad, verificación de IA genérica, revisión de jerarquía y ritmo, pase de estados de interacción, pase de pulido).
• Variante codex/ adaptada para OpenAI Codex (bucle único, sin subagentes).

Cómo usarlo

Pega el contenido de system-prompt.md como el prompt de sistema para cualquier LLM (Claude, GPT, Gemini, modelos locales). El agente sigue la filosofía de diseño y referencia las habilidades por nombre cuando las tareas coinciden. Las habilidades se pueden encadenar: un flujo típico desde cero: preguntas de descubrimiento → dirección estética frontend → wireframe → hacer un prototipo → pase de pulido. Un flujo con marca existente: extracción de sistema de diseño → generar variaciones → hacer ajustable → pase de pulido.

Principios de diseño

El prompt impone disciplina de contenido (sin relleno, cada elemento se gana su lugar), disciplina estética (evitar tropos de IA, comprometerse con paleta y tono), jerarquía visual y ritmo (tamaño, color, peso, posición, densidad, escalas de espaciado), accesibilidad (WCAG, HTML semántico, navegación por teclado, anillos de enfoque, preferencias de movimiento), retroalimentación de interacción (estados hover, activo, deshabilitado, foco, carga, validación) y pensamiento sistémico (componentes y tokens sobre páginas únicas).

Para quién es

Desarrolladores que usan agentes de codificación con IA y desean un diseño con opinión y accesible sin tropos genéricos de SaaS.