Portfolio & Design System

Portfolio by Jeka: Diseñar (y construir) con IA

Cómo diseñé y desarrollé este portfolio íntegramente colaborando con Claude. Un experimento sobre el rol del diseñador en la era de la IA.

Rol

Product Designer & AI-Augmented Builder

Herramientas

Claude (Anthropic), Astro, Tailwind CSS, Figma, Markdown

Claude

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.

Serif · Editorial

Aa

Cormorant Garamond

--font-serif

Uso: H1, H2, citas, body editorial. Casi siempre italic.

Sans · UI

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.

Eyebrow + título editorial
Project title goes here
View project → Hover en coral
Disponible para proyectos

Aire

Mucho espacio en blanco. La regla: si dudo de añadir algo, no lo añado.

12 unidades de padding
aire
12 unidades de padding

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.