Refero DESIGN.md

Le pides una página y te sale bonita. Le pides otra, otro día, para otro negocio, y te sale la misma. El mismo degradado de morado a azul, la misma tipografía redonda, los mismos botones con la misma esquina redondeada.

No es que Claude diseñe mal. Es que cuando no le dices con qué diseñar, promedia todo lo que vio, y el promedio de millones de páginas es exactamente eso: el centro. Ningún diseñador empieza de cero tampoco — empieza con una referencia.

Lo que le falta no es talento, es un dato. Cuál azul, en qué número exacto. Qué tipografía, en qué tamaños. Cuánto aire entre las cosas. Y sobre todo: qué cosas nunca se usan en esa marca.

Ese dato cabe en un archivo de texto, y ya está escrito. Alguien lo escribió por ti para dos mil marcas.

Es un archivo de texto. Nada más. Se abre con el bloc de notas y se lee sin saber programar.

Adentro está el estilo de una marca traducido a números y a reglas: no «azul oscuro elegante», sino el código exacto de ese azul y en qué parte de la pantalla va. Eso es lo que hace que la máquina lo pueda seguir sin interpretarlo.

Las nueve partes que trae

• El tono y los principios — de qué va la marca, en frases que se puedan obedecer.
• Los colores, cada uno con su código y con el trabajo que hace.
• La tipografía: qué letra, en qué tamaños y con qué grosores.
• El espaciado — cuánto aire va entre las cosas.
• Los componentes: cómo son los botones, las tarjetas, los campos.
• El layout y la densidad: qué tan apretado o qué tan aireado.
• El movimiento — qué se anima, cuánto tarda y cómo.
• La accesibilidad: contrastes y tamaños mínimos para que se lea.
• Las reglas de «esto no se usa». La parte más importante del archivo.

## Colores

  fondo          #FFFFFF   toda la superficie base
  texto          #0A0A0A   títulos y cuerpo
  texto-suave    #6B7280   pies de foto, etiquetas
  acento         #2563EB   solo botones primarios y enlaces

## No usar

  - degradados de dos colores en fondos
  - sombras de más de 8px de desenfoque
  - el acento como color de texto en párrafos

Este ejemplo lo escribí para enseñar la forma: no es el archivo de ninguna marca. Los de verdad son más largos y traen las nueve partes.

La plantilla oficial, con lo que debe llevar cada parte y el consejo de mantenerlo corto, está publicada en la propia página de Refero — sirve si algún día quieres escribir el tuyo desde cero en vez de copiar uno.

Refero Styles es una biblioteca: más de dos mil sistemas de diseño de marcas reales, cada uno ya convertido al archivo que la máquina entiende. No hay que registrarse para mirar.

El sitio es styles.refero.design, y ahí mismo publican la plantilla por si algún día escribes el tuyo.

La alternativa sin salir de GitHub

Hay una colección abierta con 73 archivos DESIGN.md de sitios conocidos, con licencia MIT. Es menos variedad, pero no depende de ningún sitio de nadie: te la bajas y es tuya.

La colección abierta es VoltAgent/awesome-design-md.

Y esa colección tiene su propia guía en la bóveda, con los archivos contados uno por uno: Awesome Design MD. Aquí no se repite.

Aquí es donde casi todo el mundo se queda a medias. Copian el DESIGN.md, lo pegan en el chat, sale una pantalla bonita… y a la semana siguiente, en otra conversación, Claude ya no se acuerda de nada y vuelven a pegarlo.

La solución es convertirlo en una habilidad: un archivo que Claude trae puesto siempre, en todas tus conversaciones, sin que se lo recuerdes. Se hace una sola vez y son cinco minutos.

Una habilidad no es nada raro: es un archivo de texto llamado SKILL.md con dos líneas arriba que le dicen a Claude cómo se llama y cuándo usarlo. Lo demás es tu DESIGN.md tal cual.

Baja el envoltorio

Ya está escrito, con el hueco marcado donde va tu archivo. Bájalo, pega adentro lo que copiaste en el paso 1 y ya es tu habilidad.

Los tres huecos que tienes que llenar

Dónde se pone

• En la app de Claude son dos lugares distintos. Primero Configuración → Capacidades, y enciendes «Ejecución de código y creación de archivos».
• Después claude.ai/customize/skills, o desde el menú, Customize → Skills. Ahí le das al botón «+», eliges subir una skill y le pasas el .zip.
• En Claude Code: descomprimes y mueves la carpeta a ~/.claude/skills/. El archivo tiene que llamarse SKILL.md, exactamente así.
• En Cowork: el mismo panel de Customize → Skills. Es uno solo para toda la cuenta, así que si ya la subiste en la app, ya la tienes.

Si nunca has instalado una habilidad y quieres el recorrido con más detalle, el kit de diseño lo explica para cinco habilidades distintas, y el procedimiento es el mismo.

Ya tienes el estilo puesto. Falta quien lo use para armar pantallas, y esa es UI/UX Pro Max: una habilidad gratuita, con licencia MIT, que sabe de layout, de componentes, de accesibilidad y de cómo se arma una pantalla que funciona.

Trae su propio catálogo —79 estilos, 192 paletas y 74 pareos de tipografías— y ahí está justo la trampa de este paso.

Un solo comando. Si te pregunta si quiere instalar el paquete, dile que sí: npx baja la herramienta y la corre sin dejarte nada instalado de por vida.

Construye la página de inicio de mi negocio con UI/UX Pro Max.

Usa mi habilidad de estilo NOMBRE-DE-TU-HABILIDAD como única fuente de colores,
tipografía, espaciado y componentes. No elijas de tu propio catálogo de estilos
ni de paletas: si algo falta ahí, derívalo de los valores que sí están y dime
que lo derivaste.

Al terminar, compara la pantalla contra ese archivo y dime en qué se salió.

La habilidad es de nextlevelbuilder y su código está en su repositorio, con licencia MIT.

Contada entera, junto con las otras cuatro habilidades de diseño y el comando de cada una, está en el kit de diseño. Aquí solo interesa cómo obedece a tu archivo.

Ya se ve bien. Falta que exista en internet, que es donde se cae la mitad de los proyectos: se quedan bonitos en la computadora y nadie los ve nunca.

Web Kit es mío y es gratis, con licencia MIT. Te hace unas preguntas sobre tu negocio, arma el sitio completo y lo publica con su dirección, en línea, listo para mandar por WhatsApp. Son seis fases y las corre él.

Las tres cosas en un renglón: lo baja, entra a la carpeta y abre Claude ahí adentro. De ahí en adelante te va preguntando.

Lo que hace, en orden

• Te entrevista sobre el negocio: qué vendes, a quién, qué quieres que haga quien entre.
• Propone el sistema de diseño — y aquí es donde entra tu habilidad, ver abajo.
• Monta el proyecto con todo lo que necesita.
• Construye las secciones del sitio, una por una.
• Te enseña capturas, revisa el SEO y te pide opinión.
• Lo publica. Te queda una dirección que puedes compartir.

El código está en Hainrixz/claude-webkit, con licencia MIT.

Contado a fondo, con sus seis fases explicadas una por una, está en Claude Web Builder.

Y si además quieres el plano del sitio antes de construirlo, hay otra cadena distinta a esta —El Arquitecto entrevistando primero— en Sitio web de $10,000. Las dos terminan en Web Kit, pero entran por lados distintos.

Lo que sale de cada paso es lo que entra al siguiente. Los pasos 1 y 2 se hacen una sola vez; el 3 y el 4 se repiten cada vez que armes algo nuevo, y ya con el estilo puesto.

De dónde salen los números de esta página

Los «más de 2,000 sistemas» y el «copiar es gratis» están escritos en la propia página de Refero, y las nueve partes de un DESIGN.md salen de su plantilla oficial.

Los 73 archivos de la colección abierta salen del contador de su repositorio. Las tres piezas que se instalan —UI/UX Pro Max, Web Kit y la colección— son MIT.

Todo se verificó el 16 de septiembre de 2026. Cuando la fuente cambie, gana la fuente.

Y si el look de máquina no se te quita solo con el diseño —porque también se nota en los textos, en los diagramas y en las presentaciones— eso se cubre completo en Stop AI Slop, con diez repositorios gratuitos.