El Composer de Cursor puede escribir mucho código de UI. Lo que no puede hacer es leer tu archivo Figma. Pega una captura de pantalla y adivina — espaciado incorrecto, valores de color inventados, nombres de componentes inventados que no coinciden con nada en tu base de código. El problema no es el modelo. Es el contexto estructurado que falta.

figmascope lo soluciona. Exporta tu archivo Figma como un bundle zip: design tokens, árboles de layout por pantalla, renders de referencia 2×, un inventario de componentes y cadenas de UI — todo lo que el agente de Cursor necesita para generar código preciso en lugar de código de aspecto plausible.

Este tutorial cubre el pipeline completo: URL de Figma → bundle de contexto → prompt de Cursor → salida revisada.

Qué hay en el bundle

Cuando figmascope exporta tu archivo, el zip contiene:

El bundle permanece en tu máquina. Nunca se re-sube a ningún sitio.

Paso 1: Generar el bundle

Ve a figmascope y pega la URL de tu archivo Figma en el campo de entrada. El exportador se ejecuta en tu navegador contra la API REST de Figma — necesitarás un token de acceso personal la primera vez (almacenado en localStorage, nunca enviado a los servidores de figmascope).

Haz clic en Export Agent Context. La página procesa cada frame, resuelve los tokens, construye el IR y descarga context-bundle.zip en tu máquina.

Si tu archivo tiene muchos frames, solo se incluyen los frames de nivel superior que no son componentes ni miniaturas. El _meta.json muestra exactamente qué frames fueron exportados y cualquier advertencia (rellenos de degradado, efectos no soportados).

Paso 2: Descomprimir en tu proyecto

Pon el bundle donde Cursor pueda verlo — un directorio design/ en la raíz de tu repositorio es el patrón más limpio.

# from your project root
unzip ~/Downloads/context-bundle.zip -d ./design/

# verify the structure
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Añade design/ a .gitignore si no quieres hacer commit del bundle. O hazlo — es determinista; el mismo archivo Figma en el mismo estado siempre produce el mismo bundle, por lo que los diffs son significativos.

Paso 3: Añadir un fragmento de .cursorrules

Cursor lee .cursorrules en la raíz del repositorio y lo antepone a cada contexto de chat. Aquí es donde conectas el agente al bundle.

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

Este único bloque evita las tres fuentes de desviación más comunes: colores inventados, cadenas codificadas directamente y conjeturas de layout desde la captura de pantalla.

Paso 4: Abrir Cursor Composer e implementar una pantalla

Abre Composer (Cmd+I en macOS). Fija los archivos antes de hacer el prompt: haz clic en el icono de clip y añade design/CONTEXT.md, design/tokens.json y design/screens/home.json. Luego haz el prompt:

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursor leerá los archivos fijados, mapeará los nodos del IR a los primitivos de tu framework y generará la implementación. La salida está referenciada con tokens — si inspeccionas el código generado, cada valor de espaciado debería rastrearse hasta una clave en tokens.json.

Paso 5: Revisar e iterar

Abre design/screens/home.png junto a la salida renderizada. El PNG es una exportación 2× de Figma — muestra exactamente cómo debería verse el diseño. Las diferencias son significativas: apuntan a brechas en el mapeo del IR o valores de token que no se aplicaron.

Problemas comunes y prompts de seguimiento:

Desviación de tokens — el agente usó un hex codificado directamente en lugar de un token:

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Componente faltante — el IR referencia un ID de componente que el agente no resolvió:

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Layout incorrecto — el espaciado o alineación no coincide con el PNG:

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

Qué funciona, qué no

Funciona bien: pantallas planas con layouts stack, espaciado y color basados en tokens, texto con refs de cadenas, patrones simples de tarjetas y listas. Cursor los maneja bien una vez que el IR está en contexto — deja de adivinar y empieza a mapear.

Funciona menos bien: overlays posicionados de forma absoluta complejos (Cursor a veces lee mal las coordenadas de offset), rellenos de degradado (marcados como advertencias en _meta.json — Cursor aproximará) e iconos vectoriales (el IR almacena solo un ID de referencia, no datos de ruta).

Solo captura de pantalla vs. bundle: usar solo capturas de pantalla es más rápido para empezar pero no determinista. Cada sesión comienza desde cero. El modelo puede clavar el espaciado una vez y errarlo en el siguiente turno. El bundle es referenciable durante toda la sesión — Cursor puede verificar su propia salida contra el archivo de tokens en cualquier momento sin volver a subir nada.

Consejo: revisa las advertencias de _meta.json antes de hacer el prompt

Antes de tu primer prompt de implementación, lee design/_meta.json. El array warnings lista todo lo que el exportador no pudo resolver completamente: rellenos de degradado, mapeos de tokens faltantes, frames con imágenes embebidas. Añade una nota sobre estos en tu prompt para que el agente no intente implementarlos y silenciosamente recurra a valores codificados.

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

Si la salida muestra "gradientFill: not fully supported" en un nodo específico, dile a Cursor que omita el fondo de ese nodo y deje un comentario // TODO: gradient en su lugar.

Resumen

El flujo de trabajo es: exporta una vez, referencia en todas partes. El bundle es una especificación estable y legible por máquina que Cursor puede consultar en múltiples turnos sin reprocesar el diseño. Obtienes código con tokens precisos, referencias de cadenas y layout correcto en lugar de una aproximación de captura de pantalla — y cuando algo se desvía, puedes señalar al agente de vuelta a la fuente de verdad en una línea.

Ejecuta esto tú mismo en figmascope.dev — pega tu URL de Figma, haz clic en Export Agent Context y descomprime el bundle en tu espacio de trabajo de Cursor en menos de dos minutos.