Prototype đầu tiên — Anatomy của một vòng prompt-generate

Vòng prompt-generate — 5 giai đoạn

Mỗi prototype Claude Design đi qua đúng 5 giai đoạn. Hiểu chúng = control output.

Token spend distribution: ① ~5%, ② ~5%, ③ ~5%, ④ ~70%, ⑤ ~15%.

Giai đoạn ④ Generate là chỗ tốn nhất. Mục tiêu workflow: làm cho ④ ra đúng first draft, hạn chế phải re-generate.

Cách duy nhất để ④ ra đúng: ① + ② + ③ phải kỹ.

Giai đoạn ① — Prompt khởi đầu

Prompt là entry point. Quá ngắn = Claude hỏi nhiều câu (mệt). Quá dài = Claude bỏ sót intent (sai hướng).

Sweet spot: 2-4 câu, có 4 yếu tố:

Ví dụ:

Cấu trúc này giúp Claude hỏi đúng câu (về flow detail), không hỏi câu nhầm (về platform / audience cơ bản).

Giai đoạn ② — Claude hỏi 6-10 câu

Sau khi Send prompt, Claude không generate ngay. Nó hỏi clarifying questions theo template:

Quy tắc: Trả lời 3-4 câu YES. Còn lại "Decide for me" OK.

Giai đoạn ③ — Trả lời chiến lược

Designer mới hay sai 1 trong 2 thái cực:

Cách đúng: Cho Claude constraint cụ thể ở 3-4 câu quan trọng, freedom ở câu còn lại.

• Quá đáng: trả lời tỉ mỉ mọi câu, mất 5 phút → Claude vẫn generate generic vì input quá nhiều noise
• Quá ít: "Decide for me" mọi câu → Claude generate generic

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│          │    │          │    │          │    │          │    │          │
│ ① PROMPT │ ──▶│ ② QUESTIONS │▶│ ③ ANSWERS│ ──▶│ ④ GENERATE│ ──▶│ ⑤ TWEAK  │
│          │    │          │    │          │    │          │    │          │
│ Bạn viết │    │ Claude    │    │ Bạn đáp  │    │ Claude    │    │ Bạn quẹt │
│ ý tưởng  │    │ hỏi 6-10  │    │ chiến    │    │ render    │    │ slider, │
│ ban đầu  │    │ câu       │    │ lược     │    │ first draft│    │ comment │
│          │    │          │    │          │    │           │    │ , edit  │
└──────────┘    └──────────┘    └──────────┘    └──────────┘    └──────────┘
   30s            5-15s            30-60s          2-5 phút         5-15 phút

[CÁI GÌ] + [CHO AI] + [CONTEXT] + [VIBE]

Giai đoạn ③ — Trả lời chiến lược

Nguyên tắc trả lời:

Giai đoạn ④ — Generate

Sau khi bạn nhấn Continue, Claude render. Time:

Token spend chính ở đây. Đừng cancel mid-render — token đã tốn, cancel chỉ mất output.

Giai đoạn ⑤ — Tweak (overlap với Bài 4)

First draft xong. Mở Tweaks panel, quẹt slider trước. Sau đó comment / edit / draw nếu cần (Bài 4).

• Câu về intent / audience — luôn cụ thể, dùng reference nếu có.
• Câu về visual direction — luôn dùng brand reference ("Linear-style", "Stripe-style") thay vì adjective mơ hồ.
• Câu về structure (steps, sections) — list rõ, không "tùy AI".
• Câu về aesthetic detail (color accent, animation intensity) — "Decide for me" được, sửa sau bằng Tweaks.
• Mobile prototype 6 screen: ~3-5 phút
• Desktop dashboard: ~3-5 phút
• Slide deck 10 slide: ~5-8 phút
• Landing page full: ~5-10 phút
• Video 30s: ~2-3 phút

Q: "Primary audience?"
✅ "Gen Z (18-24), self-learners, comfort với AI"
❌ "Decide for me"
❌ "Người trẻ thông minh ham học hiện đại"  ← quá generic

Q: "Visual direction?"
✅ "Reference Linear app + Apple Fitness — minimal, tech, motion subtle"
❌ "Modern and sleek"  ← Claude phải đoán

Q: "Color theme accent?"
✅ "Decide for me"  ← ok, không quan trọng cho first draft

Mobile vs Desktop — Khác biệt cần biết

Theo Kirk @UI Collective, Claude Design hiện tại làm mobile prototype tốt hơn desktop. Lý do:

Bảng so sánh chi tiết:

• Mobile có ít component → ít chỗ Claude "đoán sai"
• Mobile structure (screen-by-screen) phù hợp với cách Claude reason theo flow
• Desktop dashboard nhiều data, nhiều state → Claude khó hold full context

Wireframe vs Hi-fi — Quyết định nhanh

Claude Design hỏi bạn chọn wireframe hay hi-fi ngay đầu. Quyết định:

Lý do:

Kirk note: "Tôi không biết designer nào còn wireframe nữa ngày nay". Đúng cho designer đã có design system. Sai cho founder solo / team mới.

• Có design system → Claude apply system → hi-fi ngay đẹp + brand-consistent.
• Không có design system → wireframe để focus flow, không bị visual nó bias quyết định flow. Sau khi flow đúng, switch hi-fi.

        Bạn có design system?
              │
        ┌─────┴─────┐
        ▼           ▼
       NO          YES
        │           │
        ▼           ▼
    ┌──────┐   ┌──────┐
    │ Wire │   │ Hi-fi │
    │frame │   │ ngay  │
    └──────┘   └──────┘
        │
        ▼
    Validate flow
        │
        ▼
    Switch hi-fi

Ví dụ thực chiến: 2 prototype back-to-back

Tình huống

Bạn đang pitch ý tưởng SaaS analytics cho marketing team. Cần demo 2 phía: mobile companion app (cho marketer xem KPI nhanh) + desktop dashboard (cho deep analysis). Time budget: 30 phút trước cuộc họp.

Phần A — Mobile companion app

Prompt:

Claude hỏi 8 câu:

Generate: ~4 phút.

Output: 5 screens với typography hierarchy đúng, KPI cards có spark line, alert center color-coded, motion subtle. Quality first draft: 8/10.

Tweak:

Phần A xong: ~10 phút.

Phần B — Desktop dashboard

Strategy: Reuse design language từ Phần A.

Prompt:

Claude hỏi 6 câu (ít hơn vì đã có context Phần A):

Generate: ~4 phút.

Output: Dashboard với sidebar nav, 5 sections, KPI cards trên cùng, chart variations, dark mode support. Quality: 7/10 (sections hơi dài, white space ở dưới recent activity).

Tweak:

Phần B xong: ~13 phút.

Kết quả

• Slider density: 6 → 8 (hơi đặc lại)
• Slider motion: normal → minimal (calm hơn)
• Comment: "Reduce recent activity từ 10 rows xuống 5 để fit fold"
• Slider data density: 7 → 9
• Tổng: 23 phút thay vì 30 phút budget. Còn 7 phút polish + share link cho team.
• Token tốn: ~6% Pro plan (2 prototype + 1 batch comment)
• Chất lượng: mobile 8/10, desktop 7/10 — đủ pitch.
• Nếu làm Figma: ~6-8 tiếng cho cùng quality first draft.

Ví dụ theo ngành / Case studies

🎨 Freelance designer pitch khách

Pain point: "Khách brief mơ hồ. Mình không biết nên tạo 1 hay 5 mockup pitch. 1 — sợ khách không thấy vibe. 5 — phế nếu chọn 1 cái chính."

Workflow Claude Design:

Kết quả: 15 phút thay vì 1 ngày Figma cho 3 mockup. Margin pitch tăng vì giảm "free design" cho 2 mockup phế.

🏢 Agency design lead

Pain point: "PM brief nhanh trước stand-up: 'cần landing page concept cho RFP chiều nay'. Mình có 2 tiếng. Figma không kịp."

Workflow Claude Design:

Kết quả: RFP submitted in 2 hours với 3 concept options. Trước đây chỉ submit 1 concept.

🚀 Founder solo MVP

Pain point: "Mình cần MVP screens để test với 5 user trước khi hire dev. Outsource designer 1 tuần + ₹50k. Validate idea chậm, có thể là idea sai."

Workflow Claude Design:

Kết quả: Validate idea trong 1 tuần thay vì 4 tuần. Nếu idea sai, pivot sớm hơn 3 tuần. Saving: ~₹50k + 3 tuần runway.

👔 Product Manager (non-designer)

Pain point: "Mình PM, không vẽ Figma được. Spec viết bằng text → designer hiểu sai → 2 round revise."

Workflow Claude Design:

Kết quả: Spec → design handoff smooth hơn. Designer dồn time vào craft thay vì decode spec.

• Prompt 3 variant prototype với 3 visual direction khác nhau (Linear-style, Stripe-style, Notion-style)
• Mỗi cái 5 phút generate
• Share 3 link cho khách + 1 paragraph trade-off mỗi cái
• Khách chọn → mở Figma đầu tư time
• 5 phút viết prompt với 4 yếu tố (cái gì, ai, context, vibe)
• 6-10 câu trả lời chiến lược (2 phút)
• Generate ~5 phút
• Tweak slider + 2 comment batch (~10 phút)
• Total: ~22 phút có concept để present
• 1 tiếng còn lại: refine prompt → generate variant → present 2-3 option
• Prototype mobile MVP — 6-8 screen flow chính (~15 phút)
• Share link cho 5 user testing
• Tuần đầu: 5 round iterate dựa feedback
• Hoàn thành validated prototype: 1 tuần thay vì 4 tuần
• Prompt theo spec → Claude generate visual prototype → attach vào Jira ticket như reference
• Designer thực thi mở Figma — đã có visual reference rõ ràng
• Round revise giảm từ 2-3 → 0-1

Prompt template — 6 mẫu sẵn dùng

Template 1 — Mobile prototype (single flow)

Template 2 — Desktop dashboard

Build me a [flow type, ví dụ: onboarding / checkout / settings] flow for
a [domain] mobile app. Target: [audience cụ thể với age + tech-comfort].
Visual direction: [reference brand]-style + [adjective]. Frame: iOS.
Screens needed: [list 4-8 screens].

Template 2 — Desktop dashboard

Template 3 — Multi-screen với consistent design language

Build me a desktop dashboard for [domain]. Target: [audience].
Navigation: [left sidebar / top nav / hybrid]. Sections: [list 4-6
sections]. Data density: [low / medium / high]. Chart types: [list].
Currency: [USD / VND]. Aesthetic: [reference brand]-style.

Template 3 — Multi-screen với consistent design language

Template 4 — Reference cụ thể (mimicking đã có asset)

[Sau khi đã có Prototype 1] Now build me [output type 2] for the same
[product]. Use the same design language as the [previous prototype].
Target: [if different, specify]. Sections/Screens: [list].

Template 4 — Reference cụ thể (mimicking đã có asset)

Template 5 — Wireframe-first (chưa có design system)

Build me [output type]. Reference: like [URL or "this screenshot
attached"]. Adapt for: [your domain]. Keep what works: [aspect 1, 2].
Change: [aspect needs different].

Template 5 — Wireframe-first (chưa có design system)

Template 6 — Variant exploration (nhiều direction để pitch)

Build me a wireframe of a [flow / page] for [product]. Focus on flow
and information hierarchy, not visual polish. Audience: [who].
Decisions to test: [list 1-2 hypotheses]. Frame: [iOS / web].

Template 6 — Variant exploration (nhiều direction để pitch)

Build me 3 variants of [output type] for [product]. Each variant
should explore a different visual direction:
1. [Direction 1, reference brand 1]
2. [Direction 2, reference brand 2]
3. [Direction 3, reference brand 3]
Audience and structure stay the same.

Anti-patterns — Sai lầm phổ biến

❌ Prompt 1 từ kiểu "build me a dashboard"

Bạn lười, gõ ngắn, nhấn Send.

Tại sao sai: Claude phải hỏi 12-15 câu (vì không có context). Bạn dành 5 phút trả lời câu cơ bản (audience, vibe, domain) mà bạn nên đặt sẵn trong prompt.

Cách đúng: Theo template "[CÁI GÌ] + [CHO AI] + [CONTEXT] + [VIBE]". 2-4 câu. Tiết kiệm 8-10 câu hỏi sau.

❌ Prompt nhồi nhét spec từng pixel

Bạn viết prompt 200 từ, list 30 yêu cầu cụ thể.

Tại sao sai: Claude khó hold full context. Một số yêu cầu bị skip, một số mâu thuẫn nhau → first draft generic vì Claude phải reconcile.

Cách đúng: Prompt ngắn (2-4 câu). Yêu cầu cụ thể đẩy vào answer questions (giai đoạn ③). Đặt 1 spec / 1 question.

❌ "Decide for me" mọi câu hỏi

Lười, bấm decide hết. Generate xong nhìn output: meh.

Tại sao sai: Claude generate dựa trung bình data training khi không có constraint. Trung bình = generic = nhạt.

Cách đúng: Trả lời 3-4 câu YES (xem bảng phía trên). Quan trọng nhất: audience, visual direction, structure.

❌ Visual direction = "modern and sleek"

Adjective mơ hồ.

Tại sao sai: "Modern" 2026 khác "modern" 2018. Claude phải đoán → đoán sai → bạn phải re-prompt.

Cách đúng: Reference brand cụ thể. "Linear-style", "Stripe-style", "Notion + Apple combo", "Brutalist như Figma 2024 redesign". Reference đem lại consistency.

❌ Cancel mid-generate vì "thấy preview xấu"

Generate đến 50%, bạn thấy 1 screen nhìn không vừa ý → bấm cancel.

Tại sao sai: Token đã tốn 50%. Claude render screen-by-screen, screen đầu chưa polish. Cancel = bạn mất 70% token đã tốn cho 0 output.

Cách đúng: Đợi xong rồi đánh giá full picture. Token đã tốn — ít ra dùng. Tweak bằng comment / edit ở giai đoạn ⑤.

❌ Không note lại successful prompt

Bạn ra prototype tuyệt vời. Tuần sau: "làm sao mình có cái này nhỉ"?

Tại sao sai: Reproducibility là tài sản. Không lưu = mỗi lần tạo lại tốn 2-3 round trial.

Cách đúng: Maintain "Prompt Recipe" doc. Lưu: prompt, answers, tweaks. 2 tháng có 30 recipe — library cá nhân.

Mẹo nâng cao

Mẹo 1: "Claude, hỏi tôi 5 câu để cải thiện prototype này"

Sau first draft, thay vì comment liên tục, dùng prompt:

Claude phản ánh điểm yếu thật. Bạn answer 5 câu → 1 round generate ra version v2.0 chất lượng cao hơn 5 round comment lẻ.

Mẹo 2: Reference 2 brand đối lập để có hybrid vibe

Thay vì "Linear-style" (mỗi cái Linear-style ai cũng làm được), dùng 2 brand đối lập:

Hybrid generate vibe unique — khó copy.

Mẹo 3: "Mobile first, then desktop" pattern

Luôn prompt mobile trước khi desktop. Lý do:

Mẹo 4: Claude ask câu nào nhiều = signal về intent gap

Nếu Claude hỏi nhiều câu về audience → prompt thiếu context audience. Nếu Claude hỏi nhiều câu về visual direction → cần reference brand. Nếu Claude hỏi nhiều câu về flow → cần structure rõ.

Nhìn loại câu Claude hỏi = feedback về prompt của bạn.

Mẹo 5: First draft xấu = re-prompt rẻ hơn iterate

Nếu first draft đi sai hướng (vibe sai, audience nhầm, structure không phù hợp) → đừng iterate. 5 round comment để chỉnh = 5x token. Một round re-prompt với context tốt hơn = 1x token, output đúng.

Quy tắc: nếu phải comment để fix concept (không phải fix detail) → re-prompt.

• Mobile constraint forces Claude vào essential design quyết định
• Desktop sau inherits essential decisions, không drift
• Quality desktop ổn hơn 30% so với prompt desktop direct

Áp dụng ngay

Bài tập 1: 2-prototype same-domain sprint (~30 phút)

Bước 1 — Chọn 1 domain quen thuộc. Ví dụ: e-commerce, fintech, edtech, health, productivity.

Bước 2 — Prototype 1: Mobile flow.

Áp dụng Template 1. Note lại:

Bước 3 — Prototype 2: Desktop trong cùng domain.

Áp dụng Template 3 (reuse design language). Note:

Bước 4 — Reflection:

Bài tập 2 (optional): "Recipe doc" khởi đầu (~10 phút)

Tạo file Notion / Obsidian / Markdown:

Lưu lại 2 prototype vừa làm thành 2 recipe.

• Mobile và desktop có "feel" giống nhau không?
• Prototype 2 có ít question Claude hỏi hơn Prototype 1?
• Total time: ___ phút (target: ≤30 phút)

# Claude Design Recipes — [Tên bạn]

## Recipe 1: Mobile [flow type] — [date]
**Prompt:**
> [paste prompt]

**Questions answered:**
- Q1: [answer]
- Q2: [answer]
- ...

**Tweaks applied:**
- [tweak 1]
- [tweak 2]

**Result link:** [Claude Design share URL]
**Quality (1-10):** ___
**Notes for next time:** ___

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

🎯 5 giai đoạn vòng prompt-generate — Prompt → Questions → Answers → Generate → Tweak. Generate tốn 70% token, phải đầu tư prompt + answer để giảm re-generate.

🎯 Sweet spot prompt = 2-4 câu, 4 yếu tố — Cái gì + Cho ai + Context + Vibe. Bám template, bỏ kiểu prompt 1 từ hoặc 200 từ.

🎯 3-4 câu YES, còn lại "Decide for me" — Audience, visual direction, structure phải kỹ. Color accent, animation intensity, tweaks để decide.

🎯 Mobile first, then desktop — Mobile constraint giúp essential decision sạch. Desktop sau inherits → consistency và quality cao hơn 30%.

🎯 Re-prompt > iterate khi concept đi sai hướng — 1 round re-prompt rẻ hơn 5 round comment fix concept.

🎯 Recipe doc là tài sản — lưu prompt + answer + tweak cho mỗi prototype tốt. 2 tháng có 30 recipe — library cá nhân.