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

> Pegando en Cursor el enlace de una sección de Figma, el autor obtuvo en un solo prompt el código con colores, diseño y botones fieles al original.

- **Tipo:** Caso de uso
- **Tema:** Programación
- **Herramientas:** Cursor
- **Dificultad:** media
- **Origen:** [designphilosophy en Substack](https://designphilosophy.substack.com/p/getting-remarkable-results-quickly)
- **En el directorio desde:** 3 de octubre de 2026
- **URL:** https://conqueia.com/caso/crear-una-pagina-de-inicio-desde-un-diseno-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.

## Pruébalo con Cursor

```
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

### ¿Hace falta saber programar?

Poco: hay que saber abrir un proyecto y revisar el resultado. Para los ajustes finos conviene tener a alguien que entienda HTML y CSS.

### ¿Es gratis?

El autor empezó con la prueba gratuita del plan Pro de Cursor. Mira cuánto dura y qué incluye ahora.

## Fuentes

- [designphilosophy en Substack](https://designphilosophy.substack.com/p/getting-remarkable-results-quickly)
- [brasil.uxdesign.cc](https://brasil.uxdesign.cc/design-to-code-construindo-um-portfolio-com-figma-e-cursor-b68118300c8f?gi=5fc8aee38194)

---

Fuente: conqueia.com/caso/crear-una-pagina-de-inicio-desde-un-diseno-de-figma-con-cursor