El problema
La mayoría de diseñadores usa IA para generar imágenes o texto suelto. Casi nadie ha integrado IA como parte fundamental del proceso de diseño de producto — desde la investigación hasta el prototipo funcional.
La solución
Documentar y sistematizar mi workflow completo de diseño con IA, demostrando que es posible diseñar y construir productos digitales de calidad profesional con un stack centrado en inteligencia artificial.
Mi stack
- Claude Code — Asistente de desarrollo que escribe, refactoriza y depura código en tiempo real
- Pencil.dev — Diseño visual conectado con código vía MCP (Model Context Protocol)
- MCP Skills — Automatizaciones personalizadas para tareas repetitivas de diseño y desarrollo
Proceso documentado
- Research con IA — Uso Claude para analizar competidores, sintetizar insights y generar hipótesis de diseño
- Diseño en Pencil.dev — Creo layouts y componentes visuales que se sincronizan con el código
- Prototipado con Claude Code — Paso del diseño al código funcional en minutos, no días
- Iteración rápida — El ciclo diseño → código → feedback se reduce de días a horas
- Documentación automática — Claude genera documentación del proceso mientras trabajo
Resultados reales
- Este portfolio fue diseñado y construido íntegramente con este workflow
- Tiempo de desarrollo: 80% más rápido que mi proceso anterior
- Calidad de código: Código limpio, tipado y mantenible desde el primer commit
- Iteraciones: Puedo probar 5 variantes de diseño en el tiempo que antes tardaba en hacer 1
Por qué importa
Estamos en un punto de inflexión. Los diseñadores que integren IA en su proceso no serán reemplazados — serán exponencialmente más productivos. Este case study es la prueba.