Mi portfolio anterior vivía en Wix. Cumplía — tenía mis proyectos online, contestaba “tengo un portfolio” cuando me lo preguntaban — pero cada vez que entraba a editarlo me topaba con la misma pared: el diseño que tenía en la cabeza no cabía en la herramienta. Cambiar un margen era una pelea. Personalizar una tipografía, otra. El portfolio terminaba pareciéndose más a Wix que a mí.
Así que decidí empezar de cero, pero con una restricción: no sé programar. Bueno, lo justo. Mi única ayuda iba a ser una IA — Claude. Esto es lo que pasó.
El punto de partida
Sabía tres cosas que necesitaba:
- Bilingüe (ES/EN) sin parches.
- Mantenible por mí sola, sin depender de un dev.
- Con identidad propia — no genérico, no template.
Y una cuarta, más personal: como diseñadora, mi trabajo siempre ha sido adaptarme. Cambian los clientes, cambian las herramientas, cambian las metodologías. La IA es solo el siguiente cambio. Prefería entrar yo, no esperar a ver cómo entraba el resto.
Cómo lo pensé
Antes de abrir Figma o pedirle nada a Claude, hice lo de siempre: pensar.
Recorrí portfolios que admiro y tomé notas de qué me hacía quedarme y qué me hacía cerrar la pestaña. Definí un tono — cálido, editorial, con espacio para respirar — porque mi trabajo va de tradición + producto digital, no de neón. Y antes del primer pixel, escribí qué proyectos quería contar y en qué orden. Sin esa base, el diseño hubiera sido decoración.
El sistema de diseño
Aquí dejé de verlo como “un sitio” y empecé a tratarlo como un producto. Estos son los cuatro bloques que definen toda la identidad visual.
Color
Paleta minimalista construida sobre un fondo crema con un único acento coral que actúa como firma. Negro y grises hacen el resto.
Cream
#F9F8F3
bg-[#F9F8F3]
Body, header, footer.
Negro
#000000
bg-black
Texto principal, selection.
Coral
#E0A4B0
bg-[#E0A4B0]
Hovers, links activos, acento único.
Gris 400
#9CA3AF
text-gray-400
Labels, captions muted.
Tipografía
Dos familias en contraste claro. Cormorant Garamond para lo narrativo, Inter para todo lo funcional.
Aa
Cormorant Garamond
--font-serif
Uso: H1, H2, citas, body editorial. Casi siempre italic.
Aa
Inter
--font-inter
Uso: body, nav, botones, labels, captions, project meta.
Componentes
Patrones recurrentes que dan personalidad: eyebrow uppercase con tracking ancho, hover coral, status pill animado.
Aire
Mucho espacio en blanco. La regla: si dudo de añadir algo, no lo añado.
Trabajar con Claude
Lo más interesante no fue el código. Fue tener un interlocutor.
Diseñar. No usé Claude para “generar” diseño — los outputs visuales de IA todavía no están al nivel. Lo usé como sparring: le pegaba referencias, le explicaba lo que tenía en la cabeza, y le pedía que me retara — “¿qué le falta?”, “¿qué es genérico?”, “¿qué quitarías?”. Ejemplos reales: la home tenía cuatro filtros de categoría; me preguntó cuántos proyectos había por cada uno, tres tenían uno solo, los quité. Quería un hero con animación; me hizo notar que la primera impresión debía ser el trabajo, no el efecto. Fuera animación.
Construir. Aquí la cosa cambia para alguien que no es desarrolladora. Yo describía la pantalla, Claude proponía estructura y código, lo veíamos juntos, yo iteraba en lenguaje de diseño (“este margen es mucho”, “esto debería ser uppercase”), Claude ajustaba. Cuando algo fallaba, debugeábamos. Pero las decisiones — qué color, qué tipografía, qué componente — las tomaba yo. Claude no era el autor; era el ejecutor.
Esa distinción fue la que me hizo sentir que el portfolio sigue siendo mío.
Lo que me llevo
Tengo un portfolio bilingüe, responsive, mantenible desde markdown, construido en una fracción del tiempo. Pero el resultado más importante no se ve en pantalla: ahora sé que puedo construir las herramientas que necesito.
Y dos aprendizajes que me llevo a futuros proyectos:
1. La IA amplifica criterio, no lo sustituye. Sin saber qué quería, las respuestas hubieran sido cualquier cosa. El criterio sigue siendo el activo del diseñador.
2. Diseñar y construir vuelven a estar juntos. Como en los noventa, cuando los diseñadores web también escribían su HTML. La IA está cerrando esa brecha.