# diseno.md — cómo te ves 🎨

> Claude Code · Memoria (CLAUDE.md)
> Fuente: https://magoallegri.com/cursos/claude-code/memoria/diseno

---

Sin este archivo, todo lo visual que Claude haga te sale genérico. Con él, Claude chequea **tus** colores, tipografías y reglas antes de diseñar nada (sitios, tarjetas, gráficos). La forma más rápida de armarlo: mostrarle un look que te encanta y que lo desarme en un sistema.

![Cómo te ves: de un screenshot que te gusta a tu sistema de diseño](../_assets/M02-L05-diseno.webp)

---

## Armalo (en la app)

Buscá una marca, un sitio o un post cuyo estilo visual te guste (el tuyo, o uno que admirás). Sacale una captura, arrastrá la captura al panel de Claude Code, y pegá el prompt:

```
Convertí esto en un sistema de diseño: un archivo HTML de preview y un archivo
diseno.md con mis colores (en código hex), tipografías y reglas visuales. Guardá el
diseno.md en mi memoria de Claude. Después abrí el HTML para que lo vea.
```

Claude te arma el sistema de diseño como una preview HTML y un archivo `diseno.md`.

> ¿No tenés marca todavía? Sacale captura a cualquier sitio cuyo estilo te daría orgullo copiar. Lo podés refinar después: acá nada es permanente.

> ✅ **Listo cuando**: tenés un `diseno.md` (y una preview HTML) con tus colores, tipografías y reglas visuales.

---

## 🟢 Mini-tarea

Elegí un look que te guste, capturalo, y corré el prompt. Abrí la preview HTML y mirá si captó el estilo. Si no, decile qué cambiar (un color, una tipografía) en palabras.