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

Mở đầu: Cuộc đua 45 phút vs 8 phút

Dashboard B2B mới — version đầu chiều nay phải gửi qua client. Họ pickly lắm. Pls.

Bạn mở Claude Design, prompt vài dòng, có ngay first draft sau 2 phút. Đẹp. Nhưng chưa sẵn sàng cho client. Cần fix:

1. Privacy mode đang bật — phải tắt
2. Card "Insights" chỉ có 1 metric — client muốn thấy 4
3. Hero typography quá mảnh — phải đậm hơn
4. Có khoảng trắng kỳ cục giữa header và sidebar — phải xoá

Cách cũ (export sang Figma rồi sửa):

1. Hand-off Claude Code → push to Figma (~7 phút)
2. Open Figma file, không perfectly responsive — sửa lại layout (~15 phút)
3. Tắt privacy mode, thêm 3 cards Insights bằng Figma component (~10 phút)
4. Sửa font weight trong text styles (~5 phút)
5. Find & remove cái gap (~5 phút) — wait, gap đến từ component variant nào ta?
6. Export lại screenshot gửi client (~3 phút)

Tổng: ~45 phút. Cộng thêm 7 phút token push từ Claude Code. Cộng thêm 12 phút giải thích lại với client tại sao bản Figma hơi khác bản Claude prototype.

Cách mới (ở lại trong Claude Design, dùng đúng 4 chế độ):

Tổng: ~8 phút. Bạn ngồi uống cà phê 5 phút render cuối, share link cho client luôn — không cần export file.

Tiết kiệm: ~37 phút. Quan trọng hơn: client thấy đúng prototype bạn đang làm việc trên, không phải bản Figma "đã chuyển đổi".

Đây là sức mạnh thật sự của Claude Design — không phải khả năng generate first draft, mà là khả năng iterate cùng AI mà không phải rời canvas. Nhưng bạn phải biết dùng đúng mode cho đúng tình huống. Đó là nội dung bài này.

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":

                  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)│
        │                    │                    │
        └────────────────────┴────────────────────┘

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:

• 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 đ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:

• 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)

③ 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:

• Đổ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

Đặc điểm:

• 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ỏ

④ 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:

• 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ế.

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

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

1. Đầu tiên mở Tweaks panel — nếu slider có gì giải quyết được, không cần đụng AI.
2. Nếu cần thay đổi một text/element nhỏ mà visual đã ổn → Edit.
3. Nếu cần thay đổi vài chỗ nhau, có liên quan logic → Comment (gom batch).
4. 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:

1. Privacy mode đang on — cần tắt để client thấy số thật
2. Font weight ở hero "Net Worth" quá mảnh, cần đậm hơn
3. Card "Insights" chỉ 1 metric — đổi thành 4 metric grid
4. Section "Recent transactions" có vùng trắng lớn ở dưới — gone

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.

Token tốn: 0. Thời gian: 30 giây.

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

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

Token tốn: ~thấp. Thời gian: 30 giây.

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

Click vào card Insights → comment:

Chuyển card Insights này từ 1 metric đơn thành grid 4 metric: Cash flow, Burn rate, Runway, MoM growth. Format số liệu cùng style với Net Worth ở trên.

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

Token tốn: 0 (chưa send). Thời gian: 1 phút viết.

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õ:

Vùng này thừa khoảng 200px. Reduce số transactions hiển thị từ 10 xuống 5 để section vừa fold.

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

Token tốn: 0 (chưa send). Thời gian: 1 phút.

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:

• 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

Kết quả

• 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:

• 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%.

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:

• 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%.

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:

• 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".

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:

• 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

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].

Dùng khi: bạn thấy có 1 visual parameter nên là tunable nhưng Claude chưa expose. Yêu cầu Claude expose nó qua slider để khi iterate sau không tốn token.

Cho Comment mode — batch feedback

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

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

Ví dụ:

Card Insights cần đổi từ 1 metric thành grid 4 metric: Cash flow, Burn rate, Runway, MoM growth. Lý do: client là CFO nên muốn nhìn ngay 4 chỉ số chính.

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

Á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.

Ví dụ:

Đổi tất cả primary buttons sang variant 'pill' (border radius full): button trong hero, trong CTA section, trong footer. Giữ nguyên outline buttons.

Template C3: Comment với constraint

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

Ví dụ:

Tăng kích thước hero text. Constraint: không lớn hơn 1.5x current size; phải vẫn mobile-responsive; line-height tỉ lệ thuận.

Template C4: Comment với reference

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

Ví dụ:

Đổi card design thành kiểu Linear app: bo tròn 12px, gradient subtle, shadow nhẹ, hover state có lift effect.

Cho Edit mode — surgical change

Template E1: Edit text/copy

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

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

Template E2: Edit visual property

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

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

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

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 đề

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

Ví dụ vẽ quanh hero:

Vấn đề: hero quá lớn, đẩy CTA xuống dưới fold trên iPhone 12. Expectation: hero giảm 30% chiều cao, CTA hiện trên fold.

Template D2: Draw + reference

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

Ví dụ:

Vùng này muốn có vibe 'premium watch product launch'

gradient gold-black, motion subtle, typography serif."

Template D3: Draw để xoá / hide

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

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

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:

• 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

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:

• 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

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:

• 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ể

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ễ:

• Quên comment chưa send
• Mất track đã thay đổi gì
• Slider bị reset khi Comment send batch (state conflict)

Cách đúng:

• 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

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:

• 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)

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:

• 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)

        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 │
            └──────┘ └──────┘

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õ:

[TYPO] Đổi 'Sigup' → 'Sign Up' ở nút header" "[SPACING] Tăng padding cards từ 16 → 24" "[COPY] Đổi headline H1 thành 'Your money, your timeline'

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.

Áp dụng ngay

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

Setup:

• 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)

Bước 1 — Tweaks (5 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?

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

• Click 1 text element bất kỳ → đổi font weight
• Click 1 button → đổi color
• Đo: render time?

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

• Tạo 3 comment cùng theme (ví dụ: "improve typography hierarchy"):

1. Comment ở H1 hero 2. Comment ở section title 3. Comment ở body paragraph

• Select cả 3 → Send batch
• Đo: token tốn so với gửi 3 lần riêng?

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

• 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

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:

• 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)

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

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

Tài liệu tham khảo

• Anthropic Labs — Claude Design announcement
• Claude Design (web app)
• Kirk @UI Collective — Claude Design: The Complete Guide (YouTube, 32 min) — chi tiết về limitations của Comment bug và Draw "wonky"
• Vaibhav Sisinty — Nobody Is Ready For What Claude Just Launched — workflow Draw để annotate brand changes
• Lil @Iana Veia — Claude Designer no Brasil — pattern "elimine" qua Edit mode

Quy tắc vàng: nếu bạn đang viết comment thứ 5 trong 1 phiên, dừng lại — có thể bạn đang chống lại design Claude tạo ra thay vì hợp tác với nó. Đôi khi Re-prompt từ đầu rẻ hơn iterate 8 lần.