El diseño de Vibe es el equivalente en diseño de la codificación de Vibe: los scripts bash, las herramientas de inteligencia artificial y los comandos CLI reemplazan en última instancia a las herramientas GUI tradicionales.
Los diseñadores piden prestado a los desarrolladores todo el tiempo. Control de versiones, sistemas de componentes, diseño basado en tokens: estas ideas abarcan todo el espectro de la ingeniería y remodelan la forma en que se realiza el trabajo visual. El diseño de Vibe sigue la misma lógica. En lugar de abrir Figma y usar el panel de arrastrar y soltar, los diseñadores van directamente a la terminal. Solicitan modelos de IA directamente desde la CLI, canalizan la salida a archivos e iteran sin tocar el mouse.
El cambio es real y las herramientas ya están aquí. Claude CorderLa herramienta CLI de Anthropic permite a los diseñadores generar componentes de interfaz de usuario, diseños y páginas web completos a través de indicaciones en lenguaje natural en la terminal. El resultado es un código listo para producción, no se requiere GUI. El diseñador ingresa el mensaje, lee la diferencia y la publica. Este es el diseño de atmósfera más directo.
Cómo funciona Vibe Designing con Claude Code y Figma MCP
El flujo de trabajo del diseño de la atmósfera no se detiene en la terminal. Figma anunció la integración directa entre Claude Code y Figma Canvas en febrero de 2026. Se llama “Code to Canvas” y permite a los diseñadores capturar interfaces de usuario en vivo creadas con Claude Code (ejecutándose en producción, ensayo o localhost) y convertirlas en marcos Figma editables. No es una captura de pantalla plana. Un artefacto de diseño real con capas que el equipo puede anotar e iterar.
Los tubos discurren en ambas direcciones a través de Servidor Figma MCP – Una conexión de protocolo abierto entre Claude Code y el entorno de diseño Figma. Los agentes de IA que leen a través del servidor MCP no solo ven capturas de pantalla. Lee componentes, variables, estilos y estructuras de diseño. Claude comprende semánticamente el sistema de diseño y puede producir código que coincida con él. El servidor MCP se ejecuta localmente en el puerto 3845 a través de la aplicación de escritorio Figma.
diseño de arte en papel Impulsar aún más el enfoque MCP. Su lienzo está construido de forma nativa sobre estándares web (HTML y CSS), lo que significa que los agentes de inteligencia artificial que trabajan a través del servidor MCP de Paper pueden leer y escribir archivos de diseño directamente. Herramientas similares get_screenshot, get_jsx, write_htmly update_styles Proporciona acceso directo de lectura y escritura de Claude Code o Cursor al lienzo de diseño. El resultado es un flujo de trabajo en el que los agentes crean código y simultáneamente ven los cambios reflejados en tiempo real en la herramienta de diseño.
El propio flujo de trabajo de edición de Abduzeedo ahora funciona según principios de diseño atmosférico. La redacción de este artículo, la búsqueda y carga de imágenes y la actualización del CMS se realizaron mediante la automatización del navegador y la inteligencia artificial: se requieren pocos o ningún clic manual. Esta es la vibra del pensamiento de diseño aplicado a la publicación: simplemente ejecútelo, repita y luego revise cuando la forma de la idea esté clara. Nuestro objetivo es intentar automatizar la logística para que podamos centrarnos en las cosas principales que queremos hacer. ¿Perfecto? Ni mucho menos, pero la única manera de mejorar es practicando, y podemos aprender mucho de ello.
