01 Por qué tus diseños con IA se parecen todos
Cuando le pides a Claude una página sin más contexto, rellena los huecos con lo más probable: degradados violetas, tarjetas con sombra suave, tipografía sin personalidad. No es falta de capacidad, es falta de instrucciones concretas. «Moderno y elegante» no es una especificación; #1F2937 sí lo es.
Un DESIGN.md es un archivo Markdown que describe un sistema visual con valores exactos (colores, tipografías, espaciados, radios, componentes) y con reglas en prosa que explican cuándo usar cada cosa y qué evitar. Los agentes de código lo leen como leerían un AGENTS.md, pero para el aspecto en vez de para el código.
Tokens
Colores, tamaños de letra, espaciados y radios con su valor numérico. Eliminan la interpretación.
Componentes
Cómo son los botones, campos, tarjetas y estados. Evitan que cada pantalla invente su propio botón.
Criterio
El porqué de cada decisión: densidad, jerarquía, tono, movimiento.
Prohibiciones
Lo que esa estética nunca hace. Es la parte que más reduce el aspecto genérico.
---
name: Taller Norte
colors:
ink: "#16181D"
paper: "#FAF8F4"
accent: "#C2410C"
typography:
heading:
fontFamily: Fraunces
fontSize: 2.75rem
body:
fontFamily: Inter
fontSize: 1rem
rounded:
md: 6px
spacing:
section: 96px
---
## Reglas
- El acento solo en llamadas a la acción y enlaces.
- Fondos lisos; nada de degradados ni cristal esmerilado.
- Secciones con mucho aire: nunca menos de 64px entre bloques.02 Paso 1: consigue un DESIGN.md
Tienes tres caminos. Refero Styles (styles.refero.design) es una biblioteca con más de 2.000 sistemas de diseño extraídos de webs de producto conocidas: abres la ficha de una marca, ves su paleta, tipografía y componentes, y copias el DESIGN.md. Navegar y copiar no requiere pagar; la integración que conecta Refero directamente con tu asistente es un servicio aparte.
Si prefieres algo abierto y versionado, la colección awesome-design-md en GitHub recopila más de 80 archivos de webs orientadas a desarrolladores. Y si tienes marca propia, escribe el tuyo siguiendo la especificación publicada por Google Labs, que además trae un validador.
| Opción | Variedad | Cuándo elegirla |
|---|---|---|
| Refero Styles | Más de 2.000 estilos con vista previa | Buscas el aspecto de una web concreta o un estilo muy específico |
| awesome-design-md | Más de 80 archivos, licencia abierta | Quieres una fuente estable que puedas guardar en tu repositorio |
| Tu propio DESIGN.md | Exactamente tu marca | Ya tienes manual de identidad y quieres que Claude lo respete |
npx @google/design.md lint DESIGN.md03 Paso 2: guárdalo como skill para no pegarlo nunca más
Pegar el archivo en cada conversación funciona, pero se olvida y ocupa contexto. Lo eficaz es envolverlo en una skill: una carpeta con un SKILL.md cuyo encabezado indica el nombre y cuándo debe activarse. Claude la carga sola cuando la petición encaja con la descripción.
---
name: estilo-taller-norte
description: Sistema visual de Taller Norte. Úsalo siempre que se diseñe, maquete o revise cualquier pantalla, página, componente o presentación de Taller Norte.
---
# Estilo Taller Norte
Este archivo es la única fuente de verdad para colores, tipografía,
espaciado y componentes. Si falta un valor, derívalo de los existentes
y avisa de que lo has derivado.
## Ajustes propios del proyecto
- (tus excepciones, por ejemplo: esquinas de 10px en vez de 6px)
## DESIGN.md
(pega aquí el archivo completo, sin recortar)-
1
Claude Code
Crea la carpeta en ~/.claude/skills/ (para todos tus proyectos) o en .claude/skills/ dentro del proyecto si solo aplica a uno. El archivo debe llamarse exactamente SKILL.md.
-
2
App de Claude
Comprime la carpeta en .zip y súbela desde Customize > Skills. Antes, en Settings > Capabilities, activa la ejecución de código y creación de archivos.
-
3
Comprueba que se activa
Abre una conversación nueva y pide una pantalla sin nombrar la skill. Si no la usa, la descripción es demasiado vaga: añade el nombre de la marca y verbos como diseñar, maquetar o revisar.
04 Paso 3: construye con UI/UX Pro Max sin que cambie tu paleta
UI/UX Pro Max es una skill gratuita que aporta criterio de interfaz: jerarquía, accesibilidad, patrones por sector y buenas prácticas por framework. Consulta su base de datos con un script de Python, así que necesitas python3 instalado (compruébalo con python3 --version).
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillnpm install -g ui-ux-pro-max-cli
uipro init --ai claude --globalDiseña la página de servicios de mi empresa usando UI/UX Pro Max para la estructura, la accesibilidad y los patrones de interfaz.
Regla principal: los colores, la tipografía, los espaciados, los radios y los componentes salen únicamente de mi skill estilo-taller-norte. No uses paletas ni pares tipográficos de tu catálogo. Si necesitas un valor que no existe, derívalo de los que hay y anótalo en una lista al final.
Cuando termines, revisa la página sección por sección contra el DESIGN.md y dame una tabla con cada desviación encontrada y cómo la corregirías.05 Paso 4: publícalo con Claude Web Builder
Claude Web Builder (repositorio claude-webkit) es una plantilla de proyecto para Claude Code que te entrevista sobre tu negocio, monta una landing con Next.js, Tailwind CSS y shadcn/ui, te enseña una vista previa y la despliega en Vercel con una URL pública. El despliegue no exige cuenta de Vercel; si quieres conservar la web, la reclamas después con una cuenta gratuita.
git clone https://github.com/Hainrixz/claude-webkit.git
cd claude-webkit
claude06 Usos en negocio y límites que debes conocer
Agencias
Un DESIGN.md por cliente guardado en su repositorio: cualquier persona del equipo o cualquier agente produce piezas coherentes.
Pymes sin diseñador
Parte de un estilo de referencia, cambia los colores por los de tu marca y obtén una base profesional en una tarde.
Producto digital
La misma skill sirve para la web, el panel de la aplicación y las presentaciones comerciales.
Revisiones
Pide a Claude que audite pantallas existentes contra el archivo y te devuelva la lista de incoherencias.
- ✓Inspirarte en la estructura de un estilo es legítimo; copiar logotipos, nombres, fotografías, textos o tipografías de pago de otra marca no lo es.
- ✓Sustituye siempre los colores de la marca original por los tuyos: si alguien puede confundir tu web con la suya, te has pasado.
- ✓El archivo es una foto fija: si la marca rediseña, tu DESIGN.md no se actualiza solo.
- ✓Un buen sistema visual no arregla una mala estructura de contenidos ni textos flojos.
- ✓Si el resultado se ve barato, revisa primero el espaciado: es lo que antes se desvía.
Preguntas frecuentes
No para los pasos 1 y 2, que son copiar un archivo y guardarlo como skill. Para construir y publicar necesitas instalar Claude Code, Node.js, Git y Python y ejecutar unos pocos comandos en la terminal, pero el código lo escribe Claude.
Sí. DESIGN.md es un formato abierto en Markdown que también entienden otros agentes de código. Lo que cambia es cómo se carga: en Claude lo más cómodo es una skill; en otros agentes, dejar el archivo en la raíz del proyecto.
El archivo describe decisiones de diseño genéricas (espaciados, jerarquía, contrastes), que puedes usar como inspiración. Lo que no debes reproducir es la identidad: nombre, logotipo, imágenes, textos ni tipografías con licencia. Adapta los colores a tu marca.
Comprueba que la skill está activa, que su descripción menciona tu marca y tareas de diseño, y repite en el prompt que la skill es la única fuente de colores y tipografía. Pedirle una auditoría final contra el archivo suele destapar las desviaciones.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.