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.
📖 Lee la fuente completa: HN AI Agents
👀 Ver también
Las empresas que reducen personal por IA perderán frente a las que no lo hicieron
Los recortes de personal por la IA sacrifican el conocimiento institucional a largo plazo por ahorros a corto plazo. Mantener equipos y usar la IA para amplificar su capacidad es la estrategia ganadora.
Claude Code HUD: Panel de Terminal para Monitorear Sesiones de Codificación con IA
claude-code-hud es un panel de control de terminal que proporciona monitoreo en tiempo real para sesiones de Claude Code, mostrando el uso de la ventana de contexto, los límites de tasa de la API y los cambios en archivos sin necesidad de un IDE. Ejecútalo con npx claude-code-hud.
El parche de la comunidad agrega soporte para idiomas RTL a Claude Desktop en Windows.
Un desarrollador ha creado un parche que agrega soporte adecuado para idiomas de derecha a izquierda a Claude Desktop en Windows, corrigiendo la representación rota para hebreo, árabe y otros idiomas RTL. El parche inyecta lógica de detección RTL en el renderizador de la aplicación Electron e incluye funcionalidad de respaldo y restauración.
Consejo: Un Marco de Diálogo Estructurado para Claude
Consejo — Un Crisol es un marco de diálogo estructurado que se ejecuta dentro de una única ventana de contexto de Claude, utilizando marcos de personajes para producir cuatro modos distintos de participación: interrogatorio riguroso, acción generativa, experiencia vivida e intuición no formada.