Los prompts con capturas de pantalla tienen un techo. Pegas el diseño, el modelo hace una aproximación plausible, la corriges, en el siguiente turno se desvía de nuevo. Nada está anclado. El modelo no tiene una fuente de verdad con la que verificarse entre turnos.

El bundle de contexto de figmascope cambia el contrato. En lugar de una referencia de píxeles que el modelo tiene que interpretar cada vez, obtienes un conjunto estructurado y referenciable de archivos — design tokens, IR de layout, inventario de componentes, cadenas de UI — que permanecen en la sesión y son consistentes. Claude Code puede leerlos, implementar desde ellos y verificar su propia salida contra ellos bajo demanda.

Este tutorial cubre el pipeline completo desde la exportación del bundle hasta la implementación revisada y verificada con tokens.

Qué hace esto determinista

Tres cosas hacen que el bundle sea referenciable en lugar de interpretable:

  1. Los tokens son tipados y con clave. tokens.json mapea nombres semánticos (spacing.16, color.7f5cfe) a valores exactos. El modelo puede verificar su salida contra el archivo sin reprocesar el diseño.
  2. El IR es un árbol, no píxeles. screens/home.json describe el layout en términos de nodos stack/overlay/absolute/leaf — la misma abstracción que usa el target de implementación (Compose, React, etc.). No hay paso de interpretación visual.
  3. El bundle es estable entre turnos. Una vez que está en el repositorio, cada prompt de la sesión puede referenciar los mismos archivos. La desviación de tokens es detectable: pídele al modelo que compare su salida contra tokens.json y puede hacerlo mecánicamente.

Paso 1: Generar el bundle

Abre figmascope.dev en tu navegador. Pega la URL de tu archivo Figma. El exportador se ejecuta en el lado del cliente usando la API REST de Figma — tu token de acceso personal de Figma se almacena en localStorage y nunca se envía a los servidores de figmascope.

Haz clic en Export Agent Context. La página exporta los frames de nivel superior, resuelve los design tokens, construye el IR y descarga context-bundle.zip.

Paso 2: Descomprimir en tu proyecto

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

# confirm what you have
find design/ -type f | sort
# design/CONTEXT.md
# design/_meta.json
# design/components/inventory.json
# design/screens/home.json
# design/screens/home.png
# design/screens/settings.json
# design/screens/settings.png
# design/strings.json
# design/tokens.json

El nombre del directorio no importa — design/ es solo una convención. Lo que importa es que Claude Code pueda leer los archivos desde el directorio de trabajo.

Paso 3: Iniciar Claude Code en tu repositorio

cd my-app
claude

Claude Code comienza en la raíz de tu repositorio con acceso completo a los archivos. Puede leer, escribir y referenciar cualquier archivo en el árbol durante toda la sesión — esta es la capacidad clave que hace que el patrón de bundle funcione.

Paso 4: Orientar al agente

Comienza con un prompt de lectura antes de cualquier implementación. Esto carga la especificación en el contexto de la sesión y te permite verificar que la exportación se ve bien antes de escribir código.

Read ./design/CONTEXT.md and tell me:
1. What target framework is this bundle for?
2. What token files does it reference?
3. Are there any warnings I should know about before implementing?

Claude informará del target (Jetpack Compose por defecto), la fuente de tokens y cualquier advertencia del encabezado de CONTEXT.md — rellenos de degradado, mapeos de tokens faltantes, efectos no soportados. Detectas estos ahora, no después de generar 200 líneas de código.

Haz un seguimiento con una comprobación rápida de tokens:

List the top 10 color tokens from ./design/tokens.json.
Then list the spacing tokens.

Esto confirma que el archivo de tokens se analizó correctamente y te da un modelo mental de la paleta antes de la implementación.

Paso 5: Implementar una pantalla

Ahora el prompt de implementación. Sé explícito sobre qué archivos son autoritativos para qué decisiones:

Implement ./design/screens/home.json as a Jetpack Compose screen.

Rules:
- CONTEXT.md constraints apply. Read it if you haven't already.
- All spacing, color, and radius values must come from ./design/tokens.json.
  Map token keys to the appropriate Compose primitives (e.g. spacing.16 → 16.dp).
- UI strings must use keys from ./design/strings.json via stringResource().
  Fall back to the "fallback" field value if no resource ID is available yet.
- The IR node kinds map as follows:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box with Modifier.offset
    leaf (text)             → Text with TextStyle
    leaf (rectangle)        → Box with Modifier.background
- Do not invent any value not present in the token or IR files.
  If something is missing, leave a TODO comment with the token key you expected.

Claude Code leerá el IR, recorrerá el árbol de nodos, mapeará cada nodo a su primitiva de Compose y extraerá valores de token por clave. La salida es rastreable: cada valor .dp debería corresponder a un token de espaciado, cada Color(0xFF...) debería coincidir con un token de color.

Paso 6: Detectar y corregir la desviación de tokens

Después del primer paso de implementación, ejecuta una verificación de desviación antes de revisar visualmente. Esta es la ventaja clave del bundle sobre los prompts con capturas de pantalla — puedes pedirle al modelo que verifique su propia salida mecánicamente.

Compare every color value in the generated HomeScreen.kt against ./design/tokens.json.
List any hex values in the output that don't correspond to a color token key.
For each one, identify the correct token and replace the hardcoded value.

Haz lo mismo para el espaciado:

Compare every .dp value in HomeScreen.kt against the spacing tokens in ./design/tokens.json.
Flag any value that doesn't match a spacing token. Replace with the correct token reference.

Este bucle — implementar, verificar desviación, corregir — converge rápido. En el segundo o tercer paso, la salida está completamente referenciada con tokens.

Consejo: incluye las advertencias de _meta.json en tu primer prompt

design/_meta.json contiene un array warnings. Estas son cosas que el exportador no pudo resolver completamente: rellenos de degradado, imágenes embebidas, efectos sin equivalente de token. Léelos antes de implementar:

cat design/_meta.json

Si la salida incluye algo como:

{
  "warnings": [
    "node 'hero-background': gradientFill not fully supported — background fill omitted",
    "node 'avatar': imageFill — reference only, no pixel data"
  ]
}

Añade estos explícitamente a tu prompt de implementación: "Omite el relleno del fondo hero y deja un // TODO: gradient. Para el nodo avatar, usa un AsyncImage de marcador con fondo gris."

Esto evita que Claude aproxime silenciosamente — hará lo que le dijiste en lugar de adivinar.

Por qué esto supera a los prompts con capturas de pantalla

Seguro en múltiples turnos. El archivo de tokens y el IR no cambian entre turnos. Puedes preguntar "¿usaste el espaciado correcto para el relleno de la tarjeta?" en el turno 12 y obtener una respuesta precisa, porque la fuente de verdad sigue estando en disco.

Compatible con diffs. Cuando vuelves a exportar después de un cambio de diseño, el nuevo bundle produce un diff contra el anterior. Puedes pedirle a Claude que revise el diff y actualice solo los componentes afectados — sin reimplementación completa necesaria.

Sin re-subida. El bundle vive en tu repositorio. No vuelves a pegar capturas de pantalla para cada pantalla nueva. Cada pantalla nueva es solo design/screens/<name>.json — un archivo más para referenciar en el próximo prompt.

Honesto sobre las brechas. CONTEXT.md y _meta.json listan explícitamente qué no cubre el bundle. Los prompts con capturas de pantalla no tienen equivalente — el modelo simplemente adivina a través de las brechas.

La app principal de figmascope gestiona la exportación en tu navegador — pega tu URL de Figma, exporta el bundle y ya estás listo para ejecutar Claude Code contra una especificación determinista.