หนึ่งคำสั่ง หนึ่งปุ่ม ระบบที่พร้อมใช้งานจริง นี่คือโฉมหน้าของวิศวกรรม AI ในปี 2026

1ไอเดีย → สเปค → ออกแบบ → ฟร้อนท์ → แบ็กเอนด์
2→ ตั้งค่าฐานข้อมูล → เชื่อมต่อ API → ทดสอบ → ปล่อย
3ระยะเวลา: หลายสัปดาห์ ต้นทุน: หลักพัน

1ไอเดีย → พรอมต์ → ระบบที่ทำงานได้
2ระยะเวลา: นาที ต้นทุน: โทเค็น API

1สร้างแอปพลิเคชันติดตามการเงินส่วนตัวที่มี:
2
3ฟีเจอร์:
4- บันทึกรายการ (เพิ่ม/แก้ไข/ลบ พร้อมหมวดหมู่)
5- มุมมองงบประมาณรายเดือนพร้อมแถบความคืบหน้า
6- ตัวติดตามพอร์ตคริปโต ดึงราคาสดจาก CoinGecko API
7- คำนวณมูลค่าสุทธิแบบเรียลไทม์
8- สลับโหมดมืด
9
10ข้อกำหนดทางเทคนิค:
11- แอป React ไฟล์เดียว
12- ใช้ useState + useEffect เท่านั้น (ไม่ใช้ state management ภายนอก)
13- Tailwind CSS สำหรับสไตล์
14- ดึงข้อมูลจาก public APIs (ไม่ต้องยืนยันตัวตน)
15- รองรับมือถือ
16
17ข้อมูล:
18- เก็บข้อมูลใน localStorage ระหว่างเซสชัน
19- ส่งออกธุรกรรมเป็น CSV
20
21ผลลัพธ์: แอปพลิเคชันที่สมบูรณ์ในตัวเอง พร้อมปรับใช้

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}

1สร้างและปรับใช้ระบบ CRM ท้องถิ่นสำหรับธุรกิจล้างรถ
2
3สร้างโปรเจกต์ที่ ~/Projects/carwash-crm/
4ติดตั้ง dependencies โดยอัตโนมัติ
5ตั้งค่าฐานข้อมูล SQLite พร้อมตารางสำหรับ:
6- customers (ชื่อ, เบอร์โทร, อีเมล, ยานพาหนะ, หมายเหตุ)
7- visits (customer_id, วันที่, บริการ, ราคา, สถานะ)
8- staff (ชื่อ, บทบาท, ตารางงาน)
9
10สร้างเว็บอินเทอร์เฟซที่มี:
11- ค้นหาลูกค้าและโปรไฟล์
12- ประวัติการเข้ารับบริการต่อลูกค้า
13- แดชบอร์ดรายได้แยกตามเดือน
14- ระบบเตือนความจำทาง SMS (Twilio integration, config เท่านั้น)
15
16เริ่ม dev server เมื่อเสร็จ
17รายงาน URL localhost เมื่อพร้อม

1[บริบทของ Claude Project ประกอบด้วย:]
2- design-system.md (สี, ตัวอักษร, ระยะห่าง)
3- api-standards.md (รูปแบบการยืนยันตัวตน, รหัสข้อผิดพลาด)
4- security-policy.md (กฎการตรวจสอบอินพุต, การตั้งค่า CORS)
5- stack.md (React 18, TypeScript, Tailwind, Prisma, PostgreSQL)
6
7พรอมต์:
8"สร้างฟอร์มลงทะเบียนลูกค้าพร้อมยืนยันอีเมล
9และบันทึกลง Notion โดยอัตโนมัติเมื่อส่ง"
10
11ผลลัพธ์: โค้ดพร้อมใช้งานจริงที่ตรงกับสแต็คของคุณ
12ทุกประการ — ไม่ต้องแก้ไขเพิ่มเติม

1
2  "provider": "anthropic",
3  "model": "claude-opus-4-8",
4  "apiKey": "YOUR_ANTHROPIC_KEY",
5  "systemPrompt": "You are a system architect. You have access to the user's complete knowledge vault as context. When building systems, reference their existing notes, past decisions, and established patterns. Output: working code + Obsidian file structure.",
6  "contextWindow": {
7    "includeActiveFile": true,
8    "includeLinkedFiles": true,
9    "includeRecentFiles": 10,
10    "includeFolders": ["Projects", "Systems", "Decisions"]
11  }
12}

1พรอมต์ใน Obsidian Canvas:
2"ออกแบบไปป์ไลน์การผลิตคอนเทนต์สำหรับบัญชี Twitter ของฉัน
3ฉันเผยแพร่ 3 บทความต่อสัปดาห์และจัดการดีลสปอนเซอร์ 5 รายการ
4อ้างอิงโน้ตปฏิทินคอนเทนต์ที่มีอยู่ของฉัน"
5
6ผลลัพธ์: Canvas พร้อมบล็อกที่เชื่อมต่อสำหรับ:
7→ การสร้างไอเดีย (ดึงจากโน้ตความสนใจของคุณ)
8→ เวิร์กโฟลว์ร่าง → ตรวจสอบ → เผยแพร่
9→ การติดตามสปอนเซอร์พร้อมการแจ้งเตือนกำหนดส่ง
10→ แดชบอร์ดวิเคราะห์
11→ ตรรกะการโพสต์ข้ามแพลตฟอร์มอัตโนมัติ
12→ แต่ละบล็อกเชื่อมโยงไปยังไฟล์ Obsidian ที่เกี่ยวข้อง

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# ติดตั้ง Ollama
2curl -fsSL https://ollama.com/install.sh | sh
3
4# ดึงโมเดลที่รองรับการเขียนโค้ด
5ollama pull llama3.2:latest
6# หรือสำหรับการสร้างโค้ดที่แข็งแกร่งขึ้น:
7ollama pull qwen2.5-coder:32b
8
9# เริ่มเซิร์ฟเวอร์ท้องถิ่น
10ollama serve
11# รันที่ localhost:11434

1{
2  "provider": "ollama",
3  "model": "qwen2.5-coder:32b",
4  "baseUrl": "http://localhost:11434",
5  "systemPrompt": "You are a local system builder with access to the user's filesystem via MCP. Build complete working systems. Never send data to external APIs without explicit instruction."
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    เฝ้าดูโฟลเดอร์ AI-Inbox ของ Obsidian
14    เมื่อมีไฟล์ .md ใหม่ปรากฏขึ้น ให้ถือว่าเป็น build prompt
15    ส่งไปยัง Local LLM -> ดำเนินการผ่าน MCP -> รายงานกลับ
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] พรอมต์ใหม่: {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"""คุณคือผู้สร้างระบบ
32            สร้างระบบนี้: {prompt}
33
34            ส่งออกแผน JSON ด้วย:
35            {{
36                "project_dir": "relative path",
37                "files": [
38                    {{"path": "relative path", "content": "file content"}}
39                ],
40                "commands": ["npm install", "etc"],
41                "summary": "what was built"
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] สร้างแล้ว: {file_path}")
55
56        result_file = OBSIDIAN_INBOX / f"{project_name}-result.md"
57        result_file.write_text(
58            f"# สร้างเสร็จ: {project_name}\n\n"
59            f"**ตำแหน่ง:** {project_dir}\n\n"
60            f"**สรุป:** {plan['summary']}\n\n"
61            f"**ไฟล์ที่สร้าง:** {len(plan['files'])}\n"
62        )
63        print(f"[เสร็จ] เขียนผลลัพธ์ไปยัง 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"[เฝ้าดู] {OBSIDIAN_INBOX}")
71
72    try:
73        while True:
74            import time; time.sleep(1)
75    except KeyboardInterrupt:
76        observer.stop()
77    observer.join()

1ขั้นตอนที่ 1 - อินพุต
2ใน Obsidian บนแผง AI ของคุณ ให้เขียน:
3"ระบบการเงินส่วนตัวพร้อมการเชื่อมต่อคริปโต
4และการติดตามงบประมาณรายเดือน"
5กดสร้าง
6
7ขั้นตอนที่ 2 - การประกอบบริบท
8ปลั๊กอิน Smart Connections สแกน vault ของคุณ
9ค้นหาโน้ตการเงินของคุณจาก 3 เดือนที่ผ่านมา
10ส่งเป็นบริบทไปยัง Claude API
11
12ขั้นตอนที่ 3 - สถาปัตยกรรม
13Claude (Opus 4.8) ออกแบบระบบ:
14- สคีมาฐานข้อมูล
15- ส่วนประกอบ UI
16- การเชื่อมต่อ API
17- โครงสร้างไฟล์
18
19ขั้นตอนที่ 4 - สร้าง
20Claude (Sonnet 5) ดำเนินการผ่าน MCP:
21- สร้าง ~/Projects/finance-tracker/
22- ติดตั้ง dependencies
23- เขียนไฟล์ทั้งหมด
24- เริ่ม dev server ที่ localhost:3000
25
26ขั้นตอนที่ 5 - ผลลัพธ์
27Obsidian สร้างโฟลเดอร์: Finance System/
28ภายใน: แดชบอร์ดที่เชื่อมโยง, โน้ตคอนฟิก,
29และลิงก์โดยตรงไปยังแอปพลิเคชันที่กำลังทำงาน