Adaptar cualquier componente a tu web

Un repo público con el prompt largo de adaptación que hace que Claude Code reescriba un componente copiado de cualquier galería (un botón, una sección, una tarjeta) con tus colores, tu tipografía y tus textos, sin que se note de dónde salió.

Para qué sirve

Las galerías de componentes tienen cosas bien hechas. El problema es que se nota: mismos colores, mismos textos de relleno, misma animación. El prompt hace la adaptación completa, no un cambio de color.

Cómo se usa

1. Copia el código del componente (HTML y CSS, o el componente de React) en un archivo componente-original.html.
2. Ten BRAND.md en la carpeta (colores, tipografía, tono, qué no usar).
3. Corre el prompt.

El prompt

Lee BRAND.md. En componente-original.html hay un componente copiado de una galería.
Reescríbelo para mi marca:
1. Colores: reemplaza TODOS los colores por los de BRAND.md (fondo, texto, acento, bordes, sombras). Ninguno del original puede quedar.
2. Tipografía: la de BRAND.md, con los pesos que ahí dice.
3. Textos: reemplaza el relleno por textos reales míos: [pega 3 a 5 frases]. Si falta texto, déjalo marcado como [TEXTO] y dímelo.
4. Radios, sombras y espaciados: ajústalos a la escala de BRAND.md (si dice bordes de 18 px, nada de 4 px).
5. Animaciones: deja solo las que aportan al uso; quita las decorativas. Ninguna más larga de 300 ms.
6. Accesibilidad: contraste mínimo 4,5 a 1 entre texto y fondo; texto sobre relleno dorado va casi negro, nunca blanco.
7. Quita clases, comentarios y nombres que delaten la galería.
Devuélveme el archivo completo y una lista de qué cambiaste. Abre el resultado y revísalo en 390 y 1280 píxeles de ancho.

Lo que casi siempre hay que revisar a mano

• El texto sobre color: la IA tiende a poner blanco sobre dorado o sobre amarillo, y no se lee.
• Los tamaños en píxeles decididos para una pantalla: si un número posiciona algo, tiene que salir de una medida del contenedor, no de un píxel fijo.
• Que el componente siga funcionando: un botón que abre algo tiene que seguir abriéndolo.

Qué NO resuelve

No diseña: adapta. Si el componente original está mal pensado para tu caso, adaptado sigue mal pensado.

Siguiente paso

«Pack de diseño web» junta este prompt con los dos de «Landing en dos pasos».