Thực hiện thay đổi — Screenshots, Planning Mode, Thinking Mode

1. Screenshots — Giao tiếp bằng hình

Cách dán screenshot

Flow thực tế

Khi nào nên dùng screenshot?

Ví dụ prompt dùng screenshot

• Bạn thấy UI bug hoặc cần cải tiến phần cụ thể
• Chụp màn hình (macOS: Cmd+Shift+4, Windows: Win+Shift+S)
• Screenshot vào clipboard
• Trong Claude Code terminal, Ctrl+V → thấy [Image attached]
• Gõ mô tả + yêu cầu
• Enter

Ctrl+V  ← để PASTE screenshot (cả Mac và Windows)

Ví dụ prompt dùng screenshot

Claude sẽ:

Mẹo dùng screenshot tốt

✅ Nên:

❌ Không nên:

• Phân tích screenshot (multimodal capability)
• Đọc file hiện tại
• Tạo plan tương đương
• Execute
• Crop sát vùng quan tâm (không dán full desktop)
• Annotate nếu cần (dùng Preview, Snagit để highlight)
• Paste cả 2 screenshot (before + target) nếu có
• Mô tả bằng chữ những gì không thấy được (animation, interaction)
• Screenshot quá nhiều content không liên quan (tốn token process image)
• Screenshot ảnh PDF cả trang khi chỉ cần 1 section
• Dán nhiều screenshot mà không giải thích mối liên hệ

[Paste screenshot of pricing page]

Nhìn screenshot này. Trang /pricing của tôi không có layout 
3 cột như thế này — hiện tại là grid đơn giản không có 
highlight tier recommended. 

Update @src/app/pricing/page.tsx để match layout screenshot:
- 3 cột, tier giữa có border + badge "Recommended"
- Dark theme
- Shadow cho card giữa lớn hơn
- Feature list với icon checkmark màu xanh

Giữ nội dung pricing hiện tại, chỉ đổi layout và style.

2. Planning Mode — "Show me the plan first"

Planning Mode là gì?

Mặc định Claude Code có thể ngay lập tức bắt đầu edit file khi bạn gõ prompt. Nhanh, nhưng rủi ro với task lớn.

Planning Mode đổi flow thành:

Cách bật

Nhấn Shift + Tab 2 lần (nếu đang auto-accept edit: chỉ cần 1 lần).

Bạn sẽ thấy badge "Planning Mode" ở terminal. Mọi prompt sau đó sẽ theo flow planning.

Trong Planning Mode, Claude sẽ:

Khi nào BẮT BUỘC dùng Planning Mode?

Khi nào KHÔNG cần?

Ví dụ output Planning Mode

Prompt:

• Đọc nhiều file hơn bình thường để có context đầy đủ
• Suy nghĩ về impact tổng thể
• Tạo plan có structure:
• Files cần đọc thêm (nếu có)
• Files cần sửa
• Thay đổi cụ thể trong mỗi file
• Tests cần chạy/thêm
• Risk / caveat đáng lưu ý
• Đợi bạn approve — không tự execute
• ☐ Task đụng >5 file
• ☐ Thay đổi core abstraction (rename module, đổi API shape)
• ☐ Migration (Prisma→Drizzle, JS→TS, v1→v2)
• ☐ Bạn không chắc 100% yêu cầu mình đủ cụ thể
• ☐ Task quan trọng (production code, không phải experiment)
• Task nhỏ, 1-2 file, rõ ràng ("đổi label button này thành 'Submit'")
• Đang prototype, không care nếu làm sai
• Đang trong Auto-accept mode, biết rõ đang làm gì

Prompt → Claude explore codebase kỹ → Viết plan chi tiết 
       → Show cho bạn review → Chờ approval → Execute

Ví dụ output Planning Mode

Claude (Planning Mode):

Thêm pagination cho list invoice ở /dashboard. 20 items/page.

2. Planning Mode — "Show me the plan first" (tiếp)

Bạn đọc, thấy OK → y → Claude execute. Nếu thấy gì sai → n + comment.

Chi phí

Planning Mode tốn thêm token (~1.5–2x request bình thường) vì Claude đọc nhiều hơn + viết plan dài. Với task quan trọng, đáng giá.

Plan:

Files to modify:
1. src/app/dashboard/invoices/page.tsx
   - Add pagination state (page, pageSize)
   - Pass to hook useInvoices
   
2. src/lib/hooks/useInvoices.ts
   - Accept page, pageSize params
   - Modify query
   
3. src/app/api/invoices/route.ts
   - Parse page, pageSize from query string
   - Return {data, total, hasNext}
   
4. src/components/Pagination.tsx (NEW)
   - Shared pagination component
   - Props: currentPage, totalPages, onChange

Tests:
- Add test for paginated response in invoices.test.ts
- Add test for Pagination component
- Update existing integration test

Risks:
- Prisma skip/take có overhead với table lớn — tương lai 
  xét cursor-based pagination
- Existing cache trong useInvoices có thể stale — clear khi 
  page đổi

Estimated: 6 tool calls, ~2 minutes execution.

Approve? (y/n)

3. Thinking Mode — "Think longer before you speak"

Thinking Mode là gì?

Mặc định Claude trả lời ngay khi nhận prompt. Thinking Mode cho Claude "thời gian suy nghĩ" trước — dùng extra token để reasoning nội bộ mà không output ngay.

Giống con người: hỏi "2+2?" — trả lời ngay. Hỏi "chứng minh định lý Fermat" — cần ngồi nghĩ.

5 cấp độ thinking

Cách dùng

Đơn giản: thêm keyword vào prompt.

Debug bug này và think hard về nguyên nhân root cause.

Cách dùng

Khi nào dùng?

✅ Nên dùng khi:

❌ Không nên:

Dấu hiệu Claude đang "thinking"

Trong terminal, text thinking hiện bằng màu xám nhạt (không phải màu trắng bình thường). Bạn thấy Claude "tự nói chuyện":

• Bug khó, có nhiều nguyên nhân tiềm năng
• Decision có trade-off (pick database? pick architecture?)
• Algorithm phức tạp
• Code review deep dive một PR
• Logic business có nhiều rule tương tác
• Task đơn giản (thinking tốn token không mang lại gì)
• Task phụ thuộc data external (read file, run test) thay vì reasoning
• Khi đang prototype quick

Design architecture cho payment system mới. Ultrathink về 
edge cases và failure modes.

Dấu hiệu Claude đang "thinking"

Phần [thinking] không tính vào output cuối — nhưng đã giúp Claude reasoning tốt hơn.

Thinking giữa tool call (Claude 4+)

Đáng chú ý: từ Claude 4, model có thể think giữa các tool call — không chỉ lúc trả lời cuối.

Ví dụ:

Đây là lúc thinking thực sự mạnh: reasoning dựa trên data vừa gather, không phải chỉ lúc bắt đầu.

• Claude Read file A
• [thinking] — "File A có pattern X, có thể file B và C cũng có, nên check"
• Claude Grep pattern X
• [thinking] — "Thấy 12 match, cần nhóm theo feature..."
• Action tiếp theo

[thinking]
Let me analyze this bug step by step...
The error says "undefined is not a function" but the stack 
trace shows it happens in utils.formatDate. Let me check if 
formatDate is exported... Actually, maybe the issue is that 
utils is being imported as default but exported as named...
[/thinking]

Dựa trên phân tích, bug root cause là...

Planning Mode vs Thinking Mode — Khác biệt cốt lõi

Đây là lỗi confusion lớn nhất.

Combine cả hai

Hoàn toàn có thể dùng cùng lúc cho task vừa rộng vừa sâu:

Claude sẽ:

Token cost: 3-4x bình thường. Nhưng với task bảo mật, đáng.

• Read nhiều file (Planning)
• Thinking sâu về security (Thinking)
• Output plan chi tiết có analysis từng rủi ro
• Đợi approve

┌──────────────────────────────────────────────────────────┐
│                                                          │
│  PLANNING MODE        vs    THINKING MODE                │
│  ─────────────              ──────────────               │
│                                                          │
│  Focus:                                                  │
│   Breadth of codebase       Depth of reasoning           │
│   (đọc nhiều file)          (suy nghĩ sâu 1 vấn đề)     │
│                                                          │
│  Output trước execute:                                   │
│   Plan có structure         Không — chỉ internal         │
│   (Bạn thấy và approve)     thinking                     │
│                                                          │
│  Hữu ích cho:                                            │
│   Task nhiều file           Bug logic phức tạp          │
│   Migration                 Algorithm design            │
│   Cross-cutting change      Architecture decision       │
│                                                          │
│  Cost:                                                   │
│   Token tăng 1.5–2x         Token tăng 2–10x            │
│   (đọc file nhiều hơn)      (thinking tokens)           │
│                                                          │
└──────────────────────────────────────────────────────────┘

[Enter Planning Mode via Shift+Tab x2]

Migrate auth module từ JWT sang sessions server-side. 
Think harder về security implications và edge cases 
(token expiry, concurrent sessions, CSRF).

Ví dụ thực chiến: Dùng 3 kỹ thuật cùng task

Task

Bạn là dev ở marketplace app. Nhiệm vụ: redesign pricing page từ generic grid → phong cách Stripe (có tier highlight, dark theme, feature comparison).

Bước 1: Screenshot + mô tả (visual context)

Bước 2: Planning Mode (vì đụng nhiều file)

Nhấn Shift+Tab x2. Prompt tiếp tục. Claude đưa plan:

[Paste screenshot của Stripe pricing page]

Thiết kế lại @src/app/pricing/page.tsx theo style Stripe như 
screenshot. Key requirements:
- 3 tier, tier giữa highlight (border accent, slight scale)
- Dark theme (bg-slate-900, text-slate-100)
- Feature list với checkmark + X cho có/không
- CTA button rõ ràng mỗi tier

Bước 2: Planning Mode (vì đụng nhiều file)

Bước 3: Thinking Mode (decision: move pricing data?)

Bạn hỏi thêm:

Plan:
1. src/app/pricing/page.tsx — restructure layout
2. src/components/PricingCard.tsx (new) — card component
3. src/components/FeatureList.tsx (new) — shared list UI
4. tailwind.config.ts — thêm dark accent color
5. Test: pricing page render, 3 tier hiển thị đúng

Risks: 
- Theme dark có thể conflict với component khác chưa 
  dark-ready — check @src/components/Header.tsx
- Pricing data đang hard-coded — move sang @lib/pricing.ts

Bước 3: Thinking Mode (decision: move pricing data?)

Claude thinking:

Nên move pricing data sang @lib/pricing.ts hay giữ trong 
page.tsx? Think hard về pros/cons và recommend.

Ví dụ thực chiến: Dùng 3 kỹ thuật cùng task (tiếp)

Bạn approve plan → Claude execute.

Kết quả

Task xong trong 8 phút với quality cao. Nếu skip Planning Mode → có thể đi sai hướng; skip screenshot → style không đúng Stripe; skip thinking → decision về lib/pricing không có căn cứ.

[thinking]
Trade-offs:
- Move to lib/: reusable, testable, easier to update
- Keep in page: colocation, simpler
- Risk move: tạo thêm file không thực sự cần nếu chỉ dùng 
  1 chỗ
- Pattern trong codebase này? Check other similar data...
  → Thấy lib/features.ts cho feature flags, lib/plans.ts 
    không có — inconsistent
[/thinking]

Recommend: MOVE to @lib/pricing.ts vì:
1. Pricing sẽ được dùng trong /billing và /admin sau này (thấy 
   TODO trong issue tracker)
2. Consistency với @lib/features.ts pattern
3. Test dễ hơn (mock pricing trong test)

Case studies theo ngành

💼 Product Designer (code-friendly) — Screenshot-driven design

Trước: "Dev không match design Figma — mỗi lần iterate 4-5 round."

Với screenshot: Paste Figma frame vào Claude Code, chỉ định exact requirement, Claude render ngay gần-pixel-perfect.

🛠️ Backend engineer — Planning Mode cho migration

Trước: "Migrate ORM tốn 2 tuần với risk production break."

Với Planning Mode: Claude viết full plan, dev review, execute từng phase có checkpoint.

🎮 Game dev — Thinking Mode cho optimization

Trước: "Bottleneck render loop — kiểu gì cũng optimize không xong."

Với ultrathink: Claude phân tích root cause architectural, không chỉ micro-optimization.

🏥 Health tech — Thinking cho compliance logic

Trước: "HIPAA compliance logic phức tạp, dev sợ làm sai."

Với think harder: Claude verify từng edge case PHI flow, output compliance matrix.

📣 Marketing engineer — Combine Screenshots + Planning

Trước: "Redesign landing, affect 12 component. Scope creep mỗi lần."

Với combo: Screenshot target design + Planning Mode liệt kê file + Thinking về impact.

• Kết quả: 4-5 round → 1-2 round. Saves 6 hours/week design-dev handoff.
• Kết quả: Migration 2 tuần → 4 ngày, zero production incident.
• Kết quả: Từ 45fps lên 120fps sau 1 session Claude ultrathink. Con người đã cố 2 tuần không ra.
• Kết quả: Pass SOC 2 audit lần đầu, 0 finding liên quan code.
• Kết quả: Scope khóa chặt, delivery đúng hạn 100%.

Anti-patterns

❌ Dùng Planning Mode cho task siêu nhỏ

Biểu hiện: "Đổi comment của hàm này" → Shift+Tab x2.

Tại sao sai: Overkill, tốn token vô ích.

Cách đúng: Chỉ Planning Mode khi task ≥5 file hoặc có trade-off cần duyệt.

❌ Dùng ultrathink cho task trivial

Biểu hiện: "Thêm một button blue. Ultrathink."

Tại sao sai: Ultrathink = 64K thinking tokens. Một button không đáng.

Cách đúng: think cho task vừa, ultrathink dành cho architecture/algorithm hiếm.

❌ Paste screenshot nhưng không mô tả

Biểu hiện: paste screenshot → "Làm cái này."

Tại sao sai: Cái gì trong screenshot cần làm? Claude đoán mơ hồ.

Cách đúng: Luôn mô tả focus: "Button ở góc trên phải trong screenshot cần thay đổi padding."

❌ Approve Planning Mode plan mà không đọc kỹ

Biểu hiện: Claude output plan 40 dòng → bạn scroll → "y, approve".

Tại sao sai: Plan có file bạn không muốn touch, bạn miss → gãy production.

Cách đúng: Đọc từng file trong "Files to modify". Nếu file quan trọng → scrutinize. Approve selective nếu Claude support.

❌ Thinking Mode mà prompt không đủ context

Biểu hiện: "think harder" nhưng prompt chỉ có 1 câu.

Tại sao sai: Thinking mạnh, nhưng thinking về "không có gì" vẫn = không có gì.

Cách đúng: Kết hợp prompt chi tiết (với @mention, requirements) + thinking.

Mẹo nâng cao

Mẹo 1: Shortcut kết hợp

Mẹo 2: Prompt "show plan only"

Không cần bật Planning Mode cũng có thể yêu cầu:

Shift+Tab (1 lần):  Auto-accept edits (nhanh, nguy hiểm)
Shift+Tab (2 lần):  Planning Mode (chậm, an toàn)
Ctrl+V:             Paste screenshot
Ctrl+C / Esc:       Interrupt Claude (khi đi sai hướng)
Esc Esc:            Rewind conversation (quay lại message trước)

Mẹo 2: Prompt "show plan only"

Với Claude 4+, nó sẽ tự làm pattern đó.

Mẹo 3: Combine visual + verbal cho precision

Làm X. Nhưng trước khi edit, show plan cho tôi duyệt.

Mẹo 3: Combine visual + verbal cho precision

Vừa visual (bạn chỉ rõ card nào), vừa verbal (specific value).

Mẹo 4: Dùng thinking cho code review

[Paste screenshot]
Card thứ 2 từ trái. Padding top/bottom cần ít hơn — giảm 
từ py-8 xuống py-4. Keep màu, font, layout khác.

Mẹo 4: Dùng thinking cho code review

Claude code review kèm thinking sâu → output giống senior review hơn nhiều.

Review @src/billing/process-payment.ts. Think hard about:
- Race conditions
- Idempotency
- Error handling gaps
- Transaction boundaries

Áp dụng ngay

Bài tập 1: Three-mode speedrun (20 phút)

Trong uigen (hoặc project của bạn):

Task 1 — Screenshot:

Task 2 — Planning Mode:

Task 3 — Thinking Mode:

Ghi lại:

Bài tập 2 (optional, 15 phút): Token budget analysis

Chọn 1 task trung bình. Chạy 3 lần:

Ghi lại token usage (hiện cuối session):

Compare quality output. Key question: mode nào đáng extra cost cho task type đó?

• Mở app ở browser
• Screenshot một phần UI bạn không hài lòng
• Paste vào Claude Code + prompt sửa chi tiết
• Quan sát: Claude có match expected không?
• Chọn task đụng 3+ file (ví dụ: "Thêm dark mode theme")
• Bật Planning Mode
• Đọc plan, approve
• So sánh với task tương tự làm không Planning
• Task logic phức tạp (ví dụ: "Refactor function X để handle edge case Y, think hard")
• Quan sát text xám của thinking
• So sánh quality output với prompt same không thinking
• Task 1 OK ngay lần đầu? ☐ Có ☐ Không
• Task 2 plan accurate? ☐ Có ☐ Không
• Task 3 thinking có ích không? ☐ Có ☐ Không
• Không mode gì
• Planning Mode
• Thinking Mode (think hard)

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

🎯 Screenshots = Ctrl+V — dùng cho mọi task có UI, không dùng cho task logic pure.

🎯 Planning Mode (Shift+Tab x2) — breadth: review plan cross-file trước execute. Dành cho migration, refactor lớn, task ≥5 file.

🎯 Thinking Mode (keyword) — depth: Claude reasoning sâu trước output. Dành cho bug khó, architecture decision, logic complex.

🎯 Planning + Thinking combine — cho task rộng + sâu (ví dụ: security-related migration).

🎯 Cost vs value — Planning 1.5-2x, Thinking 2-10x, Ultrathink 20-30x. Chỉ dùng khi xứng đáng.