Iterate & Edit — 4 chế độ chỉnh sửa của Claude Design

Bốn chế độ chỉnh sửa — Bức tranh toàn cảnh

Claude Design có 4 cách để bạn nói "tôi muốn sửa cái này":

Trục dọc: thay đổi áp dụng cho toàn layout hay một phần cụ thể. Trục ngang: thay đổi về visual parameter (slider có thể chỉnh) hay nội dung/cấu trúc (cần Claude reason).

Mỗi mode có "chỗ đứng" của nó. Dùng sai mode = lãng phí token, lãng phí thời gian, hoặc tệ hơn là kết quả không đúng ý.

① Tweaks — Sliders cho visual parameters

Tweaks là một panel slider Claude tự tạo cho mỗi prototype. Tuỳ context, bạn có thể thấy:

Đặc điểm quan trọng: Tweaks không tốn token vì không gọi đến model. Nó chỉ áp dụng các CSS variables Claude đã prepared khi build.

② Comment — Post-it cho stakeholder feedback

Comment là cơ chế đánh dấu vị trí + viết note trên prototype. Bạn click vào element → gõ feedback → comment lưu vào "comments grouping" panel bên trái.

Đặc điểm:

③ Edit — Surgical inline change

Edit cho phép bạn click thẳng vào một element và sửa trực tiếp:

Đặc điểm:

④ Draw — Annotate trên canvas

Draw cho phép bạn vẽ lên prototype (vòng tròn, mũi tên, X) rồi gõ comment liên kết với chỗ đã vẽ.

Đặc điểm:

• Color mode: default → multi (đa sắc, depth shading)
• Density: thưa → dày
• Motion level: static → minimal → normal → expressive
• Animation speed: slow → normal → fast
• Privacy mode: off → on
• Chart style: airy → blue
• Aesthetic: minimal → vibrant
• Data density: low → high
• Có thể tạo nhiều comment trước khi gửi
• Khi Send to Claude, tất cả comment đã chọn sẽ được xử lý cùng 1 batch (1 token call)
• Lý tưởng để gom feedback từ nhiều stakeholder rồi handle cùng lúc
• Tốn token trung bình (1 batch = 1 reasoning round)
• Đổi text inline (typo fix)
• Đổi font weight, size, color của 1 element cụ thể
• Đổi border radius, padding của 1 component instance
• Local scope — chỉ ảnh hưởng element bạn click
• Tốn token thấp (Claude chỉ regenerate scope nhỏ)
• Không có Ctrl-Z — phải Edit lại để revert
• Phù hợp typo fix, copy adjustment, tinh chỉnh visual nhỏ
• Phù hợp khi bạn không biết tên kỹ thuật của thứ muốn sửa ("cái khoảng trắng to to ở bên phải")
• Mạnh khi feedback vùng chứ không phải element ("vùng này nên có gradient")
• Tốn token tương đương Comment
• Một số designer (như Kirk @UI Collective) cho rằng Draw "wonky" và không có giá trị — đúng cho expert designer biết viết prompt rõ ràng. Sai cho founder/solo không có vocab thiết kế.

                  KIỂU THAY ĐỔI

           Visual params           Nội dung / Cấu trúc
           (color, density)        (text, layout)
        ┌────────────────────┬────────────────────┐
 Toàn   │                    │                    │
 layout │   ① TWEAKS         │   ② COMMENT        │
        │   (sliders panel)  │   (batch feedback) │
        │                    │                    │
        ├────────────────────┼────────────────────┤
 Một    │                    │                    │
 phần   │   ③ EDIT           │   ④ DRAW           │
 (local)│   (direct inline)  │   (sketch annotate)│
        │                    │                    │
        └────────────────────┴────────────────────┘

So sánh 4 chế độ — Khi nào dùng cái nào

Quy tắc chọn mode 80/20:

• Đầu tiên mở Tweaks panel — nếu slider có gì giải quyết được, không cần đụng AI.
• Nếu cần thay đổi một text/element nhỏ mà visual đã ổn → Edit.
• Nếu cần thay đổi vài chỗ nhau, có liên quan logic → Comment (gom batch).
• Nếu không biết "tên kỹ thuật" của khu vực muốn sửa → Draw.

Ví dụ thực chiến: Fix dashboard fintech 8 phút

Tình huống

Bạn là Senior Designer tại một fintech B2B. Đã có first draft dashboard từ Claude Design. Stakeholder list 4 thay đổi cần làm trước demo client:

Bước 1: Tweaks — tắt privacy

Mở Tweaks panel, tìm slider "Privacy mode" → Off. Slider chỉnh chart style từ "blue" sang "airy" cho có depth tốt hơn.

Bước 2: Edit — fix font weight hero

Click vào text "Net Worth" → menu xuất hiện → font weight 400 → 700.

Bước 3: Comment — đổi card Insights

Click vào card Insights → comment:

Comment lưu vào panel chờ batch.

Bước 4: Draw — xoá vùng trắng

Bật Draw tool → khoanh tròn vùng trắng dưới "Recent transactions" → gõ:

Comment + draw lưu vào panel chờ batch.

Bước 5: Send batch

Trong panel Comments, chọn 2 comment vừa tạo (Insights + Draw transactions) → Send to Claude.

Claude render trong ~4 phút. Output:

Kết quả

• Privacy mode đang on — cần tắt để client thấy số thật
• Font weight ở hero "Net Worth" quá mảnh, cần đậm hơn
• Card "Insights" chỉ 1 metric — đổi thành 4 metric grid
• Section "Recent transactions" có vùng trắng lớn ở dưới — gone
• Card Insights giờ là 4 metric grid với số liệu placeholder hợp lý
• Section Recent transactions reduced về 5 rows, vùng trắng biến mất
• Tổng thời gian: ~8 phút (3 phút thao tác + 5 phút render)
• Token tiêu: 1 batch round (2 comments)
• Stakeholder satisfaction: demo client xong, 0 round revision tiếp
• So với Figma manual: tiết kiệm ~37 phút và không cần export

Ví dụ theo ngành / Case studies

🎨 Freelance UI designer — token-tight

Pain point trước: "Khách yêu cầu sửa 8 chỗ trên prototype. Mình prompt từng cái một vì sợ lẫn — kết quả là 8 round Claude, hết 1/3 monthly token chỉ trong 1 buổi. Một dự án freelance nho nhỏ ăn mất ngân sách AI cả tháng."

Cách mới:

🏢 In-house Product Designer — review batch từ team

Pain point trước: "Mình share Claude Design link cho PM và 2 engineer. Mỗi người DM mình feedback riêng. Tổng cộng 12 thay đổi rời rạc qua Slack. Mình phải chuyển hoá lại thành 12 prompts → 12 round Claude → mỗi round 2-3 phút. Cả buổi chỉ ngồi prompt."

Cách mới:

🚀 Founder solo — không có design vocab

Pain point trước: "Mình không phải designer. Mình prompt Claude xong nhìn output thấy 'cái khoảng trên cùng kia kì kì' nhưng không biết gọi tên — header? hero? above-the-fold? padding? margin? Mình viết prompt mơ hồ → Claude hiểu sai → render lại → lại sai → burn token."

Cách mới:

👔 Design Lead — workshop với stakeholder

Pain point trước: "Stakeholder review meeting offline 1 tiếng. Mình mở Figma, mỗi feedback ai đó đưa ra mình note xuống Notion. Sau meeting mình ngồi 3 tiếng implement từng note. Tới sáng thứ 2 ai đó hỏi 'bạn đã thử option B chưa?' — và mình phải implement option B mất 2 tiếng nữa."

Cách mới:

• 5/8 chỗ thực ra chỉ là Tweaks slider (color, density, motion) — 0 token
• 2/8 chỗ là typo fix → Edit (token thấp)
• 1/8 chỗ là restructure section → Comment
• Tổng: 1 batch Comment + 2 Edit + 5 Tweaks slide = ~8% token thay vì 30%
• Kết quả: Một sprint freelance thay vì burn 1/3 token, chỉ tiêu ~10%. Margin tăng 20%.
• Hướng dẫn team click Comment trực tiếp lên prototype (Claude Design cho phép share link với comment perms)
• Sáng hôm sau: 12 comments đã tagged sẵn vị trí, tagged người
• Mình review, gom batch theo nhóm: 4 comment về typography → 1 batch send. 5 comment về spacing → 1 batch. 3 comment về copy → 1 batch.
• Kết quả: 3 batch render thay vì 12 round prompt. Thời gian feedback turnaround: 8h → 25 phút. Token: giảm 75%.
• Bật Draw, vẽ vòng quanh khu vực kì kì
• Gõ tự nhiên: "Cái này quá to và làm hero mất focus. Mình muốn nó nhỏ hơn ~30% và nội dung cô đọng hơn."
• Claude tự dịch ngôn ngữ mơ hồ ("cái này", "kì kì") thành kỹ thuật (banner h-160 → 100, text condensed)
• Kết quả: founder xài Claude Design hiệu quả mà không cần học design jargon. Time-to-prototype giảm từ "không bao giờ ship được" → "ship được sau 2-3 buổi".
• Mang Claude Design prototype lên màn hình meeting
• Khi stakeholder nói "thử option B" → mình Tweaks slider (color mode multi, animation expressive) → option B realtime
• Khi stakeholder nói "đẩy số liệu sang phải" → Draw ngay → render trong 2 phút khi đang nói
• Kết quả: Meeting 1 tiếng = 5-7 variation explored. Decision đưa ra trong meeting thay vì 3 ngày sau. Velocity team x3.

Prompt template sẵn dùng cho mỗi mode

Cho Tweaks panel — không cần prompt, nhưng có thể yêu cầu thêm slider

Template T1: Yêu cầu Claude tạo thêm slider

Cho Comment mode — batch feedback

Template C1: Comment đơn (1 element, 1 yêu cầu)

Add a slider to the tweaks panel that controls [parameter cụ thể, ví dụ:
"the density of cards in the Insights grid"]. Range from [low value] to
[high value]. Default at [value].

Cho Comment mode — batch feedback

Ví dụ:

Template C2: Comment batch — multi-element 1 yêu cầu

[Element này] cần [thay đổi cụ thể]. Lý do: [why, để Claude reason đúng].

Prompt template sẵn dùng cho mỗi mode (tiếp)

Ví dụ:

Template C3: Comment với constraint

Áp dụng [thay đổi] cho [danh sách element được khoanh comment]: [element 1],
[element 2], [element 3]. Giữ nguyên các yếu tố khác.

Prompt template sẵn dùng cho mỗi mode (tiếp)

Ví dụ:

Template C4: Comment với reference

[Yêu cầu thay đổi]. Constraint: [giữ X, không vượt quá Y, phải compatible với Z].

Prompt template sẵn dùng cho mỗi mode (tiếp)

Ví dụ:

Cho Edit mode — surgical change

Template E1: Edit text/copy

Làm [element] trông giống [reference] hơn. Reference: [URL / mô tả style].

Cho Edit mode — surgical change

Đơn giản. Không cần lý giải vì scope nhỏ.

Template E2: Edit visual property

[Click element] → [text mới chính xác]

Prompt template sẵn dùng cho mỗi mode (tiếp)

Template E3: Revert qua Edit (vì không có Ctrl-Z)

[Click element] → [property: value]. Ví dụ: font weight: 700, color: #FF6B35,
padding: 24px 16px.

Prompt template sẵn dùng cho mỗi mode (tiếp)

Ví dụ: vừa Edit color thành #FF0000 nhưng không thích → click element → "color: #6B7280 (color cũ)". Phải nhớ giá trị cũ trước khi edit lần đầu.

Cho Draw mode — region annotation

Template D1: Draw + xác định vấn đề

[Click element vừa sửa] → revert về [property cũ với giá trị cũ].

Cho Draw mode — region annotation

Ví dụ vẽ quanh hero:

Template D2: Draw + reference

[Vẽ khoanh vùng] → vấn đề: [mô tả issue], expectation: [muốn gì].

Prompt template sẵn dùng cho mỗi mode (tiếp)

Ví dụ:

Template D3: Draw để xoá / hide

[Vẽ vùng] → muốn vùng này trông giống [reference] / có vibe [adjective].

Prompt template sẵn dùng cho mỗi mode (tiếp)

Đơn giản. Hữu ích khi Claude generate quá nhiều element không cần.

[Vẽ vùng] → remove. Lý do: [why].

Anti-patterns — Những sai lầm cần tránh

❌ Spam Comment cho mỗi thay đổi nhỏ riêng lẻ

Bạn có 8 thay đổi → tạo 8 comment riêng → bấm Send 8 lần.

Tại sao sai: Mỗi Send = 1 batch reasoning round = chunk token đầy đủ. 8 lần send = 8x cost so với 1 lần send batch 8 comments. Trên Pro plan ($20/tháng), 1 prototype 8-round có thể chiếm 5-7% monthly budget.

Cách đúng:

❌ Không kiểm tra trước khi nhấn Send (vì không có Ctrl-Z)

Nhấn Send xong rồi mới phát hiện comment bị typo, hoặc 2 comment mâu thuẫn nhau. Claude render xong → kết quả sai → phải prompt lại để revert.

Tại sao sai: Claude Design không có Ctrl-Z global. Mỗi action là 1 chuyển trạng thái permanent. Revert = 1 round token nữa.

Cách đúng:

❌ Dùng Draw thay vì viết prompt rõ ràng

Bạn là designer expert. Bạn biết rõ cần "tăng padding card từ 16 → 24, border radius 8 → 12". Nhưng bạn dùng Draw vẽ vòng quanh card và viết "card này cần thoáng hơn".

Tại sao sai: Draw + comment mơ hồ làm Claude phải đoán. Đoán đôi khi đúng, đôi khi sai → phải Edit lại. Designer expert dùng Comment với specs cụ thể → Claude render đúng ngay lần đầu.

Cách đúng:

❌ Chuyển Mode liên tục mà không hoàn tất batch

Bạn mở Tweaks → chỉnh slider → bấm Comment → viết comment → bấm Edit → click element → quay lại Tweaks → ...

Tại sao sai: Mỗi mode có context riêng. Switching liên tục dễ:

Cách đúng:

❌ Dùng Comment để edit single text typo

Bạn thấy typo "Sigup" trong nút → tạo Comment "fix typo to Sign Up" → Send.

Tại sao sai: Edit mode handle 1-2 element typo chỉ tốn ~10% token của 1 Comment batch. Bạn đang tốn 10x token cho việc cực kỳ nhỏ.

Cách đúng:

❌ Quên rằng Draw cần Comment đi kèm để có ý nghĩa

Bạn vẽ vòng tròn quanh hero, không gõ note gì → nhấn Send.

Tại sao sai: Draw không kèm note = Claude không biết ý bạn là gì. Nó có thể đoán "muốn nổi bật vùng này?" hoặc "muốn xoá?" — đoán có thể sai.

Cách đúng:

• Tạo nhiều comment trước, KHÔNG send
• Khi đã đủ batch (3-8 comments), select all → Send 1 lần
• Với từng nhóm subject (typography, spacing, copy), gửi 1 batch / nhóm
• Trước khi Send batch, read aloud từng comment xem có conflict không
• Test mental model: "nếu Claude làm đúng từng comment, kết quả có như mình muốn?"
• Nếu unsure, send 1 comment trước, xem kết quả, rồi mới send batch còn lại
• Có vocab thiết kế: dùng Comment với property cụ thể ("padding: 24px, border-radius: 12px")
• Không có vocab: Draw OK — Claude reason giúp bạn
• Quy tắc: Draw cho vùng, Comment cho element, Edit cho property cụ thể
• Quên comment chưa send
• Mất track đã thay đổi gì
• Slider bị reset khi Comment send batch (state conflict)
• Tweaks first — quẹt qua một lần, lock visual params
• Comment + Draw — gom batch trong 1 session
• Send batch — chờ render xong
• Edit — fine-tune sau cùng (nhỏ, local)
• Đừng quay lại Tweaks sau khi đã Comment send — slider có thể "fight" với comment changes
• Typo, copy fix nhỏ → Edit (click text, gõ lại)
• Comment chỉ dùng khi yêu cầu cần Claude reason (restructure, multi-element, có constraint)
• Draw luôn kèm comment giải thích
• Pattern chuẩn: vẽ → gõ "vấn đề: X, expectation: Y"
• Nếu chỉ muốn xoá, gõ ngắn gọn "remove this region"

Mẹo nâng cao

Mẹo 1: Decision tree mode-selection (in ra dán cạnh màn hình)

Mẹo 2: Batch comment "labeled groups"

Khi có 10+ comment cần xử lý, đặt tên prefix cho từng group khi gõ:

Khi Send batch, có thể chọn theo group (TYPO trước, SPACING sau) — Claude render từng group focused → kết quả ổn định hơn.

Mẹo 3: Lưu screenshot trước mỗi Send

Vì không có Ctrl-Z, hãy chụp full prototype (Cmd+Shift+4) trước mỗi Send batch lớn. Nếu kết quả sai, bạn có visual reference để mô tả "revert về như trong screenshot này".

Mẹo 4: Dùng Edit để revert nhanh hơn Comment

Vừa Send Comment batch xong, kết quả sai. Đừng tạo Comment "revert" rồi Send tiếp (1 round token nữa). Click element → Edit → gõ giá trị cũ. Tốn 5-10% token thay vì 100%.

Mẹo 5: Group prototype "checkpoint" thành project mới

Sau khi prototype đạt mốc đẹp, Save as new project trong Claude Design (chức năng folder). Lần sau lỡ Edit/Comment làm hỏng, bạn còn checkpoint clean để quay lại — hiệu quả hơn revert qua Comment.

        Cần thay đổi gì?
              │
       ┌──────┴──────┐
       ▼             ▼
   Visual param?  Nội dung/
   (color, size,  cấu trúc?
    motion...)        │
       │              ▼
       ▼         ┌────┴────┐
   ┌───────┐    Element    Vùng
   │TWEAKS │    cụ thể?    không
   │slider │       │       rõ tên?
   └───────┘       │           │
                   ▼           ▼
              ┌────┴───┐  ┌────────┐
              Lớn/    1   │ DRAW + │
              cấu     element│COMMENT│
              trúc?  text?  └────────┘
                │     │
                ▼     ▼
            ┌──────┐ ┌──────┐
            │COMMENT│ │ EDIT │
            └──────┘ └──────┘

Áp dụng ngay

Bài tập 1: 4-mode dashboard sprint (~25 phút)

Setup:

Bước 1 — Tweaks (5 phút):

Bước 2 — Edit (3 phút):

Bước 3 — Comment batch (10 phút):

Bước 4 — Draw (5 phút):

Bước 5 — Ghi lại:

Mode nào hiệu quả nhất với workflow của bạn? Vì sao?

Bài tập 2: Mode-decision flowchart cá nhân (~10 phút)

Dựa trên Mẹo 1, vẽ lại flowchart của riêng bạn — adapt với:

Ghi flowchart bằng tay hoặc Miro. In ra dán cạnh máy.

• Mở Claude Design → tạo prototype mới: "Build me a SaaS analytics dashboard for a project management tool. Mobile + desktop."
• Chờ Claude generate first draft (~3 phút)
• Mở Tweaks panel
• Quẹt qua tất cả slider, ghi lại 3 setting bạn thay đổi
• Đo: thay đổi nào tốn 0 token nhưng impact lớn nhất?
• Click 1 text element bất kỳ → đổi font weight
• Click 1 button → đổi color
• Đo: render time?
• Tạo 3 comment cùng theme (ví dụ: "improve typography hierarchy"):
• Comment ở H1 hero
• Comment ở section title
• Comment ở body paragraph
• Select cả 3 → Send batch
• Đo: token tốn so với gửi 3 lần riêng?
• Bật Draw → khoanh 1 region không rõ tên ("vùng trắng kì kì", "khu vực có quá nhiều icon")
• Gõ comment ngắn — 1 vấn đề + 1 expectation
• Send
• Loại design bạn làm thường xuyên (mobile / web / dashboard / landing)
• Token budget cá nhân (Pro / Max / team plan)
• Workflow handoff (Figma / Claude Code / direct export)

Tóm tắt bài học

🎯 4 mode ≠ 4 cách làm cùng một việc — mỗi mode có "chỗ đứng" riêng dựa trên 2 trục: scope (toàn layout vs một phần) và loại thay đổi (visual param vs nội dung/cấu trúc).

🎯 Tweaks-first principle — luôn mở Tweaks panel trước khi prompt. Slider tốn 0 token và giải quyết 30-50% thay đổi visual mà bạn nghĩ là cần AI.

🎯 Batch Comment là vũ khí token-efficiency lớn nhất — 8 comment trong 1 batch tốn ~12% token của 8 comment send rời. Designer freelance hoặc team có budget AI nên xem batch là default.

🎯 Edit cho surgical, Draw cho region — typo, copy, single property → Edit (token thấp). Vùng không rõ tên, feedback từ non-designer → Draw + comment.

🎯 No Ctrl-Z, no excuses — luôn screenshot trước Send batch lớn; tạo "checkpoint project" sau mỗi mốc; dùng Edit để revert nhanh hơn Comment "undo X".