Claude cho UX Prototyping — Từ wireframe text đến interactive prototype

Trong quy trình thiết kế UX truyền thống, việc chuyển từ ý tưởng sang prototype thường mất nhiều ngày làm việc với các công cụ như Figma, Sketch hay Adobe XD. Nhưng với Claude, bạn có thể mô tả wireframe bằng văn bản và nhận lại prototype HTML/CSS tương tác chỉ trong vài phút. Phương pháp này đặc biệt hữu ích cho giai đoạn khám phá ý tưởng, khi bạn cần thử nghiệm nhiều hướng thiết kế khác nhau trước khi đầu tư thời gian vào công cụ chuyên dụng.

Text-based wireframe là gì?

Text-based wireframe là cách mô tả bố cục và thành phần giao diện bằng ngôn ngữ tự nhiên thay vì vẽ trên công cụ đồ họa. Bạn mô tả vị trí, kích thước, chức năng của từng phần tử — Claude sẽ hiểu và tạo ra mã HTML/CSS tương ứng.

Ưu điểm của phương pháp này bao gồm:

• Tốc độ: Viết mô tả nhanh hơn nhiều so với kéo thả trong công cụ thiết kế
• Lặp lại dễ dàng: Chỉnh sửa vài dòng text thay vì sắp xếp lại toàn bộ layout
• Không cần kỹ năng thiết kế: Product manager hay developer đều có thể tạo wireframe
• Tạo được prototype chạy thật: Kết quả là mã HTML/CSS hoạt động được trên trình duyệt

Cách mô tả wireframe hiệu quả cho Claude

Để Claude tạo ra prototype chính xác, bạn cần mô tả wireframe theo cấu trúc rõ ràng. Dưới đây là khung mô tả hiệu quả nhất.

Mô tả tổng quan trang

Bắt đầu bằng việc xác định mục đích trang, đối tượng người dùng và bối cảnh sử dụng. Prompt mẫu:

Tạo prototype HTML/CSS cho trang đăng ký khóa học online với các thông tin sau:

Mục đích: Người dùng xem thông tin khóa học và đăng ký tham gia
Đối tượng: Nhân viên văn phòng 25-35 tuổi tại Việt Nam
Thiết bị chính: Mobile (375px width)
Phong cách: Hiện đại, tối giản, tone màu xanh dương (#2563EB)

Bố cục từ trên xuống:
1. Header: Logo bên trái, nút "Đăng nhập" bên phải
2. Hero section: Hình ảnh placeholder, tiêu đề khóa học, mô tả ngắn 2 dòng
3. Thông tin chi tiết: Thời lượng, số bài học, giảng viên (dạng 3 cột icon + text)
4. Nội dung khóa học: Accordion 5 chương, mỗi chương có tiêu đề và số bài
5. Giảng viên: Avatar tròn, tên, chức danh, mô tả ngắn
6. Đánh giá: 3 testimonial dạng card với avatar, tên, rating sao, nhận xét
7. CTA section: Giá gốc gạch ngang, giá ưu đãi lớn, nút "Đăng ký ngay" full-width
8. Footer: Liên kết chính sách, thông tin liên hệ

Yêu cầu kỹ thuật:
- Responsive mobile-first
- Sử dụng CSS Grid hoặc Flexbox
- Font: system-ui
- Có hover effect trên các nút
- Accordion có thể mở/đóng bằng JavaScript

Mô tả chi tiết từng section

Khi cần độ chính xác cao hơn, hãy mô tả từng section riêng biệt với đầy đủ thông tin về spacing, typography và màu sắc:

Thiết kế section "Pricing" cho trang SaaS với các yêu cầu:

Layout: 3 cột ngang hàng trên desktop, stack dọc trên mobile
Mỗi cột là một pricing card gồm:
- Tên gói: Basic / Pro / Enterprise
- Giá: hiển thị theo tháng, có toggle chuyển sang năm (giảm 20%)
- Danh sách tính năng: 5-8 dòng, tính năng không có thì gạch ngang màu xám
- Nút CTA: "Bắt đầu miễn phí" / "Nâng cấp" / "Liên hệ"
- Gói Pro có viền highlight và badge "Phổ biến nhất"

Spacing: padding 32px mỗi card, gap 24px giữa các card
Border: 1px solid #E5E7EB, border-radius 12px
Shadow: gói Pro có box-shadow lớn hơn 2 gói còn lại
Font size: Tên gói 18px, giá 36px bold, tính năng 14px

Claude tạo HTML/CSS prototype

Từ mô tả text, Claude sẽ tạo ra mã HTML/CSS hoàn chỉnh. Điều quan trọng là bạn cần hướng dẫn Claude về chất lượng mã và mức độ chi tiết mong muốn.

Dựa trên wireframe mô tả ở trên, hãy tạo prototype với các yêu cầu:

1. Single HTML file (inline CSS và JS)
2. Sử dụng semantic HTML5 (header, main, section, footer, nav)
3. CSS custom properties cho màu sắc và spacing
4. Mobile-first responsive (breakpoints: 375px, 768px, 1024px)
5. Placeholder images dùng background-color hoặc SVG đơn giản
6. Text content bằng tiếng Việt có dấu
7. Accessible: có aria-labels, alt text, focus states
8. Smooth transitions cho hover và click states

Không sử dụng framework CSS bên ngoài.
Tất cả trong một file HTML duy nhất để dễ preview.

Thiết kế interactive elements

Prototype không chỉ là giao diện tĩnh. Để kiểm tra trải nghiệm người dùng thực sự, bạn cần các phần tử tương tác. Claude có thể tạo tất cả bằng vanilla JavaScript.

Forms tương tác

Thêm form đăng ký vào prototype với các yêu cầu:

Các trường:
- Họ tên: text input, required, validate không để trống
- Email: email input, required, validate format email
- Số điện thoại: tel input, validate 10 số bắt đầu bằng 0
- Mật khẩu: password input, hiển thị strength indicator
  (yếu: đỏ, trung bình: vàng, mạnh: xanh)
- Xác nhận mật khẩu: kiểm tra khớp với mật khẩu

Hành vi:
- Validate realtime khi người dùng nhập (onblur)
- Hiển thị thông báo lỗi ngay dưới trường input (màu đỏ, font 12px)
- Nút submit disabled cho đến khi tất cả trường hợp lệ
- Khi submit thành công: hiển thị modal xác nhận
- Loading spinner trên nút khi đang xử lý (giả lập 2 giây)

Modal và Dialog

Tạo hệ thống modal cho prototype:

1. Modal xác nhận: Tiêu đề, nội dung, 2 nút (Hủy / Xác nhận)
2. Modal thông báo: Icon + message + nút Đóng
3. Modal full-screen trên mobile: Slide up từ dưới lên
4. Overlay: Background tối mờ, click outside để đóng
5. Animation: fadeIn 200ms cho overlay, slideUp 300ms cho modal
6. Trap focus: Tab chỉ di chuyển trong modal khi đang mở
7. Đóng bằng phím Escape

Navigation patterns

Thiết kế hệ thống navigation cho mobile app prototype:

1. Bottom tab bar: 5 tabs với icon SVG + label
   - Trang chủ, Khám phá, Thông báo, Tin nhắn, Cá nhân
   - Tab active: icon filled + màu primary, label bold
   - Badge đỏ trên icon Thông báo (hiển thị số)

2. Hamburger menu cho desktop:
   - Slide-in từ bên trái, width 280px
   - Danh sách menu items với icon
   - Sub-menu expandable (click để mở/đóng)
   - Overlay tối phía sau

3. Breadcrumb navigation:
   - Trang chủ > Danh mục > Sản phẩm
   - Responsive: ẩn bớt trên mobile, chỉ hiện 2 cấp cuối

Claude Artifacts cho rapid prototyping

Claude Artifacts là tính năng cho phép Claude tạo ra các thành phần UI tương tác ngay trong cửa sổ chat. Thay vì copy mã và mở trong trình duyệt, bạn có thể xem và tương tác với prototype trực tiếp.

Khi sử dụng Artifacts để prototyping, bạn nên yêu cầu Claude tạo React component vì Artifacts hỗ trợ render React trực tiếp:

Tạo một React component trong Artifact cho dashboard analytics gồm:

1. Header: Tiêu đề "Bảng điều khiển", dropdown chọn khoảng thời gian
   (7 ngày / 30 ngày / 90 ngày)
2. Stat cards (4 cái, hàng ngang):
   - Tổng doanh thu: 125.000.000đ (+12% so với kỳ trước)
   - Đơn hàng mới: 342 (+5%)
   - Khách truy cập: 15.234 (-3%)
   - Tỷ lệ chuyển đổi: 2.24% (+0.3%)
   Mỗi card có icon, số lớn, phần trăm thay đổi (xanh nếu tăng, đỏ nếu giảm)

3. Biểu đồ: Dùng SVG vẽ line chart đơn giản hiển thị doanh thu 7 ngày
4. Bảng đơn hàng gần đây: 5 dòng với mã đơn, khách hàng, số tiền, trạng thái

Sử dụng Tailwind CSS classes. State management với useState.
Khi thay đổi dropdown thời gian, cập nhật dữ liệu giả lập tương ứng.

Lợi ích của Artifacts so với prototype truyền thống:

• Xem ngay: Không cần copy code ra file riêng, xem trực tiếp trong Claude
• Chỉnh sửa nhanh: Yêu cầu Claude sửa và artifact cập nhật ngay lập tức
• Chia sẻ dễ dàng: Gửi link artifact cho đồng nghiệp xem và góp ý
• Lịch sử phiên bản: Mỗi lần chỉnh sửa tạo phiên bản mới, dễ so sánh

User flow documentation

Prototype không chỉ là giao diện đơn lẻ mà còn là chuỗi hành trình người dùng. Claude giúp bạn tài liệu hóa user flow một cách có hệ thống.

Tạo tài liệu user flow cho chức năng "Đặt hàng" của ứng dụng e-commerce:

Format: Mỗi bước gồm [Màn hình] > [Hành động] > [Kết quả]

Bắt đầu từ: Người dùng đang ở trang chi tiết sản phẩm
Kết thúc tại: Đơn hàng đã được xác nhận

Bao gồm:
1. Happy path (luồng chính thành công)
2. Error states (lỗi thanh toán, hết hàng, timeout)
3. Edge cases (thay đổi số lượng, áp mã giảm giá không hợp lệ, quay lại bước trước)
4. Decision points (đăng nhập hoặc mua với tư cách khách)

Trình bày dưới dạng:
- Sơ đồ text-based (dùng ký tự ASCII)
- Mô tả chi tiết từng màn hình
- Danh sách các API call cần thiết ở mỗi bước
- Ghi chú UX cho designer

Claude sẽ tạo ra tài liệu user flow hoàn chỉnh mà bạn có thể sử dụng trực tiếp hoặc chuyển thành sơ đồ trong các công cụ như Miro, FigJam hay Whimsical.

Tạo sitemap và information architecture

Tạo sitemap cho ứng dụng quản lý dự án với các yêu cầu:

Đối tượng: Team phát triển phần mềm 5-20 người
Chức năng chính: Quản lý task, sprint planning, báo cáo tiến độ

Trình bày sitemap dưới dạng tree structure:
- Cấp 1: Các trang chính
- Cấp 2: Các trang con
- Cấp 3: Các chức năng trong trang

Với mỗi trang, ghi chú:
- Mức độ ưu tiên (P0/P1/P2)
- Có cần đăng nhập không
- Loại trang (listing, detail, form, dashboard)
- Trang tham chiếu (liên kết tới trang nào)

Feedback collection design

Khi đã có prototype, bước tiếp theo là thu thập phản hồi từ stakeholders và người dùng. Claude giúp bạn thiết kế hệ thống thu thập feedback hiệu quả.

Tạo bảng feedback có cấu trúc

Tạo template feedback cho prototype review session:

Thông tin phiên review:
- Tên prototype: [Tên]
- Ngày review: [Ngày]
- Người review: [Tên, vai trò]

Câu hỏi đánh giá (thang 1-5):
1. Bố cục tổng thể có dễ hiểu không?
2. Luồng thao tác có tự nhiên không?
3. Thông tin hiển thị có đầy đủ không?
4. Màu sắc và typography có phù hợp không?
5. Các CTA có rõ ràng không?

Câu hỏi mở:
- Điều gì bạn thích nhất ở prototype này?
- Điều gì khiến bạn bối rối hoặc khó chịu?
- Có chức năng nào bạn mong đợi nhưng không thấy?
- Nếu được thay đổi một thứ duy nhất, bạn sẽ thay đổi gì?

Quan sát (người điều hành ghi):
- Người dùng bấm vào đâu đầu tiên?
- Họ mất bao lâu để hoàn thành task chính?
- Có khoảnh khắc nào họ dừng lại hoặc tỏ ra bối rối?

Trình bày dưới dạng HTML form có thể in ra hoặc điền trực tiếp.

Tổng hợp feedback từ nhiều người

Tôi đã thu thập feedback từ 5 người review prototype.
Dưới đây là kết quả:

[Dán kết quả feedback của 5 người]

Hãy phân tích và tổng hợp:
1. Điểm trung bình cho từng tiêu chí đánh giá
2. Các vấn đề được đề cập nhiều nhất (nhóm theo chủ đề)
3. Mức độ nghiêm trọng: Cao (3+ người đề cập) / Trung bình (2 người) / Thấp (1 người)
4. Đề xuất hành động cụ thể cho từng vấn đề
5. Những điểm mạnh cần giữ lại

Trình bày dưới dạng báo cáo có thể chia sẻ với team.

Quy trình prototyping hoàn chỉnh với Claude

Dưới đây là quy trình 6 bước để tận dụng Claude tối đa trong prototyping:

Bước 1: Định nghĩa bài toán

Trước khi bắt tay vào thiết kế, hãy làm rõ bài toán cần giải quyết. Claude giúp bạn đặt câu hỏi đúng:

Tôi đang thiết kế tính năng [mô tả tính năng] cho [loại ứng dụng].

Trước khi bắt đầu prototype, hãy giúp tôi trả lời các câu hỏi:
1. Người dùng mục tiêu là ai? Họ đang làm gì trước khi sử dụng tính năng này?
2. Vấn đề cụ thể nào tính năng này giải quyết?
3. Thành công được đo lường bằng gì?
4. Có những ràng buộc kỹ thuật nào cần lưu ý?
5. Những giả định nào cần được kiểm chứng qua prototype?

Bước 2: Tạo wireframe text

Mô tả bố cục tổng thể bằng văn bản, không cần chi tiết visual. Tập trung vào cấu trúc thông tin và luồng tương tác.

Bước 3: Tạo prototype HTML/CSS

Yêu cầu Claude chuyển wireframe text thành mã. Bắt đầu với mobile-first, sau đó mở rộng ra desktop.

Bước 4: Thêm tương tác

Bổ sung JavaScript cho các phần tử tương tác: form validation, modal, navigation, animation.

Bước 5: Review và lặp lại

Thu thập feedback, chỉnh sửa prototype. Claude hỗ trợ chỉnh sửa nhanh chóng chỉ bằng vài dòng mô tả.

Bước 6: Tài liệu hóa

Tạo tài liệu handoff cho designer và developer, bao gồm user flow, component specifications và design decisions.

Prompt templates cho các loại prototype phổ biến

Landing page

Tạo prototype landing page cho [sản phẩm/dịch vụ]:

Thông tin:
- Sản phẩm: [Mô tả ngắn]
- USP chính: [Điểm khác biệt]
- Đối tượng: [Khách hàng mục tiêu]
- CTA chính: [Hành động mong muốn]

Sections theo thứ tự:
1. Hero: Headline + subheadline + CTA + hình minh họa
2. Social proof: Logo đối tác hoặc con số thống kê
3. Features: 3-4 tính năng nổi bật với icon và mô tả
4. How it works: 3 bước đơn giản
5. Testimonials: 2-3 đánh giá từ khách hàng
6. Pricing: Bảng giá hoặc CTA liên hệ
7. FAQ: 5 câu hỏi thường gặp (accordion)
8. Final CTA: Lặp lại CTA chính
9. Footer: Navigation links + contact info

Mobile-first, single HTML file, tiếng Việt.

Dashboard admin

Tạo prototype dashboard quản trị cho [loại ứng dụng]:

Layout:
- Sidebar trái 250px: Logo, navigation menu, user info ở dưới cùng
- Main content area: Header bar + content area
- Sidebar collapse thành icon-only trên tablet

Trang Dashboard chính gồm:
1. Welcome message với tên user và ngày hiện tại
2. 4 stat cards (doanh thu, đơn hàng, khách hàng, sản phẩm)
3. Biểu đồ doanh thu 7 ngày (SVG line chart)
4. Bảng đơn hàng gần đây (5 dòng, có pagination)
5. Thông báo hoạt động gần đây (timeline format)

Chức năng:
- Sidebar menu có active state và hover
- Stat cards có animation đếm số khi load
- Bảng có thể sort theo cột
- Responsive: sidebar ẩn thành hamburger trên mobile

Mobile app screens

Tạo prototype cho 3 màn hình chính của ứng dụng mobile [tên app]:

Khung thiết bị: 375x812px (iPhone frame)
Navigation: Bottom tab bar cố định

Màn hình 1 - Home:
[Mô tả chi tiết layout và nội dung]

Màn hình 2 - Detail:
[Mô tả chi tiết]

Màn hình 3 - Profile:
[Mô tả chi tiết]

Yêu cầu:
- Có thể chuyển giữa 3 màn hình bằng bottom tabs
- Pull-to-refresh animation (CSS only)
- Skeleton loading states
- Safe area padding cho notch devices

Mẹo nâng cao

• Dùng design tokens: Yêu cầu Claude tạo CSS custom properties cho colors, spacing, typography ngay từ đầu. Khi cần thay đổi phong cách, chỉ cần sửa các biến này
• Component-first: Yêu cầu Claude tạo từng component riêng trước (button, card, form field), sau đó ghép lại thành trang hoàn chỉnh
• Accessibility từ đầu: Nhắc Claude thêm ARIA labels, keyboard navigation, color contrast check vào prototype ngay từ phiên bản đầu tiên
• Realistic data: Yêu cầu Claude dùng dữ liệu giả lập thực tế bằng tiếng Việt thay vì "Lorem ipsum" để prototype gần với sản phẩm thật nhất
• Multi-state design: Yêu cầu Claude tạo các trạng thái khác nhau: empty state, loading state, error state, success state cho mỗi màn hình

Bước tiếp theo

Bạn đã nắm được cách sử dụng Claude để tạo prototype nhanh từ mô tả văn bản. Phương pháp này giúp rút ngắn đáng kể thời gian từ ý tưởng đến prototype có thể test được với người dùng thực. Tiếp theo, hãy tìm hiểu cách Claude hỗ trợ thiết kế microinteractions để nâng cao trải nghiệm chi tiết trong prototype. Khám phá thêm tại Thu vien Ung dung Claude.