Aider là một AI pair programmer hoạt động trên terminal. Nó đọc các file bạn chỉ định, tạo ra các chỉnh sửa dưới dạng unified diff, và áp dụng chúng trực tiếp vào codebase của bạn. Mọi thay đổi đều có thể xem xét trước khi áp dụng. Quy trình diff-first này kết hợp tốt với design handoff nhận biết token — bạn có thể thấy chính xác liệu code được tạo ra có đang sử dụng spacing.16 từ file token hay đã bị trôi sang 16px hardcoded.

Hướng dẫn này bao gồm toàn bộ pipeline Aider + figmascope: tạo bundle, tải vào phiên Aider, sử dụng chế độ Architect cho scaffold ban đầu, và lặp lại với các prompt chỉnh sửa có mục tiêu.

Yêu cầu tiên quyết

Cài đặt Aider nếu bạn chưa có:

pip install aider-chat
# hoặc
brew install aider

Aider hỗ trợ nhiều model backend. Các ví dụ ở đây sử dụng Claude Sonnet qua Anthropic API, nhưng quy trình tương tự với OpenAI hoặc model cục bộ.

export ANTHROPIC_API_KEY=sk-ant-...
# hoặc OPENAI_API_KEY cho GPT-4o

Bước 1: Tạo bundle

Truy cập figmascope.dev, dán URL file Figma của bạn, và nhấp Export Agent Context. Trình xuất chạy trong trình duyệt của bạn — Figma personal access token của bạn ở trong localStorage và không bao giờ rời khỏi máy của bạn.

Tệp tải xuống có tên context-bundle.zip.

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

unzip ~/Downloads/context-bundle.zip -d ./design/

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

Bước 3: Khởi động Aider với các file bundle trong phạm vi

Truyền các file bundle bạn cần trên dòng lệnh. Aider tải chúng như read-context — model có thể tham chiếu nhưng sẽ không chỉnh sửa chúng trừ khi bạn dùng /add để chuyển chúng thành file có thể chỉnh sửa.

aider \
  --read design/CONTEXT.md \
  --read design/tokens.json \
  --read design/strings.json \
  design/screens/home.json \
  src/screens/HomeScreen.kt

Mẫu: --read cho các file bundle (chỉ context, không chỉnh sửa được), tham số vị trí cho các file nguồn bạn muốn Aider chỉnh sửa. Điều này giữ bundle sạch — cơ chế diff của Aider sẽ không cố chỉnh sửa tokens.json.

Nếu bạn muốn Aider tạo file mới thay vì chỉnh sửa file hiện có, chỉ cần đặt tên đường dẫn đích chưa tồn tại. Aider sẽ tạo nó.

Bước 4: Thêm PNG tham chiếu

Aider có thể bao gồm hình ảnh làm context cho các model đa phương thức. Dùng lệnh /add sau khi khởi động:

/add design/screens/home.png

PNG là bản render 2× từ Figma. Với model đa phương thức (Claude Sonnet, GPT-4o), Aider đưa nó vào làm tài liệu tham khảo trực quan. Dùng nó để kiểm tra trong quá trình xem xét — thông số kỹ thuật chính thức là JSON, không phải ảnh.

Bước 5: Chế độ Architect — scaffold ban đầu

Lệnh /architect của Aider sử dụng mô hình hai bước: một lần để lập kế hoạch, một lần để thực hiện. Đây là điểm khởi đầu đúng đắn cho một màn hình đầy đủ, nơi bạn muốn có cấu trúc nhất quán trước khi chỉnh sửa từng phần.

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

Context:
- Read CONTEXT.md for framework constraints and target conventions.
- All spacing, color, and radius values come from tokens.json.
  Map token keys directly: spacing.16 → 16.dp, color.7f5cfe → Color(0xFF7F5CFE).
- Use string keys from strings.json via stringResource() with the fallback field as the literal fallback.
- IR node kinds: stack(vertical)→Column, stack(horizontal)→Row, overlay→Box,
  absolute→Box+Modifier.offset, leaf(text)→Text, leaf(rect)→Box+Modifier.background.
- Do not hardcode any value that has a token equivalent.

Output to: src/screens/HomeScreen.kt

Aider tạo kế hoạch trước, hiển thị cho bạn, sau đó tạo ra diff. Xem xét kế hoạch — nếu mapping node có vẻ sai, hãy sửa trước khi chạy lần thực hiện.

Bước 6: Chỉnh sửa các file cụ thể với tham chiếu token

Sau khi scaffold đã có, dùng các prompt /edit có mục tiêu để sửa các vấn đề cụ thể. Đây là lúc quy trình diff của Aider tỏa sáng — mỗi chỉnh sửa là một thay đổi nhỏ, có thể xem xét thay vì tái tạo toàn bộ.

The card component in HomeScreen.kt uses hardcoded 12dp for corner radius.
Check tokens.json for the correct radius token and replace it.

Aider tạo ra một diff tối giản: chỉ một hoặc hai dòng thay đổi, không có gì khác bị đụng đến. Bạn có thể thấy chính xác điều gì đã thay đổi.

Để kiểm tra spacing trên toàn file:

Audit every .dp value in src/screens/HomeScreen.kt against the spacing tokens in design/tokens.json.
Produce a diff that replaces any hardcoded value with its token equivalent where one exists.
Leave a // TODO comment for any value that doesn't match a spacing token.

Bước 7: Xem xét diff theo thông số kỹ thuật

Chế độ xem diff của Aider là bề mặt xem xét. Trước khi chấp nhận bất kỳ thay đổi nào, hãy kiểm tra:

Nếu một diff có vẻ sai, từ chối nó với n tại prompt và cho Aider biết cần sửa gì. Vòng phản hồi ngắn — prompt, diff, chấp nhận/từ chối, tinh chỉnh — có nghĩa là bạn phát hiện sai lệch ngay lập tức thay vì sau khi một khối code lớn đã được áp dụng.

Tại sao quy trình diff của Aider kết hợp tốt với bundle

Token drift hiển thị trong diff. Nếu một dòng được tạo ra nói color = Color(0xFF7F5CFE) thay vì color = tokens.colorPrimary, bạn thấy nó trước khi merge. Không có "kiểm tra sau" — việc xem xét xảy ra ngay lập tức.

Tinh chỉnh lặp lại thì rẻ. Bạn không tái tạo toàn bộ màn hình mỗi lần thay đổi. Mỗi prompt tiếp theo tạo ra một diff có mục tiêu. Bundle cung cấp context ổn định; Aider cung cấp việc chỉnh sửa chính xác.

Bundle được version-controlled cùng với code. Khi thiết kế cập nhật, xuất lại bundle từ figmascope, so sánh nó với phiên bản trước, và yêu cầu Aider áp dụng chỉ các node đã thay đổi. Quy trình này mở rộng qua nhiều vòng lặp thiết kế mà không cần tái triển khai đầy đủ.

Các mẫu phổ biến và cạm bẫy

Đừng thêm tất cả màn hình cùng một lúc. Truyền một màn hình JSON tại một thời điểm. Nhiều context không phải lúc nào cũng tốt hơn — Aider (và model bên dưới) hoạt động tốt hơn với context tập trung hơn là một dump của mọi màn hình trong file.

Dùng --read cho bundle, không phải tham số vị trí. Nếu bạn truyền tokens.json như tham số vị trí, Aider có thể cố chỉnh sửa nó. Dùng --read để đánh dấu nó là context chỉ đọc.

Kiểm tra _meta.json trước prompt đầu tiên. Mảng warnings liệt kê các fill và effect mà trình xuất không thể giải quyết hoàn toàn. Hãy cho Aider biết về chúng ngay từ đầu để nó không xấp xỉ một cách thầm lặng:

cat design/_meta.json | python3 -c "import sys,json; w=json.load(sys.stdin).get('warnings',[]); print('\n'.join(w))"

Đưa bất kỳ cảnh báo nào vào prompt architect của bạn: "Skip hero-background fill — gradient not supported. Leave a TODO comment."

Ưu tiên Aider cho các chỉnh sửa có thể xem xét, có tính phẫu thuật — và dùng Cursor hoặc Claude Code khi bạn cần context đầy đủ phiên trên nhiều file. Cả ba quy trình đều bắt đầu theo cùng một cách: ứng dụng figmascope chính xử lý xuất trong trình duyệt của bạn.