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

Mở đầu: 6 màn hình edtech onboarding trong 5 phút

• 2 ngày moodboard và lookalike research
• 1 ngày spec component cần dùng
• 2-3 ngày draft trên Figma với 2-3 round revision với PM
• 1 ngày polish + handoff

Tổng: 6-7 ngày từ kickoff đến hi-fi.

Năm 2026, Kirk @UI Collective làm video demo quay trực tiếp: anh ấy gõ một prompt, trả lời 8 câu Claude hỏi, đợi 5 phút, có 6 màn hình onboarding cho edtech AI tutor — typography đẹp, animation subtle, color palette consistent. Quality first draft, không phải sketch.

A tutor that learns you first" — typography hero. Có 4 visual variants. Motion level adjustable. Skill diagnostic flow đầy đủ. Pay wall page nhìn chất.

Kirk's reaction: "Most AI designs do not look this good right away."

5 phút thay vì 6 ngày. Tỷ lệ 1700:1.

Câu hỏi: Kirk làm gì trong 5 phút đó để có chất lượng đó? Chỉ là gõ prompt, đúng không? Sai. Anh ấy có kỷ luật về cách viết prompt và trả lời questions — phần lớn designer mới dùng Claude Design bỏ qua. Bài này dạy bạn kỷ luật đó.

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.

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│          │    │          │    │          │    │          │    │          │
│ ① 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

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

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

Ví dụ:

Build me an onboarding flow (cái gì) for a futuristic edtech mobile platform (cho ai + context). Visual direction: weird futuristic UX, novelty 8/10 (vibe).

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:

• 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

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

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

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

1. Câu về intent / audience — luôn cụ thể, dùng reference nếu có.
2. Câu về visual direction — luôn dùng brand reference ("Linear-style", "Stripe-style") thay vì adjective mơ hồ.
3. Câu về structure (steps, sections) — list rõ, không "tùy AI".
4. Câu về aesthetic detail (color accent, animation intensity) — "Decide for me" được, sửa sau bằng Tweaks.

Giai đoạn ④ — Generate

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

• 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

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

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:

• 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

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

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:

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

Lý do:

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

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.

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:

Build me a mobile companion app for a marketing analytics platform. Target: marketing managers (30-40 tuổi, tech-comfortable, tracking campaign KPIs). Visual direction: Linear-style + Stripe

minimal, premium, tech vibe. iOS frame."

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:

• Slider density: 6 → 8 (hơi đặc lại)
• Slider motion: normal → minimal (calm hơn)

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

Phần B — Desktop dashboard

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

Prompt:

Now build me a desktop dashboard for the same marketing analytics platform — for deep analysis. Same design language as the mobile app I just built (Linear + Stripe vibe). Primary audience: same marketing managers but now in office, big screen, deep dive.

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:

• Comment: "Reduce recent activity từ 10 rows xuống 5 để fit fold"
• Slider data density: 7 → 9

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

Kết quả

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

🎯 Ghi nhớ: Reuse design language giữa 2 prototype trong cùng project = giảm questions Claude hỏi + output consistent. Pattern: Prototype 1 establish vibe → Prototype 2+ inherits.

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:

• 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

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:

• 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

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:

• 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

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:

• 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

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

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

Template 1 — Mobile prototype (single flow)

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

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

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

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)

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:

Look at the current prototype. Ask me 5 questions that, if answered, would significantly improve the design quality. Don't ask basic questions

ask designer-level."

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:

Linear's minimalism + Notion's friendliness. Tech but warm.

Stripe's premium feel + Brutalist confidence. Bold + classy.

Hybrid generate vibe unique — khó copy.

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

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

• 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

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.

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

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

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

Tạo file Notion / Obsidian / Markdown:

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

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

---

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

Tài liệu tham khảo

• Kirk @UI Collective — Claude Design: The Complete Guide (32 phút) — phần demo edtech onboarding 6 screens và financial dashboard
• Anthropic Examples gallery — copy prompts từ 50+ ví dụ
• Anatomy of a great design prompt — UI Collective Academy course (paid resource)

Câu hỏi để check kỷ luật: bạn có dành 1 phút viết prompt 4-yếu tố trước khi nhấn Send không? Nếu không, bạn đang trade 1 phút để tốn 5-10 phút token re-generate. Investment ratio cao nhất là 60 giây cho prompt sạch.