วันแรกของ AI Builder OS — จากศูนย์ถึงขึ้นเว็บจริง

What I worked on

สร้างเว็บไซต์นี้ตั้งแต่ศูนย์จนขึ้น production โดยเขียนสเปกไว้ในไฟล์ AGENTS.md ก่อน แล้วให้ Claude Code ไล่ทำตามทีละเฟส ตั้งแต่วางโครงโปรเจกต์ ระบบคอนเทนต์ หน้าเว็บ ระบบค้นหา เทสต์ ไปจนถึงการ deploy

สเปกแบ่งงานเป็น 6 เฟส และจบครบทั้งหมดในวันเดียว

What changed

ผลลัพธ์ที่วัดได้ ณ ตอนจบวัน:

สิ่งที่ได้	จำนวน
commit	11
ไฟล์ในโปรเจกต์	131
หน้าเว็บที่ build ได้	28
URL ใน sitemap	26
unit test	57
end-to-end test	35 (เดสก์ท็อป + มือถือ)

ตัวเว็บใช้ Astro + TypeScript + Tailwind, คอนเทนต์เป็น Markdown ผ่าน content collections, ค้นหาด้วย Pagefind, deploy บน Vercel และต่อ Google Search Console เรียบร้อย

What failed

ส่วนที่น่าสนใจกว่าคือของที่พัง — และเกือบทั้งหมดพังในที่ที่เทสต์บนเครื่องตัวเองมองไม่เห็น

1. TypeScript 7 ใช้ไม่ได้ทั้งที่เป็นเวอร์ชันล่าสุด @astrojs/check กับ typescript-eslint ยังรองรับแค่ TS 6 ถ้าลงตัวล่าสุดไปเลย คำสั่งตรวจ type กับ lint จะพังทั้งคู่ ต้องล็อกไว้ที่ 6.x

2. Vite ทำ dynamic import พังแบบเงียบ ๆ ระบบค้นหาโหลด Pagefind ด้วย dynamic import แต่ Vite ห่อมันด้วย helper ของตัวเอง แล้วทิ้ง token __VITE_PRELOAD__ ไว้โดยไม่แทนที่ ในสคริปต์ที่ถูก inline เข้า HTML ผลคือมัน throw ตั้งแต่ก่อนจะเริ่ม import ด้วยซ้ำ ต้องย้ายไปเขียนใน inline script ที่ Vite ไม่แตะ

3. CSP ที่เพิ่งใส่เข้าไป ทำระบบค้นหาพังทันที เพิ่ม Content Security Policy ตามหลัก security แล้วค้นหาใช้ไม่ได้เลย เพราะ Pagefind ทำงานด้วย WebAssembly ซึ่ง script-src บล็อกถ้าไม่ระบุ wasm-unsafe-eval

4. เทสต์ผ่านหมดบนเครื่อง แต่ production พัง ข้อ 3 น่ากลัวตรงที่เทสต์ทั้ง 35 ตัวผ่านหมด เพราะ astro preview ไม่ได้ใส่ CSP มีแต่ host จริงที่ใส่ แปลว่าไม่มีทางเจอบั๊กนี้จากการรันในเครื่อง

5. Vercel ไม่อ่านไฟล์ _headers ตั้ง security header ไว้ในไฟล์ _headers ซึ่ง Cloudflare Pages กับ Netlify อ่าน แต่ Vercel ไม่อ่าน ต้องเขียน vercel.json แยก — เพิ่งรู้ตอนไปยิงดู header ของเว็บจริง

6. ช่อง search กิน Escape กด Escape แล้วหน้าต่างค้นหาไม่ปิด เพราะ <input type="search"> เอา Escape ไปเคลียร์ช่องก่อน ต้องดักเอง

7. AI ยิง request รัวจนโดน bot protection ระหว่างรอ deploy Claude Code ยิง curl เช็ค header รัว ๆ หลายสิบครั้ง จน Vercel เปิดโหมดป้องกัน bot ขึ้นมา เว็บตอบ 403 อยู่ 9 นาที

What I learned

บั๊กที่เหลือคือบั๊กที่เครื่องตัวเองจำลองไม่ได้ ข้อ 2, 3, 4, 5 เป็นเรื่องเดียวกันหมด — สภาพแวดล้อมจริงต่างจากเครื่องเรา เรื่อง build tool, header ของ host, และ security policy ล้วนไม่โผล่ตอนรัน local

เขียนสเปกก่อนได้ผลจริง การมี AGENTS.md ที่ระบุกฎไว้ล่วงหน้า ทำให้ไม่ต้องมาเถียงเรื่องเดิมซ้ำ ๆ ทุกครั้ง โดยเฉพาะกฎที่ห้ามแต่งข้อมูล — พอเจอช่องที่ควรใส่ประสบการณ์ มันเว้นว่างไว้ให้แทนที่จะแต่งเอง

เทสต์คุ้มค่าตรงที่ไม่คาดคิด เทสต์จับได้ว่าเนื้อหาตัวอย่างถูกตั้งเป็น draft ทั้งหมด ซึ่งแปลว่า production จะเป็นเว็บเปล่า ๆ เป็นบั๊กที่ถ้าไม่มีเทสต์ก็คงไปเจอเอาตอนเว็บขึ้นแล้ว

AI เร็ว แต่ยังต้องมีคนคุมทิศ งานที่ปกติใช้เวลาหลายวันจบในวันเดียว แต่คนยังต้องเป็นคนตัดสินใจว่าอะไรถูก และต้องไปดูของจริงเอง — บั๊ก CSP กับ header เจอเพราะไปยิงดูเว็บจริง ไม่ใช่เพราะเทสต์ฟ้อง

Next step

• เขียนบทความจริงเพิ่ม ตอนนี้เว็บมีโครงครบแต่เนื้อหายังน้อย
• เติมเนื้อหา case study ของโปรเจกต์ที่ยังเป็นแค่โครง
• ต่อระบบจดหมายข่าวกับ analytics
• ให้คนตรวจหน้านโยบายความเป็นส่วนตัวและเงื่อนไขการใช้งานก่อนรับผู้ใช้จริง