Cómo usar Claude con Figma para generar wireframes y diseños
Una guía práctica para transformar una idea suelta en una estructura visual editable: problema, flujo, wireframe, interfaz y mejora continua.
En 135ideas creemos que una buena idea no debería quedarse atrapada en una conversación, una servilleta o un documento. La idea debe poder convertirse rápidamente en una primera estructura visual, después en un wireframe, luego en una interfaz editable y finalmente en una experiencia que pueda ser discutida, testeada y mejorada.
Ahí aparece una nueva forma de trabajar: usar Claude como motor de pensamiento, definición y producción inicial, y Figma como espacio visual donde la idea se transforma en diseño.
La clave no es pedirle a la IA "hazme una pantalla bonita". La clave es usar Claude como una fábrica de ideas estructuradas: primero ordenar el problema, luego definir el usuario, después construir el flujo, generar wireframes y finalmente llevar esa propuesta a Figma para iterar.
La idea central
Antes
Tengo una idea → escribo un brief → hago bocetos → abro Figma → diseño pantallas → corrijo → vuelvo a escribir → vuelvo a diseñar.
Ahora
Tengo una idea → converso con Claude → Claude ordena el problema → genera arquitectura → propone wireframes → crea instrucciones de diseño → las llevo a Figma → itero visualmente.
La diferencia es enorme. Ya no partimos desde una pantalla en blanco. Partimos desde una hipótesis visual. Y eso es fundamental para innovar, porque muchas ideas no mueren porque sean malas. Mueren porque nunca lograron convertirse en algo visible, discutible y mejorable.
Qué necesitas para conectar Claude con Figma
Para trabajar con este flujo necesitas una cuenta de Figma, Claude Code instalado y el servidor MCP de Figma conectado a Claude Code. Figma recomienda configurar el servidor remoto MCP para Claude Code mediante el plugin oficial de Figma.
claude plugin install figma@claude-plugins-officialLuego debes reiniciar Claude Code, abrir /plugin, seleccionar el plugin de Figma y autorizar el acceso. También existe una configuración manual usando MCP.
claude mcp add --transport http figma https://mcp.figma.com/mcpSegún la documentación de Figma, el servidor MCP permite conectar Figma con clientes compatibles como Claude Code, Cursor, VS Code, Windsurf o Codex. También puede extraer contexto de diseño y, mediante herramientas como use_figma, crear o modificar activos dentro de archivos de Figma.
El método 135ideas: de idea suelta a wireframe
Paso 1: partir con el problema, no con la pantalla
No empieces diciendo: "Diseña una app bonita para vender cursos". Empieza diciendo: "Ayúdame a definir el problema que debe resolver esta interfaz".
Claude debe ayudarte a responder qué quiere lograr el usuario, qué le duele, qué lo frena, qué información necesita para confiar, qué acción queremos que realice y qué momento emocional debemos activar.
Actúa como estratega UX y neuromarketing de 135ideas.
Quiero crear una interfaz para [tipo de producto o servicio].
Antes de diseñar pantallas, ayúdame a definir:
1. Problema principal del usuario.
2. Necesidad funcional.
3. Necesidad emocional.
4. Frenos de decisión.
5. Promesa de valor.
6. Acción principal que debe realizar.
7. Información que necesita ver para confiar.
8. Primer flujo de pantallas recomendado.
No diseñes todavía. Primero estructura el problema.El usuario sabe que necesita ir al dentista, pero lo posterga. Su fricción principal no es el dinero ni el tiempo: es la incertidumbre y el miedo a lo desconocido.
✦ Necesidad funcional: reservar una cita sin tener que llamar ni esperar respuesta.
✦ Necesidad emocional: sentir que el proceso es simple, transparente y sin sorpresas.
✦ Freno principal: "No sé cuánto cuesta ni si me van a atender bien."
Paso 2: convertir el problema en flujo
Después de entender el problema, Claude debe transformar esa comprensión en un recorrido. Por ejemplo: Inicio → selección de servicio → precios claros → agenda → confianza → confirmación.
Ahora convierte este problema en un flujo UX.
Quiero que propongas:
1. Las pantallas necesarias.
2. El objetivo de cada pantalla.
3. La pregunta mental que responde cada pantalla.
4. La emoción que debe activar.
5. El CTA principal.
6. Los elementos mínimos de contenido.
7. Qué no debería incluirse para no generar ruido cognitivo.
Entrégalo en una tabla clara.
Paso 3: crear wireframes de baja fidelidad
Aquí no buscamos colores, branding ni ilustraciones. Buscamos jerarquía: qué va arriba, qué va al centro, qué bloque sostiene la confianza, dónde aparece el CTA y qué información se muestra primero.
Crea wireframes de baja fidelidad para este flujo.
Para cada pantalla define:
- Nombre de la pantalla.
- Layout general.
- Bloques principales.
- Jerarquía visual.
- Texto sugerido para títulos y botones.
- Componentes necesarios.
- Comentario UX sobre por qué esa estructura ayuda a decidir.
No uses todavía colores ni estilo visual. Solo estructura.
Paso 4: preparar instrucciones para Figma
No basta con decirle a Claude "llévalo a Figma". Hay que darle una instrucción de producción clara.
Usa Figma para crear un primer wireframe editable basado en esta estructura.
Crea un archivo o sección llamada:
135ideas / Wireframe inicial / [Nombre del proyecto]
Configura:
- Frame desktop de 1440 px de ancho.
- Frame mobile de 390 px de ancho.
- Auto layout vertical.
- Espaciado consistente.
- Componentes simples para header, cards, botones, formularios y secciones.
- Usa escala de grises.
- No apliques branding final.
- Mantén nombres de capas claros.
Crea las siguientes pantallas:
1. Home / propuesta de valor.
2. Diagnóstico o selección de necesidad.
3. Resultado recomendado.
4. Detalle de solución.
5. Acción final o contacto.
Incluye anotaciones breves en cada pantalla explicando la intención UX.use_figma(create_frame, "Desktop 1440", {width: 1440, layout: "auto"})
use_figma(create_frame, "Mobile 390", {width: 390, layout: "auto"})
use_figma(add_component, "Header", {type: "nav", bg: "#F5F5F0"})
use_figma(add_component, "Hero", {height: 600, cta: "Agenda tu cita"})
✅ Frame creado. ✅ Componentes base añadidos. ✅ Anotaciones UX insertadas.
Paso 5: iterar desde Figma, no desde la imaginación
Una vez que el wireframe aparece en Figma, el trabajo real comienza. La pregunta ya no es "¿qué podríamos hacer?", sino "¿qué está funcionando y qué no está funcionando en esta estructura?".
Analiza este wireframe desde UX, conversión y neuromarketing.
Evalúa:
1. Claridad de la propuesta de valor.
2. Carga cognitiva.
3. Confianza percibida.
4. Jerarquía visual.
5. Fuerza del CTA.
6. Puntos donde el usuario podría abandonar.
7. Mejoras específicas por pantalla.
Luego propón una versión 2 del wireframe.✅ Propuesta de valor: Clara, "Agenda tu cita en 2 minutos" es directo y medible.
⚠️ Carga cognitiva: Los 5 tipos de servicio en la home generan duda. Sugerencia: reducir a 3 con íconos claros.
✅ Confianza: La tabla de precios visibles reduce el freno principal correctamente.
⚠️ CTA mobile: El botón no está visible sin hacer scroll en pantallas de 390px.
→ Propongo versión 2 con hero más limpio y CTA sticky en mobile.
Landing para una clínica de agenda dental online
Servicio: plataforma de reserva de citas dentales online para una clínica.
Público: adultos de 25 a 50 años que saben que necesitan ir al dentista pero lo postergan por miedo al costo, miedo al dolor o la fricción de tener que llamar y esperar.
Problema: el paciente visita el sitio web de la clínica, no encuentra precios claros, el formulario de contacto le parece tedioso y prefiere "llamar después"... pero nunca llama.
"Sé que tengo que ir al dentista, pero siempre lo postergo."
Promesa: agenda tu primera visita en menos de 2 minutos. Sin llamadas. Sin sorpresas de precio.
Flujo propuesto
| Pantalla | Objetivo | Pregunta mental | Acción |
|---|---|---|---|
| Home | Aliviar fricción e invitar a actuar | ¿Esta clínica es para mí? | Ver disponibilidad |
| Servicios | Identificar la necesidad | ¿Qué necesito exactamente? | Elegir tipo de cita |
| Precios | Eliminar el miedo al costo | ¿Cuánto me va a costar? | Ver tarifas claras |
| Agenda | Facilitar la reserva | ¿Puedo ir cuando yo quiera? | Elegir fecha y hora |
| Confianza | Reducir el miedo al tratamiento | ¿Esta clínica es de confianza? | Ver reseñas y equipo |
| Confirmación | Cerrar la reserva sin fricción | ¿Quedó agendado? | Confirmar y añadir recordatorio |
Demo · Diagnóstico de la fricción del paciente
Wireframe de referencia
- Header con logo + botón "Agenda ahora" visible.
- Hero: frase principal + subtítulo que elimina el miedo.
- Tres íconos de beneficio: Sin llamadas / Precio claro / Cita en 2 min.
- CTA principal grande y visible.
Título: Tu dentista sin esperas ni sorpresas.
CTA: Agenda tu cita ahora
- Tres tarjetas seleccionables con ícono y precio referencial.
- Limpieza dental / Revisión general / Urgencia.
- Botón: Ver disponibilidad.
Esta pantalla elimina la duda "¿qué tipo de cita pido?". El usuario elige y avanza sin tener que explicar su situación por teléfono.
- Lista de servicios con precio exacto o rango visible.
- Sin asteriscos ni letra chica.
- Sello: "Sin cobros sorpresa garantizado".
El precio visible es el mayor diferenciador de confianza. La mayoría de las clínicas lo esconden. Mostrarlo es un acto de autoridad.
- Calendario visual con días disponibles marcados.
- Selector de horario por bloques.
- Formulario mínimo: nombre, teléfono, confirmación.
- CTA: Confirmar mi hora.
El calendario elimina la barrera principal: tener que llamar. El formulario debe pedir solo lo imprescindible.
- Fotos del equipo dental con nombre y especialidad.
- Reseñas verificadas de pacientes reales.
- Preguntas frecuentes sobre dolor y procedimientos.
- CTA final: Empezar mi reserva.
El cierre debe reducir el miedo residual. El paciente no reserva solo una hora. Reserva una experiencia que espera que sea distinta a lo que imagina.
Prompt completo para usar en Claude
Actúa como estratega UX, diseñador de wireframes y consultor de neuromarketing de 135ideas.
Quiero crear una landing page para una clínica dental que permita agendar citas online.
Contexto:
El público son adultos de 25 a 50 años que saben que necesitan ir al dentista pero lo postergan por miedo al costo, al dolor o por la fricción de tener que llamar.
Insight:
"Sé que tengo que ir al dentista, pero siempre lo postergo."
Promesa:
Agenda tu primera visita en menos de 2 minutos. Sin llamadas. Sin sorpresas de precio.
Necesito que diseñes un wireframe editable en Figma con enfoque desktop y mobile.
Crea:
1. Home con propuesta de valor y eliminación de fricción.
2. Selección de tipo de servicio.
3. Tabla de precios transparentes.
4. Agenda online con calendario.
5. Bloque de confianza (equipo y reseñas).
6. Cierre con CTA y confirmación.
Condiciones de diseño:
- Baja fidelidad.
- Escala de grises.
- Auto layout.
- Capas bien nombradas.
- Frames separados para desktop 1440 px y mobile 390 px.
- Componentes simples: header, botón, card de servicio, calendario, FAQ, bloque de reseña.
- Incluye anotaciones UX al costado de cada pantalla.
- No uses branding final todavía.
- Prioriza claridad, confianza y reducción de fricción.
Además, crea una segunda sección en Figma llamada "Variantes hero" con tres alternativas:
1. Enfoque emocional: "Tu dentista sin miedo".
2. Enfoque práctico: "Cita dental en 2 minutos".
3. Enfoque comercial: "Primera limpieza a $9.990".
Quiero poder comparar las alternativas dentro del canvas.
La lógica de trabajo recomendada
Claude ordena.
Define problema, usuario, frenos, promesa y flujo.
Figma visualiza.
Convierte la estructura en wireframes editables y comparables.
Tú decides.
Evalúa estrategia, claridad, confianza, emoción y conversión.
Claude con Figma no es solo una integración técnica. Es una nueva forma de fabricar ideas: pensar, estructurar, visualizar, comparar e iterar más rápido.
Finalmente
La IA no reemplaza al diseñador, al estratega ni al profesor que sabe mirar una experiencia. Pero sí cambia el punto de partida.
Antes necesitábamos mucho tiempo para tener una primera versión visual. Ahora podemos tener una hipótesis de interfaz mucho antes. Y cuando una idea se vuelve visible, se puede discutir. Cuando se puede discutir, se puede mejorar. Y cuando se puede mejorar, puede convertirse en producto.
La pregunta no es solo: ¿qué idea tienes? La pregunta es: ¿qué tan rápido puedes convertir esa idea en algo que otros puedan entender, usar, evaluar y desear?
135ideas · La fábrica de ideas aplicadas.
Comentarios
Esta comunidad de ideas crece con tu voz. Comparte qué te ha parecido este artículo, qué dudas te quedan o qué aplicarías en tu día a día.
Sé el primero en comentar.
Únete a la conversación
Usa el mismo correo con el que te suscribiste y confirmaste el newsletter. Validamos tu comentario por email antes de publicarlo.