Automatizar y construir con IA
Pack de diseño web
Un repo instalable con las piezas de diseño web que ya estaban definidas, juntas: los dos prompts en orden (diseño y construcción), el archivo de handoff que los conecta, el prompt que adapta un componente copiado a tu marca, y el BRAND.md de ejemplo.
Para qué sirve
Para que cada web que hagas (tuya o de un cliente) siga el mismo método y no dependa del humor del día: primero se decide el diseño en un archivo, después se construye desde el archivo, y lo que se copia de afuera se adapta.
Qué trae
| Archivo | Qué es | De qué recurso viene |
|---|---|---|
prompts/diseno.md | El prompt que devuelve DISEÑO.md (estructura, copy, jerarquía, prohibiciones, el botón único) | Landing en dos pasos |
prompts/construccion.md | El prompt que construye desde DISEÑO.md sin inventar | Landing en dos pasos |
prompts/adaptar.md | El prompt que reescribe un componente copiado con tu marca | Adaptar cualquier componente a tu web |
BRAND.md | El ejemplo lleno: colores con su uso, tipografía, tono, lo prohibido | Este pack |
DISEÑO.ejemplo.md | Un handoff real, para ver el nivel de detalle | Este pack |
El BRAND.md de ejemplo (la parte que la gente deja vacía)
# Marca
Colores: fondo #0A0B0D · texto #F4EFE4 · acento #C9A840 (solo para lo que se toca y lo que se destaca; nunca para párrafos) · secundario #7B2FBE (fondos de sección, nunca texto).
Regla de contraste: texto sobre acento va #241701, nunca blanco.
Tipografía: Space Grotesk 400/600/700. Títulos con letter-spacing -0,03 em.
Tono: tú, directo, sin exclamaciones, sin «transforma tu», sin «desbloquea».
Bordes: 18 px en tarjetas, 100 px en botones. Sombras: solo en lo que flota.
Prohibido: gradientes por defecto de la herramienta, íconos genéricos, tres columnas de features, texto en blanco sobre dorado.El método, en tres pasos
prompts/diseno.mden Claude (chat) →DISEÑO.md.prompts/construccion.mden Claude Code conDISEÑO.mdyBRAND.mden la carpeta →index.html.- Si quieres algo de una galería:
prompts/adaptar.md→ el componente con tu marca, y se pega.
Qué NO resuelve
No decide la oferta ni el copy de fondo: el prompt de diseño escribe el copy desde tu contexto, y si el contexto está vacío, el copy sale vacío.
Siguiente paso
Cada web termina en un contacto: «Tu agente de WhatsApp» o el formulario de «Las 3 páginas gratis».