Một câu lệnh. Một nút bấm. Một hệ thống hoàn chỉnh. Đây chính là kỹ thuật AI vào năm 2026

1Ý tưởng → Đặc tả → Thiết kế → Dev Frontend → Dev Backend
2→ Thiết lập Database → Tích hợp API → Kiểm thử → Triển khai
3Thời gian: vài tuần. Chi phí: hàng nghìn đô.

1Ý tưởng → Lời nhắc (Prompt) → Hệ thống đang chạy
2Thời gian: vài phút. Chi phí: Token API.

1Xây dựng một ứng dụng theo dõi tài chính cá nhân với:
2
3TÍNH NĂNG:
4- Nhật ký giao dịch (thêm/sửa/xóa với danh mục)
5- Chế độ xem ngân sách hàng tháng với thanh tiến trình
6- Trình theo dõi danh mục đầu tư tiền điện tử lấy giá trực tiếp từ CoinGecko API
7- Tính toán giá trị tài sản ròng cập nhật theo thời gian thực
8- Nút chuyển đổi chế độ tối
9
10YÊU CẦU KỸ THUẬT:
11- Ứng dụng React dạng tệp đơn
12- Chỉ sử dụng useState + useEffect (không quản lý trạng thái bên ngoài)
13- Tailwind CSS để tạo kiểu
14- Tìm nạp từ API công cộng (không yêu cầu xác thực)
15- Tương thích di động
16
17DỮ LIỆU:
18- Lưu trữ vào localStorage giữa các phiên
19- Xuất giao dịch dưới dạng CSV
20
21Đầu ra: ứng dụng khép kín hoàn chỉnh sẵn sàng triển khai.

1import { useState, useEffect } from "react";
2
3const CATEGORIES = ["Housing","Food","Transport","Entertainment","Health","Savings","Income","Crypto","Other"];
4const CRYPTO_IDS = { BTC: "bitcoin", ETH: "ethereum", SOL: "solana" };
5
6export default function FinanceTracker() {
7  const [transactions, setTransactions] = useState(() =>
8    JSON.parse(localStorage.getItem("transactions") || "[]")
9  );
10  const [cryptoPrices, setCryptoPrices] = useState({});
11  const [form, setForm] = useState({ description:"", amount:"", category:"Other", type:"expense", date:"" });
12  const [darkMode, setDarkMode] = useState(false);
13
14  useEffect(() => {
15    const ids = Object.values(CRYPTO_IDS).join(",");
16    fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`)
17      .then(r => r.json())
18      .then(data => {
19        const prices = {};
20        Object.entries(CRYPTO_IDS).forEach(([sym, id]) => { prices[sym] = data[id]?.usd || 0; });
21        setCryptoPrices(prices);
22      });
23  }, []);
24
25  useEffect(() => {
26    localStorage.setItem("transactions", JSON.stringify(transactions));
27  }, [transactions]);
28
29  const addTransaction = () => {
30    if (!form.description || !form.amount) return;
31    setTransactions(prev => [...prev, { ...form, id: Date.now(), amount: parseFloat(form.amount),
32      date: form.date || new Date().toISOString().split("T")[0] }]);
33    setForm({ description:"", amount:"", category:"Other", type:"expense", date:"" });
34  };
35
36  const totalIncome = transactions.filter(t => t.type === "income").reduce((s,t) => s + t.amount, 0);
37  const totalExpenses = transactions.filter(t => t.type === "expense").reduce((s,t) => s + t.amount, 0);
38  const netWorth = totalIncome - totalExpenses;
39
40  const bg = darkMode ? "#0D0D0D" : "#F9F7F4";
41  const card = darkMode ? "#1A1A1A" : "#FFF";
42  const text = darkMode ? "#F0F0F0" : "#1A1A1A";
43  const border = darkMode ? "#2A2A2A" : "#E8E8E8";
44
45  return (
46    <div style={{ minHeight:"100vh", background:bg, color:text, fontFamily:"system-ui, sans-serif" }}>
47      <div style={{ maxWidth:800, margin:"0 auto", padding:"24px 16px" }}>
48
49        <div style={{ display:"flex", justifyContent:"space-between", marginBottom:24 }}>
50          <div>
51            <h1 style={{ fontSize:22, fontWeight:500, margin:0 }}>Finance Tracker</h1>
52            <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>
53              Net worth: ${netWorth.toFixed(2)}
54            </p>
55          </div>
56          <button onClick={() => setDarkMode(!darkMode)}
57            style={{ padding:"8px 14px", borderRadius:8, border:`1px solid ${border}`,
58              background:card, color:text, cursor:"pointer" }}>
59            {darkMode ? "Light" : "Dark"}
60          </button>
61        </div>
62
63        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>
64          {[["Income","#22C55E",totalIncome],["Expenses","#EF4444",totalExpenses]].map(([label,color,val]) => (
65            <div key={label} style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:14 }}>
66              <p style={{ margin:0, fontSize:12, color:"#999" }}>{label}</p>
67              <p style={{ margin:"4px 0 0", fontSize:20, fontWeight:600, color }}>${val.toFixed(2)}</p>
68            </div>
69          ))}
70        </div>
71
72        <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:16, marginBottom:20 }}>
73          <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8, marginBottom:8 }}>
74            <input placeholder="Description" value={form.description}
75              onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
76              style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />
77            <input type="number" placeholder="Amount" value={form.amount}
78              onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}
79              style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />
80            <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))}
81              style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>
82              <option value="expense">Expense</option>
83              <option value="income">Income</option>
84            </select>
85          </div>
86          <div style={{ display:"grid", gridTemplateColumns:"2fr auto", gap:8 }}>
87            <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value }))}
88              style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>
89              {CATEGORIES.map(c => <option key={c}>{c}</option>)}
90            </select>
91            <button onClick={addTransaction}
92              style={{ padding:"9px 20px", borderRadius:8, background:"#E8692A",
93                color:"#fff", border:"none", cursor:"pointer", fontSize:13, fontWeight:500 }}>
94              Add
95            </button>
96          </div>
97        </div>
98
99        <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, overflow:"hidden" }}>
100          <p style={{ margin:0, padding:"12px 16px", borderBottom:`1px solid ${border}`, fontSize:13, fontWeight:500 }}>
101            Transactions ({transactions.length})
102          </p>
103          {transactions.slice().reverse().map(t => (
104            <div key={t.id} style={{ display:"flex", justifyContent:"space-between",
105              alignItems:"center", padding:"11px 16px", borderBottom:`1px solid ${border}` }}>
106              <div>
107                <p style={{ margin:0, fontSize:13, fontWeight:500 }}>{t.description}</p>
108                <p style={{ margin:"2px 0 0", fontSize:12, color:"#999" }}>{t.category} · {t.date}</p>
109              </div>
110              <span style={{ fontSize:14, fontWeight:600, color: t.type==="income" ? "#22C55E" : "#EF4444" }}>
111                {t.type==="income" ? "+" : "-"}${t.amount.toFixed(2)}
112              </span>
113            </div>
114          ))}
115        </div>
116      </div>
117    </div>
118  );
119}

1{
2  "mcpServers": {
3    "filesystem": {
4      "command": "npx",
5      "args": [
6        "-y",
7        "@modelcontextprotocol/server-filesystem",
8        "/Users/yourname/Projects"
9      ]
10    },
11    "terminal": {
12      "command": "npx",
13      "args": ["-y", "@modelcontextprotocol/server-terminal"]
14    },
15    "sqlite": {
16      "command": "npx",
17      "args": [
18        "-y",
19        "@modelcontextprotocol/server-sqlite",
20        "--db-path",
21        "/Users/yourname/Projects/app.db"
22      ]
23    }
24  }
25}

1Xây dựng và triển khai một hệ thống CRM cục bộ cho một doanh nghiệp rửa xe.
2
3Tạo dự án tại ~/Projects/carwash-crm/
4Tự động cài đặt các phụ thuộc.
5Thiết lập cơ sở dữ liệu SQLite với các bảng cho:
6- customers (tên, điện thoại, email, phương tiện, ghi chú)
7- visits (customer_id, ngày, dịch vụ, giá, trạng thái)
8- staff (tên, vai trò, lịch trình)
9
10Xây dựng giao diện web với:
11- Tìm kiếm và hồ sơ khách hàng
12- Lịch sử lượt ghé thăm theo từng khách hàng
13- Bảng điều khiển doanh thu theo tháng
14- Hệ thống nhắc nhở SMS (tích hợp Twilio, chỉ cấu hình)
15
16Khởi động máy chủ phát triển khi hoàn tất.
17Báo cáo URL localhost khi sẵn sàng.

1[Nội dung Claude Project context bao gồm:]
2- design-system.md (màu sắc, kiểu chữ, khoảng cách)
3- api-standards.md (mẫu xác thực, mã lỗi)
4- security-policy.md (quy tắc xác thực đầu vào, cấu hình CORS)
5- stack.md (React 18, TypeScript, Tailwind, Prisma, PostgreSQL)
6
7Lời nhắc:
8"Xây dựng một biểu mẫu onboarding khách hàng với xác minh email
9và tự động nhập mục vào Notion khi gửi."
10
11Đầu ra: code sẵn sàng sản xuất khớp chính xác với công nghệ của bạn
12- không cần dọn dẹp.

1
2  "provider": "anthropic",
3  "model": "claude-opus-4-8",
4  "apiKey": "YOUR_ANTHROPIC_KEY",
5  "systemPrompt": "Bạn là một kiến trúc sư hệ thống. Bạn có quyền truy cập vault kiến thức hoàn chỉnh của người dùng làm ngữ cảnh. Khi xây dựng hệ thống, hãy tham khảo các ghi chú hiện có, quyết định trong quá khứ và các mẫu đã thiết lập của họ. Đầu ra: code hoạt động + cấu trúc tệp Obsidian.",
6  "contextWindow": {
7    "includeActiveFile": true,
8    "includeLinkedFiles": true,
9    "includeRecentFiles": 10,
10    "includeFolders": ["Projects", "Systems", "Decisions"]
11  }
12}

1Lời nhắc trong Obsidian Canvas:
2"Thiết kế một quy trình sản xuất nội dung cho tài khoản Twitter của tôi.
3Tôi xuất bản 3 bài viết mỗi tuần và quản lý 5 giao dịch tài trợ.
4Tham khảo các ghi chú lịch nội dung hiện có của tôi."
5
6Đầu ra: Canvas với các khối được kết nối cho:
7→ Lên ý tưởng nội dung (lấy từ ghi chú sở thích của bạn)
8→ Quy trình Nháp → Xem xét → Xuất bản
9→ Theo dõi nhà tài trợ với cảnh báo hạn chót
10→ Bảng điều khiển phân tích
11→ Logic đăng chéo tự động
12→ Mỗi khối liên kết đến tệp Obsidian có liên quan

1{
2  "nodes": [
3    {
4      "id": "ideation",
5      "type": "file",
6      "file": "Systems/ContentPipeline/Ideation.md",
7      "x": 0, "y": 0, "width": 300, "height": 200,
8      "color": "1"
9    },
10    {
11      "id": "draft",
12      "type": "file",
13      "file": "Systems/ContentPipeline/Draft.md",
14      "x": 400, "y": 0, "width": 300, "height": 200,
15      "color": "3"
16    },
17    {
18      "id": "sponsors",
19      "type": "file",
20      "file": "Systems/ContentPipeline/SponsorTracker.md",
21      "x": 0, "y": 300, "width": 300, "height": 200,
22      "color": "5"
23    },
24    {
25      "id": "analytics",
26      "type": "file",
27      "file": "Systems/ContentPipeline/Analytics.md",
28      "x": 400, "y": 300, "width": 300, "height": 200,
29      "color": "6"
30    }
31  ],
32  "edges": [
33    {
34      "id": "e1",
35      "fromNode": "ideation", "fromSide": "right",
36      "toNode": "draft", "toSide": "left",
37      "label": "approved concepts"
38    },
39    {
40      "id": "e2",
41      "fromNode": "sponsors", "fromSide": "right",
42      "toNode": "draft", "toSide": "bottom",
43      "label": "brief integration"
44    }
45  ]
46}

1# Cài đặt Ollama
2curl -fsSL https://ollama.com/install.sh | sh
3
4# Kéo một mô hình có khả năng viết code
5ollama pull llama3.2:latest
6# hoặc để tạo code mạnh hơn:
7ollama pull qwen2.5-coder:32b
8
9# Khởi động máy chủ cục bộ
10ollama serve
11# Chạy tại localhost:11434

1{
2  "provider": "ollama",
3  "model": "qwen2.5-coder:32b",
4  "baseUrl": "http://localhost:11434",
5  "systemPrompt": "Bạn là một trình xây dựng hệ thống cục bộ có quyền truy cập hệ thống tệp của người dùng qua MCP. Xây dựng các hệ thống hoàn chỉnh đang hoạt động. Không bao giờ gửi dữ liệu đến API bên ngoài nếu không có hướng dẫn rõ ràng."
6}

1import requests
2import json
3from pathlib import Path
4from watchdog.observers import Observer
5from watchdog.events import FileSystemEventHandler
6
7OBSIDIAN_INBOX = Path.home() / "Obsidian" / "AI-Inbox"
8PROJECTS_DIR = Path.home() / "Projects"
9OLLAMA_URL = "http://localhost:11434/api/generate"
10
11class InboxWatcher(FileSystemEventHandler):
12    """
13    Theo dõi thư mục AI-Inbox của Obsidian.
14    Khi một tệp .md mới xuất hiện, coi nó như một lời nhắc xây dựng.
15    Chuyển đến LLM cục bộ -> thực thi qua MCP -> báo cáo lại.
16    """
17
18    def on_created(self, event):
19        if not event.src_path.endswith(".md"):
20            return
21
22        prompt_file = Path(event.src_path)
23        prompt = prompt_file.read_text()
24
25        print(f"[Inbox] Lời nhắc mới: {prompt_file.name}")
26        self.execute_prompt(prompt, prompt_file.stem)
27
28    def execute_prompt(self, prompt: str, project_name: str):
29        response = requests.post(OLLAMA_URL, json={
30            "model": "qwen2.5-coder:32b",
31            "prompt": f"""Bạn là một trình xây dựng hệ thống.
32            Xây dựng hệ thống này: {prompt}
33
34            Đầu ra một kế hoạch JSON với:
35            {{
36                "project_dir": "đường dẫn tương đối",
37                "files": [
38                    {{"path": "đường dẫn tương đối", "content": "nội dung tệp"}}
39                ],
40                "commands": ["npm install", "v.v."],
41                "summary": "những gì đã được xây dựng"
42            }}""",
43            "stream": False
44        })
45
46        plan = json.loads(response.json()["response"])
47        project_dir = PROJECTS_DIR / plan["project_dir"]
48        project_dir.mkdir(parents=True, exist_ok=True)
49
50        for file_spec in plan["files"]:
51            file_path = project_dir / file_spec["path"]
52            file_path.parent.mkdir(parents=True, exist_ok=True)
53            file_path.write_text(file_spec["content"])
54            print(f"[Build] Đã tạo: {file_path}")
55
56        result_file = OBSIDIAN_INBOX / f"{project_name}-result.md"
57        result_file.write_text(
58            f"# Xây dựng hoàn tất: {project_name}\n\n"
59            f"**Vị trí:** {project_dir}\n\n"
60            f"**Tóm tắt:** {plan['summary']}\n\n"
61            f"**Số tệp đã tạo:** {len(plan['files'])}\n"
62        )
63        print(f"[Done] Kết quả đã được ghi vào Obsidian")
64
65if __name__ == "__main__":
66    OBSIDIAN_INBOX.mkdir(exist_ok=True)
67    observer = Observer()
68    observer.schedule(InboxWatcher(), str(OBSIDIAN_INBOX), recursive=False)
69    observer.start()
70    print(f"[Đang theo dõi] {OBSIDIAN_INBOX}")
71
72    try:
73        while True:
74            import time; time.sleep(1)
75    except KeyboardInterrupt:
76        observer.stop()
77    observer.join()

1BƯỚC 1 - Đầu vào
2Trong Obsidian, trên bảng AI của bạn, viết:
3"Hệ thống tài chính cá nhân với tích hợp tiền điện tử
4và theo dõi ngân sách hàng tháng."
5Nhấn Generate.
6
7BƯỚC 2 - Tập hợp ngữ cảnh
8Plugin Smart Connections quét vault của bạn.
9Tìm các ghi chú tài chính của bạn từ 3 tháng qua.
10Gửi chúng làm ngữ cảnh đến Claude API.
11
12BƯỚC 3 - Kiến trúc
13Claude (Opus 4.8) thiết kế hệ thống:
14- Lược đồ cơ sở dữ liệu
15- Thành phần UI
16- Tích hợp API
17- Cấu trúc tệp
18
19BƯỚC 4 - Xây dựng
20Claude (Sonnet 5) triển khai qua MCP:
21- Tạo ~/Projects/finance-tracker/
22- Cài đặt các phụ thuộc
23- Viết tất cả các tệp
24- Khởi động máy chủ dev tại localhost:3000
25
26BƯỚC 5 - Kết quả
27Obsidian tạo thư mục: Finance System/
28Bên trong: bảng điều khiển được liên kết, ghi chú cấu hình,
29và một liên kết trực tiếp đến ứng dụng đang chạy.