การมีเว็บไซต์ให้ลูกค้าเข้ามาดูรายละเอียด รูปห้องพัก ราคา และกดจองได้เอง

เป็นสิ่งที่เจ้าของที่พักทุกคนอยากมี แต่มักติดปัญหาเดิมๆ คือไม่มีพื้นฐานเขียนโค้ด จะจ้างบริษัททำก็แพง เสียเงินหลักหมื่นไปจนถึงหลักแสน

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

Install

ก่อนอื่นมาเตรียมเครื่องมือกัน ตัวช่วยหลักของเราในบทความนี้คือ opencode

โดยก่อนอื่นให้ไปที่เว็บ https://opencode.ai/download เพื่อโหลด OpenCode Desktop เวอร์ชันแอป ไม่ต้องเปิด Terminal หรือพิมพ์คำสั่งอะไรทั้งนั้น เปิดเป็นโปรแกรมธรรมดาเหมือนเปิดโปรแกรมอื่นๆ

1. เลือกเวอร์ชันให้ตรงกับเครื่องของเรา บนหน้านี้จะมีปุ่ม Download ให้เลือก:

• Mac → กดปุ่ม Download for macOS
• Windows → กดปุ่ม Windows (x64)

2. ติดตั้ง

• Mac: เปิดไฟล์ .dmg ที่โหลดมา → ลาก icon OpenCode ไปที่โฟลเดอร์ Applications
• Windows: เปิดไฟล์ .exe ที่โหลดมา → กด Next ไปเรื่อยๆ จนเสร็จ

3. เปิดใช้งาน คลิกที่ไอคอน OpenCode จะเจอหน้าต่างแอป ที่จัดการงานเป็นแท็บๆ ไว้เปิดหลายงานพร้อมกันได้

Open Project

1. สร้างโฟลเดอร์สำหรับเว็บของเรา ก่อนเริ่มงาน ให้สร้างโฟลเดอร์ใหม่ไว้ที่ Desktop เช่น ชื่อ booking-web

2. เปิดโฟลเดอร์ใน OpenCode กลับมาที่แอป OpenCode Desktop กดเปิดโปรเจกต์ เลือกโฟลเดอร์ booking-web ที่เพิ่งสร้าง เปิดปุ๊บ ก็เหมือนได้ห้องทำงานเปล่าๆ ของเว็บเราแล้ว

3. เลือก Model ข้อดีของ opencode คือมี model ที่เราสามารถใช้งานได้ฟรี

Design System

ก่อนจะเริ่มให้ AI สร้างเว็บ ขอแนะนำให้รู้จักไฟล์เล็กๆ ที่ชื่อว่า design.json กันสักหน่อย

มันคือไฟล์ที่บอก "สไตล์" ของเว็บ: ใช้สีอะไร ฟอนต์อะไร ขอบหนาแค่ไหน เหมือนคู่มือของเว็บ ที่ทำให้ทุกหน้าดูเป็นระบบเดียวกัน

ตัวอย่างหน้าตาเป็นแบบนี้:

{
  "colors": { "primary": "#1E50FF", "accent": "#D9FF2A", "background": "#F7F7F4" },
  "typography": { "heading": "Poppins", "body": "Inter" }
}

ซึ่งไฟล์นี้เราจะเอาไปวางไว้ในโฟลเดอร์ booking-web แล้วบอกให้ AI ทำเว็บตามสไตล์นี้

เทคนิคการสร้าง design.json

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

วิธีโหลด BrowserClaw

1. เปิดเบราว์เซอร์ไปที่ https://browseros.com/agents
2. กดปุ่ม Download BrowserClaw ให้ตรงกับเครื่อง (Mac / Windows)
3. ติดตั้งเหมือนโปรแกรมปกติ: Mac เปิดไฟล์ .dmg แล้วลากไป Applications / Windows รัน .exe
4. เปิดแอปขึ้นมา แล้วปล่อยให้รันเป็นเบราว์เซอร์ที่ AI ใช้ได้

การ Set MCP ใน opencode

1. เปิดไฟล์ตั้งค่า opencode.json ที่ ~/.config/opencode/opencode.json (ถ้ายังไม่มีไฟล์นี้ ให้สร้างขึ้นใหม่) แล้วเพิ่ม BrowserClaw ในส่วน mcp:

"mcp": {
  "browserclaw": { "type": "remote", "url": "http://127.0.0.1:9210/mcp", "enabled": true }
}

2. รีสตาร์ท opencode เท่านี้ AI ก็ใช้ BrowserClaw เปิดเว็บให้ได้

วิธีสร้าง design.json มีหลายวิธี ในตัวอย่างนี้ ผมจะมาสอนใช้วิธีที่ผมใช้ประจำ: ใช้ browserclaw ทำ automate หา template ที่เหมาะกับเรา แล้วให้สร้างไฟล์ design.json

1. สั่ง browserclaw ให้ไล่เปิดดูเว็บ template หลายๆ แบบ
2. browserclaw จะเปิดเว็บทีละหน้า แล้วให้เราดูว่าแบบไหนถูกใจ
3. เจอ template ที่เหมาะกับที่พักของเรา (โทนสี ฟอนต์ สไตล์ที่เข้ากับโรงแรม/รีสอร์ท) ก็บอกให้เก็บแบบนั้นไว้
4. สั่งให้สร้างไฟล์ design.json ตาม template ที่เลือก AI จะอ่านสี ฟอนต์ ขนาด จาก template แล้วสรุปออกมาเป็น design.json ให้ใช้ได้ทันที

ตัวอย่างคำสั่งที่ใช้:

ใช้ browserclaw เปิดหา template เว็บจองที่พัก 3 แบบ เหมาะกับรีสอร์ทเล็กๆ
เปิดทีละหน้า แล้วสรุปให้ดูว่าแต่ละแบบ: ใช้สีอะไร ฟอนต์แบบไหน หน้าตาโดยรวมเป็นยังไง
สุดท้ายแนะนำ 1 แบบที่เหมาะกับเว็บจองรีสอร์ท พร้อมเหตุผลสั้นๆ

สร้าง design.json ใช้สีอะไร ฟอนต์แบบไหน หน้าตาโดยรวมของ component

พร้อมแล้ว ต่อไปคือการสร้างเว็บจริง ด้วยการสั่ง opencode หนึ่งคำสั่งตามนี้

สร้างเว็บไซต์จองห้องพักของรีสอร์ทเล็กๆ ตามไฟล์ design.json ในโฟลเดอร์นี้
- หน้าหลัก: ชื่อที่พัก รูปห้องพัก ราคา รายละเอียดห้อง
- ระบบจอง: วันที่เช็คอิน เช็คเอาต์ จำนวนผู้เข้าพัก
- แสดงสถานะห้องว่าว่างหรือเต็ม
- ภาษาไทย สไตล์ตาม design.json ต้องรองรับการเปิดบนมือถือ

มาดูหน้าตาโค้ดที่ opencode เขียนให้กันบ้าง ถึงจะไม่เก่งโค้ด ก็ไม่ต้องเข้าใจทั้งหมด แต่เราสามารถสอบถาม AI ได้ว่าโค้ดส่วนไหนทำงานยังไง เพื่อทำให้เราเรียนรู้เกี่ยวกับ Code ไปด้วย

เสร็จแล้ว! นี่คือตัวอย่างเว็บที่ opencode สร้างออกมา

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

สรุป

บทความนี้เราลองอะไรไปเยอะเลย สรุปสิ่งที่ได้เรียนรู้:

1. ติดตั้งเครื่องมือด้วยตัวเอง — โหลดและตั้งค่า OpenCode Desktop + BrowserClaw
2. เข้าใจ design system — รู้จัก design.json และวิธีสร้างจาก template ที่ถูกใจ
3. สั่ง AI สร้างเว็บ — เขียน prompt ภาษาไทยง่ายๆ บอกฟีเจอร์ที่อยากได้ ก็ได้เว็บจองห้องพักทั้งเว็บออกมา

ผลลัพที่เราได้มาคือไฟล์ html + css + js ที่ยังเป็น template อยู่ยังใช้งานจริงไม่ได้ ตอนต่อไปเราจะมาสร้างระบบหน้าบ้านและหลังบ้านที่ใช้งานได้จริงกัน

บทความต่อไป

• สร้างระบบหน้าบ้าน สำหรับเว็บไซจองที่พักของเรา
• สร้างระบบหลังบ้าน สำหรับเว็บไซจองที่พักของเรา
• Deploy ระบบขึ้น Server