T.

Mi stack de diseño con IA en 2025

Claude Code, Pencil.dev y MCP: las herramientas de IA que uso a diario para diseñar y construir productos digitales.

Stack de diseño con IA

El stack que nadie usa (todavía)

La mayoría de diseñadores usa IA para generar imágenes con Midjourney o escribir copy con ChatGPT. Está bien, pero es como usar un Ferrari para ir al supermercado. La IA puede hacer mucho más en un workflow de diseño.

Este es mi stack actual. No es teórico — es lo que uso todos los días.

Claude Code

Mi herramienta principal. Claude Code es un asistente de desarrollo en terminal que entiende el contexto completo de un proyecto. No es un autocomplete glorificado — es un compañero de trabajo que:

  • Lee y entiende toda la codebase antes de sugerir cambios
  • Escribe código real que compila y funciona
  • Refactoriza con criterio, no solo moviendo líneas
  • Depura errores analizando el contexto, no solo el stack trace

Lo uso para todo: desde crear componentes nuevos hasta refactorizar sistemas enteros.

Pencil.dev

Un editor de diseño visual que se conecta con el código vía MCP (Model Context Protocol). La magia está en que puedo:

  • Diseñar un layout visualmente
  • Que ese diseño se sincronice con mi código
  • Iterar visualmente sin perder la conexión con la implementación

Es el puente entre Figma y VS Code que siempre quise.

MCP y Skills

MCP es el protocolo que conecta Claude con herramientas externas. Yo lo uso para crear automatizaciones (Skills) que eliminan tareas repetitivas:

  • Generar componentes desde un template
  • Analizar la accesibilidad de una página
  • Crear variantes de un diseño automáticamente

Mi flujo de trabajo

  1. Investigación — Le pido a Claude que analice referentes y sintetice patrones
  2. Diseño — Creo el layout en Pencil.dev con la dirección que salió de la investigación
  3. Implementación — Claude Code traduce el diseño a código funcional
  4. Iteración — Ajusto en código y en diseño en paralelo, sin handoff
  5. Documentación — Claude genera la documentación mientras trabajo

El resultado

El ciclo completo de “idea → producto funcional” se ha reducido un 80%. No es una exageración — es lo que mido en mis proyectos reales.

Lo más importante: la calidad no baja. El código es limpio, tipado y mantenible. El diseño es coherente y responsive. La IA no reemplaza el criterio — amplifica la capacidad de ejecución.

El futuro

Estamos en el minuto 1. Las herramientas van a mejorar exponencialmente. Los diseñadores que aprendan a integrar IA en su proceso ahora van a tener una ventaja brutal en 2-3 años.

No es ciencia ficción. Es mi día a día.