Personalizar bien es cambiar lo que es tuyo (marca, contenido, imágenes) y conservar lo que hace que el diseño funcione.
Respuesta breve
Para personalizar un diseño: guarda una copia, localiza en el README qué archivo controla cada parte, cambia el nombre y el título, ajusta los colores en las variables CSS de :root, sustituye textos e imágenes manteniendo proporciones y variantes, escribe un alt para cada imagen y revisa el resultado a 1440, 768 y 390 px, con teclado y con «reducir movimiento».
Qué necesitas
- El proyecto arrancado (guía anterior).
- Tu nombre o marca, tus textos y tus imágenes con licencia.
- Opcional: git para poder deshacer cambios.
Pasos
Guarda una copia antes de tocar nada
Con git puedes volver atrás en cualquier momento; sin git, duplica la carpeta. El paquete no trae .gitignore: créalo antes para no guardar node_modules ni dist.
printf "node_modules/\ndist/\n" > .gitignore git init && git add . && git commit -m "Diseño original"Comprueba: git status no muestra cambios y git ls-files no lista nada de node_modules.
Localiza dónde se cambia cada cosa
El README de cada paquete tiene una tabla «Dónde personalizar». En Pliegue: nombre en Hero.jsx y Footer.jsx, colores y tipografías en styles.css, movimiento en motion.css.
Comprueba: Sabes qué archivo abrir para cada cambio antes de pedirlo.
Cambia la marca
Nombre visible, texto legal del pie y título de la pestaña.
<title>Marea Estudio — Diseño y estrategia</title>Comprueba: Tras npm run build, el HTML de dist/ contiene tu nombre y ya no el original.
Ajusta los colores con variables
Cambia el valor de la variable, no cada color suelto: así el cambio es coherente en todo el sitio.
:root { --paper: #d8e0dc; /* antes: #dedbd4 */ }Comprueba: El CSS compilado contiene --paper:#d8e0dc y el fondo del hero cambia en todas las vistas.
Sustituye imágenes con cuidado
Las imágenes de ejemplo están en public/assets/. Usa material propio o con licencia, conserva la proporción y genera también las variantes pequeñas (por ejemplo hero-543 y hero-800) que usa srcset. Escribe un alt que describa la imagen.
Comprueba: Ninguna imagen se ve estirada ni recortada a 390 px y cada una tiene alt.
Revisa en tres anchos y con accesibilidad
Comprueba 1440, 768 y 390 px; recorre la página con Tab y activa «reducir movimiento» en tu sistema.
Comprueba: El foco se ve, nada se desborda y con movimiento reducido las animaciones quedan en su estado final.
Nuestro ejemplo
Cambiamos «PLIEGUE» por «MAREA», el texto legal del pie, el <title> y la variable --paper de #dedbd4 a #d8e0dc. Nada más.
Primero guardamos el original en git con .gitignore (59 archivos, ninguno de node_modules). La compilación pasó a la primera; las capturas de abajo son el diseño antes y después, a 1440 y 390 px.
Errores comunes
- Cambiar colores sueltos en lugar de las variables: quedan zonas con el color anterior.
- Subir una imagen nueva sin sus variantes: el navegador sigue cargando la antigua en móvil.
- Dejar textos o clientes de ejemplo: son ficticios y no deben publicarse como tuyos.
- Cambiar la estructura o las animaciones sin necesidad: es lo que hace que el diseño funcione.
Siguiente paso
Cuando lo tengas listo, sigue con la guía para preparar y publicar el proyecto.