AI của Cursor có thể viết rất nhiều code UI. Điều nó không thể làm là đọc tệp Figma của bạn. Bạn dán ảnh chụp màn hình vào và nó đoán — spacing sai, giá trị màu sai, tên component được bịa đặt không khớp với bất cứ thứ gì trong codebase của bạn. Vấn đề không phải ở model. Mà ở ngữ cảnh có cấu trúc bị thiếu.

figmascope lấp đầy khoảng trống đó. Nó xuất tệp Figma dưới dạng gói zip — design tokens, cây bố cục theo từng màn hình, renders tham chiếu, danh mục component, chuỗi UI — mọi thứ mà mô hình ngôn ngữ cần để tạo code chính xác thay vì code trông có vẻ hợp lý. Ứng dụng chính chạy hoàn toàn trong trình duyệt của bạn mà không cần backend hoặc tải lên.

Trang này hướng dẫn toàn bộ quy trình từ URL Figma đến codegen Cursor. Nếu bạn sử dụng Claude Code thay vì Cursor, hãy xem Figma sang Claude Code để biết quy trình dành riêng cho Claude. Để xem tổng quan rộng hơn về những gì làm cho handoff sẵn sàng cho agent, hãy xem AI Design Handoff.

Có gì trong gói ngữ cảnh

Khi bạn chạy figmascope trên tệp Figma, bạn nhận được một .zip chứa:

Không có gì được tải lên. Personal Access Token của bạn chỉ tồn tại trong bộ nhớ trình duyệt và chỉ được gửi đến api.figma.com. File zip được lắp ráp ở phía client và được giao cho trình duyệt tải xuống.

Bước 1 — Lấy Figma Personal Access Token

Đi đến Figma → Account Settings → Personal Access Tokens và tạo token với phạm vi Nội dung tệp: chỉ đọc. Đó là mức tối thiểu cần thiết.

Token không bao giờ rời khỏi phiên trình duyệt của bạn; figmascope gửi nó trong header X-Figma-Token trên các yêu cầu đến api.figma.com và không ở nơi nào khác. Xem bảo mật PAT và figmascope để biết mô hình mối đe dọa đầy đủ.

Bước 2 — Xuất gói ngữ cảnh

  1. Mở figmascope.dev trong trình duyệt của bạn.
  2. Dán URL tệp Figma (ví dụ: https://www.figma.com/file/ABC123/MyDesign).
  3. Dán Personal Access Token của bạn.
  4. Nhấn Export Context Bundle.
  5. File figmascope-<fileKey>.zip tải xuống máy của bạn.

Giải nén vào dự án của bạn. Vị trí hợp lý là thư mục design/ ở gốc repo:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Bước 3 — Mở dự án trong Cursor

Mở thư mục dự án trong Cursor như bình thường. Thư mục design/ bây giờ là một phần của workspace và trình lập chỉ mục của Cursor sẽ bao gồm nó.

Trước khi bạn nhắc model, hãy đọc design/CONTEXT.md một lần. Nó cho bạn biết frame nào đã được xuất, sơ đồ đặt tên token là gì và liệt kê bất kỳ cảnh báo nào được phát ra trong quá trình xuất (ví dụ: layout-mode-none-inferred cho các frame không có auto-layout). Đây là những cảnh báo giống như agent của bạn sẽ gặp.

Bước 4 — Viết prompt Cursor hiệu quả

Điểm bắt đầu đơn giản nhất là prompt tham chiếu bạn có thể dán vào Cursor Chat:

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

Composer của Cursor sẽ tuân theo các ràng buộc của CONTEXT.md, tra cứu cây bố cục trong Home.json, lấy spacing từ tokens.json và tạo code khớp với hệ thống thiết kế của bạn thay vì xấp xỉ nó.

Model không biết thiết kế của bạn. Nó biết những gì bạn cung cấp cho nó. JSON có cấu trúc vượt trội hơn ảnh chụp màn hình mọi lúc.

Bước 5 — Ánh xạ tokens vào cấu hình framework

tokens.json được xuất sử dụng hình dạng lồng nhau theo phong cách W3C:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Đối với Tailwind, hãy yêu cầu Cursor tạo khối theme.extend của tailwind.config.js trực tiếp từ tokens.json. Xem Xuất Design Token cho AI Agents để tìm hiểu sâu về định dạng token và suy luận tần suất. Cấu trúc token đủ phẳng để duyệt trong một script Node nếu bạn muốn tự động hóa nó:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Bước 6 — Xử lý dự án đa màn hình

Mỗi frame trong tệp Figma trở thành screens/<FrameName>.json và .png tương ứng. Đối với dự án có hàng chục màn hình, hãy xử lý chúng theo từng bước. Cursor Composer xử lý tốt một màn hình mỗi phiên; cung cấp screen JSON và PNG dưới dạng tham chiếu @file rõ ràng:

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

Danh mục component (design/components/inventory.json) giúp bạn tránh trôi dạt tên qua các màn hình — mỗi component được tham chiếu trong screen JSON có id và name chuẩn trong danh mục. Nếu bạn tạo thư viện component chia sẻ, hãy sử dụng những tên đó làm nguồn sự thật.

IR trông như thế nào trong thực tế

JSON theo màn hình sử dụng cấu trúc node đệ quy. Ví dụ đơn giản hóa cho component card:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Các tham chiếu token sử dụng chuỗi $ref khớp với các khóa trong tokens.json. Model có thể phân giải chúng mà không cần bước tra cứu riêng. Xem per-screen IR được giải thích để biết schema node đầy đủ.

Giữ ngữ cảnh mới

Các tệp thiết kế thay đổi. Thói quen tốt: chạy lại figmascope bất cứ khi nào thiết kế có sửa đổi đáng kể, commit thư mục design/ đã cập nhật và ghi chú phiên bản trong mô tả PR. _meta.json bao gồm dấu thời gian và trường lastModified của tệp Figma, vì vậy bạn có thể so sánh khi nào gói được tạo lại lần cuối so với khi nào tệp được chạm lần cuối.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Nếu warnings không trống, hãy giải quyết chúng trước khi giao ngữ cảnh cho agent. Cảnh báo phổ biến: strings-collision (hai node có cùng slug phân giải thành cùng khóa) và layout-mode-none-inferred (một container không có auto-layout rõ ràng, nơi figmascope suy luận bố cục từ vị trí con).

Các quy trình Cursor phổ biến

Cập nhật dựa trên diff

Khi thiết kế có sửa đổi nhỏ — chẳng hạn một giá trị spacing thay đổi từ spacing.4 thành spacing.6 trên component card — bạn có thể yêu cầu Cursor chỉ áp dụng delta thay vì tạo lại toàn bộ màn hình:

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

Điều này hoạt động vì các component được tạo ra tham chiếu tên token dưới dạng class Tailwind (gap-spacing-4) thay vì giá trị pixel thô. Thay đổi token là tìm kiếm và thay thế, không phải thiết kế lại.

Thêm màn hình mới vào codebase hiện có

Khi bạn thêm màn hình N vào codebase đã có màn hình 1 đến N-1 được triển khai, phần bổ sung prompt quan trọng là căn cứ agent vào thư viện component hiện có:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

Danh mục component là cầu nối giữa tên component thiết kế và tên tệp codebase. Không có nó, agent sẽ tạo ra các đường dẫn import và tạo ra các component trùng lặp.

Tạo baseline hệ thống thiết kế

Trước khi triển khai bất kỳ màn hình nào, hãy sử dụng gói ngữ cảnh để tạo baseline hệ thống thiết kế: cấu hình token, component bảng màu và các kiểu typography cơ sở. Điều này neo tất cả các triển khai màn hình tiếp theo trên cùng một nền tảng:

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

Khi baseline này tồn tại, mỗi triển khai màn hình có thể tham chiếu nó. Agent sẽ không suy ra lại màu sắc từ thiết kế trong mỗi phiên — nó sẽ sử dụng các class đã được tạo.

Các hạn chế cần biết trước

Gói ngữ cảnh của figmascope nắm bắt cấu trúc tĩnh. Một số điều nó không thể biểu diễn:

Tệp CONTEXT.md ghi chú những frame nào bị loại trừ và lý do tại sao, vì vậy agent không cố gắng triển khai thứ gì đó cố ý nằm ngoài phạm vi.