Making-of · 9 min de lectura
Diseñado con Claude
Cómo diseñé este portafolio en binomio con una IA, y dónde tomé las riendas
Este sitio es mi primer proyecto IA. Un ejercicio real de dirección artística: briefé a Claude Code, validé, reorienté y escribí código a mano cuando había que retomar el control.
01 Por qué contar esto
Dirigir la IA, no solo usarla
Hoy, todo el mundo ha usado una IA. Lo que marca la diferencia es saber dirigirla: elegir qué delegar, qué guardar en mano, cuándo reorientar, cuándo dejarla correr.
Este portafolio es mi primer proyecto construido con Claude Code como binomio. La máquina escribió código, yo tomé todas las decisiones. Al final, el sitio está enteramente a mi imagen, porque soy yo quien sostuvo la dirección artística, línea por línea. La IA reemplazó una sola cosa: la espera entre la intención y la ejecución.
Con la IA, diseño experiencias de marca completas. Y solo le confío lo que sé juzgar.
02 El método
Todo cabe en tres archivos
Una diseñadora que sabe lo que quiere, una IA que lo escribe rápido.
1. CLAUDE.md en la raíz. Una nota larga y densa: visión, stack, identidad, arquitectura, fases, convenciones. Es lo que Claude Code lee primero en cada sesión. Sin esto, inventa. Con esto, sabe a qué se enfrenta.
2. Skills personalizadas en .claude/skills/: design-system, i18n, case-study, motion. Una skill es un documento preciso sobre una sola cosa. Claude Code solo la carga cuando la necesita (por ejemplo, la skill motion se carga cuando toco GSAP). Su memoria se mantiene ligera: lee lo que sirve, cuando sirve.
3. El repo Git mismo. Cada fase del roadmap = un commit validado por mí. Si algo sale mal, sé exactamente dónde volver.
03 La construcción
Fase a fase
Las siete primeras fases, cada una un commit validado. El sitio desplegado en vivo desde la fase 1.
-
00 Fase 0
La visión y el design system
Antes de una sola línea de código, dos horas de brainstorming estratégico con Claude. Para estructurar lo que tenía en mente; la decisión seguía siendo mía. Audiencia, tono, posicionamiento, restricciones. Al final, teníamos
CLAUDE.md.Luego el design system: paleta negro / blanco / amarillo, Anton + Inter + Fraunces, una escala de espaciado, reglas de motion. Trasladado desde mi antiguo sitio Wix, y afirmado: libre de las restricciones de plantilla.
Dónde retomé las riendas: la paleta. Claude Code proponía algo más « tech start-up ». El amarillo firma soy yo. Una intuición de diseñadora que ninguna IA puede adivinar desde una descripción.
-
01 Fase 1
El setup técnico
Astro 6 (estático, performante, Markdown-friendly), Tailwind 4, GSAP + Lenis, Vercel. En una sesión, el sitio estaba en línea con una URL en vivo, vacío pero desplegado. Ver la evolución en línea en cada commit fue una palanca enorme de motivación.
Lo que marcó: el momento en que Claude Code escribió
astro.config.mjscon el i18n configurado para FR/EN/ES de una sola vez, sin que yo tuviera que buscar en la documentación. La verdadera ganancia está ahí: cero fricción técnica. -
02 Fase 2
Arquitectura de contenido
Esquemas Zod para los case studies, subcarpeta por idioma para las colecciones multi-doc, archivo plano para los single-docs (about, making-of). Creación de las skills
case-studyei18n.Dónde reorienté: Claude Code quería una colección por idioma (
case-studies-fr,case-studies-en…). Más simple de codear para él, pero habría duplicado el schema tres veces. Impuse una sola colección con una subcarpeta por idioma. La consecuencia se ve ahora: añadir un nuevo idioma toma cinco minutos. -
03 Fase 3
Componentes & motion system
Nav, Footer, LangSwitcher, ProjectCard, Reveal, SmoothScroll (Lenis). Creación de la skill
motion. Es ahí donde la cáscara empezó a vivir: animaciones de entrada, hover que se enciende en amarillo, scroll fluido.Decisión clave: animar el hero en CSS puro, no en GSAP. Sin dependencia al bundle JS para el LCP. Una intuición de desarrolladora web, defendida contra la sugerencia « GSAP en todas partes ».
-
04 Fase 4
La home completa
Hero definitivo, grilla « Selected work » que finalmente consume la colección Astro, sección About en preview, CTA contacto en monumental.
Apuesta asumida: publicar cuatro páginas provisionales de casos de estudio en vez de esperar el contenido real. Más vale una grilla que funciona con páginas provisionales legibles que una grilla vacía. El contenido final llegará por encima, sin tocar la estructura.
-
05 Fase 5
Las páginas proyectos
Índice
/worken lista editorial (número Fraunces + título Anton XXL + meta), con una miniatura que sigue al cursor al pasar por encima (efecto Awwwards, GSAPquickTo, lazy import). Página dinámica/work/[slug]para cada proyecto: hero full-bleed, bloque meta estructurado, body Markdown renderizado en estilo editorial.prose, NextProject cíclico.El momento de orgullo: la primera vez que sobrevolé un item del índice y vi la miniatura flotar suavemente hacia el cursor. 70 líneas de código para algo que, en Awwwards, es el efecto firma de muchos portafolios premiados.
-
06 Fase 6
About & Contacto
Páginas narrativas. La página Sobre mí cuenta una trayectoria real. La hostelería dejada sin un plan B. El diseño descubierto por azar a través de WordPress y el marketing de afiliados. Un máster en desarrollo web para formalizar lo que se había aprendido sola. La polivalencia como resultado de una sucesión de elecciones no planeadas. Página de contacto: un email gigante y una línea directa.
Un portafolio personal gana siendo simple.
04 Honestidad
Lo que hace bien. Lo que me quedo.
Bueno para
- Setup técnico: configs, dependencias, convenciones Astro/Tailwind/GSAP.
- Boilerplate: 12 stubs de páginas multilingües en 2 minutos.
- Tipos & esquemas Zod: nunca un error de sintaxis TypeScript.
- Patrones conocidos: smooth scroll Lenis, ScrollTrigger, image optim.
- Escritura documental: skills, READMEs, commit messages.
- Refactor multi-archivos coherente.
- Exploración visual (Claude Design): direcciones de layout, paleta, componentes, antes de comprometerse con el código.
Lo que me quedo
- Decisiones de diseño: paleta, tipo, ratio, ritmo visual.
- Elecciones arquitectónicas no estándar: mis convenciones de archivos.
- Voz editorial: tono, elección de palabras, lo que se calla.
- Sentir cuándo « va mejor » sin explicación.
- Mi oficio, que conozco mejor que él.
El día que se equivocó
Una mañana, le pido un estado del proyecto a partir de los logs de una rutina. Me suelta una checklist perfectamente segura: remote Git ausente, cero enlaces seguros, case studies aún en placeholder. Todo falso: había leído un archivo truncado y rellenado los huecos por su cuenta, sin decirlo.
Lo que cuenta es lo que vino después. Le pido que verifique de verdad. Reabre los archivos, mide, y reescribe su propia checklist señalando sus errores: remote OK, enlaces ya seguros, contenido real y completo.
Esto es exactamente trabajar con una IA. No se cansa nunca, pero no duda nunca lo suficiente. Mi papel: dudar en su lugar. Una IA que verificas sigue siendo un acelerador. Una IA que crees a pies juntillas se vuelve un riesgo.
Producir, sin delegar el juicio
Último ejemplo: las miniaturas de los proyectos en la página de inicio. Las imágenes estaban, pero mal encuadradas: banners panorámicos forzados en un marco casi cuadrado. Dirigí a la IA para generar nuevas, pero soy yo quien decidió el encuadre: rechacé una foto vertical que habría cortado la postura de yoga, impuse el formato horizontal, validé cada recorte uno por uno.
Mismo reflejo en la integración. Un archivo llamado « documental » contenía en realidad una plancha de estrategia de contenido. En lugar de pegarlo bajo la leyenda equivocada, Claude Code leyó el contenido de la imagen y me pidió decidir. Un nombre de archivo no es una prueba. Dirigir la IA es también enseñarle de qué desconfiar.
Tres detalles que había que ver
El hero vivió tres rondas en una semana: una cinta de palabras clave en bucle, un trazo firma bajo mi nombre, marcas de esquina al estilo visor de estudio fotográfico. Tres añadidos en CSS puro, animados en cascada. Sobre el papel, terminado.
Excepto que. La cinta cerraba el bucle con un hueco visible en pantallas anchas: la técnica translateX(-50%) exige que cada mitad de la pista supere el ancho del viewport, y en un monitor de 27 pulgadas, cinco palabras no bastaban. El trazo bajo «Belleudy» se dibujaba con un ancho aproximado, visualmente casi correcto, pero no exacto. Y al reducir la ventana del navegador a un tamaño de tableta (en ordenador, por tanto con ratón), el cursor desaparecía sin más: el nativo oculto, el personalizado también escondido, nada visible en pantalla.
Estos tres fallos los detecté yo misma: captura de pantalla para el primero, comparación a ojo para el segundo, un simple redimensionado de ventana para el tercero. Claude Code no había visto ninguno: el código «funcionaba», en el sentido de que nada se rompía. Dirigir la IA, aquí, fue sobre todo probar como una usuaria, no como un linter.
Las correcciones cuentan bien la diferencia entre «parece bien» y «es exacto». Para la cinta: repetir la lista de palabras clave hasta superar ampliamente el viewport. Para el trazo: un ResizeObserver que mide el ancho real de «Belleudy» en el DOM y lo traslada al trazado SVG. Ahora coincide al píxel, sin importar el idioma o el tamaño de pantalla. Para el cursor: un simple desajuste entre la consulta de medios del script (que decide si monta el cursor personalizado) y la del CSS (que decide si lo muestra), corregido alineando ambas en la misma condición.
Ninguno de estos tres fallos era «grande». Y precisamente por eso importan: son el tipo de detalle que una visitante apresurada nunca nota conscientemente, pero que, sumados, marcan la diferencia entre un sitio que funciona y uno que transmite confianza.
05 Tres prompts
Que cambiaron algo
No usamos Tailwind Typography para .prose. Quiero que cada detalle sea del design system: barra amarilla antes de los h2, números en Fraunces itálica para los ol, blockquote con label en caps.
Resultado: un estilo editorial que no existe en ningún otro lugar de la web. Tailwind Typography es demasiado genérico para este proyecto.
El hero debe estar animado en CSS puro, no en GSAP. Por qué: el LCP.
Una frase, una decisión técnica fundada. Claude Code reescribió inmediatamente el hero con @keyframes y un fallback prefers-reduced-motion.
Quiero que las cards de los case studies en la home sean visibles ahora mismo, aunque el contenido real venga después. Crea 4 stubs published, con SVG placeholder distintos en estilo design system.
Resultado: un sitio que muestra desde el push, no un sitio que espera el contenido. Una decisión de producto que asumí sola.
06 Aprendizajes
Cuatro máximas del taller
Dirigir a la IA es dirigirse a uno mismo. Cuanto más claro el brief, más justo el resultado. Cuando dudo, Claude Code duda. Cuando sé, entrega.
La IA reemplaza la fricción. El tiempo que gano es el que pasaba esperando, traduciendo, explicando. Se lo devuelvo a la concepción.
Las skills son una forma de diseño. Codificar mis convenciones en .claude/skills/ es inscribir mi método en el proyecto. Mañana, si alguien retoma el repo, tendrá mi forma de pensar a mano.
El CLAUDE.md es el objeto más importante del proyecto. Más importante que el package.json. Gracias a él, cada sesión retoma donde terminó la anterior.
07 Obra real
No son 5 minutos
La IA borró la fricción técnica. El tiempo de pensar sigue intacto.
Un sitio generado en 5 minutos existe. Un sitio calibrado tarda más, y es a propósito.
Este portfolio: diez fases, varias semanas trabajadas en paralelo con otros proyectos. Decenas de sesiones, cada commit validado a mano. Decisiones tomadas, cuestionadas, a veces revertidas. El design system afinado hasta que el amarillo fuera este amarillo. Las animaciones ajustadas hasta que hacen su efecto sin que nadie las note.
Lo que tomó tiempo es lo que la IA no puede hacer por mí: decidir. Saber cuándo “funciona” y “pasa” no es lo mismo. La exigencia no se delega.
08 Para ti
Diseñadores, reclutadores, clientes
Si eres diseñador/a
Es un amplificador. Te hace alguien que entrega más, más rápido, con la misma exigencia, a condición de saber exactamente lo que quieres.
Si eres reclutador/a
Este sitio es un entregable real: desplegado, multilingüe (FR/EN/ES), animado, accesible, performante. Construido a tiempo parcial en pocas semanas. Primer proyecto IA.
Lo que esto demuestra en práctica: capacidad para tomar decisiones de arquitectura, detectar lo que la IA no ve, y mantener una dirección artística coherente desde la primera intención hasta el resultado final. Esta misma página, redactada y estructurada como un caso de estudio, es parte del entregable.
Si eres cliente
La IA cambió mi velocidad de ejecución. Mi forma de pensar un proyecto sigue siendo la misma.
El brief, la estrategia, la identidad visual, las decisiones de estructura: todo eso sigue siendo humano. Lo que la IA reemplaza es el tiempo entre la intención y la línea de código. Saber qué línea escribir sigue siendo mi trabajo.
Si alguien te ofrece un sitio completo en 5 minutos con IA: pregúntale cómo eligió el color. Y por qué ese color conectará con tu audiencia.
El segundo será diferente. Pero éste siempre habrá sido el primero.