nclamvn Vibecode Build Skill
Build ứng dụng web với chất lượng cao theo Vibecode methodology.
⚠️ QUAN TRỌNG: Kiến trúc đúng
Claude Chat (Architect) → Blueprint.json → Claude Code (Builder)
↑ ↑
THINK mode EXECUTE mode
Semantic-rich Speed-optimized
Tại sao không gộp? System prompts khác biệt cơ bản:
- Claude Chat: Tối ưu cho suy nghĩ sâu, chi tiết
- Claude Code: Tối ưu cho thực thi nhanh, gọn
Gộp = Role-playing trên system prompt không phù hợp = Chất lượng thấp.
Quy trình chuẩn
PHASE 1: ARCHITECT (Claude Chat)
Mở https://claude.ai/chat và dùng prompt:
# Vibecode Architect Mode
Bạn là KIẾN TRÚC SƯ. Tạo BLUEPRINT hoàn chỉnh cho Builder.
Quy tắc:
1. THINK thoroughly - suy nghĩ kỹ
2. ASK to clarify - hỏi khi chưa rõ
3. VERIFY resources - test URLs trước khi đưa vào Blueprint
4. OUTPUT JSON - Blueprint phải machine-readable
---
Ý tưởng: [MÔ TẢ DỰ ÁN]
Architect sẽ tạo Blueprint.json với:
- Project info, design system
- Verified image URLs (đã test)
- File structure chi tiết
- Dependencies
PHASE 2: BUILDER (Claude Code)
Quay lại Claude Code với Blueprint:
/build execute
[PASTE BLUEPRINT.JSON]
Hoặc:
Tôi có Blueprint từ Architect. Hãy build theo spec này:
[PASTE BLUEPRINT.JSON]
Nếu bạn KHÔNG có Blueprint
Nếu muốn build nhanh mà không qua Architect (chấp nhận risk):
/build quick [type]
⚠️ Cảnh báo: Quick mode bỏ qua Architect phase, chất lượng có thể không đạt.
Commands
| Command | Mô tả |
|---|---|
/build |
Hướng dẫn quy trình đúng |
/build execute |
Builder mode - cần Blueprint |
/build quick [type] |
Quick mode - bỏ qua Architect (risky) |
/build verify |
Verify project sau khi build |
Project Types
| Type | Mô tả |
|---|---|
landing |
Landing Page - marketing, conversion |
saas |
SaaS Application - auth, dashboard |
dashboard |
Dashboard - analytics, admin |
blog |
Blog/Docs - content, MDX |
portfolio |
Portfolio - showcase, creative |
Verification Checklist
Trước khi "Done", PHẢI verify:
- [ ] Dev server starts without errors
- [ ] All images load (check console)
- [ ] No TypeScript errors
- [ ] Responsive works
- [ ] All links functional
DONE = Tasks completed + Verification passed
Tại sao Vibecode hoạt động?
Multi-Agent Systems:
Same model + Same prompt + Different roles = Role-playing = Fake specialization
Vibecode:
Different products + Different prompts = True specialization = Real quality
Claude Chat và Claude Code có SYSTEM PROMPTS khác biệt cơ bản. Vibecode khai thác sự khác biệt này thay vì chống lại nó.
Quick Reference
- Architect (Claude Chat): https://claude.ai/chat
- Builder (Claude Code):
/build execute [blueprint] - Verify:
/build verify