build

name	build
description	Build ứng dụng web với Vibecode methodology. Claude Code = Builder, Claude Chat = Architect.
metadata	{"openclaw":{"emoji":"🏗️","skillKey":"vibecode-build","userInvocable":true}}
invocation	{"userInvocable":true,"disableModelInvocation":false}

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

1. Architect (Claude Chat): https://claude.ai/chat
2. Builder (Claude Code): /build execute [blueprint]
3. Verify: /build verify