กำเนิด Forge: คอมไพเลอร์ AI ที่เปลี่ยนวิธีสร้างเว็บไซต์

เครื่องมือสร้างเว็บไซต์ด้วย AI ทุกตัวทำงานแบบเดียวกัน คุณพิมพ์พรอมต์ LLM เขียน HTML และคุณได้สิ่งที่มันให้มา บางครั้งก็ดี บางครั้งก็ไม่ คุณกด “สร้าง” อีกครั้งแล้วได้อะไรที่ต่างไปโดยสิ้นเชิง ทั้งเลย์เอาต์ สี และคุณภาพ ผลลัพธ์โดยพื้นฐานแล้วคาดเดาไม่ได้

เราเคยปล่อยโมเดลแบบนั้นออกไป และมันใช้ได้ ผู้คนสร้างเว็บไซต์จริงด้วยมัน แต่เมื่อเราดูเว็บไซต์นับพันแห่งถูกสร้างขึ้น ก็เห็นรูปแบบหนึ่ง LLM ใช้โทเค็นส่วนใหญ่ไปกับการคิดค้นสิ่งที่มันไม่ควรเป็นผู้ตัดสินใจ ระบบนำทาง ความต่างของสี จุดตัดสำหรับมือถือ ลิงก์ยึด การโหลดฟอนต์ มาร์กอัปของฟอร์มติดต่อ

ทุกการสร้างคือการทอยลูกเต๋าใหม่กับปัญหาที่มีคำตอบที่ถูกต้อง

Forge คือคำตอบของเราต่อข้อสังเกตนั้น มันไม่ใช่การปรับปรุงทีละน้อย แต่เป็นสถาปัตยกรรมที่ต่างออกไปโดยพื้นฐานว่า AI สร้างเว็บไซต์อย่างไร

ปัญหาของการให้ AI เขียน HTML ดิบ

เมื่อคุณขอให้ LLM “สร้างเว็บไซต์สำหรับร้านตัดผม” มันต้องตัดสินใจหลายพันเรื่องพร้อมกัน จะมีส่วนอะไรบ้าง เรียงลำดับอย่างไร ระบบนำทางหน้าตาเป็นอย่างไร ใช้สีอะไร จัดการเลย์เอาต์มือถืออย่างไร โหลดฟอนต์อย่างไร เชื่อมลิงก์ยึดอย่างไร จัดโครงสร้าง HTML เชิงความหมายอย่างไร จัดการอัตราส่วนความต่างของสีอย่างไร จัดรูปแบบเวลาเปิดทำการอย่างไร แสดงเบอร์โทรเป็นลิงก์ที่กดได้อย่างไร

การตัดสินใจบางเรื่องเป็นเรื่องสร้างสรรค์ จะมีส่วนอะไรบ้าง ชุดสีแบบไหนเหมาะกับร้านตัดผม ความรู้สึกโดยรวมควรเป็นอย่างไร

ส่วนใหญ่เป็นเรื่องวิศวกรรม การนำทางต้องเลื่อนไปยังลิงก์ยึดจริง อัตราส่วนความต่างของสีต้องอย่างน้อย 4.5:1 เบอร์โทรต้องอยู่ในรูปแบบ E.164 ฟอนต์ต้องโหลดจาก Google Fonts พร้อม preconnect เลย์เอาต์มือถือต้องเรียงซ้อนแนวตั้งเมื่อกว้างต่ำกว่า 480px

เมื่อคุณปล่อยให้ LLM จัดการทั้งสองอย่าง การตัดสินใจเชิงสร้างสรรค์ออกมาดี แต่การตัดสินใจเชิงวิศวกรรมไม่สม่ำเสมอ บางครั้งความต่างของสีสมบูรณ์แบบ บางครั้งไม่ บางครั้งลิงก์ยึดใช้ได้ บางครั้งมี href ที่ตายแล้วชี้ไปยังส่วนที่ไม่มีอยู่ บางครั้งโหลดฟอนต์ถูกต้อง บางครั้งฝัง font-face ที่ไม่เคยถูกโหลดสำเร็จ

ข้อค้นพบเบื้องหลัง Forge: แยกการตัดสินใจเชิงสร้างสรรค์ออกจากการตัดสินใจเชิงวิศวกรรม ให้ AI ดูแลความคิดสร้างสรรค์ ให้คอมไพเลอร์ดูแลความถูกต้อง

สถาปัตยกรรมสองเฟส

Forge แบ่งการสร้างเว็บไซต์เป็นสองเฟสที่แยกจากกัน

เฟส 1: AI ตัดสินใจว่าจะสร้างอะไร (SiteSpec)

แทนที่จะเขียน HTML ดิบ AI สร้างข้อกำหนดที่มีโครงสร้าง เป็นเอกสาร JSON ที่เราเรียกว่า SiteSpec SiteSpec อธิบายว่าเว็บไซต์ควรมีส่วนอะไรบ้าง เนื้อหาในแต่ละส่วนคืออะไร ชุดสีและตัวอักษรควรเป็นอย่างไร การนำทางหน้าตาเป็นอย่างไร และแนวทางการออกแบบโดยรวมเป็นอย่างไร

AI ตัดสินใจเรื่องสร้างสรรค์ทั้งหมด จะเป็นสุนทรียะที่เข้มและหรูหรา หรือความรู้สึกแบบบรรณาธิการที่สว่างสดใส ส่วนแรกควรใช้ฟอนต์พาดหัวแบบแคบอย่าง Bebas Neue หรือฟอนต์เซอริฟสง่างามอย่าง Cormorant Garamond ส่วนต่าง ๆ ควรมีแกลเลอรี แถบสถิติ FAQ หรือกริดทีมงานหรือไม่

แต่ AI ไม่ได้ตัดสินใจว่าจะแสดงผลทั้งหมดนั้นอย่างไร มันไม่เขียน HTML หรือ CSS แม้แต่บรรทัดเดียว มันอธิบายเจตนา

เฟส 2: คอมไพเลอร์แสดงผลอย่างสมบูรณ์แบบ (ทุกครั้ง)

SiteSpec ป้อนเข้าคอมไพเลอร์ที่ให้ผลเหมือนเดิมทุกครั้ง ซึ่งเป็นฟังก์ชันบริสุทธิ์ที่รับข้อกำหนดและ playbook แล้วส่งออก HTML ที่สมบูรณ์ในตัวและพร้อมใช้งานจริง อินพุตเดียวกันให้เอาต์พุตเดียวกันเสมอ

คอมไพเลอร์เป็นเจ้าของการตัดสินใจเชิงวิศวกรรมทุกเรื่อง

• ลิงก์ยึดของการนำทาง — ทุกลิงก์นำทางชี้ไปยังส่วนจริง ลิงก์ยึดที่ตายแล้วเกิดขึ้นไม่ได้ คอมไพเลอร์ตรวจทุก #href เทียบกับ ID ของส่วนที่มีอยู่จริง
• ความปลอดภัยด้านความต่างของสี — ความต่างของสีตัวอักษรบนพื้นหลังถูกตรวจสอบและบังคับให้ได้ตาม WCAG AA (4.5:1) AI เลือกชุดสี คอมไพเลอร์รับประกันว่าอ่านได้
• การสลับพื้นผิว — ไม่มีสองส่วนติดกันที่ใช้เฉดพื้นหลังเดียวกัน คอมไพเลอร์สลับพื้นผิวหลักและรองให้อัตโนมัติเพื่อสร้างจังหวะทางสายตา
• การจัดข้อมูลติดต่อให้เป็นมาตรฐาน — เบอร์โทรถูกจัดรูปแบบเป็น E.164 สำหรับลิงก์ tel: ช่องทาง WhatsApp ถูกตรวจจับอัตโนมัติ เวลาเปิดทำการและที่อยู่ถูกจัดให้เรียบร้อย ทุกข้อมูลติดต่อใช้งานได้เป็นลิงก์ที่กดได้จริง
• การโหลดฟอนต์ — Google Fonts โหลดพร้อม preconnect และ display-swap ไม่มี font-face ที่เสีย ไม่มีเลย์เอาต์ที่เลื่อน
• เลย์เอาต์ที่ปรับตามหน้าจอ — ทุกบล็อกแสดงผลถูกต้องที่จุดตัดมือถือ แท็บเล็ต และเดสก์ท็อป AI ไม่ได้เลือกจุดตัด คอมไพเลอร์บังคับใช้
• การสร้างส่วนท้ายและการนำทาง — ถ้า AI ละส่วนท้ายหรือการนำทางไว้ (ซึ่งช่วยประหยัดโทเค็น) คอมไพเลอร์สร้างขึ้นจากส่วนที่มีอยู่ ไม่มีอะไรขาดหายจากผลลัพธ์สุดท้ายเลย

ทำไมเรื่องนี้สำคัญ: ความเร็วและความแน่นอน

ความเร็ว

เพราะ AI สร้างข้อมูลที่มีโครงสร้างแทน HTML ดิบ เอาต์พุตจึงเล็กลงอย่างมาก การสร้าง HTML เต็มหน้าต้องใช้เอาต์พุต LLM 15,000–25,000 โทเค็น SiteSpec สำหรับเว็บไซต์เดียวกันใช้ 4,000–6,000 โทเค็น ลดลง 3–4 เท่า ซึ่งแปลเป็นการสร้างที่เร็วขึ้นโดยตรง (ไม่ถึง 90 วินาทีสำหรับเว็บไซต์เต็มรูปแบบ) และต้นทุนที่ต่ำลง

ความแน่นอน

คอมไพเลอร์เป็นฟังก์ชันบริสุทธิ์ เมื่อได้ SiteSpec เดียวกัน มันสร้าง HTML เดียวกันเสมอ ซึ่งหมายความว่า

• การแก้ไขปลอดภัย เมื่อคุณเปลี่ยนหัวข้อของส่วนหนึ่งในตัวแก้ไขแบบเห็นภาพ จะเปลี่ยนเฉพาะส่วนนั้น คอมไพเลอร์แสดงผลข้อกำหนดใหม่ และส่วนที่เหลือของเว็บไซต์เหมือนเดิมทุกอย่าง ไม่มีผลข้างเคียงที่ลามไปทั่ว
• รับประกันคุณภาพ ความต่างของสี ลิงก์ยึด การจัดรูปแบบข้อมูลติดต่อ การโหลดฟอนต์ ทั้งหมดถูกต้องในทุกการสร้าง ไม่ใช่แค่บางครั้ง
• ทดสอบได้ เอนจินที่ให้ผลเหมือนเดิมทุกครั้งประเมินอย่างเป็นระบบได้ เรารันการตรวจอัตโนมัติเรื่องความต่างของสี ความสมบูรณ์ของลิงก์ยึด ความหลากหลายของบล็อก และความแปรผันของการออกแบบในแต่ละการสร้าง

ความคิดสร้างสรรค์ที่มีขอบเขต

นี่คือข้อค้นพบที่ขัดกับสามัญสำนึก ข้อจำกัดทำให้ AI สร้างสรรค์มากขึ้น ไม่ใช่น้อยลง เมื่อ LLM ไม่ต้องเขียน HTML และ CSS ซ้ำซาก มันใช้งบโทเค็นทั้งหมดไปกับการตัดสินใจที่สำคัญจริง ๆ คือการเลือกส่วน กลยุทธ์เนื้อหา แนวทางการออกแบบ ทฤษฎีสี ผลงานเชิงสร้างสรรค์ดีขึ้นก็เพราะส่วนวิศวกรรมมีคนจัดการให้แล้ว

ระบบ Playbook

คอมไพเลอร์ไม่ได้ฮาร์ดโค้ดว่าบล็อกใดแสดงผลอย่างไร แต่รับ Playbook ซึ่งเป็นโมดูลที่กำหนดไลบรารีบล็อก (แต่ละประเภทของส่วนแสดงผลเป็น HTML/CSS อย่างไร) ระบบแก้ค่าการออกแบบ (ชุดสีและตัวอักษรถูกแก้ค่าอย่างไร) และสไตล์ชีตพื้นฐาน

สลับ playbook แล้ว SiteSpec เดียวกันก็แสดงผลในภาษาภาพที่ต่างออกไปโดยสิ้นเชิง เอนจินยังเหมือนเดิม บล็อกเปลี่ยนไป นี่คือสิ่งที่ทำให้ Forge ขยายได้ ประเภทส่วนใหม่ แนวทางการออกแบบใหม่ กลยุทธ์การแสดงผลใหม่ ทั้งหมดโดยไม่ต้องแตะแกนของคอมไพเลอร์

ปัจจุบัน playbook ของตัวสร้างเว็บไซต์มีบล็อกที่แตกต่างกันกว่า 26 ประเภท ตั้งแต่ส่วนแรก รายการบริการ ไปจนถึงแถบสถิติ แกลเลอรี FAQ กริดทีมงาน มาร์คีย์ ปุ่มจอง และอื่น ๆ AI เลือกจากไลบรารีนี้ตามประเภทธุรกิจและเนื้อหา และคอมไพเลอร์แสดงผลด้วยความแม่นยำระดับพิกเซล

Forge ถือกำเนิดขึ้นมาอย่างไร

Forge ไม่ได้เริ่มจากแผนใหญ่ แต่เริ่มจากต้นแบบ ไฟล์ compile.mjs ไฟล์เดียวที่รับข้อกำหนด JSON ที่เขียนด้วยมือแล้วแสดงผลเป็น HTML คำถามนั้นง่าย ถ้าเรากำหนดบล็อกเอง และให้ AI เติมเนื้อหา ผลลัพธ์จะดีกว่า HTML ดิบจาก LLM ไหม

ดีกว่า ดีกว่าอย่างมาก ต้นแบบแสดงผลเว็บไซต์ร้านตัดผมที่มีความต่างของสีสมบูรณ์ การนำทางที่ใช้งานได้ การโหลดฟอนต์ที่ถูกต้อง และสุนทรียะเข้ม/ทองที่กลมกลืน ทั้งหมดจากข้อกำหนด JSON ที่มีขนาดเพียงเศษเสี้ยวของ HTML ที่เทียบเท่า

จากนั้นสถาปัตยกรรมก็ค่อย ๆ เป็นรูปเป็นร่าง

1. ต้นแบบกลายเป็นเอนจินที่มีชนิดข้อมูลและไม่ผูกกับเฟรมเวิร์ก นำเข้าได้โดยรันไทม์ JavaScript ใดก็ได้ โดยไม่พึ่ง React, Next.js หรือส่วนภายในของ SiteDrop
2. ตัวแสดงผลบล็อกที่ฮาร์ดโค้ดกลายเป็นระบบ Playbook แบบเสียบเพิ่มได้ แต่ละ playbook กำหนดบล็อก โทเค็นการออกแบบ และ CSS ของตัวเอง
3. การเชื่อมต่อกับ LLM เปลี่ยนจากเอาต์พุต HTML ดิบเป็นการใช้เครื่องมือแบบมีโครงสร้าง (สคีมา SiteSpec คือสคีมาของเครื่องมือ มันสอนโมเดลว่าต้องสร้างอะไรพร้อมกับจำกัดรูปทรงของเอาต์พุต)
4. สคีมาที่อธิบายตัวเองได้มาแทนที่ system prompt แบบดั้งเดิม คำอธิบายในสคีมาสอน AI ว่าแต่ละช่องหมายถึงอะไร “ไวยากรณ์” จึงเหลือแค่ไม่กี่บรรทัด
5. ด่านตรวจคุณภาพ ทั้งการตรวจความต่างของสี การตรวจทานลิงก์ยึด การสลับพื้นผิว และการจัดข้อมูลติดต่อให้เป็นมาตรฐาน ถูกสร้างไว้ในคอมไพเลอร์เพื่อให้ทำงานในทุกการสร้าง ไม่ใช่เป็นการประมวลผลหลังเสร็จแบบเลือกได้

ผลลัพธ์คือเอนจินที่ไม่ผูกกับผู้ให้บริการ (ใช้ได้กับ Claude, GPT, Gemini, DeepSeek, xAI และโมเดลใดก็ตามที่รองรับเอาต์พุตแบบมีโครงสร้าง) ไม่ผูกกับเฟรมเวิร์ก (แยกออกมาเป็นแพ็กเกจอิสระได้) และให้ผลเหมือนเดิมทุกครั้ง (ข้อกำหนดเดียวกัน → HTML เดียวกัน เสมอ)

เรื่องนี้หมายความว่าอย่างไรกับคุณ

ถ้าคุณเป็นผู้ใช้ SiteDrop Forge ทำงานอยู่แล้วเมื่อคุณสร้างเว็บไซต์ คุณไม่ต้องทำอะไรต่างไป การปรับปรุงอยู่ที่คุณภาพ ความเร็ว และความสม่ำเสมอของผลลัพธ์

• สร้างได้เร็วขึ้น — เว็บไซต์ถูกสร้างในไม่ถึง 90 วินาที เพราะเอาต์พุตของ AI เล็กลง 3–4 เท่า
• คุณภาพสม่ำเสมอ — ทุกการสร้างมีความต่างของสีที่ถูกต้อง การนำทางที่ใช้งานได้ การโหลดฟอนต์ที่เหมาะสม และรายละเอียดติดต่อที่จัดรูปแบบแล้ว
• การออกแบบหลากหลายขึ้น — AI เลือกจากบล็อกกว่า 26 ประเภท ต้นแบบการออกแบบกว่า 4 แบบ และการจับคู่ตัวอักษรมากมาย ร้านตัดผมได้สุนทรียะเข้มแบบแคบ คลินิกทันตกรรมได้ความรู้สึกสะอาดแบบบรรณาธิการ ร้านอาหารระดับไฟน์ไดนิงได้แนวเซอริฟหรูหรา
• แก้ไขได้ปลอดภัยกว่า — ตัวแก้ไขแบบเห็นภาพปรับ SiteSpec แล้วแสดงผลใหม่ผ่านคอมไพเลอร์ การเปลี่ยนแปลงจึงคาดเดาได้และไม่มีผลข้างเคียง

Forge ไปต่ออย่างไร

สถาปัตยกรรมคอมไพเลอร์คือรากฐานของทุกสิ่งที่เรากำลังสร้าง เพราะเอนจินขับเคลื่อนด้วยข้อกำหนด ทุกความสามารถใหม่จึงเป็นประเภทบล็อกใหม่ playbook ใหม่ หรือโทเค็นการออกแบบใหม่ ไม่ใช่การเขียนไปป์ไลน์การสร้างใหม่ นั่นคือพลังของการแยกส่วน AI เก่งขึ้นในการตัดสินใจ คอมไพเลอร์เก่งขึ้นในการแสดงผล และทั้งสองพัฒนาได้อย่างอิสระ

เราเชื่อว่ารูปแบบสองเฟสนี้ คือ AI สำหรับเจตนา คอมไพเลอร์สำหรับการลงมือทำ คือวิธีที่เว็บแอปพลิเคชันจะถูกสร้างต่อไปในอนาคต ไม่ใช่แค่เว็บไซต์หน้าเดียว แต่รวมถึงแอปพลิเคชันหลายหน้า แดชบอร์ด และประสบการณ์แบบโต้ตอบ AI อธิบายว่าควรมีอะไร คอมไพเลอร์รับประกันว่ามันใช้งานได้