# Build

> Build ứng dụng web với Vibecode methodology. Claude Code = Builder, Claude Chat = Architect.

- Skill: `nclamvn/build` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nclamvn/build`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nclamvn/build/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nclamvn (https://skillmd.com/u/nclamvn)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nclamvn/build

---


# 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:**

```markdown
# 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`