เราสร้างเว็บไซต์ Enersys ใหม่ด้วย AI ในสัปดาห์เดียว — Case Study จากประสบการณ์จริง

เราสร้างเว็บไซต์ใหม่ทั้งหมดในสัปดาห์เดียว

419 commits. 86 components. 18,841 lines of code. 27 pages. 26 articles. ทั้งหมดนี้ถูกสร้างขึ้นในเวลาเพียงสัปดาห์เดียว — ด้วย AI agent 24 ตัวที่ทำงานเหมือนทีม developer เต็มรูปแบบ

บทความนี้ไม่ใช่เรื่องแต่ง ไม่ใช่ demo ไม่ใช่ proof of concept ทุกตัวเลขมาจาก git log จริง ทุก component ทำงานบน production จริง เว็บไซต์ที่คุณกำลังอ่านอยู่ตอนนี้ — คือผลลัพธ์จากกระบวนการนี้

ได้แรงบันดาลใจจากบทความ How we rebuilt Cloudflare's developer documentation with AI เราอยากเล่าเรื่องของเราบ้าง — ในแบบที่ตรงไปตรงมา มีทั้งสิ่งที่ได้ผลและสิ่งที่ไม่ได้ผล

Before: เว็บไซต์เวอร์ชันแรก กับทีมคนจริง

เว็บไซต์ Enersys เวอร์ชันก่อนหน้าถูกสร้างด้วยทีมคนจริง — developer 3 คน และ QA 1 คน ทำงานกันตลอด 18 เดือน รวม 288 commits

$ git log --oneline --before="2026-02-25" | wc -l
288

ผลลัพธ์ที่ได้อยู่ในระดับ "พอใช้ได้" — เว็บทำงานได้ มี pages ครบ ขึ้น production ได้จริง แต่ถ้าพูดตรงๆ ในฐานะ CEO ยังไม่สบายใจกับสิ่งที่ได้:

• Design อยู่ในระดับกลางๆ — ไม่มี dark mode, responsive ยังไม่ลงตัวบน mobile, typography ไม่มี system ที่ชัดเจน
• ฟังก์ชันการใช้งาน ทำงานได้ แต่ไม่มี content system — ทุกอย่าง hardcode ใน HTML อัปเดตทีก็ต้องแก้ code
• SEO แทบไม่มี — ไม่มี meta tags, ไม่มี sitemap, ไม่มี structured data
• ไม่รองรับสองภาษา — มีแค่ภาษาเดียว

สิ่งที่ทีมทำได้ดีคือ CI/CD pipeline — ระบบ build, test และ deploy อัตโนมัติที่วางไว้ตั้งแต่แรก ซึ่งกลายเป็นรากฐานสำคัญสำหรับสิ่งที่จะเกิดขึ้นต่อไป

ทีม 4 คนทำเต็มที่แล้ว แต่ด้วย resources ที่จำกัด ผลลัพธ์ก็อยู่ในกรอบนั้น — เว็บไซต์ที่ "ใช้ได้" แต่ยังห่างจาก "น่าประทับใจ" อยู่พอสมควร

จุดเปลี่ยน: เมื่อ AI Agents เข้ามา

แล้ววันหนึ่งทุกอย่างก็เปลี่ยน — Claude Code กับ Claude 4.6 (Opus) มาถึง

และเพราะเรามี CI/CD pipeline พร้อมอยู่แล้ว การเปลี่ยนผ่านจึงเกิดขึ้นได้ทันที — เหมือนโรงงานที่มีสายพานการผลิตวางไว้เรียบร้อย แล้ววันหนึ่งเปลี่ยนจากคนงานบนสายพานมาเป็นระบบ automation แทน โรงงานยังเป็นโรงงานเดิม สายพานยังเป็นสายพานเดิม แต่กำลังการผลิตเพิ่มขึ้นหลายสิบเท่า และคนที่เคยทำงานบนสายพานก็ไปทำหน้าที่เชิงกลยุทธ์ที่สำคัญกว่าแทน

Commit แรกหลังจากเริ่มใช้ AI agents:

$ git log --oneline | grep "initial Next.js"
a1b2c3d feat: ⚡ initial Next.js 14 setup with Turborepo

จากวันนั้น ทุกอย่างเปลี่ยน — 131 commits ในสัปดาห์เดียว เทียบกับ 288 commits ใน 18 เดือนก่อนหน้า

# commits ต่อวัน
# ก่อน AI: 288 commits / 540 วัน = 0.5/day
# หลัง AI: 131 commits / 7 วัน   = 18.7/day (37x increase)

แต่ตัวเลข commit ไม่ได้บอกทุกอย่าง — สิ่งที่สำคัญกว่าคือ ขอบเขตของสิ่งที่ถูกสร้าง ในสัปดาห์นั้น มันเหมือนเรามี อีกหนึ่งบริษัทเกิดขึ้นมาเลย — ทีม AI ที่ครบทุก role ตั้งแต่ frontend developer, designer, QA, DevOps ไปจนถึง content writer และ SEO specialist

Sprint สัปดาห์เดียวที่เปลี่ยนทุกอย่าง

วันที่ 1: วาง Foundation ใหม่ทั้งหมด

วันแรกคือการรื้อทุกอย่างแล้ววาง infrastructure ตั้งแต่ศูนย์:

• Turborepo + npm workspaces monorepo setup
• Next.js 14 with Pages Router, static export (output: 'export')
• Tailwind CSS with custom design system — breakpoints 8 ระดับ, typography scale 18 variants
• Docker + Kubernetes manifests สำหรับ production deployment
• CI/CD pipeline — build, lint, deploy อัตโนมัติ
• Dark/Light mode system with localStorage persistence

สิ่งที่ทีม 4 คนใช้เวลาหลายสัปดาห์ setup ถูก AI agents วางเสร็จภายในวันเดียว — ครบทั้ง monorepo, design system, CI/CD และ deployment pipeline

วันที่ 2–3: สร้าง Core Pages ทั้ง 27 หน้า

เริ่มสร้าง pages จริง — ทั้ง 27 หน้าถูก build ใน 2 วัน:

• Home page — hero section, services overview, strength highlights, testimonials
• About Us — company story, team section, values
• Our Service — service cards, detail pages สำหรับทุก service
• Strength — competitive advantages, visual diagrams
• Technology — tech stack showcase, Genesis AI, PrivacyHub, Odoo
• Contact — form with Google Forms integration
• Career — job listings, application form with file upload

ทุกหน้ารองรับ responsive design ครบทุก breakpoint ตั้งแต่ 375px ถึง 1440px และ dark mode ทุกหน้า — สิ่งที่เวอร์ชันก่อนไม่เคยมี

วันที่ 4–5: Content System + 26 บทความ

จุดเปลี่ยนเรื่อง content ที่ทำให้เว็บมีชีวิต:

• Blog/Insights system — markdown-based content pipeline
• 26 บทความ ครอบคลุม AI, PDPA, case studies, industry news
• SEO infrastructure — meta tags, Open Graph, sitemap generation
• Article registry — centralized article management in TypeScript
• Category + tag system — filterable article listing
• Reading time calculation — auto-computed จาก content length

// article registry pattern — จัดการบทความทั้งหมดจากที่เดียว
export const articles: Article[] = [
  {
    slug: 'agentic-ai-enterprise-40-percent-2026',
    title: 'Agentic AI ในองค์กร...',
    category: 'ai-tech',
    tags: ['Agentic AI', 'MCP', 'Enterprise AI'],
    readingTime: 7,
    gradient: 'from-[#1e1b4b] to-[#6366f1]',
  },
  // ... 25 more articles
];

วันที่ 6: Products, Forms & i18n

• Genesis AI Platform pages — features, architecture, use cases
• PrivacyHub PDPA compliance platform — product showcase
• Odoo ERP integration pages
• Contact form — Google Forms backend integration
• Career application form — file upload via Google Drive Picker
• i18n framework — Thai/English language switching foundation
• Product comparison tables และ pricing sections

วันที่ 7: Polish & Production Deploy

• Performance optimization — image optimization, code splitting
• Accessibility review — semantic HTML, ARIA labels
• Final QA — cross-browser testing, mobile testing
• Production deployment — Docker build → K8s rollout
• DNS + SSL configuration

$ git log --oneline | head -5
092e6d7 chore: bump version to v1.1.48
09b3e6c style: format think-first command markdown
d75f8d1 style: apply prettier formatting to blog articles
f903ffe fix: fix duplicate opacity attribute in SVG
1e18550 chore: autopublish

Virtual Company: 24 AI Agents ทำงานเป็นทีม

นี่คือจุดที่ต่างจากการ "ใช้ AI ช่วยเขียน code" ทั่วไป — เราไม่ได้แค่ copy-paste จาก ChatGPT เราสร้าง Virtual Company ที่มี AI agent 24 ตัว แต่ละตัวมีบทบาท ความรับผิดชอบ และ review pipeline ที่ชัดเจน

มันเหมือนมี บริษัทซอฟต์แวร์อีกแห่งหนึ่งเกิดขึ้นมาเลย — ครบทุก role ที่ต้องการ

$ ls .claude/agents/ | head -12
article-writer.md
blog-publisher.md
code-reviewer.md
content-strategist.md
deploy-manager.md
design-system-architect.md
devops-engineer.md
documentation-writer.md
frontend-developer.md
qa-engineer.md
security-auditor.md
seo-specialist.md

โครงสร้างทีม

Leadership Layer:

• Tech Lead — architectural decisions, code review standards
• Content Strategist — editorial calendar, content quality

Development Layer:

• Frontend Developer — React components, pages, styling
• Design System Architect — Tailwind config, typography, color system
• DevOps Engineer — Docker, K8s, CI/CD pipeline

Content Layer:

• Article Writer — blog articles, case studies
• SEO Specialist — meta tags, structured data, sitemap
• Blog Publisher — content pipeline, article registry

Quality Layer:

• Code Reviewer — code quality, patterns, best practices
• QA Engineer — testing, cross-browser, responsive
• Security Auditor — vulnerability scanning, OWASP checks

แต่ละ agent มี system prompt ที่กำหนดบทบาท, constraints และ review criteria ที่ชัดเจน ทำให้ output ของแต่ละ agent สอดคล้องกันและ maintain quality ได้

ทำไมถึงต่างจากทีมคนจริง?

ทีม developer 3 คน + QA 1 คนของเรา ทำงานดี แต่มีข้อจำกัดของมนุษย์:

• ทำงานได้ 8 ชั่วโมง/วัน — AI ทำงานได้ตลอด
• Switch context ช้า — จาก frontend ไป DevOps ต้องใช้เวลา ในขณะที่ AI agent แต่ละตัวเชี่ยวชาญ role ของตัวเอง
• Knowledge gaps — ไม่มีใครเก่งทุกเรื่อง แต่ AI agents ครอบคลุมทุก domain ตั้งแต่ SEO ไปจนถึง security
• Communication overhead — ทีมคนต้อง meeting, ต้อง sync กัน AI agents ทำงานผ่าน defined interfaces ตรงๆ

Review Pipeline

ทุก change ต้องผ่าน pipeline:

1. Agent สร้าง code/content ตาม prompt
2. Code Reviewer ตรวจ patterns, quality, consistency
3. QA Engineer ตรวจ responsive, dark mode, accessibility
4. Human (เรา) approve final merge

จุดสำคัญ: AI ไม่ได้ทำงานอิสระโดยไม่มีคนดู ทุก output ถูก review ทุก decision ที่สำคัญยังต้องอาศัย human judgment

สิ่งที่ถูกสร้าง: ตัวเลขจริง

ทั้งหมดนี้ไม่ใช่แค่ boilerplate — ทุก component ถูกออกแบบให้เข้ากับ design system, ทุกหน้ารองรับ dark mode และ responsive ครบทุก breakpoint

Abstraction Layer: Insight ที่สำคัญที่สุด

สิ่งที่เราเรียนรู้จากการทำโปรเจกต์นี้คือ: AI ไม่ได้แทนที่ programmer — AI เป็น abstraction layer ใหม่เหนือ implementation

เหมือนกับที่:

• Assembly → C ทำให้เราไม่ต้องจัดการ registers เอง
• C → Python ทำให้เราไม่ต้องจัดการ memory เอง
• jQuery → React ทำให้เราไม่ต้องจัดการ DOM เอง

React → AI ทำให้เราทำงานในระดับ intent แทนระดับ implementation

แทนที่จะเขียน:
"สร้าง responsive card component ที่มี hover effect,
dark mode support, gradient border, aria-labels..."

เราสั่ง:
"สร้าง service card ตาม design system
ที่รองรับ 3 services: Genesis, PrivacyHub, Odoo"

ผลลัพธ์ไม่ต่างกัน — แต่ เวลาที่ใช้ต่างกันหลายเท่า เราทำงานในระดับ "อยากได้อะไร" แทน "เขียนอย่างไร" และ AI จัดการ implementation details ให้

Cost Analysis: API Costs vs Traditional Development

มาพูดเรื่องค่าใช้จ่ายกันตรงๆ:

AI Approach (Claude Code — สัปดาห์เดียว)

Traditional Development (ประมาณการ)

ค่าใช้จ่ายจริงของ AI approach: ~฿6,000–7,000 (API costs) + เวลาของเราสัปดาห์เดียว

นี่ไม่ใช่ตัวเลข marketing — นี่คือตัวเลขจาก billing dashboard จริง

สิ่งที่ AI ทำไม่ได้: Honest Limitations

เราจะไม่แกล้งทำเป็นว่าทุกอย่างสมบูรณ์แบบ นี่คือสิ่งที่ AI ยังทำไม่ดี:

1. ตัดสินใจเชิงธุรกิจ

AI ไม่รู้ว่า Enersys ควรเน้นขาย Genesis AI ก่อน หรือ PrivacyHub ก่อน ไม่รู้ว่า target audience เป็นใคร ไม่รู้ว่าตลาดไทยต้องการอะไร — strategic decisions ยังต้องมาจากคน

2. Original design direction

AI สามารถ implement design ที่สวยได้ แต่ creative direction ต้นฉบับ — tone of voice, brand personality, visual identity — ยังต้องมาจากคน AI ทำหน้าที่เป็น execution layer ไม่ใช่ creative director

3. Context ข้ามระบบ

เมื่อ project ซับซ้อนมากพอ AI เริ่มลืม context จาก conversation ก่อนหน้า ต้องมีวิธี manage context อย่างมีระบบ — เช่น CLAUDE.md file ที่เก็บ project conventions และ decisions สำคัญ

4. Testing ที่ครอบคลุม

AI เขียน code ได้ แต่ end-to-end testing ที่ครอบคลุม edge cases ยังต้องอาศัย human judgment คนยังต้องเป็นคน test ว่า UX flow ทั้งหมดสมเหตุสมผล

5. Production debugging

เมื่อ bug เกิดขึ้นใน production ที่ต้อง correlate หลาย system (DNS, K8s, Docker, Next.js, CDN) AI ทำได้แต่ช้ากว่าคนที่มีประสบการณ์กับ stack นั้นๆ

By the Numbers: ทีมคนจริง vs ทีม AI

Operating Model ใหม่: 5-Minute Update Cycle

สิ่งที่เปลี่ยนไปไม่ใช่แค่เว็บไซต์ — กระบวนการทำงานเปลี่ยนไปทั้งหมด

Before

1. คิด content → เขียน HTML ด้วยมือ → test บน local → copy ไฟล์ไป server → ภาวนาว่าจะไม่พัง
2. เวลาทั้งหมด: 30 นาที — 2 ชั่วโมง ต่อ update

After

1. เขียน markdown file → git push → CI/CD build อัตโนมัติ → deploy ไป K8s
2. เวลาทั้งหมด: ~5 นาที ต่อ update

หรือถ้าเป็นบทความใหม่:

1. สั่ง AI agent เขียนบทความ → review + edit → commit → auto-deploy
2. เวลาทั้งหมด: 15–30 นาที สำหรับบทความ 1,500+ คำ

Continuous deployment ไม่ใช่แค่ buzzword อีกต่อไป — มันคือ reality ที่ทำให้ 1 คนทำงานเท่ากับทีม 4–5 คนได้

What's Next: AI-First Development เป็น New Normal

จากประสบการณ์สัปดาห์นี้ เราเชื่อว่า:

1. AI-Assisted Development จะเป็น default

ไม่ใช่คำถามว่า "จะใช้ AI ช่วย code ไหม" แต่เป็น "ใช้ AI ช่วย code อย่างไรให้มีประสิทธิภาพสูงสุด" เหมือนที่ทุกวันนี้ไม่มีใครถามว่า "จะใช้ IDE ไหม"

2. Virtual Company model จะแพร่หลาย

การมี specialized AI agents ที่ทำงานเป็นทีมจะกลายเป็นเรื่องปกติ ไม่ต่างจากการมี microservices แทน monolith — แต่ละ agent เชี่ยวชาญเรื่องเดียว ทำงานร่วมกันผ่าน defined interfaces

3. คนจะ shift จาก "how" ไป "what" และ "why"

ทักษะที่สำคัญจะไม่ใช่ "เขียน React ได้" แต่เป็น "รู้ว่าควรสร้างอะไร" และ "ออกแบบ system ที่ถูกต้องได้" — architectural thinking และ product sense จะสำคัญกว่า syntax

4. Speed-to-market จะเป็น competitive advantage ที่แท้จริง

เมื่อทุกคนเข้าถึง AI ได้เท่ากัน ข้อได้เปรียบจะอยู่ที่ ความเร็วในการ execute และ คุณภาพของ strategic decisions — ไม่ใช่จำนวนคนในทีม

สรุป

เว็บไซต์ที่คุณกำลังอ่านอยู่ถูกสร้างในสัปดาห์เดียว โดยคน 1 คน กับ AI agent 24 ตัว ค่าใช้จ่าย API ไม่ถึง ฿7,000 ผลลัพธ์คือเว็บไซต์ที่มี 27 หน้า 86 components 26 บทความ รองรับ dark mode ทุกหน้า responsive ทุก breakpoint พร้อม CI/CD pipeline ที่ deploy อัตโนมัติ

เว็บเวอร์ชันเก่าที่ทีม 4 คนสร้าง 18 เดือนอยู่ในระดับ "พอใช้ได้" เว็บเวอร์ชันใหม่ที่ AI agents สร้างสัปดาห์เดียวอยู่ในระดับที่ CEO สบายใจจะส่งให้ลูกค้าดูได้เลย

นี่ไม่ใช่อนาคต — นี่คือปัจจุบัน

ถ้าคุณสนใจว่า AI จะช่วย transform องค์กรของคุณได้อย่างไร — ไม่ว่าจะเป็นการสร้างเว็บไซต์ วาง AI strategy หรือ implement AI agent ในกระบวนการธุรกิจ — พูดคุยกับเรา ได้เลย

หรืออยากประเมินความพร้อมขององค์กร? อ่านบทความ 5 สัญญาณที่บอกว่าองค์กรคุณพร้อมใช้ AI แล้ว เพื่อเริ่มต้น

บทความนี้เขียนด้วย AI agent ตัวหนึ่งในระบบ Virtual Company ของเรา — review และ approve โดยมนุษย์ ข้อมูลทุกตัวเลขมาจาก git history จริงของ repository นี้