스크린샷 프롬프팅에는 한계가 있습니다. 디자인을 붙여넣으면 모델이 그럴듯한 근사치를 만들고, 수정하면 다음 턴에 또 벗어납니다. 아무것도 고정되지 않습니다. 모델에게는 턴 사이에 자신을 확인할 진실의 원천이 없습니다.

figmascope의 컨텍스트 번들은 이 계약을 바꿉니다. 매번 해석해야 하는 픽셀 참조 대신, 구조화되고 참조 가능한 파일 세트를 얻습니다 — 디자인 토큰, 레이아웃 IR, 컴포넌트 인벤토리, UI 문자열 — 세션 내내 유지되고 일관성을 갖습니다. Claude Code는 이를 읽고, 구현하며, 요청에 따라 자신의 출력을 검증할 수 있습니다.

이 가이드는 번들 내보내기부터 검토된 토큰 검증 구현까지 전체 파이프라인을 다룹니다.

이것이 결정론적인 이유

번들을 해석 가능이 아닌 참조 가능하게 만드는 세 가지 요소:

  1. 토큰이 타입 지정되고 키로 구분됩니다. tokens.json은 시맨틱 이름(spacing.16, color.7f5cfe)을 정확한 값에 매핑합니다. 모델은 디자인을 재처리하지 않고도 파일에 대해 출력을 확인할 수 있습니다.
  2. IR은 픽셀이 아닌 트리입니다. screens/home.json은 레이아웃을 stack/overlay/absolute/leaf 노드로 설명합니다 — 구현 대상(Compose, React 등)과 동일한 추상화를 사용합니다. 시각적 해석 단계가 없습니다.
  3. 번들은 턴 간에 안정적입니다. 레포지토리에 있으면, 세션의 모든 프롬프트가 동일한 파일을 참조할 수 있습니다. 토큰 드리프트가 감지 가능합니다: 모델에게 tokens.json에 대해 출력을 비교하도록 요청하면 기계적으로 수행할 수 있습니다.

1단계: 번들 생성

브라우저에서 figmascope.dev를 엽니다. Figma 파일 URL을 붙여넣습니다. 내보내기는 Figma REST API를 사용하여 클라이언트 측에서 실행됩니다 — Figma 개인 액세스 토큰은 localStorage에 저장되며 figmascope 서버로 전송되지 않습니다.

에이전트 컨텍스트 내보내기를 클릭하세요. 페이지에서 최상위 프레임을 내보내고, 디자인 토큰을 해결하고, IR을 구성하고, context-bundle.zip을 다운로드합니다.

2단계: 프로젝트에 압축 해제

# 프로젝트 루트에서
unzip ~/Downloads/context-bundle.zip -d ./design/

# 내용 확인
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

디렉토리 이름은 중요하지 않습니다 — design/은 단순한 관례입니다. 중요한 것은 Claude Code가 작업 디렉토리에서 파일을 읽을 수 있다는 것입니다.

3단계: 레포지토리에서 Claude Code 시작

cd my-app
claude

Claude Code는 전체 파일 접근 권한을 가지고 레포지토리 루트에서 시작합니다. 전체 세션에 걸쳐 트리의 모든 파일을 읽고, 쓰고, 참조할 수 있습니다 — 번들 패턴을 작동하게 하는 핵심 기능입니다.

4단계: 에이전트 방향 설정

구현 전에 읽기 프롬프트로 시작하세요. 이렇게 하면 명세가 세션 컨텍스트에 로드되고, 코드를 작성하기 전에 내보내기가 올바른지 확인할 수 있습니다.

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는 대상(기본적으로 Jetpack Compose), 토큰 소스, 그리고 CONTEXT.md 헤더의 경고를 보고할 것입니다 — 그라데이션 채우기, 누락된 토큰 매핑, 지원되지 않는 효과. 200줄의 코드를 생성한 후가 아니라 지금 이 문제를 발견합니다.

빠른 토큰 확인으로 후속 조치하세요:

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

이것은 토큰 파일이 올바르게 파싱되었음을 확인하고 구현 전에 팔레트에 대한 심상을 제공합니다.

5단계: 화면 구현

이제 구현 프롬프트입니다. 어떤 파일이 어떤 결정에 권위가 있는지 명시적으로 지정하세요:

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는 IR을 읽고, 노드 트리를 순회하고, 각 노드를 Compose 기본 요소에 매핑하고, 키로 토큰 값을 가져올 것입니다. 출력이 추적 가능합니다: 모든 .dp 값은 간격 토큰에 해당해야 하고, 모든 Color(0xFF...)는 색상 토큰과 일치해야 합니다.

6단계: 토큰 드리프트 감지 및 수정

첫 번째 구현 단계 후, 시각적으로 검토하기 전에 드리프트 검사를 실행하세요. 이것이 스크린샷 프롬프팅 대비 번들의 핵심 장점입니다 — 모델에게 자신의 출력을 기계적으로 검증하도록 요청할 수 있습니다.

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.

간격에 대해서도 동일하게 하세요:

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.

이 루프 — 구현, 드리프트 확인, 수정 — 는 빠르게 수렴합니다. 두 번째 또는 세 번째 단계까지 출력은 완전히 토큰 참조됩니다.

팁: 첫 번째 프롬프트에 _meta.json 경고 포함

design/_meta.json에는 warnings 배열이 있습니다. 이것은 내보내기가 완전히 해결하지 못한 항목들입니다: 그라데이션 채우기, 내장 이미지, 토큰 동등물이 없는 효과. 구현하기 전에 읽으세요:

cat design/_meta.json

출력에 다음과 같은 내용이 있다면:

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

구현 프롬프트에 명시적으로 추가하세요: "히어로 배경 채우기를 건너뛰고 // TODO: gradient를 남기세요. 아바타 노드는 회색 배경이 있는 placeholder AsyncImage를 사용하세요."

이렇게 하면 Claude가 조용히 근사치를 계산하는 것을 방지합니다 — 지시한 대로 수행합니다.

이것이 스크린샷 프롬프팅보다 나은 이유

멀티턴 안전합니다. 토큰 파일과 IR은 턴 간에 변경되지 않습니다. 12번째 턴에서 "카드 패딩에 올바른 간격을 사용했나요?"라고 물어봐도 정확한 답변을 받을 수 있습니다. 진실의 원천이 여전히 디스크에 있기 때문입니다.

diff 친화적입니다. 디자인 변경 후 재내보내기하면 새 번들이 이전 버전에 대한 diff를 생성합니다. Claude에게 diff를 검토하고 영향받은 컴포넌트만 업데이트하도록 요청할 수 있습니다 — 전체 재구현이 필요 없습니다.

재업로드가 없습니다. 번들이 레포지토리에 있습니다. 매 새 화면마다 스크린샷을 다시 붙여넣지 않아도 됩니다. 각 새 화면은 단지 design/screens/<name>.json입니다 — 다음 프롬프트에서 참조할 파일 하나 더.

공백에 대해 솔직합니다. CONTEXT.md와 _meta.json은 번들이 다루지 않는 것을 명시적으로 나열합니다. 스크린샷 프롬프팅에는 동등한 것이 없습니다 — 모델이 공백을 통해 추측합니다.

figmascope 메인 앱이 브라우저에서 내보내기를 처리합니다 — Figma URL을 붙여넣고, 번들을 내보내면, 결정론적 명세에 대해 Claude Code를 실행할 준비가 됩니다.