UI Design Với Claude 3.5 Sonnet: Prompt Framework Để Tạo React UI Đẹp Mà Không Cần Viết CSS Từ Đầu
Claude Artifacts cho phép bạn tạo React component hoàn chỉnh từ một mô tả. Nhưng prompt 'tạo landing page đẹp' cho ra kết quả generic. Bài này cung cấp framework prompt giúp Claude hiểu bạn muốn aesthetic gì.
UI Design Với Claude 3.5 Sonnet: Prompt Framework Để Tạo React UI Đẹp Mà Không Cần Viết CSS Từ Đầu
Claude Artifacts là tính năng cho phép Claude generate code và hiển thị preview trực tiếp trong chat. Với React component, bạn có thể describe UI bằng tiếng Anh và Claude tạo ra component hoàn chỉnh với styling — không cần setup project, không cần viết CSS từ đầu.
Nhưng prompt "tạo một landing page đẹp" cho ra generic boilerplate. Prompt tốt cần nói với Claude về aesthetic, hierarchy, và interaction expectations cụ thể.
📌 TL;DR
- Claude Artifacts tạo React component có thể preview ngay
- Mô tả aesthetic rõ ràng → kết quả tốt; mô tả chung chung → generic
- Iterate qua chat cùng Claude: một component, nhiều refinement
Prompt Template Cơ Bản: Single Component
Hãy tạo một React component bằng Artifacts với yêu cầu sau:
COMPONENT: [Card hiển thị pricing / Hero section / Sidebar navigation / ...]
AESTHETIC:
- Color palette: [dark navy + electric blue / warm cream + amber / ...]
- Style: [glassmorphism / minimalist / brutalist / neumorphism]
- Typography: [modern sans-serif, large headline với small body]
STRUCTURE:
- [Mô tả layout: 2 cột, header + content + CTA, grid 3 items]
- [State nào cần: hover effect, toggle, active state]
TECH:
- Inline CSS (không dùng library)
- Chỉ functional React component
- Không cần external dependencies
QUAN TRỌNG:
- All text là placeholder nhưng realistic (không phải "Lorem ipsum")
- Icon dùng Unicode emoji hoặc SVG inline đơn giản
Prompt Cho Pricing Card Glassmorphism
Tạo React component: Pricing card với 3 tier (Free, Pro, Enterprise).
Aesthetic: dark mode, glassmorphism cards trên gradient background (deep purple → dark navy). Neon blue border trên Pro card (recommended). Subtle glow effect.
Structure mỗi card:
- Badge tier name (top)
- Price (large, bold)
- Feature list (5 items với checkmark icon)
- CTA button (gradient cho Pro, outlined cho các tier khác)
Typography: Inter font (use system-ui fallback), price rất lớn (4xl), feature text nhỏ.
State: Hover trên card → subtle scale up + glow tăng. CTA button hover → brightness increase.
Dùng inline CSS vì không có Tailwind. React functional component.
Prompt Cho Dashboard Hero Section
Tạo React component: Dashboard hero section với metrics overview.
Layout: Full-width header, 4 metric cards bên dưới (bento-style — 2 card lớn bên trái, 2 card nhỏ bên phải), minimal chart placeholder.
Aesthetic: Ultra dark background (#0a0a0f), card background với subtle transparency, green và blue accent cho positive metrics, red cho negative.
Metric cards:
- Total Revenue: $124,590 (+12.3%)
- Active Users: 8,492 (-2.1%)
- Conversion Rate: 3.8% (+0.5%)
- Avg Session: 4m 23s (+18%)
Mỗi card: metric name → value lớn → change indicator với arrow + percentage.
Hover: card scale slightly + border highlight.
Không cần chart thật — chỉ cần placeholder rectangle với label.
Cách Iterate Qua Chat
Sau khi Claude tạo component đầu tiên, dùng chat để refine:
Thay đổi màu sắc:
"Đổi background từ navy sang dark charcoal (#1a1a1a), và accent color từ blue sang emerald green"
Điều chỉnh spacing:
"Tăng padding bên trong cards, thêm khoảng cách giữa icon và text"
Thêm interaction:
"Thêm smooth transition 200ms cho tất cả hover effects"
Simplify:
"Bỏ animation phức tạp, giữ design clean hơn, less is more"
Responsive:
"Làm cards stack thành 1 cột trên mobile (max-width 768px)"
Claude Vs. v0.dev: Nên Dùng Cái Nào?
| Claude Artifacts | v0.dev | |
|---|---|---|
| Không cần account riêng | ✅ (dùng trong Claude.ai) | ❌ (cần Vercel account) |
| Preview trực tiếp | ✅ | ✅ |
| Output stack | Flex: React, HTML, hay mix | React + Tailwind (fixed) |
| Dùng Tailwind | Không theo mặc định | ✅ Tailwind native |
| Iterate qua chat | ✅ Natural conversation | ✅ |
| Export code | Copy từ Artifacts | Copy hoặc deploy |
Khi nào dùng Claude: Bạn muốn flexibility về styling approach, không cần Tailwind, hoặc muốn iterate nhanh trong chat window hiện tại.
Khi nào dùng v0.dev: Bạn cần React + Tailwind cụ thể, sẽ integrate vào Next.js project.
Đọc thêm:
- Claude Artifacts là gì và dùng như thế nào: Claude Artifacts Guide
- Chuyển design sang code trong project thật: v0.dev — Tạo UI Từ Prompt
- Tinh chỉnh code từ Claude trong Cursor: Cursor AI Review
- Prompt cho Midjourney concept đầu tiên: Midjourney Bento Grid
- Hướng dẫn prompt tổng quát: Prompt Template Guide