Dos conectores MCP, un prompt sencillo y un sitio de Webflow vacío. Esto es lo que pasó cuando Claude hizo el resto.
¿Cómo llevas un diseño existente de Figma a Webflow? La respuesta honesta solía ser: reconstruyéndolo. Paso a paso. Recreando cada color y estilo de texto, uniendo los componentes y volviendo a subir cada recurso. Es un trabajo tedioso y, en 2026, este tipo de tareas debería hacerlo la IA de alguna manera.
Al pensar en trasladar un diseño de Figma a Webflow, inicialmente esperaba una herramienta diseñada específicamente con habilidades y scripts personalizados. Pero resulta que si combinas un modelo potente con herramientas MCP bien pensadas, no necesitas nada a medida. Dos conexiones MCP y un solo prompt pueden trasladar perfectamente un diseño completo de Figma a un sitio de Webflow vacío, con variables, clases, componentes y recursos ya en su lugar.
Grabé todo el proceso, desde el prompt hasta el lienzo terminado. Échale un vistazo si prefieres verlo en lugar de leerlo.
Un prompt sencillo para iniciar la importación
Soy usuario de Claude, así que toda la importación se ejecutó en Claude Desktop, impulsada por el modelo Fable de Anthropic, con dos conectores configurados: el plugin oficial de Figma y el conector oficial de Webflow. Ambos se añaden en solo un minuto.
Con ambas conexiones establecidas, tomé una plantilla de portafolio gratuita de la comunidad de Figma y le pedí a Claude que la trasladara a Webflow con un solo prompt:
I've got a Figma design here: [Figma URL]. Can you import it into my Webflow site? Please set up CSS variables and components as you see fit. Don't generalize the content; take all the existing text as is, I'll fix it later. Also, don't publish! I want to have the honor.Por favor, aprecia lo sencillo que es este prompt. No asigné capas a elementos, ni definí qué colores debían convertirse en tokens, ni enumeré los componentes que quería. "Como consideres oportuno" cubre la mayor parte. La única regla estricta es mantener el texto intacto y no publicar el sitio.
Nuestra biblioteca de prompts tiene una variedad de prompts para ayudarte con tu agente.
Poco más de diez minutos después, el sitio de Webflow ya no estaba vacío. Tenía nuevos tokens de diseño que cubrían colores, tamaños y tipografía, y alrededor de treinta clases que apuntaban a esos tokens en lugar de tener valores codificados. También se configuraron varios componentes de Webflow, y cada imagen e icono del archivo de Figma se subió como un recurso adecuado de Webflow. No construí nada a mano y, comparado lado a lado, el lienzo se parece impresionantemente al diseño original. ¡No hay forma de que hubiera llegado tan lejos por mi cuenta en ese tiempo!
Y esto es sinceramente increíble, porque no había ninguna herramienta de "importar desde Figma" en toda esta cadena. Así que me dio curiosidad. Déjame compartir por qué y cómo este flujo pudo realizar la importación tan rápido.
Las herramientas generales permiten tareas especializadas
En el núcleo de este flujo de importación de Figma a Webflow se encuentra la herramienta Figma MCP get_design_context. Tu agente puede señalar un diseño o nodo en un archivo de Figma, y el servidor MCP responderá con una implementación real en React del marco seleccionado, una captura de pantalla como referencia y enlaces de descarga para cada recurso incrustado. Es mucha información en una sola respuesta: diseño, espaciado, colores y el contenido real. Todo está ahí, y eso es lo que lo hace destacar. Dudo que los ingenieros que implementaron esto estuvieran pensando en un importador de Webflow, pero la respuesta es tan detallada que cualquier flujo de "Figma a [inserta tu destino]" probablemente funcionará con un modelo potente. ¡Bien hecho, equipo de Figma!
Con la implementación en React en mano, Claude cambió a las herramientas de Webflow MCP e hizo lo que cualquier desarrollador cuidadoso haría primero: tokens de diseño. Empieza por los cimientos. La herramienta data_variable_tool configuró una colección de variables dedicada y la llenó con los valores de color, tamaño y tipografía extraídos del diseño. Estas son las mismas variables que tú mismo configurarías antes de aplicar cualquier estilo.
Las clases vinieron después a través de data_style_tool. Un contenedor de página, una clase bentolio-card con clases combinadas como is-hero e is-work, y la propia cuadrícula bento. Siempre que tiene sentido, las propiedades hacen referencia a las variables creadas un momento antes en lugar de valores directos.
Luego, Claude configuró la estructura. La herramienta data_element_builder acepta árboles de elementos anidados completos, así que Claude insertó la navegación y el contenedor de la cuadrícula, seguidos de las seis tarjetas bento con encabezados, textos, enlaces e imágenes, con las clases ya adjuntas.
Los recursos tampoco necesitaron exportación manual. ¿Recuerdas los enlaces de descarga de la primera llamada a la herramienta de Figma? La herramienta data_assets_tool extrajo el retrato, la imagen del proyecto y todos los pequeños iconos directamente de Figma a la biblioteca de recursos de Webflow.
Configurar los componentes fue mi paso favorito. Claude decidió por sí mismo qué partes de la página se repetían y convirtió la barra de navegación y el elemento del proyecto en componentes reutilizables con data_component_tool. Incluso le dio propiedades al elemento del proyecto, una propiedad de texto para el título y un booleano para alternar la imagen de vista previa. Ese es el tipo de criterio que esperaba tener que aplicar yo mismo.
Y al final, Claude usó la herramienta element_snapshot_tool para un control de calidad ligero. Tomó una captura de pantalla de la página terminada y la comparó con el diseño de Figma, revisando su propio trabajo antes de informar. Encontró algunos errores importantes y los corrigió automáticamente. Por supuesto, este control de calidad de diseño no fue perfecto, pero creo que es injusto esperar un flujo de trabajo perfecto a partir de un solo prompt.
Claude decidió todo el flujo de trabajo por su cuenta: primero los tokens, luego los estilos vinculados a ellos, después la estructura, los componentes y, finalmente, una revisión. Ese orden surgió de las propias herramientas, ya que el servidor MCP expone Webflow tal y como trabajas en él realmente.
Toda la cadena se construye a partir de los elementos básicos de Webflow: lectura y escritura de variables, estilos, elementos, componentes y recursos. La integración con Figma surgió porque un agente tenía acceso a todo ello y un objetivo claro. Eso es lo que me parece fascinante de MCP: los flujos de trabajo no necesitan existir como funciones predefinidas para poder usarlos. Tú describes el resultado y tu agente se encarga del resto.
Prueba Webflow MCP 2.0
La parte de Webflow funciona a través del servidor MCP de Webflow, y la reciente versión 2.0 añadió mucho más de lo que has visto aquí. No voy a repasar todo, pero si aún no lo has probado, definitivamente deberías hacerlo.
Así que conecta los conectores de Figma y Webflow a tu agente, elige un diseño que te guste y lánzale una instrucción. Te sorprenderá todo lo que se puede hacer hoy en día de forma automática.
