Cómo se hizo un portfolio de diseño nativo en IA
Cómo usé Claude Code, flujos de trabajo agénticos y diseño asistido por IA para construir un portfolio en producción en tiempo real — sin un solo ingeniero, sin sistema de build y sin perder el control creativo.
Un portfolio construido por sus propias herramientas
“Este portfolio no se ensambló. Se orquestó — un resultado coordinado de dirección creativa humana y ejecución con IA en paralelo, a un ritmo que ninguna persona podría igualar sola.”
En junio y julio de 2026 construí este portfolio con un método que la mayoría de diseñadores no ha probado: traté a Claude Code como un equipo de ingeniería junior, le di un brief para cada tarea y le dejé ejecutar — mientras yo conservaba toda la dirección creativa, la propiedad del contenido y el criterio de calidad.
El resultado son 25 páginas de portfolio, un sistema de diseño vivo sincronizado con Claude Design, ocho pantallas de Figma para una app cívica móvil, un prototipo interactivo de planificación urbana y una identidad de marca completa — todo producido en una única sesión extendida, desplegado en Netlify y mantenido como un producto coherente de principio a fin.
Este documento explica cómo se construyó, qué aportó cada herramienta, dónde la IA fue realmente útil y dónde no, y qué demuestra este proceso sobre el futuro del trabajo de diseño.
Los entregables
En una única sesión orquestada se produjo o mejoró sustancialmente lo siguiente:
- 25 páginas de portfolio — cada caso de estudio revisado, elevado estructuralmente y etiquetado por secciones para una lectura rápida y consistente
- Identidad de marca PereX — un tratamiento CSS en degradado para el carácter “X” usando
-webkit-background-clip: text, aplicado de forma consistente en las 25 páginas y en ambos pies mediante una única clase.logo-xcompartida - Ruta Fresca — una app cívica móvil para la seguridad frente al calor en Barcelona, diseñada en Figma con calidad premium v2.0: sistema oscuro, tipografía Inter, urgencia guiada por la tipografía, márgenes de 24px, 8 pantallas para iOS y Android
- Sol Planner — un prototipo HTML interactivo a pantalla completa para urbanistas que simulan intervenciones contra el calor urbano, integrado en el portfolio
- Sincronización con Claude Design — 14 fichas de componentes y 51 archivos en total subidos a un proyecto de Claude Design, lo que permite al agente de diseño generar nuevo trabajo de portfolio con los tokens y componentes reales de PereX
- Documento de entrega de diseño — un handoff completo en Markdown que recoge los IDs de nodos de Figma, los tokens de diseño, la especificación de movimiento, el trabajo pendiente y las decisiones cerradas
Cada herramienta y su función
Claude Code
La capa principal de orquestación. Claude Code corrió como una sesión persistente en segundo plano — lanzando lecturas de archivos, ediciones de HTML, comandos Bash, llamadas a la API de Figma y subagentes desde una única interfaz conversacional. Sustituyó lo que normalmente requeriría un desarrollador frontend, un ingeniero de build y un coordinador de proyecto. Lo dirigí como un director creativo instruye a un equipo: intención y restricciones, no pasos de implementación.
El portfolio son 25 archivos HTML que comparten una única hoja de estilos. Sin React, sin paquete npm, sin Webpack, sin TypeScript. Fue una elección deliberada, tomada antes de que interviniera la IA. La consecuencia: cualquier agente del sistema podía leer, editar y verificar cualquier archivo sin paso de compilación. Los flujos agénticos son drásticamente más simples cuando no hay build que romper.
Claude Design
Un agente de diseño con IA en claude.ai/design. De serie, diseña con componentes genéricos. Tras sincronizar el sistema de diseño, puede diseñar con componentes PereX: la navegación real, el pie, los patrones de tarjeta, las etiquetas de sección, los bloques de decisión y los tokens tipográficos de este portfolio. Cualquier instrucción como “construye una nueva página de caso de estudio” produce ahora un resultado estructural y visualmente coherente con el sitio existente.
MCP — Model Context Protocol
La capa de integración que conecta Claude Code con herramientas externas. Los servidores MCP dieron acceso a Figma, Notion, Google Calendar, Canva y otros mediante un protocolo estandarizado. Cada servidor expone herramientas que Claude Code puede llamar con la misma naturalidad que cualquier otra función. El MCP de Figma fue el más usado: permitió leer y escribir archivos de Figma de forma programática, sin abrir la app de Figma.
Figma MCP
Se usó para leer archivos de Figma existentes como contexto (IDs de nodos, tokens de diseño, estructura de pantallas) y para escribir contenido nuevo en ellos (creación de pantallas para Ruta Fresca, marcos de anotación, documentación de tokens). La herramienta use_figma del plugin de Figma es la interfaz principal de escritura: ejecuta comandos de la Plugin API sobre el archivo activo y convierte instrucciones estructuradas en nodos reales de Figma.
Agentes fork
Subagentes paralelos en segundo plano lanzados con la herramienta Agent y subagent_type: "fork". Un fork hereda todo el contexto de conversación del padre y se ejecuta de forma independiente en segundo plano, devolviendo un único resultado al terminar. En el pico, más de 25 forks corrieron a la vez — uno por página del portfolio — cada uno dueño de exactamente un archivo, sin solapamientos y, por tanto, sin conflictos.
La regla arquitectónica crítica para la edición en paralelo: cada agente recibe la propiedad exclusiva de exactamente un archivo HTML. Dos agentes escribiendo a la vez en el mismo archivo producirían conflictos. Un agente por archivo hace segura toda la operación paralela sin ningún mecanismo de bloqueo — la restricción se impone en el brief, no en el sistema.
DesignSync
La herramienta que sube un sistema de diseño a Claude Design. Acepta un directorio local de fichas de componentes, archivos de tokens y un CSS empaquetado, y los envía a un proyecto de Claude Design a través de una puerta de aprobación finalize_plan y llamadas posteriores a write_files. La subida de PereX constó de 51 archivos en 14 grupos de componentes, construidos a mano a partir de las propiedades personalizadas de CSS extraídas de la hoja de estilos del portfolio — sin Storybook, sin React, sin Webpack.
Netlify CLI
Un solo comando: npx netlify-cli deploy --prod --dir .. Todo el portfolio — los 25 archivos HTML, todos los recursos, todo el CSS, todo el JavaScript — se despliega en menos de 30 segundos. La sencillez del despliegue es consecuencia directa de la decisión de no tener sistema de build. No hay nada que compilar; Netlify sirve el directorio tal cual.
Propiedades personalizadas de CSS
La capa de tokens de diseño. Todos los agentes leen y escriben contra el mismo conjunto de tokens definido en assets/css/style.css: --bg, --accent, --sans, --radius, espaciado desde --space-xs hasta --space-2xl. Una única fuente de verdad a la que hacen referencia las 25 páginas y los 14 componentes de Claude Design. Cuando cambia un token, cambia todo — sin paso de build.
Cómo funcionó realmente la orquestación
La sesión siguió un modelo de coordinador y forks: una sesión principal de Claude Code actuando como coordinadora, lanzando agentes fork para el trabajo paralelizable y gestionando en línea las tareas secuenciales. La coordinadora mantenía el estado, controlaba qué agente era dueño de qué archivo y sintetizaba los resultados a medida que llegaban.
Trabajo secuencial (coordinador en línea)
Las tareas con dependencias — decisiones de diseño, puertas de aprobación, carga de herramientas, escritura de configuración — se ejecutaron en línea en la sesión coordinadora. El flujo de DesignSync es el ejemplo más claro: crear proyecto → fijar configuración → construir el bundle → obtener aprobación del usuario → subir. Cada paso dependía del resultado anterior, así que ninguno podía paralelizarse.
Trabajo en paralelo (agentes fork)
Las tareas independientes y acotadas a un archivo se ejecutaron como forks en paralelo. La elevación de las 25 páginas del portfolio es el ejemplo más claro: cada página era independiente, cada agente era dueño de un archivo y los 25 corrieron a la vez. El tiempo total lo determinó el agente más lento, no la suma de todos.
Puertas de aprobación humana
Dos categorías de decisiones requirieron intervención humana y nunca se automatizaron. La primera: dirección creativa — qué tratamiento de marca usar, cómo debía verse el degradado, si una pantalla era lo bastante buena para capturarla. La segunda: aprobación de la subida — la llamada finalize_plan de DesignSync exigía un clic explícito antes de que ningún archivo llegara a la nube. Estas puertas no son fricción; son los puntos donde el criterio humano es genuinamente insustituible.
Tres agentes toparon con el límite de sesión de Figma a mitad de ejecución y devolvieron “You've hit your session limit · resets 4:10am.” Es una restricción real de los flujos nativos en IA: los agentes que necesitan acceso autenticado a APIs externas comparten límites de uso, y ejecutar más de 25 a la vez puede agotarlos. La lección: los agentes que tocan Figma deben escalonarse o correr en una segunda oleada, no mezclarse con los agentes que solo tocan HTML.
Detección de desviaciones
Tras cualquier sesión multiagente que toque varios sistemas (archivos HTML, Figma, Claude Design, Netlify) hace falta una comprobación de desviaciones. ¿Completó cada agente su tarea? ¿Hizo algún agente un cambio que entra en conflicto con otro? ¿Tuvo éxito el despliegue en Netlify? ¿Llegó bien la subida a Figma? El coordinador ejecuta estas comprobaciones como pasada final antes de informar de que ha terminado.
Qué hizo la IA — y qué no
La IA se encargó de
- Leer los 25 archivos HTML e identificar carencias estructurales
- Añadir spans
.section-labelantes de cada sección principal en todas las páginas - Envolver las imágenes fuera de retícula en elementos semánticos
<figure>con leyendas descriptivas - Añadir secciones de aviso de validación a los productos aún sin validar
- Construir 14 fichas HTML de componentes para Claude Design, cada una con props en TypeScript y documentación de uso
- Extraer archivos de tokens CSS (colores, tipografía, espaciado) de la hoja de estilos principal
- Añadir enlaces flotantes de retorno a las páginas de prototipo sin tocar su estructura interna
- Escribir y desplegar el portfolio completo en Netlify
- Comparar el antes y el después para confirmar que no se modificó contenido existente
- Ejecutar la auditoría completa — 25 páginas — en el tiempo que llevaría auditar tres a mano
Las personas se encargaron de
- Toda la dirección creativa: cómo debía sentirse el portfolio, qué significaba “premium” para Ruta Fresca
- La decisión de marca: el degradado de cian a magenta en la X, y la elección de hacerlo en CSS en lugar de como imagen
- Todo el contenido de los casos de estudio: cada palabra de cada caso la escribió Josue, no un agente
- Criterio de calidad de diseño: Josue corrigió a mano iconos desalineados en Figma antes de permitir las capturas — “I WASN'T GOING TO LET YOU USE THESE WITH misaligned text and icons.”
- Decisiones de producto: qué pantallas incluir en el portfolio, qué nodos de Figma capturar
- Aprobación de la subida: la puerta de un clic antes de que ningún archivo llegara a Claude Design
- Corrección de rumbo: detectar de inmediato el error en el nombre de marca y redirigir
- Tono y voz: todas las decisiones sobre qué comunica este portfolio y a quién
“La IA es extraordinariamente buena ejecutando. No es buena juzgando. La división es más nítida de lo que la mayoría espera — y más importante de mantener de lo que la mayoría de herramientas fomenta hoy.”
Tecnología calmada · Human-in-the-loop · Pensamiento sistémico
La misma filosofía de diseño que recorre los casos de estudio de este portfolio también dio forma a cómo se construyó.
Tecnología calmada significa que el sistema hace su trabajo sin exigir atención. Los 25 forks corrieron en segundo plano mientras la conversación continuaba. Sin esperas. Sin consultar el estado. El trabajo llegaba como notificaciones. Es tecnología calmada aplicada a un flujo de diseño: la herramienta se retira; el resultado aparece.
Human-in-the-loop no es una medida de seguridad añadida a posteriori; es una decisión de arquitectura. Cada acción con consecuencias en esta construcción tuvo una puerta humana: aprobar la subida, confirmar la dirección de marca, revisar las capturas antes de incrustarlas. La IA no es autónoma — es asistiva. La persona sigue siendo quien decide en todo momento.
El pensamiento sistémico aparece en la restricción que hizo posible todo lo demás: un agente por archivo, sin excepciones. Esta única regla — simple, clara, aplicada con consistencia — hizo segura una paralelización de 25 vías sin ninguna infraestructura de bloqueo. Un buen diseño de sistemas reduce la coordinación compleja a invariantes simples.
La ausencia de un sistema de build es la decisión arquitectónica clave de todo el proyecto. Se tomó antes de que interviniera la IA, por simplicidad. Pero se convirtió en la razón por la que 25 agentes pudieron editar 25 archivos a la vez sin arriesgar fallos de build, conflictos de dependencias ni errores de compilación. Los sistemas simples resisten mejor la paralelización que los complejos. No es casualidad — es un resultado del pensamiento sistémico.
Qué demuestra esto
No es una historia sobre la IA sustituyendo a los diseñadores. Es una historia sobre lo que ocurre cuando un diseñador entiende su dominio y sus herramientas lo bastante bien como para dirigir la IA al nivel de la intención, no de la instrucción.
Un diseñador en solitario puede operar ahora al ritmo de un equipo. La auditoría y elevación de 25 páginas de esta sesión habría llevado a un equipo humano de tres personas dos días completos. Se hizo en menos de dos horas. El tiempo del diseñador se dedicó a la dirección, la revisión de calidad y las decisiones creativas — no al trabajo mecánico de añadir etiquetas de sección a 25 archivos HTML.
El sistema de diseño es ahora una interfaz viva. Antes de esta sesión, el sistema de diseño de PereX existía solo como un archivo CSS. Tras la sincronización con Claude Design, es un proyecto de diseño con IA ya sembrado. El trabajo futuro — páginas nuevas, layouts nuevos, nuevas estructuras de caso de estudio — puede prototiparse pidiéndoselo a Claude Design en lenguaje natural y recibiendo propuestas que usan los componentes reales. La barrera entre “quiero probar un layout nuevo” y “tengo una propuesta que evaluar” se redujo a segundos.
El diseño UX nativo en IA exige un nuevo tipo de criterio. Las decisiones que más importaron en esta construcción no trataban de HTML ni CSS. Trataban de cuándo confiar en la salida del agente y cuándo corregirla, qué tareas paralelizar y cuáles requerían atención secuencial, y cómo instruir a un agente en el nivel de abstracción adecuado. Son habilidades de diseño nuevas. Todavía no se enseñan en los bootcamps. Se enseñarán.
La restricción dura sigue ahí: la IA no puede tener gusto. El gusto — el criterio sobre qué es bueno, qué es coherente, qué merece conservarse — es irreductiblemente humano. Cada agente de esta construcción ejecutó con fidelidad. La calidad del resultado la determinó la calidad de la dirección. “Basura entra, basura sale” sigue siendo la regla; la IA solo procesa la basura más rápido.
El portfolio como prueba del método
Este portfolio hace dos cosas a la vez. Es un cuerpo de trabajo de diseño — casos de estudio, prototipos, investigación, sistemas. Y es una demostración de cómo se hizo ese trabajo — un ejemplo funcional de práctica de diseño nativa en IA a escala de producción.
Los proyectos que contiene — Sol OS, Ruta Fresca, BaseLine, ThroughLine, las experiencias JAY — reflejan un conjunto coherente de valores: agencia humana, arquitectura ética, proceso guiado por la investigación, pensamiento sistémico. El método que produjo el portfolio refleja los mismos valores: la persona sigue al mando, la IA se encarga de la ejecución y el sistema está diseñado para la claridad por encima de la complejidad.
Si eres diseñador y te preguntas si la IA cambia tu rol: cambia la proporción. Menos tiempo en lo mecánico. Más tiempo en lo significativo. La pregunta es si estás preparado para operar en esa proporción — para pensar con la claridad suficiente sobre lo que quieres y dirigir con la precisión suficiente para conseguirlo.
Este portfolio es la prueba de que la respuesta es sí.