De Figma a sitio web en vivo · La guía completa para conectar Figma con Claude Code.

Imagínese el método de trabajo antiguo: un diseñador crea pantallas en Figma, se las envía a un desarrollador, el desarrollador escribe código, regresan con comentarios, el desarrollador corrige, más comentarios, un píxel aquí, un color allá. Semanas de ping-pong y decenas de miles de shekels en un solo sitio web. El mundo se mueve. En 2026, Claude sabe leer directamente desde un archivo de Figma. El diseño pasa de ser una imagen estática a una instrucción que la IA ejecuta. Usted sigue siendo diseñador. No necesita entender de código. No depende de un desarrollador. Claude es su tercer socio, trabaja 24/7 sin que se sienta incómodo. Esta guía es el resumen de la reunión 19 del club AI Master con Avivit Blumstein. Veremos cómo conectar Figma a Claude a través de MCP, qué agentes personalizados hacen que el proceso sea profesional, cuáles son las reglas de hierro en el diseño de Figma que hacen que Claude emita código preciso, y cómo desplegar el resultado en Vercel con su propio dominio.

Lo que tendrá al finalizar la guía

• Conexión MCP en vivo entre Claude Code y su cuenta de Figma · Claude lee archivos directamente, no adivina
• API Token configurado de forma segura · No expuesto en el chat, guardado en .env
• Agentes personalizados · Copywriter, Critic, Developer, Launcher · Una agencia de diseño completa sin sueldos
• Reglas de hierro para el diseño en Figma que hacen que Claude traduzca 1:1 · Auto Layout, Variables, marcos correctos
• Proceso de sincronización bidireccional · Un cambio en Figma se actualiza en el código y viceversa, a través del agente Design Sync
• Sitio web en vivo · Localhost → GitHub → Vercel → Su propio dominio

Por qué importa · La brecha entre diseñador y desarrollador se cierra

Paso 1 · 3 instalaciones básicas antes de empezar

Cuenta de Figma de pago

Professional o superior · La versión gratuita no permite MCP

La cuenta gratuita de Figma no permite la conexión MCP. Se necesita al menos una suscripción Professional. Si solo quiere experimentar, puede comenzar con un periodo de prueba. Si ya trabaja con Figma, verifique en la configuración que tiene el tipo de cuenta correcto.

Consejo para agentes: Si la cuenta de su empresa es Professional, pídale al administrador que lo agregue. No es necesario comprar una suscripción personal por separado.

Node.js

El motor que ejecuta todo bajo el capó

Node.js es el entorno de ejecución de JavaScript. Piense en él como un traductor: toma el código que escribe Claude, lo ejecuta directamente en su computadora (no en el navegador) y permite ejecutar un sitio web en localhost antes de subirlo a producción. La instalación toma dos minutos, es gratuita y solo hay que hacerlo una vez.

Consejo para agentes: Seleccione la versión LTS (la de la izquierda), es más estable. Después de la instalación, abra una terminal y escriba `node -v`. Si ve un número de versión, está funcionando.

Claude Code Desktop

El acceso cómodo y potente · No el navegador

No trabaje con Claude en el navegador. Necesita la aplicación de escritorio de Claude Code. Solo esta versión puede acceder a las carpetas de su computadora, conectarse a MCP y ejecutar código localmente. La versión web es buena para automatizaciones con Gmail o Drive, pero no para desarrollo.

Consejo para agentes: Después de la instalación, inicie sesión en una cuenta de Claude Pro (20 dólares al mes) o Max (100 dólares al mes). El taller y las guías existentes funcionan con Pro.

💡 Claude Code frente a Claude Cowork frente a Claude Design · Todos se basan en el mismo motor (Opus / Sonnet). Cowork es una versión limitada y agradable. Claude Design es una interfaz en línea bonita pero cara (tokens separados, pueden llegar a 300 dólares). Claude Code realiza todas las capacidades de los tres y tiene acceso completo al escritorio y a Figma a través de MCP. Si se acostumbra a trabajar con él, no querrá volver atrás.

Paso 2 · Un momento, ¿qué es Figma?

🧰 ¿No sabe usar Figma? No hay estrés. Al final de la guía hay un código QR para la comunidad de diseñadores de Avivit: 'Portfolio Lev'. Pero incluso sin saber diseñar, se puede ingresar a Figma Community, descargar una plantilla lista (Portfolio, Dashboard, Landing Page) y conectarla directamente a Claude.

Paso 3 · Creación de un API Token en Figma (5 minutos)

Cómo generar el token · Paso a paso

• Ingrese a Figma (navegador o escritorio), haga clic en su avatar · Settings
• Pestaña Security · Desplácese hacia abajo hasta Personal Access Tokens
• Generate new token · Asigne un nombre significativo (por ejemplo, 'Claude MCP')
• Expiration · Seleccione 90 días (el máximo disponible). Claude le avisará cuando deba renovarlo
• Scopes (permisos) · Marque los siguientes: File content (Read), File metadata, Library content (Read), Library assets (Read), Variables (Read), Design system (Read)
• No marque los siguientes: File comments (Write), Webhooks · Es mejor no darle a Claude permisos de escritura en documentos compartidos con otros
• Haga clic en Generate token · Obtendrá una cadena larga de letras y números. Cópiela en un lugar seguro, no volverá a verse

¿Quiere dominar Claude Code desde cero?

Esta guía le ha dado las bases. En el taller completo de Claude Code construimos juntos paso a paso: instalación, CLAUDE.md, habilidades, agentes y un sitio web en vivo. 4 reuniones grabadas, acceso de por vida.

⚠️ Advertencia de seguridad de datos · Este token es un cheque en blanco. ¡No lo arroje al chat de Claude! ¡No lo guarde en un archivo común! ¡No lo envíe por correo electrónico! La forma correcta: colóquelo únicamente en la Terminal (una vez) o en un archivo .env que Claude cree para usted. Si el token se filtra, vaya inmediatamente a Settings → Security → Revoke.

Paso 4 · Conexión MCP · El puente entre Claude y Figma

El comando MCP para ingresar en la terminal (ejemplo · obtendrá su propia versión desde Figma)

claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp --figma-api-key=YOUR_TOKEN_HERE --stdio

Cómo ejecutar el comando sin exponer el token

• En Claude Desktop · Abra la terminal interna (Cmd+J en Mac, Ctrl+J en Windows)
• Copie el comando desde Figma. En YOUR_TOKEN_HERE · reemplácelo con el token que creó en el paso 3
• Péguelo en la terminal. Presione Enter
• Espere a que aparezca la línea: 'Installed', 'Registered', 'Connected'
• Si algo falla · Tome una captura de pantalla del mensaje y envíela al chat de Claude. Sabrá cómo solucionarlo
• Compruebe que funciona · Pregúntele a Claude: 'Explícame el estado del MCP'. Si sabe listar todas las herramientas de figma-developer-mcp · está funcionando

🔒 La diferencia entre Connector y MCP · En Claude hay conectores listos para Figma (a través de Customize). Estos brindan acceso básico. El MCP oficial de Figma ofrece un acceso mucho más amplio: lectura completa de la estructura del archivo, de las variables y de los componentes. Si habla en serio · MCP. Si solo está ojeando · con un conector es suficiente.

Paso 5 · Primera conversión · De archivo de Figma a sitio web en vivo

El proceso de principio a fin

• Figma · Abra el archivo que desea convertir. Cambie a Dev Mode. Haga clic en Share → Copy Link
• Claude · Cree una nueva carpeta de proyecto (por ejemplo, 'portfolio'), abra una nueva sesión
• Pegue el enlace de Figma y explique en lenguaje natural: 'Quiero convertir esta hermosa obra en un sitio web en vivo. Trabaja con el agente Figma Implement Design'
• Claude lee el archivo, escanea las capas y construye el árbol de código · React/HTML/CSS
• Abre Localhost · Le proporciona una URL (generalmente http://localhost:3000) y abre una vista previa al lado
• Ve el sitio web en vivo. Adaptable para móviles, con estados de desplazamiento (hover), con todos los detalles. En 20 a 30 minutos

🎯 Sin un agente · Claude construirá un sitio web, pero será genérico. Los agentes profesionales (siguiente paso en la guía) son la diferencia entre un 'sitio web que parece hecho por la IA' y un 'sitio web que parece diseñado por un profesional'.

Paso 6 · Los 4 agentes que hacen que el proceso sea profesional

Copywriter

Escribe con su voz · No con la voz de la IA

Un agente que conoce su tono: cómo escribe los encabezados, qué palabras evita, cómo se ve una llamada a la acción (CTA) típica en su sitio web. Es dinámico y mejora en cada sesión. Puede crear una versión diferente para cada proyecto · una versión para marca personal y otra para empresa.

Consejo para agentes: este agente se actualiza después de cada sesión. Si terminaste un proyecto en el que te encantó el microcopy, dile a Claude 'guarda este tono en el Copywriter Agent'.

El taller completo de Claude Code reúne todo en un solo lugar: instalación, habilidades, agentes y creación de sitios web. 4 clases grabadas con acceso de por vida.

Critic

Revisión automática del diseño antes de que salga en vivo

Una vez que el sitio está listo, este agente lo revisa y comprueba: jerarquía visual, adaptabilidad a dispositivos móviles, accesibilidad, conformidad con el sistema de diseño y contraste WCAG. En lugar de que revises manualmente, Claude te dice exactamente qué corregir y dónde.

Developer (Figma Implement Design)

Convierte el diseño en código, el cerebro del proceso

El agente principal. Recibe un enlace de Figma, escanea el archivo y construye el código componente por componente, con CSS preciso que coincide 1:1 con el diseño. Es compatible con la automatización de adaptabilidad si el archivo se creó con Auto Layout correctamente.

Consejo para agentes: Avivit regalará este agente a la comunidad. Se enviará a través del resumen de la reunión en el club.

Launcher

Sube el código de Localhost a producción

¿Terminaste el trabajo en local? Este agente envía el código a GitHub, lo conecta automáticamente a Vercel, lo despliega y devuelve una URL pública. Todo esto sin que toques DevOps. En lugar de 5 acciones manuales, una sola frase.

🤖 Bono · Design Sync. Un quinto agente que menciona Avivit. Una vez que el sitio está activo y cambias algo en Figma (un cliente pidió actualizar un color), este agente sincroniza el cambio en el código de forma bidireccional. Figma no muere tras la primera conversión, sigue vivo junto al código.

Paso 7 · 5 reglas de hierro en el diseño de Figma

Las reglas sin concesiones

• **Auto Layout en todas partes** · En lugar de colocar los elementos manualmente, utiliza Auto Layout. Así es como Claude sabe cómo crear adaptabilidad automática. En móviles, los elementos saltarán uno debajo del otro sin romper el diseño
• **Nombres lógicos para las capas** · Nada de 'Frame 1' ni 'Group 2'. Un botón se llama 'Button-Primary', el área Hero se llama 'Section-Hero'. Claude se confunde con nombres genéricos y genera nombres confusos en el código
• **Variables para colores, fuentes y espaciados** · En lugar de escribir #FF6B00 por todas partes, crea una variable 'color/primary' y úsala. Claude lo traduce a variables CSS y el sitio se puede editar globalmente en una sola línea
• **Frame, no Group** · Utiliza siempre Frames (pulsando F). Group es una estructura antigua que Claude lee mal. Frame te da todo el poder: flexibilidad, Auto Layout y adaptabilidad
• **Iconos como SVG o Component** · Si es un icono, impórtalo como SVG (un formato vectorial que no se pixela) o conviértelo en un Component. Un PNG de un icono hará que Claude construya una imagen en lugar de código limpio, y el sitio saldrá más pesado y menos flexible

📚 ¿No está construido con Auto Layout? No pasa nada. Hay una habilidad llamada 'Strap Grid Builder' que sabe traducir diseños que no están hechos con Auto Layout a una buena adaptabilidad. Es un buen punto de partida, pero el original es preferible.

Paso 8 · ¿No tienes un diseño listo? Figma Community

Figma Community

Miles de plantillas de diseño gratuitas y disponibles al instante

Una enorme biblioteca de plantillas: UI Kits, paneles, aplicaciones móviles, páginas de aterrizaje, iconos e ilustraciones. La mayoría son gratuitas. Haces clic en una plantilla, luego en 'Open in Figma', la plantilla se copia a tu cuenta, la editas y desde ahí la pasas a Claude.

Consejo para agentes: en la búsqueda, filtra por 'Free'. Vale la pena revisar las valoraciones de la comunidad; es probable que una plantilla con 50 mil descargas también esté bien estructurada.

¿Quieres dominar Claude Code desde cero?

Esta guía te ha dado las bases. En el taller completo de Claude Code construimos juntos paso a paso: instalación, CLAUDE.md, habilidades, agentes y un sitio web en vivo. 4 clases grabadas, acceso de por vida.

Paso 9 · De Localhost a producción · GitHub + Vercel

Comandos para Claude · Copiar y pegar

• 'Créame un repositorio privado en GitHub y sube el código'
• 'Conecta este repositorio a Vercel y despliega a producción'
• 'Tengo el dominio avivit-portfolio.com que compré en Cloudflare. Conéctalo al proyecto y actualiza los registros DNS'
• 'Agrega Google Analytics 4 al sitio y conecta mi Property ID'

💰 Combinando 3 herramientas: GitHub es gratis, Vercel es gratis (hasta 100 GB de tráfico al mes) y Figma Professional es el único gasto. Si tienes el taller y el club, el ROI del primer sitio web recupera la inversión 50 veces.

Preguntas frecuentes de la reunión

No próximamente. Claude Design es una interfaz de diseño en el sitio web de Claude (no en el escritorio). Es bonita, rápida y sabe generar diseños básicos, pero está muy limitada. Sus tokens están separados de Claude Code, son caros y se acaban rápido. Avivit llegó a gastar 300 dólares en una sola cuenta. Quien trabaja con Claude Code en el escritorio puede obtener los mismos resultados sin costo adicional. Figma sigue siendo el estándar profesional para diseños complejos.

Sí, pero con una diferencia: en lugar de crear el diseño tú mismo en Figma, entras a Figma Community, descargas una plantilla lista (portafolio, panel, página de aterrizaje), editas los textos e imágenes, y la conectas a Claude. Avivit también sugiere pedirle a Claude 'vamos a construir un sistema de diseño juntos'. Le das imágenes, un moodboard o ideas, y Claude genera la base.

Una habilidad es una capacidad definida: 'edición de video', 'escritura en hebreo', 'prueba de accesibilidad'. Claude la activa cuando es relevante. Un agente (Sub-Agent) es una entidad con un 'cerebro' completo: sabe realizar una serie de acciones, tomar decisiones y activar otras habilidades. En Figma + Code, el agente 'Developer' puede activar habilidades de 'CSS Optimization', 'Accessibility' y 'OKLCH Colors' al mismo tiempo. Quien empieza usa habilidades. Quien avanza construye agentes.

Avivit hizo pruebas sin agentes y los resultados fueron peores. Los agentes otorgan superpoderes: cada uno está entrenado para una tarea específica, sabe cómo quieres que piense y trabaja de manera coordinada con los demás. Vale la pena la inversión inicial de 2 o 3 horas para crear un agente, luego trabaja para ti por siempre.

Paso a paso: 1) Asegúrate de que tu cuenta de Figma sea de pago. 2) Asegúrate de que Node.js esté instalado; escribe `node -v` en la terminal y obtendrás un número de versión. 3) Asegúrate de que el token siga vigente; si han pasado 90 días, genera uno nuevo. 4) Toma una captura de pantalla del error de la terminal y envíasela al chat de Claude. Él sabe identificar el 95% de los fallos.

No. Hay dos maneras: 1) Editas el diseño directamente en Figma y ejecutas el agente Design Sync, y Claude sincroniza el cambio en el código. 2) Simplemente le dices a Claude 'cambia el botón principal a azul' sin tocar Figma, y él editará el código directamente. La primera forma es más profesional, ya que Figma y el código se mantendrán sincronizados.

Cursor y VS Code son entornos de desarrollo integrados (IDEs), es decir, entornos de programación clásicos diseñados para desarrolladores. Requieren conocimientos técnicos básicos. Claude Code Desktop se creó para usuarios que no son desarrolladores: interfaz intuitiva, menor dependencia de la terminal y una experiencia más limpia. Todas las capacidades de Cursor existen también en Claude, solo que con una interfaz más accesible.

Es posible construir directamente en Claude y obtener un sitio web. Pero Figma te da un control visual completo antes de escribir una sola línea de código: ves las secciones, la jerarquía y los colores, y puedes actualizar al instante. Cuando lo pasas a Claude, el resultado es muchas veces más preciso. Además, Figma te permite compartir el diseño con un cliente para su aprobación antes de invertir en desarrollo. Para proyectos pequeños, ve directo a Claude. Para proyectos profesionales, hazlo a través de Figma.

El conector (Customize → Connectors → Figma) ofrece acceso básico: Claude puede leer partes del archivo y hacer manipulaciones menores. No profundiza en el archivo, no ve todas las variables, no lee toda la jerarquía de componentes y no puede escribir ni actualizar. El MCP oficial de Figma proporciona acceso completo: lectura profunda, acceso al sistema de diseño y capacidad de realizar acciones. Si te tomas el proceso en serio, usa MCP. Si es solo una prueba única, el conector es suficiente.

La terminal no necesita estar abierta; Claude Desktop la gestiona en segundo plano tras la conexión inicial. Para evitar que Claude vuele demasiado con su imaginación, utiliza el Plan Mode (un botón en la parte inferior de Claude). En él, te muestra un plan de trabajo antes de empezar a construir y tú lo apruebas. Otro truco es darle instrucciones claras con valores precisos ('columna derecha, ancho 320px, fondo #FFFFFF') en lugar de redacciones abiertas ('un título bonito'). Cuanto más preciso sea el prompt, más preciso será el resultado.

Depende del tipo de agente. Un agente Developer genérico que funciona con cualquier proyecto de Figma vale la pena compartirlo entre proyectos. Un agente Copywriter es mejor tenerlo separado para cada proyecto (porque el tono cambia entre un proyecto personal y uno para un cliente). El método de Avivit consiste en crear un agente base y copiarlo a cada carpeta de proyecto haciendo pequeños ajustes adecuados para ese proyecto en específico.

Claude carga únicamente los agentes relevantes para la solicitud específica, no todos. Los agentes inactivos no consumen tokens. Sin embargo, si tienes 30 agentes en una carpeta, Claude puede confundirse sobre cuál elegir. Avivit recomienda un máximo de 5 a 7 agentes por carpeta de proyecto. El resto debe ir en carpetas separadas.

Claude sabe cómo gestionar ambos aspectos, pero debes pedírselo. Para SEO: 'Añade etiquetas Meta según los códigos de Google, sitemap.xml, robots.txt y datos estructurados'. Para seguridad: 'Añade HTTPS a través de Vercel, asegúrate de que no haya secretos en el código y configura los encabezados CSP'. Habilidades recomendadas para instalar: 'Israeli Privacy Shield' para privacidad y 'Israeli Accessibility Compliance' para accesibilidad. Ambas fueron mencionadas en la guía 'Vibe Coding'.

Depende de la configuración. Al crear un nuevo repositorio en GitHub, puedes elegir Public (público para todos) o Private (solo para ti y a quienes invites). La opción predeterminada en una cuenta gratuita puede ser Public. Al hablar con Claude, pídele siempre 'Créame un repositorio privado' o 'Créame un repositorio privado'. Si por error queda como Public, ve a GitHub → Settings → General → Danger Zone → Change visibility.

Hay tres opciones: 1) Le dices a Claude 'Actualiza el texto en el Hero a X', él actualiza el código y lo despliega nuevamente en Vercel. Es rápido para ediciones puntuales. 2) Guardar el contenido en un archivo JSON o MD separado dentro del proyecto para editarlo fácilmente sin tocar el código. 3) Conectar un CMS externo (Notion, Airtable, Sanity) donde realices las actualizaciones; Claude construye una infraestructura que extrae los datos automáticamente. La primera es la más sencilla y la tercera es la más profesional.

Básicamente, sí. Lovable, Bolt y Replit Agent son herramientas de 'Vibe Coding' que generan sitios web a partir de descripciones. La diferencia es que son herramientas cerradas, estás limitado a lo que permiten y tienen suscripciones independientes. Claude Code funciona para sitios web, automatizaciones, agentes y edición de video con una sola suscripción. Además, Claude te da acceso al código fuente, eres el propietario y puedes migrar a cualquier plataforma. En Lovable existe el bloqueo de proveedor o vendor lock-in.

Figma es el estándar profesional para el diseño de productos digitales: 16 años en el mercado, un ecosistema enorme y un MCP oficial para Claude. Stitch AI es una herramienta más nueva que genera diseños a partir de texto, es agradable para experimentar pero menos profesional para proyectos complejos. Si construyes una vez cada década, Stitch será suficiente. Si creas productos de manera seria, utiliza Figma.

Hay tres formas: 1) Claude lo construye por ti. Le subes un moodboard, sitios web que te gusten, imágenes que representen la marca y le dices 'Constrúyeme un design system'. Él crea la paleta, las fuentes, el espaciado y la jerarquía. 2) Compras una plantilla lista en Figma Community y editas los colores y fuentes a tu gusto. 3) Utilizas la habilidad 'UI/UX Pro Max' o 'Web Design Guidelines', que incluyen 50 estilos y 161 paletas de colores listas. Avivit presentó anteriormente una sesión completa sobre la construcción de un design system, la cual fue subida al sistema del club.

Sí. Ejemplos de la comunidad: 1) Claude crea el sitio web y envía una actualización a Slack. 2) Se realiza un cambio en Figma, Claude lo sincroniza, lo envía a GitHub y Vercel lo despliega de forma automática. 3) Claude crea el sitio web, sube capturas de pantalla a Drive y envía un correo electrónico al cliente con el enlace. Todo esto a través de Make.com o mediante MCPs adicionales que se pueden añadir a Claude.

🚀 Próximo paso: el taller completo de Claude Code

Preguntas frecuentes

¿Claude Design reemplazará a Figma?

No próximamente. Claude Design es una interfaz de diseño dentro del sitio web de Claude (no en la aplicación de escritorio). Es atractiva, rápida y sabe generar diseños básicos, pero es muy limitada. Sus tokens son independientes de los de Claude Code, son costosos y se agotan rápidamente. Avivit llegó a gastar 300 dólares en una sola cuenta. Quien trabaja con Claude Code en el escritorio puede obtener los mismos resultados sin coste adicional. Figma sigue siendo el estándar profesional para diseños complejos.

No soy diseñador/a. ¿Esta guía es relevante para mí?

Sí, pero con una diferencia: en lugar de crear el diseño tú mismo en Figma, entras a Figma Community, descargas una plantilla lista (portafolio, panel, página de aterrizaje), editas los textos e imágenes y la conectas con Claude. Avivit también sugiere pedirle a Claude 'Construyamos un design system juntos'. Le proporcionas imágenes, un moodboard e ideas, y Claude genera la base.

¿Cuál es la diferencia entre un agente (Sub-Agent) y una habilidad (Skill)?

Una habilidad es una capacidad definida, como 'edición de video', 'escritura en hebreo' o 'prueba de accesibilidad'. Claude la activa cuando es relevante. Un agente (Sub-Agent) es una entidad con un 'cerebro' completo: sabe ejecutar una serie de acciones, tomar decisiones y activar otras habilidades. En Figma + Code, un agente 'Developer' puede activar habilidades de 'CSS Optimization', 'Accessibility' y 'OKLCH Colors' simultáneamente. Quien comienza utiliza habilidades; quien está avanzado construye agentes.

¿Es obligatorio construir agentes para obtener resultados profesionales?

Avivit hizo pruebas sin agentes y los resultados fueron menos óptimos. Los agentes otorgan superpoderes: cada uno está entrenado para una tarea específica, sabe cómo quieres que piense y trabaja de manera coordinada con los demás. Vale la pena la inversión inicial de 2 a 3 horas para crear un agente, ya que luego trabajará para ti por siempre.

La conexión falló. ¿Qué debo hacer?

Paso a paso: 1) Asegúrate de que tu cuenta de Figma sea de pago. 2) Comprueba que Node.js esté instalado escribiendo `node -v` en la terminal para obtener el número de versión. 3) Verifica que el token siga vigente; si han pasado 90 días, genera uno nuevo. 4) Toma una captura de pantalla del error de la terminal y envíasela al chat de Claude. Él sabe identificar el 95% de las fallas.

¿Qué sucede cuando tengo un sitio web activo y el cliente solicita cambios? ¿Hay que empezar desde cero cada vez?

No. Hay dos maneras: 1) Editas el diseño directamente en Figma y ejecutas el agente Design Sync para que Claude sincronice el cambio en el código. 2) Simplemente le dices a Claude 'Cambia el botón principal a azul' sin tocar Figma, y él editará el código directamente. La primera opción es más profesional, ya que Figma y el código se mantienen sincronizados.

¿Cuál es la diferencia entre esta conexión y Cursor / VS Code?

Cursor y VS Code son IDEs, entornos de desarrollo clásicos diseñados para desarrolladores. Requieren conocimientos técnicos básicos. Claude Code Desktop fue creado para usuarios que no son desarrolladores: cuenta con una interfaz intuitiva, menor dependencia de la terminal y una experiencia más limpia. Todas las capacidades de Cursor también existen en Claude, pero con una interfaz más accesible.

¿Por qué construir en Figma y no directamente en Claude?

Es posible construir directamente en Claude y obtener un sitio web. Sin embargo, Figma te otorga un control visual completo antes de escribir una línea de código: puedes ver las secciones, la jerarquía y los colores, y realizar actualizaciones al instante. Al transferirlo a Claude, el resultado es mucho más preciso. Además, Figma permite compartir el diseño con un cliente para su aprobación antes de invertir en desarrollo. Para proyectos pequeños, hazlo directo en Claude; para proyectos profesionales, utiliza Figma.

¿Por qué el conector habitual de Claude para Figma no es suficiente?

El conector (Customize -> Connectors -> Figma) ofrece acceso básico: Claude puede leer partes del archivo y realizar manipulaciones menores. No profundiza en el archivo, no ve todas las variables, no lee la jerarquía completa de los componentes y no puede escribir ni actualizar. El MCP oficial de Figma proporciona acceso completo: lectura profunda, acceso al Design System y capacidad de realizar acciones. Si te tomas el proceso en serio, usa MCP; si es solo una prueba única, el conector es suficiente.

¿La terminal debe estar abierta todo el tiempo? ¿Cómo evitar que Claude sea demasiado creativo?

La terminal no necesita estar abierta; Claude Desktop la administra en segundo plano después de la conexión inicial. Para evitar que Claude vuele con una imaginación desmedida, utiliza el Plan Mode (un botón en la parte inferior de Claude), donde presenta un plan de trabajo antes de empezar a construir para que lo apruebes. Otro truco es darle instrucciones claras con valores precisos ('columna derecha, ancho 320px, fondo #FFFFFF') en lugar de redacciones abiertas ('título bonito'). Cuanto más preciso sea el prompt, más preciso será el resultado.

¿Cada proyecto requiere su propio agente? ¿O se puede compartir un agente entre varios proyectos?

Depende del tipo de agente. Un agente Developer genérico que trabaja con cualquier proyecto de Figma vale la pena compartirlo entre proyectos. Para un agente Copywriter, es mejor tener uno separado por proyecto (ya que el tono cambia entre un proyecto personal y uno para un cliente). El método de Avivit consiste en crear un agente base y duplicarlo en cada carpeta de proyecto aplicando pequeñas modificaciones adaptadas a ese proyecto en específico.

Si le damos a Claude todos los agentes, ¿no consume más tokens?

Claude carga únicamente los agentes relevantes para la solicitud específica, no todos. Los agentes inactivos no consumen tokens. Sin embargo, si tienes 30 agentes en una carpeta, Claude puede confundirse sobre cuál elegir. Avivit recomienda un máximo de 5 a 7 agentes por carpeta de proyecto. El resto debe ir en carpetas separadas.

¿Qué hay de las pruebas de seguridad y SEO para un sitio web generado por Claude?

Claude sabe cómo gestionar ambos aspectos, pero debes pedírselo. Para SEO: 'Añade etiquetas Meta según los códigos de Google, sitemap.xml, robots.txt y datos estructurados'. Para seguridad: 'Añade HTTPS a través de Vercel, asegúrate de que no haya secretos en el código y configura los encabezados CSP'. Habilidades recomendadas para instalar: 'Israeli Privacy Shield' para privacidad y 'Israeli Accessibility Compliance' para accesibilidad. Ambas fueron mencionadas en la guía 'Vibe Coding'.

¿Mis archivos en GitHub están abiertos para todo el mundo?

Depende de la configuración. Al crear un nuevo repositorio en GitHub, puedes elegir Public (público para todos) o Private (solo para ti y a quienes invites). La opción predeterminada en una cuenta gratuita puede ser Public. Al hablar con Claude, pídele siempre 'Créame un repositorio privado' o 'Créame un repositorio privado'. Si por error queda como Public, ve a GitHub → Settings → General → Danger Zone → Change visibility.

¿Qué pasa cuando quieres actualizar contenido en el sitio web en vivo y no tenemos un sistema de gestión de contenido?

Hay tres opciones: 1) Le dices a Claude 'Actualiza el texto en el Hero a X', él actualiza el código y lo despliega nuevamente en Vercel. Es rápido para ediciones puntuales. 2) Guardar el contenido en un archivo JSON o MD separado dentro del proyecto para editarlo fácilmente sin tocar el código. 3) Conectar un CMS externo (Notion, Airtable, Sanity) donde realices las actualizaciones; Claude construye una infraestructura que extrae los datos automáticamente. La primera es la más sencilla y la tercera es la más profesional.

¿Esto reemplaza a Lovable / Bolt / Replit?

Básicamente, sí. Lovable, Bolt y Replit Agent son herramientas de programación por vibración que generan sitios web a partir de descripciones. La diferencia es que son herramientas cerradas, estás limitado a lo que permiten y tienen suscripciones separadas. Claude Code funciona para sitios web, automatizaciones, agentes y edición de video con una sola suscripción. Además, Claude te da acceso al código, eres el dueño y puedes pasarte a cualquier plataforma. En Lovable hay un bloqueo de proveedor.

Figma frente a Stitch AI, ¿qué es mejor?

Figma es el estándar profesional para el diseño de productos digitales con 16 años en el mercado, un ecosistema enorme y un MCP oficial para Claude. Stitch AI es una herramienta más nueva que genera diseños a partir de texto, ideal para experimentar, pero menos profesional para proyectos complejos. Si construyes una vez cada década, Stitch será suficiente. Si construyes productos en serio, usa Figma.

Somos emprendedores sin experiencia en diseño, ¿cómo se crea un sistema de diseño?

Hay tres formas. 1) Claude lo construye por ti: le subes un panel de inspiración, sitios web que te gusten, imágenes que representen a la marca y le pides que cree un sistema de diseño. Él genera la paleta, las fuentes, el espaciado y la jerarquía. 2) Compras una plantilla lista en Figma Community y editas los colores y las fuentes a tu gusto. 3) Usas la habilidad UI/UX Pro Max o Web Design Guidelines con 50 estilos y 161 paletas de colores listas. Avivit presentó anteriormente una sesión completa sobre la creación de sistemas de diseño que ya está subida al sistema del club.

¿Se puede conectar este flujo a otras automatizaciones?

Sí. Ejemplos de la comunidad: 1) Claude crea el sitio web y envía una actualización a Slack. 2) Un cambio en Figma hace que Claude se sincronice, lo envíe a GitHub y Vercel lo despliegue automáticamente. 3) Claude crea el sitio web, sube capturas de pantalla a Drive y envía un correo al cliente con el enlace. Todo a través de Make.com o mediante MCPs adicionales que se pueden agregar a Claude.