Diseño con Claude Code: prompts, gemelos en markdown y design.md

Claude Code lee archivos y URLs, recuerda un design.md por proyecto y puede instalar skills. Las tres son formas de pasarle un look en vez de describirlo cada vez.

Lo más rápido: pegar el prompt

Elige un snippet, pon el menú de herramienta en Claude Code, pulsa Copiar prompt y pégalo en la sesión. El prefijo le dice que use CSS puro y mantenga los nombres de clase. Añade una línea sobre qué archivo y qué elemento.

Mejor: deja que lea el markdown

Claude Code puede descargar una URL. Dile:

Read https://designforai.dev/snippet/btn-041.md and apply that button style to the primary action in src/components/Checkout.tsx. Plain CSS in checkout.css.

Consigue el CSS, el HTML y el prompt de una vez, y tú te saltas el portapapeles. La lista completa de gemelos en markdown está en /llms.txt.

Look para todo el sitio: pon un estilo en design.md

Abre cualquier página de Estilos, copia el prompt y pégalo en el design.md de tu proyecto bajo un encabezado tipo "Design direction". Cada petición posterior en ese proyecto lo hereda. El bloque de semilla CSS de la misma página te da las custom properties con las que arrancar la hoja de estilos:

## Design direction
(paste the style prompt here)

## Tokens
:root { --bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --radius:16px; }

Dos notas de haberlo hecho en proyectos reales. Primera, mantén corta la sección de dirección; un manifiesto de 400 palabras se resume y desaparece en sesiones largas, y la herramienta vuelve a sus valores por defecto. Segunda, nombra lo que hay que evitar ("sin degradados de morado a azul, sin brillo detrás del hero") porque esos valores por defecto son justo contra lo que peleas.

Funcionalidades de Nuevo en CSS

Claude Code conoce la mayor parte del CSS más reciente, pero tiende a tirar de la versión segura de 2019 a menos que lo pidas por su nombre. Los prompts de esas páginas hacen exactamente eso: nombran la funcionalidad, indican el soporte de navegadores y dicen cuál es el fallback. Pega uno y usará anchor-position o @starting-style en vez de un apaño en JavaScript.

La skill frontend-design de Anthropic

Anthropic publica una skill frontend-design para Claude Code que lo aleja de los layouts genéricos. Funciona bien con este sitio: la skill decide la composición general, un prompt de estilo de aquí fija la paleta y la tipografía, y los snippets rellenan los componentes. Si la tienes instalada, ejecútala primero y luego pega el estilo.