Crear una página de inicio desde un diseño de Figma con Cursor

A quién le sirve. Diseñadores y agencias pequeñas que quieren pasar un diseño de Figma a una página web que funcione sin escribir el código a mano.

Qué hicieron

El autor creó un repositorio de Git local sincronizado con GitHub y lo abrió en Cursor, con su prueba gratuita del plan Pro, y con el MCP de Figma conectado (el enlace entre Cursor y Figma). En el modo desarrollador de Figma seleccionó la sección del diseño que quería construir y copió su dirección. La pegó en un prompt sencillo de Cursor pidiendo HTML y CSS. Cursor resaltó el código generado para que pudiera revisarlo y quedarse con él o volver a generarlo.

Cómo salió

Un prompt produjo la sección de miniaturas con colores, composición y efectos de los botones al pasar el ratón fieles al diseño, mucho mejor que lo que dio Lovable. Falló en la tipografía y sus grosores, probablemente porque Rotis no es una fuente web gratuita. Aún hizo falta ajustar más.

Conviene saber

El autor descartó Claude Code porque pedía un plan Pro de 17 $ al mes. La prueba gratuita de Cursor Pro bastó para empezar.

Qué necesitas

• Cursor instalado, que es un editor de código con IA, con un plan o una prueba gratuita que admita su agente
• El conector de Figma para Cursor, llamado MCP, que es el enlace entre las dos herramientas
• Un archivo de Figma con tu diseño y acceso al modo desarrollador
• Una carpeta de proyecto con Git, a ser posible sincronizada con GitHub

Cómo hacerlo tú, paso a paso

1. Crea una carpeta de proyecto con Git, el sistema que guarda el historial de cambios del código, y ábrela en Cursor.
2. Conecta Figma a Cursor con su conector.
3. En Figma, activa el modo desarrollador, selecciona la sección que quieres construir y copia su dirección.
4. En Cursor, pega la dirección en una instrucción sencilla en la que pidas HTML y CSS, que son los lenguajes con los que se escriben las páginas web.
5. Revisa el código que genera y el resultado visible, y compáralo con el diseño de Figma.
6. Decide si te quedas con el código o si prefieres que lo genere de nuevo.
7. Repite sección a sección hasta completar la página y ajusta lo que falte.

Conéctate a mi archivo de Figma de [nombre del proyecto] mediante MCP y construye una página de inicio que funcione a partir del diseño, respetando lo más posible la composición, los espacios y los componentes. Enséñame el resultado ya visible para que lo compare con el diseño de Figma. Habrás terminado cuando yo dé el visto bueno.

Consejos

• Hazlo por secciones, no la página entera de golpe.
• La tipografía suele fallar si no es una fuente libre para web, como le pasó al autor. Ten una alternativa preparada.
• Un solo mensaje no deja la página perfecta. Cuenta con ajustar.

Preguntas frecuentes

Fuentes

• designphilosophy en Substack ↗
• brasil.uxdesign.cc ↗

En el directorio desde el 3 de octubre de 2026.