Documentar diseños en 2 minutos con Claude Code

Jorge Titos

IA

IA

Soy product designer. Hasta hace pocas semanas mi día a día vivía en Figma. Lo que no formaba parte de mi día a día es la terminal y el código, pero la cosa está cambiando.

Esta semana hice algo que no esperaba: automaticé toda la documentación de mis diseños. Y tardé menos en configurarlo que en prepararme el café.

El problema que todos conocemos

Terminas un diseño en Figma y empieza el trabajo invisible. Capturas de pantalla, descripción de componentes, criterios de aceptación, crear la página en Notion, formatearla, compartirla con el equipo de desarrollo. Una hora de trabajo que no diseña nada.

¿Cómo lo hice?

MCP (Model Context Protocol) es el protocolo que permite a Claude, la IA de Anthropic, conectarse directamente con tus herramientas. En la práctica, es el puente entre la inteligencia artificial y Figma, Notion, Linear o cualquier app de tu stack.

La configuración fue sorprendentemente sencilla. Instalé Claude Code con un comando en la terminal, y después conecté Figma y Notion con otros dos comandos más. En cada caso, se abrió el navegador para autorizar el acceso con mi cuenta, igual que cuando conectas cualquier app con Google. Sin tocar archivos de configuración. Sin entender la infraestructura detrás.


claude mcp add --transport http -s user figma https://mcp.figma.com/mcp
claude mcp add --transport http -s user notion https://mcp.notion.com/mcp
claude mcp add --transport http -s user figma https://mcp.figma.com/mcp
claude mcp add --transport http -s user notion https://mcp.notion.com/mcp
claude mcp add --transport http -s user figma https://mcp.figma.com/mcp
claude mcp add --transport http -s user notion https://mcp.notion.com/mcp


Con los MCPs activos, abrí Claude Code y pegué la URL de un diseño de Figma con este prompt:

"Analiza este diseño y crea un PRD en Notion con los componentes, los criterios de aceptación y las notas de UX."

Dos minutos después tenía la página creada en Notion. Con los componentes identificados, los estados documentados y la estructura lista para compartir con desarrollo. Claude había leído el diseño directamente desde Figma, sin que yo exportara nada.

Lo que esto significa para los diseñadores

No se trata de que la IA sustituya el criterio de diseño. Se trata de eliminar el trabajo administrativo que consume tiempo sin generar valor. La documentación, el handoff, las specs técnicas: todo eso puede orquestarse desde una conversación.

Los diseñadores que entiendan cómo conectar estas herramientas van a trabajar de una forma muy diferente al resto. Y la barrera de entrada, como he comprobado esta semana, es mucho más baja de lo que parece.

Si quieres explorar esto conmigo, sígueme. Voy a seguir compartiendo lo que vaya descubriendo.

Create a free website with Framer, the website builder loved by startups, designers and agencies.