Making-of · 12 min de lectura
Diseñado con Claude
Cómo se diseñó este portafolio en binomio con una IA — y dónde tomé las riendas
Este sitio es mi primer proyecto IA. No una demo generada en cadena: un ejercicio real de dirección artística, donde 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
Porque hoy, « usé una IA » ya no tiene valor. Todo el mundo lo hizo. Lo que distingue 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 no reemplazó a una diseñadora. Reemplazó la espera que solemos tener entre la intención y la ejecución.
No diseño interfaces con IA. Diseño con IA experiencias de marca completas — y solo le pido a la IA lo que sé juzgar.
02 El método
Todo cabe en tres archivos
Sin agentes complejos, sin RAG, sin pipeline oscura. Un humano que sabe lo que quiere, una IA que sabe escribirlo 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). Evita saturar su memoria con todo, todo el tiempo.
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
Siete 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. No para que decidiera — para estructurar lo que tenía en mente. 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, pero afirmado — sin 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.mjs con el i18n configurado para FR/EN/ES de una sola vez, sin que yo tuviera que buscar en la documentación. Es eso, la verdadera ganancia — no la creatividad, la ausencia de 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-study e i18n.
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 developer 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 stubs de case studies en published en vez de esperar el contenido real. Más vale mostrar la máquina funcionar sobre stubs legibles que tener una grilla vacía. El contenido final llegará por encima, sin tocar la estructura.
05 Fase 5
Las páginas proyectos
Índice /work en lista editorial (número Fraunces + título Anton XXL + meta), con una miniatura que sigue al cursor en hover (efecto Awwwards, GSAP quickTo, 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 About cuenta una trayectoria real — no una lista de competencias. 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, no como una postura. Página contacto sin formulario — solo un email gigante y una línea directa.
Un portafolio personal no necesita un form Hubspot.
04 Honestidad
Cuándo Claude Code es bueno. Cuándo no lo es.
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.
No bueno para
- 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 que se lo digan.
- Conocer mi oficio mejor que yo.
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 es 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 esta 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 3 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 diseñadora no es reemplazada. La fricción sí. El tiempo que gano es el que pasaba esperando, traduciendo, explicando. No el de 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. Sin él, cada sesión reiniciaría desde cero.
07 Obra real
No son 5 minutos
La IA borró la fricción técnica. No reemplazó el tiempo de pensar.
Un sitio generado en 5 minutos existe. Un sitio calibrado tarda más — y no es culpa de la IA.
Este portfolio: 9 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 dejaron de verse — en el sentido de 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
No es un reemplazante, es un amplificador. No te hace mejor diseñador/a. Te hace alguien que entrega más, más rápido, sin perder calidad — 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 (no solo ejecutar instrucciones), 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 case study — es parte del entregable.
Si eres cliente
La IA cambió mi velocidad de ejecución. No cambió mi forma de pensar un proyecto.
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. Lo que no reemplaza: saber qué línea escribir.
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.
Trabajemos juntos
El próximo proyecto podría ser el tuyo.
luciebelleudy@outlook.com