Aprender
Entiende los sistemas de diseño para agentes de código
Esta introducción en español explica las piezas esenciales de un sistema preparado para agentes. Las guías detalladas enlazadas están actualmente en inglés y se indican como tales.
Sistemas de diseño para agentes de programación con IA
Sistemas de diseño para agentes de código de IA
Un agente de IA sin sistema de diseño inventa uno por cada prompt, y siempre inventa el mismo que el resto. Qué darle en su lugar, qué debe contener ese archivo para que funcione realmente y cómo instalarlo en cada una de las herramientas principales.
2026-07-27
Asigne un sistema de diseño a Bolt
Los sistemas de diseño integrados de Bolt requieren un plan Team de pago para añadir el suyo propio. A continuación, detallamos de qué fuentes se compila esa funcionalidad y la configuración que funciona en cualquier plan utilizando la terminal real de Bolt en el navegador.
2026-07-27
Servidores MCP para sistemas de diseño: qué solucionan y qué no
Un servidor MCP permite que un agente consulte su sistema de diseño en lugar de intentar adivinarlo. Esto soluciona los nombres de props incorrectos y las importaciones obsoletas. No soluciona el problema de un agente que no tiene idea de cómo debería verse su producto; esos son problemas distintos que requieren soluciones diferentes.
2026-07-27
Reglas de Cursor para un sistema de diseño: por qué un solo archivo deja de funcionar
El consejo habitual es escribir una regla design.mdc y listo. Funciona durante unas tres semanas. Aquí explicamos por qué un sistema de diseño no cabe en un solo archivo de reglas, cómo dividirlo según cuándo debe aplicarse cada regla y qué incluir en cada parte.
2026-07-27
Herramientas de diseño con IA para desarrolladores, clasificadas según lo que sustituyen
La mayoría de los resúmenes enumeran veinte herramientas que realizan tareas distintas como si compitieran entre sí. Aquí se agrupan según el problema que resuelve cada una, con la conclusión fundamental: ninguna de ellas produce un sistema de diseño, y todas asumen que usted ya tiene uno.
2026-07-27
Prompts de Lovable para diseño: qué funciona, qué se desvía y por qué
La mayoría de las listas de prompts para Lovable recopilan frases cortas. El diseño no sobrevive a las frases cortas. Aquí presentamos la anatomía de un prompt de diseño consistente a través de las sesiones, con ejemplos listos para copiar y pegar.
2026-08-03
Explicación de las skills de Claude Code: qué se carga, cuándo se activan y cómo escribirlas
Una skill es una carpeta con un archivo SKILL.md que Claude Code carga solo cuando la tarea coincide con su descripción. Esa frase explica por qué la mayoría de las skills instaladas nunca hacen nada. Aquí detallamos el mecanismo, el formato del archivo y un ejemplo práctico de una skill de diseño.
2026-08-04
Asigne un sistema de diseño a GitHub Copilot
Copilot lee archivos de instrucciones que nadie completa con decisiones de diseño, razón por la cual su salida de UI suele ser genérica. Esta es la configuración: copilot-instructions.md, archivos .instructions.md con alcance específico, tokens reales y un DESIGN.md al que estos apuntan.
2026-08-04
Integre un sistema de diseño en Gemini CLI
Gemini CLI concatena cada GEMINI.md de su jerarquía en cada prompt, lo que facilita enormemente la integración de un sistema de diseño: basta con una línea de importación para que el contrato se cargue en cada solicitud. Aquí tiene la configuración y el archivo que importa.
2026-08-04
Skills de Codex: dónde residen, cómo funciona la invocación con $ y cómo escribir una
Codex detecta carpetas SKILL.md en cinco ubicaciones, las carga mediante la coincidencia de la descripción o un $ explícito, y comparte el formato con Claude Code y Cursor. A continuación presentamos su anatomía, el orden de detección y un skill de diseño que puede adaptar.
2026-08-04
El plugin frontend-design de Claude Code: instalación, funcionamiento y limitaciones
Dos comandos instalan el plugin frontend-design de Anthropic, y este logra que una pantalla se vea bien. Sin embargo, no puede hacer que la vigésima pantalla coincida con la primera, porque aporta criterio estético, no valores definidos. Aquí explicamos la instalación, la carencia y cómo solucionarla.
2026-08-04
Cómo obtener resultados pulidos con kits de diseño de IA
Un kit de diseño es solo el punto de partida. Lo que lo hace funcionar es aplicar tokens en cada componente, construir sobre primitivas sólidas, encontrar la dirección visual con generación de imágenes y generar variaciones en lugar de aceptar el primer intento.
2026-08-10
DESIGN.md
¿Qué es DESIGN.md? El formato, su contenido y los errores más comunes
Un archivo DESIGN.md describe una identidad visual en un formato que un agente de código puede leer. Hemos analizado 299 archivos públicos: aquí presentamos el formato, sección por sección, y los cuatro elementos que casi todos omiten.
2026-07-27
Cómo documentar un sistema de diseño para que una IA realmente lo siga
La documentación de un sistema de diseño escrita para humanos falla cuando un modelo la lee, y lo hace de una manera específica y medible. Lo que encontramos en 299 archivos reales y los siete cambios que hacen que las guías sean ejecutables en lugar de descriptivas.
2026-07-27
CLAUDE.md vs AGENTS.md vs SKILL.md vs DESIGN.md
Cuatro archivos, cuatro funciones, un orden de precedencia. Qué pertenece a cada uno, qué herramientas leen cuál y por qué el de diseño es el archivo que nadie escribe.
2026-08-04
Por qué las interfaces con IA se desvían
Cómo hacer que la UI generada por IA parezca menos genérica
Seis cambios a nivel de token, cada uno con su antes y después. Los ajustes de prompt afectan a una sola pantalla; estos afectan a cada pantalla que el agente construya de ahora en adelante.
2026-07-27
Design drift: por qué tu app basada en «vibes» se desmorona en la quinta pantalla
El drift es medible, no son solo sensaciones. Cómo contabilizarlo a lo largo de una sesión, por qué comienza alrededor de la quinta pantalla y el único cambio que evita que se acumule.
2026-07-27
Vibe coding para diseñadores: la parte que decide si funciona
La mayoría de las guías se centran en las herramientas. Lo que diferencia a los diseñadores que lanzan productos de los que siempre vuelven a empezar es lo que configuran antes del primer prompt y cómo revisan un diff sin saber leer código.
2026-07-27
Una lista de verificación de consistencia de UI que realmente puede ejecutar
La mayoría de las listas de consistencia preguntan si la interfaz se siente cohesiva, algo que nadie puede responder. Esta es una lista de comprobaciones con comandos y condiciones de aprobación, ordenadas según la cantidad de desviaciones que detectan por minuto invertido.
2026-07-27
Por qué todas las webs generadas por IA se ven iguales
Cuatro valores predeterminados producen esa monotonía: una paleta neutra, una fuente sans-serif, un radio de borde y una cuadrícula de tarjetas. Aquí explicamos de dónde viene cada uno y qué cambiar.
2026-08-03
Temas de shadcn y Tailwind
El registro de shadcn, explicado
Qué es un registro de shadcn, cómo encajan registry.json y registry-item.json, y el caso que la documentación apenas cubre: distribuir un tema completo (tokens, fuentes, radios, modo claro y oscuro) como un único elemento instalable.
2026-07-27
Paletas de colores para modo oscuro que realmente funcionan
Respuestas precisas a las preguntas que las galerías de paletas omiten: si conviene usar negro puro, cómo representar la elevación sin sombras, por qué los colores de acento deben cambiar y qué roles necesita una paleta oscura más allá de cinco muestras.
2026-07-27
Paletas de colores para dashboards: lo que los tableros de inspiración omiten
Una paleta de dashboard tiene tres funciones que una de marketing nunca tiene: series de datos distinguibles, colores de estado que no colisionen con la marca y grises que resistan una tabla densa. Así es como se construye una que cumpla las tres.
2026-07-27
Paletas de colores SaaS y por qué todas acaban siendo azules
Por qué los productos SaaS convergen en el mismo acento azul-violeta, qué es lo que una paleta debe sobrevivir realmente en la UI de un producto y cómo elegir una distintiva que siga funcionando en una tabla de ajustes a las 4 de la tarde.
2026-07-27
Combinaciones tipográficas por sector y por qué basarse en la categoría es una trampa
Cualquier guía de tipografía por industria ofrece la misma respuesta con etiquetas distintas: una sans geométrica para tecnología, una serif para derecho, una script para belleza. Aquí presentamos combinaciones que realmente funcionan por sector, además de la razón por la cual el enfoque basado en categorías sigue creando marcas idénticas.
2026-07-27
Análisis de sistemas de diseño
Carbon: el sistema de diseño de código abierto que lanzó un servidor MCP
Carbon de IBM es el sistema de diseño empresarial con licencia abierta más grande y, en 2026, hace algo que ninguna de las reseñas menciona: se expone a los agentes de IA a través del Model Context Protocol. Una guía práctica sobre qué es Carbon, cómo se estructura en capas y qué cambia el servidor MCP.
2026-07-27
Ejemplos de sistemas de diseño: qué enseña realmente cada uno
La mayoría de los resúmenes de sistemas de diseño son simples listas de enlaces. Este es un análisis de nueve sistemas reales organizados según la decisión que mejor ejecutaron (capas, cumplimiento, contratos multiplataforma, entrega), además del cambio que tres de ellos implementaron en los últimos dieciocho meses y del que nadie ha escrito nada.
2026-07-27
Shopify ha marcado Polaris para React como obsoleto. Esto es lo que lo ha sustituido
Polaris React está marcado como obsoleto y ahora las aplicaciones de Shopify utilizan Polaris Web Components: se cargan mediante una etiqueta de script de CDN, no como una dependencia de npm. Qué ha cambiado exactamente, por qué y qué significa para quienes mantienen un sistema de diseño.
2026-07-27
SLDS 2: Salesforce rediseña su sistema de diseño para agentes
Salesforce afirma que SLDS 2 es "la base del sistema de diseño agéntico": un sistema de diseño empresarial con una década de antigüedad, reestructurado en torno a propiedades personalizadas de CSS para que las interfaces generadas mantengan la identidad de marca. Qué ha cambiado realmente y qué implica si no utiliza Salesforce.
2026-07-27
El sistema de diseño de Linear, leído como un conjunto de restricciones
La interfaz de Linear es imitada constantemente y reproducida deficientemente. Un análisis detallado de lo que es realmente observable (la banda de pesos, la línea fina, el acento único) y por qué la parte que todo el mundo copia no es la que realmente hace el trabajo.
2026-07-27
Los dos sistemas de diseño de Stripe y por qué difieren
Stripe lanza un sistema de diseño que prohíbe totalmente el CSS personalizado y otro construido casi enteramente para permitir que se sobrescriba. Ambos son públicos, ambos están documentados, y la línea que los divide es lo más útil que Stripe ha publicado sobre sistemas de diseño.
2026-07-27
Encore: cómo es un sistema de diseño en 45 plataformas
Encore, de Spotify, tuvo que cubrir 45 plataformas y más de 2.000 tipos de dispositivos. Su propio equipo afirma que el péndulo se inclinó demasiado hacia la flexibilidad y hubo que corregirlo. Esa corrección, y la estructura por capas resultante, es la parte más útil.
2026-07-27
El DLS de Airbnb: el sistema que rechazó el diseño atómico
El Design Language System de Airbnb es el sistema de diseño multiplataforma más citado y el más malinterpretado. Su decisión fundacional fue rechazar categóricamente los átomos y las moléculas, y el razonamiento detrás de esa elección es lo que lo hace útil hoy en día.
2026-07-27
Conceptos de sistemas de diseño
Guías de interfaz que un agente de IA puede seguir realmente
Cómo empaquetar las HIG de Apple, Material o sus propias reglas internas como guías legibles para agentes: qué sobrevive a la traducción de un documento de diseño humano a una instrucción para el agente, qué no, y por qué las guías de plataforma por sí solas siguen produciendo interfaces genéricas.
2026-07-27
Combinaciones tipográficas para SaaS: qué debe cumplir una fuente de producto
Todas las listas de fuentes para SaaS recomiendan las mismas familias. Aquí explicamos por qué, qué debe soportar una tipografía en una UI de producto densa (números tabulares, separación real de pesos, legibilidad en tamaños pequeños) y cuándo se justifica la inclusión de una segunda familia.
2026-07-27
Diseño atómico en la era de los agentes: qué partes siguen vigentes
El diseño atómico resolvió un problema de 2013: dotar a los humanos de un vocabulario compartido para las partes de una interfaz. Un agente ya posee el vocabulario, pero carece de criterio. ¿Qué partes de la metodología sobreviven a esto y cuáles fueron siempre un simple andamiaje?
2026-07-27
Nomenclatura de design tokens: el sistema de tres niveles y dónde falla
Primitivos, semánticos, componentes. La convención de tres niveles es casi universal y, aun así, la mayoría de los equipos acaban con tokens que nadie utiliza. Por qué ocurre esto, cómo nombrar cada nivel y la prueba que le indica si un nombre es incorrecto antes de implementarlo.
2026-07-27
De Figma a código: por qué el resultado es visualmente correcto pero estructuralmente erróneo
Las herramientas de design-to-code reproducen la apariencia de un frame. No pueden reproducir su significado, porque un frame de Figma no contiene esa información. Qué se transfiere realmente, qué no, y la decisión de nomenclatura que cierra la mayor parte de esa brecha.
2026-07-27
Gobernanza del sistema de diseño cuando la mayoría de los commits no son humanos
Los modelos de gobernanza se diseñaron bajo la premisa de que una persona solicita un cambio y otra persona lo revisa. Cuando un agente escribe cuarenta pantallas entre revisión y revisión, los procesos de contribución dejan de ser el cuello de botella y la aplicación de las normas se convierte en el trabajo principal.
2026-07-27
Sistema de diseño vs. librería de componentes: la diferencia que cuesta dinero
Una librería de componentes es código que se puede instalar. Un sistema de diseño es el conjunto de decisiones que hacen que ese código tenga el aspecto que tiene. Confundirlos es la razón por la cual los equipos instalan shadcn, lanzan un producto genérico y no logran entender qué salió mal.
2026-07-27
Combinaciones de fuentes para Avenir que funcionan, con alternativas gratuitas listas para implementar
Qué combina realmente con Avenir, renderizado en vivo en lugar de capturas de pantalla. Además, las Google Fonts que sirven de alternativa cuando la licencia no es transferible y sistemas completos basados en estas combinaciones.
2026-08-03
Combinaciones de fuentes Caslon: qué funciona con la serif todoterreno original
Las sans-serif y mono que combinan con Caslon, renderizadas en vivo con versiones gratuitas de Caslon listas para producción. En caso de duda, use Caslon; antes de combinarla, lea esto.
2026-08-03
Combinaciones de fuentes para Proxima Nova, y qué implementar cuando no puedes obtener la licencia
Las serifas y mono que combinan con Proxima Nova, visualizadas en vivo con las fuentes gratuitas que la sustituyen. La fuente por defecto de internet merece un compañero que no sea un estándar genérico.
2026-08-03
Combinaciones de fuentes para Gilroy que funcionan, con sus alternativas gratuitas
Qué combina con la geometría redondeada de Gilroy, renderizado en vivo con alternativas gratuitas de Google Fonts. Además, cuáles de los pesos gratuitos son realmente viables para construir un producto.
2026-08-03
Ejemplos de guías de marca que merece la pena copiar (y lo que a todas les falta)
Ocho guías de marca públicas que realmente enseñan algo, qué diferencia a un documento operativo de un PDF bonito y por qué la próxima generación de guías debe ser ejecutable por máquinas, no solo legible para diseñadores.
2026-08-04
Cómo generar un DESIGN.md (y qué es)
Un DESIGN.md es el brief de diseño escrito que sigue su agente de código de IA para que deje de construir interfaces de usuario genéricas. Aquí encontrará qué debe incluir y cómo generar un DESIGN.md completo y exportable a partir de un sistema de diseño real.
2026-08-04