Puedes pasar de un diseño en Figma a un sitio web activo e implementado en una sola tarde usando Claude — sin experiencia en programación requerida. El flujo de trabajo es simple: diseña en Figma, exporta o describe el diseño a Claude, genera el código, despliega en Vercel o Netlify. Todo cuesta $0 si usas los niveles gratuitos.
Las personas publican clips de "sitio web de $5,000 en 2 horas" en X, pero la mayoría omiten los pasos reales. Esta guía llena ese vacío. Cada indicación está incluida, cada punto de decisión está explicado, y los compromisos son honestos.
Por qué esto funciona ahora (y no hace un año)
Hace un año, convertir un diseño en código con IA significaba pegar una captura de pantalla y obtener una aproximación tosca que requería horas de limpieza. Hoy, la ventana de contexto de 1M de tokens de Claude significa que puedes proporcionarle un sistema de diseño completo — colores, tipografía, espaciado, detalles de componentes — y obtener código de calidad producción que coincida estrechamente con tu diseño en el primer intento.
La idea clave: la calidad de lo que obtienes depende casi enteramente de qué tan bien describas el diseño. Las descripciones vagas producen sitios web vagos. Las descripciones específicas y estructuradas producen sitios web específicos y pulidos.
Lo que necesitas
Tres herramientas, todas con niveles gratuitos:
Figma — para tu diseño. El nivel gratuito funciona bien. Si no tienes un diseño, obtén una plantilla gratuita de Figma Community y personalízala.
Claude — para la generación de código. El nivel gratuito te da Sonnet, que maneja esto bien. Pro ($20/mes) te da Opus 4.7 para sitios más complejos.
Vercel o Netlify — para el despliegue. Ambos tienen niveles gratuitos. Conecta tu repositorio de GitHub, empuja el código, el sitio se activa.
Paso 1: Prepara tu diseño en Figma
Antes de involucrar a Claude, organiza tu archivo de Figma. Este paso determina la calidad de todo lo que sigue.
Tu diseño debe tener páginas claramente definidas (Inicio, Acerca de, Contacto, etc.), espaciado y alineación consistentes, una paleta de colores visible (anota los valores hex exactos), fuentes identificadas, y puntos de ruptura responsivos para escritorio y móvil si es posible.
No te preocupes por la perfección de píxeles. Claude maneja bien los detalles de implementación. Lo que importa es que tu diseño comunique la estructura, la jerarquía y el estilo visual claramente.
Consejo profesional: Nombra tus capas de Figma de forma significativa. "Sección Hero", "Tarjetas de características", "Tabla de precios" son mucho más útiles que "Frame 247" cuando escribes indicaciones.
Paso 2: Exporta tu información de diseño
Claude no puede leer un archivo de Figma directamente, así que necesitas traducir tu diseño en información con la que Claude pueda trabajar. Tienes tres enfoques, del más fácil al más preciso:
Enfoque A: Captura de pantalla + descripción. Toma capturas de pantalla de página completa de cada página en tu diseño. Cárgalas en Claude junto con una descripción escrita del diseño, colores e interacciones. Este es el enfoque más rápido y funciona sorprendentemente bien.
Enfoque B: Exportación de Figma Dev Mode. Si tienes el plan pagado de Figma, usa Dev Mode para exportar valores CSS, tokens de espaciado y especificaciones de componentes. Proporciona estos a Claude junto con capturas de pantalla para una salida más precisa.
Enfoque C: Especificación de diseño escrita. Escribe una descripción detallada de cada sección — encabezado, hero, características, testimonios, pie de página — incluyendo colores, fuentes, tamaños y diseño. Esto toma más tiempo pero te da más control sobre la salida. Si estás construyendo sin un diseño de Figma, este es tu camino.
Paso 3: Escribe tu indicación inicial
Aquí es donde la mayoría de las personas se equivocan. Escriben "construye un sitio web que se vea como esta captura de pantalla" y obtienen una salida genérica. Aquí está la estructura de indicación que produce consistentemente resultados de calidad:
Construye un sitio web de [número] páginas con las siguientes especificaciones:
SISTEMA DE DISEÑO:
- Color primario: [hex]
- Color secundario: [hex]
- Fondo: [hex]
- Texto: [hex]
- Fuente: [nombre de fuente] para encabezados, [nombre de fuente] para cuerpo
- Border radius: [valor]
- Escala de espaciado: [valores]
PÁGINA 1 — INICIO:
- Sección hero: [descripción exacta — texto de encabezado, subtexto, texto del botón CTA, tratamiento de fondo]
- Sección de características: [número] tarjetas, cada una con [icono/imagen, título, descripción]
- Testimonios: [descripción de diseño]
- Sección CTA: [descripción]
- Pie de página: [enlaces y diseño]
PÁGINA 2 — ACERCA DE:
[mismo nivel de detalle]
TÉCNICO:
- Usar Next.js con Tailwind CSS
- Responsivo en móvil
- Desplazamiento suave entre secciones
- Todas las imágenes como divs de marcador de posición con colores de fondo (agregaré imágenes reales más tarde)Cuanto más específico seas sobre lo que ve el usuario, mejor será la salida. No describas el código — describe la experiencia. Si necesitas ayuda para afinar esta indicación antes de enviarla, nuestro optimizador de indicaciones gratuito puede ayudarte a estructurarla para mejores resultados.
Paso 4: Revisa e itera
La primera salida de Claude generalmente captura 60–80% de tu diseño. El 20–40% restante proviene de la iteración. Este es el paso donde la mayoría de los tutoriales de "vibe coding" terminan, pero es donde sucede la verdadera calidad.
Revisa la salida verificando tres cosas: ¿el diseño coincide con tu diseño? ¿Los colores y la tipografía se sienten bien? ¿Se ve bien en móvil?
Luego itera con comentarios específicos. No digas "mejóralo". Di:
- "La sección hero necesita más relleno vertical — agrega 120px arriba y abajo"
- "Las tarjetas de características deben estar en una cuadrícula de 3 columnas en escritorio, una columna en móvil"
- "El botón CTA debe tener un efecto al pasar — oscurece el fondo un 10% y escala un poco hacia arriba"
- "Los enlaces del pie de página deben estar organizados en 4 columnas: Producto, Empresa, Recursos, Legal"
Cada ronda de comentarios debe abordar 3–5 problemas específicos. Tres rondas generalmente te acercan al 95% de tu diseño.
¿Obteniendo valor de esto? Publicamos un análisis profundo por semana sobre flujos de trabajo de IA, herramientas y guías prácticas. Únete a los lectores que lo obtienen primero →
Paso 5: Agrega contenido real e imágenes
Reemplaza el texto de marcador de posición con tu copia real. Reemplaza los divs de imagen de marcador de posición con imágenes reales. Si necesitas ayuda escribiendo copias para sitios web, Claude es excelente en esto — proporciona tu descripción de marca y pídele una copia de página de inicio que coincida con tu tono.
Para imágenes, usa stock gratuito de Unsplash o Pexels, o genera imágenes personalizadas con una herramienta de IA de imágenes. Suelta los archivos de imagen en la carpeta /public de tu proyecto y actualiza los atributos src.
Paso 6: Despliega en un clic
Si usaste Next.js (recomendado), desplegar en Vercel toma 60 segundos:
- Empuja tu código a un repositorio de GitHub
- Ve a vercel.com e inicia sesión con GitHub
- Haz clic en "Importar proyecto" y selecciona tu repositorio
- Vercel detecta automáticamente Next.js y configura todo
- Haz clic en "Desplegar"
Tu sitio está activo con una URL .vercel.app. Conecta un dominio personalizado en la configuración de Vercel si tienes uno.
Netlify funciona casi idénticamente — importa de GitHub, detecta automáticamente el framework, despliega. Ambas plataformas manejan SSL, CDN e implementación continua automáticamente. Cada vez que empujas a GitHub, tu sitio se actualiza.
¿No estás seguro de qué plataforma de despliegue usar? Escribimos una comparación completa: ¿Dónde despliegas después de vibe coding?
Errores comunes que atrapan a las personas
1. Darle a Claude una captura de pantalla sin contexto escrito. Las capturas de pantalla ayudan, pero Claude necesita descripciones escritas de colores, fuentes, espaciado y diseño para producir código preciso. La captura de pantalla es una referencia — el texto es la instrucción.
2. Intentar construir todo en una indicación. Un sitio web de 6 páginas con animaciones, formularios y un CMS es demasiado para un único intento. Construye página por página, sección por sección. Comienza con la página de inicio, hazla bien, luego pasa a la siguiente página.
3. Omitir la capacidad responsiva en móvil. Si no mencionas móvil en tu indicación, Claude construirá un diseño solo para escritorio. Siempre incluye "responsivo en móvil" en tus requisitos técnicos y prueba la salida con un ancho de 375px.
4. No probar interacciones. Haz clic en cada botón, completa cada formulario, desplázate en cada página. El código generado por IA a menudo se ve bien pero tiene enlaces rotos, formularios no funcionales o estados al pasar faltantes. Prueba antes de desplegar.
5. Perfeccionismo antes del despliegue. Lanza al 90% e itera. Tu primer despliegue no necesita ser perfecto — necesita estar activo. Puedes empujar actualizaciones en segundos.
¿Construyendo para clientes? Lee nuestra guía sobre 5 errores de seguridad que cada vibe coder comete antes de entregar.
La conclusión
El flujo de trabajo de Figma-a-Claude-a-despliegue es la forma más rápida de convertir un diseño en un sitio web funcional sin escribir código tú mismo. La calidad depende de la especificidad de tus indicaciones, no de la habilidad de programación. Tres rondas de iteración generalmente te llevan del primer borrador a producción.
Comienza con un proyecto simple — un portafolio o landing page — y trabaja a través del ciclo completo una vez. La segunda vez tomará la mitad del tiempo porque sabrás exactamente cómo estructurar tus indicaciones.
¿No estás seguro de qué herramienta de IA es mejor para tu flujo de trabajo? Toma nuestro cuestionario Model Picker de 60 segundos para averiguarlo, o ve la comparación completa del Estado de los modelos de IA.
Esto es lo que hacemos cada semana. Un análisis profundo sobre herramientas de IA, flujos de trabajo y opiniones honestas — sin hype, sin relleno. Únete a nosotros →
Divulgación: Algunos enlaces en este artículo son enlaces de afiliados. Solo recomendamos herramientas que hemos probado personalmente y usamos regularmente. Ve nuestra política de divulgación completa.