สร้างบล็อกด้วย AI 7 ตัวทำงานพร้อมกัน — เบื้องหลัง INK by DopeLab

บทความนี้เป็น meta article — ผมเขียนเรื่องเครื่องมือที่ใช้สร้างบล็อกที่คุณกำลังอ่านอยู่นี้

ปัญหา: อยากมีบล็อก แต่ไม่มีเวลาสร้าง

ผมรัน agency เล็กๆ ที่ใช้ AI ทำงานแทบทุกอย่าง มี projects ลูกค้า 5 brands, ร้านอาหารที่ต้องดูแล operations, ระบบ stock, ระบบขาย — งานล้นมืออยู่แล้ว

แต่ก็อยากมี บล็อกสำหรับ agency สักที ไว้บันทึกสิ่งที่เรียนรู้จากการทำงานจริง ไม่ใช่บทความ AI ทั่วไปที่เขียนจากทฤษฎี แต่เป็น case study จริงจาก production

ปัญหาคือ: การสร้างบล็อกตั้งแต่ศูนย์ต้องทำหลายอย่าง — scaffold, design, about page, scripts, comments system, social sharing, i18n — ถ้าทำทีละอย่างก็หลายวัน

Solution: Claude Code Agent Teams

Agent Teams คือ feature ของ Claude Code ที่ให้ หลาย Claude instance ทำงานพร้อมกัน แต่ละตัวทำงานใน worktree แยก (สำเนา code ของตัวเอง) สื่อสารกันผ่าน Shared Task List

ผมใช้มันสร้างบล็อกนี้ใน session เดียว แบ่งเป็น 5 phases:

Phase 0: Scaffold (single agent)
Phase 1: MVP Polish (single agent)
Phase 2: Features (single agent)
Phase 3: 3 agents พร้อมกัน ← Agent Teams เริ่มตรงนี้
Phase 4: 4 agents พร้อมกัน

Phase 0-2 ผมทำแบบ single agent ปกติ เพราะงาน sequential — สร้าง scaffold ก่อน แล้ว polish UI ทีละจุด พอ base พร้อมแล้วค่อยปล่อย Agent Teams

Phase 3: สามตัวพร้อมกัน

commit 6a03343 — 2026-03-02 14:18

ผม spawn 3 agents ที่ทำงานคนละเรื่อง ไม่แตะไฟล์กัน:

ทั้ง 3 agents ทำเสร็จพร้อมกัน ได้ 881 บรรทัด code ใหม่ ใน 7 ไฟล์

About page ที่ได้

Agent สร้าง About page ที่มี 6 sections ครบ:

• Hero section
• Who we are (stat cards)
• AI Team (6 agent cards)
• What is INK (concept)
• Tech stack (pill badges)
• CTA

ทั้งหมดรองรับ dark/light mode และ i18n (TH+EN) ตั้งแต่แรก

scripts ที่ได้

new-article.sh — สั่ง scaffold บทความใหม่ เลือก category จาก 5 ตัวเลือก ใส่ tags ได้ สร้าง template TH+EN อัตโนมัติ บทความที่คุณอ่านอยู่ก็ scaffold ด้วย script ตัวนี้:

./scripts/new-article.sh building-blog-with-agent-teams \
  --category "AI Workflow" \
  --tags "agent-teams,claude-code,next-js,automation,blog"

translate.sh — แปล TH→EN อัตโนมัติผ่าน Claude API ใช้ curl + jq ไม่พึ่ง SDK มี --dry-run สำหรับ preview

Phase 4: สี่ตัวพร้อมกัน

commits e85d7ae ถึง 76a3b32 — 2026-03-02 14:39-14:42

Phase นี้ spawn 4 agents:

ได้ 987+ บรรทัด code ใหม่ จาก social scripts อย่างเดียว

Comments component ที่ได้

Giscus agent สร้าง React component ที่:

• ใช้ @giscus/react เชื่อมกับ GitHub Discussions
• รองรับ dark mode (ดูจาก next-themes)
• เปลี่ยนภาษาตาม locale (TH/EN)
• Lazy mount (ไม่ render จนกว่า client mount)

// src/components/blog/comments.tsx
"use client";
 
import GiscusComponent from "@giscus/react";
import { useTheme } from "next-themes";
import { useLocale } from "next-intl";
 
export function Comments() {
  const { resolvedTheme } = useTheme();
  const locale = useLocale();
 
  return (
    <GiscusComponent
      repo="tordash/ink-dopelab"
      repoId="R_kgDORb6CeA"
      mapping="pathname"
      theme={resolvedTheme === "dark" ? "dark_dimmed" : "light"}
      lang={locale === "th" ? "th" : "en"}
    />
  );
}

40 บรรทัด ทำงานได้ครบ ลองเลื่อนลงไปดูด้านล่างบทความนี้ — comment section ที่เห็นก็สร้างด้วย agent ตัวนี้

ผลลัพธ์

Timeline จริง (จาก git log)

01:09  — .env.example
10:32  — Typography fix
11:38  — Phase 1: OG images, brand fonts, share buttons
12:19  — Phase 2: Category/tag pages, RSS, search
14:18  — Phase 3: About page + 2 scripts (3 agents)
14:39  — Phase 4a: Social scripts (2 agents)
14:42  — Phase 4b: Giscus comments (1 agent)
14:42  — CHANGELOG update

Phase 3 (3 agents) เสร็จภายใน ~2 นาที หลัง Phase 2 จบ Phase 4 (4 agents) เสร็จภายใน ~3 นาที หลัง Phase 3

สิ่งที่ได้ทั้งหมด

ทั้งหมดนี้จาก 2 phases ที่ใช้เวลารวม ~5 นาที

ข้อจำกัดที่ต้องรู้

1. Token cost สูงมาก

Agent Teams spawn หลาย Claude instance พร้อมกัน แต่ละตัวก็กิน token ของมันเอง Phase 3 (3 agents) + Phase 4 (4 agents) = 7 instances ทั้งหมด ค่า token ไม่ใช่ 7 เท่าของ single agent (เพราะ context สั้นกว่า) แต่ก็มากกว่าทำ sequential แน่นอน

2. File conflict เป็นปัญหาจริง

ถ้าวางแผนไม่ดี 2 agents อาจแก้ไฟล์เดียวกัน → merge conflict ผมเจอตอน i18n keys ที่หลาย agents อยากเพิ่ม ต้อง centralize ให้ agent เดียวรับผิดชอบ

3. ไม่เหมาะกับงานที่ต้อง sequential

ถ้างาน B ต้องรอผลจากงาน A เสร็จก่อน → ใช้ Agent Teams ไม่คุ้ม ต้องเลือกงานที่ parallelize ได้จริง ถึงจะเร็วขึ้น

Tech Stack ที่ได้ท้ายสุด

ทั้งบล็อก INK by DopeLab ประกอบด้วย:

• Framework: Next.js 16 + Velite (MDX content layer)
• i18n: next-intl (TH default + EN)
• Styling: Tailwind v4 + custom CSS variables (dark/light)
• Fonts: Inter + Sarabun (body), Special Elite + Charmonman (display)
• Comments: Giscus (GitHub Discussions)
• Analytics: Vercel Analytics
• Deploy: Vercel (auto-deploy จาก GitHub push)
• Content: 8 articles (TH+EN = 16 files MDX)

สร้างทั้งหมดใน 1 วัน ตั้งแต่ git init ถึง production ที่ ink.dopelab.studio