Tenía el típico portfolio oscuro con gradientes cian-a-morado, tarjetas de cristal, fuentes Inter, stats gigantes. El mismo que tienen otros diez mil desarrolladores en LinkedIn. Lo odiaba un poco cada vez que lo abría.
Una sesión con Claude Opus 4.7 (1M de contexto) en Claude Code, y salió esto: un sitio que se lee como un catálogo de museo.
Las herramientas
Usé tres skills que cambiaron el juego:
- ui-ux-pro-max — una base de datos con 161 paletas, 57 font pairings, 99 reglas UX, y decisiones tipo "qué pattern encaja con qué producto". Validó la dirección editorial antes de escribir una línea de código.
- Impeccable — una skill con 18 comandos (
/audit,/critique,/polish,/distill) y, más importante, una lista explícita de anti-patrones: "no al gradient text, no al glassmorphism, no al dark-mode-con-glow-por-defecto". Los que veo en todos lados. - ReactBits — no monté su MCP. El propio sitio de ReactBits expone un
llms.txtcon catálogo entero de componentes, así que Claude descarga solo lo que necesite con unnpx shadcn@latest add. Menos fricción.
No son skills mágicas. Son memoria externa bien estructurada. Claude decide; las skills acotan el espacio de decisión.
La dirección
Paleta: crema sobre tinta con un acento rojo brasa (#F5F1E8 / #141414 / #C73E1D). Sin gradientes. Sin dark mode. Sin glow.
Tipografía: Fraunces (serif variable, display + italic) para títulos y body; JetBrains Mono solo para metadata y fechas; Inter borrada.
Piezas interactivas de ReactBits, con moderación:
- VariableProximity en mi nombre del hero — el peso de cada letra responde al cursor
- SplitText en los títulos de sección — entrada por carácter
- Magnet en los CTAs — se imantan al puntero con spring physics
- ScrollVelocity en el footer — un marquee horizontal que acelera con el scroll
- PortraitCard custom — retrato en B&W que inclina en 3D y vira a color al hover, con un marco rojo en parallax
Hairlines separan secciones en vez de cards. Los números de experiencia van al revés: N°01 es el primer trabajo de mi carrera, no el actual. Convención editorial, no de CV.
El peaje de rendimiento
Un hero con serif gigante, retrato grande y animación de peso variable no es un regalo para el LCP en mobile. Primer Lighthouse después del rediseño: 77 en mobile. Me costó trabajo bajarlo.
Lo que sí movió la aguja:
- Borré Inter entera. La paleta editorial casi no la renderizaba, pero estaba cargando cinco pesos. Body pasó a Fraunces como default. Ahorré ~240KB de transfer.
@next/third-parties/googlepara GA en lugar del pair manual de<Script strategy="lazyOnload">. Defer real, sin duplicación.preconnecta googletagmanager.com en el<head>. Entre 50 y 200ms de RTT menos en el primer request.browserslistmoderno (>0.5% and supports es6-module). Next deja de inyectar polyfills de navegadores que ya no me interesan.- Eliminé el axis
SOFTde Fraunces. No lo usaba en ningún lado visible. Menos bytes en el variable font. experimental.optimizeCss: trueennext.config.js. Critters inline del CSS crítico.
Lo que dejé en la mesa:
- El forced-reflow de 35ms viene de GSAP ScrollTrigger dentro de VariableProximity y SplitText. Quitarlo = matar la tipografía reactiva del hero. Ese es el wow factor. No negociable.
- El 42% de gtag.js sin usar es intrínseco a la librería de Google.
@next/third-partieshace lo que puede. - Para servir el retrato en resoluciones distintas por viewport necesitaría
next/imageoptimization runtime, incompatible con el hosting estático a OVH que uso.
Resultado post-deploy:
| | Desktop | Mobile |
|---|---|---|
| / | 100 / 100 / 100 / 100 | 93 / 100 / 100 / 100 |
| /blog/ | 100 / 100 / 100 / 100 | 97 / 100 / 100 / 100 |
Performance / Accessibility / Best Practices / SEO.
Mobile 100 no llega sin sacrificar algo del diseño. 93 me vale.
Lo que viene: Claude Design
En esta vuelta no lo toqué. Claude Design es la propuesta de Anthropic orientada a diseño asistido — lo que entendí es que va más allá de generar código y entra en iteración visual, previsualización en vivo y conversación directa sobre el diseño, no solo sobre la implementación.
Lo que me interesa probar: no usar skills como biblioteca de reglas (que es lo que hice esta vez), sino diseñar iterando visualmente con Claude como interlocutor. La diferencia me parece grande: aquí negocié la dirección contra una base de datos; ahí quiero negociarla contra el propio render.
Es la próxima sesión.
Lo que aprendí
Que las skills no hacen el trabajo, pero acotan mal el espacio de decisión. Con /audit + /critique + /security-review en loop, cada deploy llevó un reporte consolidado de qué romper y en qué orden arreglarlo. Eso es lo que cambia: pasa de "Claude, rediseña mi portfolio" a "Claude, opera estas reglas sobre estos componentes".
La tipografía carga más de lo que parece. Fraunces hace el 80% del trabajo de identidad visual en este sitio. El resto son hairlines y un punto rojo después de cada nombre propio. Restricción disciplinada, no adición.
El portfolio genérico no es un problema de talento, es de herramientas. Con las correctas, el esfuerzo de salir del cluster converge a una sesión de trabajo.
