Prompting bằng ảnh chụp màn hình có giới hạn. Bạn dán thiết kế vào, model tạo ra một xấp xỉ hợp lý, bạn sửa nó, lượt tiếp theo nó lại trôi dạt. Không có gì được neo chặt. Model không có nguồn sự thật để tự kiểm tra giữa các lượt.

Context bundle của figmascope thay đổi hợp đồng. Thay vì một tham chiếu pixel mà model phải diễn giải mỗi lần, bạn nhận được một tập hợp file có cấu trúc, có thể tham chiếu — design tokens, layout IR, component inventory, UI strings — nằm trong phiên và duy trì nhất quán. Claude Code có thể đọc chúng, triển khai từ chúng, và kiểm tra output của chính mình theo yêu cầu.

Hướng dẫn này bao gồm toàn bộ pipeline từ xuất bundle đến triển khai được xem xét, đã xác minh token.

Điều gì làm cho điều này có tính xác định

Ba điều làm cho bundle có thể tham chiếu thay vì có thể diễn giải:

  1. Tokens được gõ và có khóa. tokens.json ánh xạ tên ngữ nghĩa (spacing.16, color.7f5cfe) đến các giá trị chính xác. Model có thể kiểm tra output của nó với file mà không cần xử lý lại thiết kế.
  2. IR là một cây, không phải pixel. screens/home.json mô tả layout theo các node stack/overlay/absolute/leaf — cùng abstraction mà mục tiêu triển khai (Compose, React, v.v.) sử dụng. Không có bước diễn giải trực quan.
  3. Bundle ổn định qua các lượt. Khi nó đã trong repo, mọi prompt trong phiên đều có thể tham chiếu cùng các file. Token drift có thể phát hiện được: yêu cầu model so sánh output của nó với tokens.json và nó có thể làm điều đó một cách cơ học.

Bước 1: Tạo bundle

Mở figmascope.dev trong trình duyệt của bạn. Dán URL file Figma của bạn. Trình xuất chạy phía client sử dụng Figma REST API — Figma personal access token của bạn được lưu trong localStorage và không bao giờ được gửi đến máy chủ của figmascope.

Nhấp Export Agent Context. Trang xuất các frame cấp cao nhất, giải quyết design tokens, xây dựng IR, và tải xuống context-bundle.zip.

Bước 2: Giải nén vào project

# từ root project của bạn
unzip ~/Downloads/context-bundle.zip -d ./design/

# xác nhận những gì bạn có
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

Tên thư mục không quan trọng — design/ chỉ là quy ước. Điều quan trọng là Claude Code có thể đọc các file từ thư mục làm việc.

Bước 3: Khởi động Claude Code trong repo của bạn

cd my-app
claude

Claude Code khởi động trong root repo của bạn với toàn quyền truy cập file. Nó có thể đọc, ghi, và tham chiếu bất kỳ file nào trong cây trên toàn bộ phiên — đây là khả năng chính làm cho mẫu bundle hoạt động.

Bước 4: Định hướng agent

Bắt đầu với một prompt đọc trước bất kỳ triển khai nào. Điều này tải thông số vào context phiên và cho phép bạn xác minh bản xuất trông đúng trước khi viết bất kỳ code nào.

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 sẽ báo cáo lại mục tiêu (Jetpack Compose theo mặc định), nguồn token, và bất kỳ cảnh báo nào từ header CONTEXT.md — gradient fill, thiếu token mapping, các hiệu ứng không được hỗ trợ. Bạn phát hiện chúng bây giờ, không phải sau khi tạo ra 200 dòng code.

Tiếp theo với kiểm tra token nhanh:

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

Điều này xác nhận file token được phân tích chính xác và cho bạn mô hình tinh thần về bảng màu trước khi triển khai.

Bước 5: Triển khai một màn hình

Bây giờ là prompt triển khai. Hãy rõ ràng về những file nào có thẩm quyền cho những quyết định nào:

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 sẽ đọc IR, duyệt qua cây node, ánh xạ mỗi node đến Compose primitive của nó, và lấy các giá trị token theo khóa. Output có thể truy tìm: mỗi giá trị .dp phải tương ứng với một spacing token, mỗi Color(0xFF...) phải khớp với một color token.

Bước 6: Phát hiện và sửa token drift

Sau lần triển khai đầu tiên, chạy kiểm tra drift trước khi xem xét trực quan. Đây là ưu điểm chính của bundle so với screenshot prompting — bạn có thể yêu cầu model xác minh output của chính nó một cách cơ học.

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.

Làm tương tự cho spacing:

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.

Vòng lặp này — triển khai, kiểm tra drift, sửa — hội tụ nhanh. Đến lần thứ hai hoặc thứ ba, output được tham chiếu token đầy đủ.

Mẹo: bao gồm cảnh báo _meta.json trong prompt đầu tiên của bạn

design/_meta.json chứa một mảng warnings. Đây là những thứ trình xuất không thể giải quyết hoàn toàn: gradient fill, ảnh nhúng, các hiệu ứng không có tương đương token. Đọc chúng trước khi triển khai:

cat design/_meta.json

Nếu output bao gồm điều gì đó như:

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

Thêm những điều này rõ ràng vào prompt triển khai của bạn: "Skip the hero background fill and leave a // TODO: gradient. For the avatar node, use a placeholder AsyncImage with a grey background."

Điều này ngăn Claude xấp xỉ một cách thầm lặng — nó sẽ làm những gì bạn nói thay vì đoán.

Tại sao điều này tốt hơn screenshot prompting

An toàn đa lượt. File token và IR không thay đổi giữa các lượt. Bạn có thể hỏi "bạn có sử dụng đúng spacing cho card padding không?" ở lượt 12 và nhận được câu trả lời chính xác, vì nguồn sự thật vẫn còn trên đĩa.

Thân thiện với diff. Khi bạn xuất lại sau khi thay đổi thiết kế, bundle mới tạo ra một diff so với bundle cũ. Bạn có thể yêu cầu Claude xem xét diff và cập nhật chỉ các component bị ảnh hưởng — không cần triển khai lại đầy đủ.

Không cần tải lên lại. Bundle nằm trong repo của bạn. Bạn không dán lại ảnh chụp màn hình cho mỗi màn hình mới. Mỗi màn hình mới chỉ là design/screens/<name>.json — thêm một file để tham chiếu trong prompt tiếp theo.

Thành thật về khoảng trống. CONTEXT.md và _meta.json liệt kê rõ ràng những gì bundle không bao gồm. Screenshot prompting không có tương đương — model chỉ đoán qua các khoảng trống.

Ứng dụng figmascope chính xử lý xuất trong trình duyệt của bạn — dán URL Figma của bạn, xuất bundle, và bạn đã sẵn sàng chạy Claude Code theo một thông số xác định.