# บทเรียน 02 — ใช้ skill ออกแบบและสร้างเว็บทริปภูเก็ต

skills พร้อมแล้ว บทนี้คือหัวใจของ session: **สั่งสร้างเว็บทั้งเว็บด้วย prompt เดียว** แล้วปล่อยให้ agent ตัดสินใจเรื่องดีไซน์เอง — เรากำหนดแค่ “ธุรกิจอะไร มีเนื้อหาอะไร จะเอาภาพจากไหน”

เป้าหมายของบทนี้: เห็นว่า prompt สร้างเว็บที่ดีประกอบด้วยอะไร และ agent ใช้ดุลยพินิจตรงไหน

## Prompt ที่ใช้

> $ui-ux-pro-max สร้างเว็บไซต์สำหรับให้ข้อมูลเกี่ยวกับทริปที่จังหวัดภูเก็ต
>
> ไปสิมิลันนะ
> ไปกระบี่ได้
> ไปเกาะต่าง ๆ รอบภูเก็ตได้นะครับ
>
> สามารถใช้ตัว GPT Image ในการช่วย generate รูปภาพเพื่อประกอบให้เว็บไซต์ดูสวยงามนะครับ

![ภาพ capture ของ prompt สร้างเว็บทริปภูเก็ต](/images/step4-create-site-prompt.webp)

สังเกตว่า prompt นี้สั้นมากสำหรับงานขนาด “สร้างเว็บทั้งเว็บ” — มี 4 ส่วนสำคัญคือ (1) เรียก skill ที่ต้องการใช้ ($ui-ux-pro-max) (2) บอกประเภทเว็บและพื้นที่เนื้อหา (ทริปภูเก็ต) (3) ยกตัวอย่างเนื้อหาหลัก (สิมิลัน กระบี่ เกาะรอบภูเก็ต) และ (4) อนุญาตให้ใช้ GPT Image สร้างภาพประกอบ

## ผลลัพธ์

agent ทำงาน **13 นาที 52 วินาที** แล้วตอบว่า: สร้างเว็บ **“เล ไปกัน”** เรียบร้อย มีข้อมูลสิมิลัน กระบี่ และเกาะรอบภูเก็ต พร้อมรายละเอียดทริป คำแนะนำการเดินทาง และภาพจาก GPT Image โดยใช้ ui-ux-pro-max วางดีไซน์ รองรับมือถือและคอมพิวเตอร์ — จากนั้นเผยแพร่แบบส่วนตัวให้เจ้าของดูก่อน โดยแก้ไขไฟล์ราว 10 ไฟล์ (+238 บรรทัด)

![ภาพ capture ของคำตอบว่าสร้างเว็บ “เล ไปกัน” เสร็จแล้ว](/images/step4-create-site-result1.webp)

![ภาพ capture ของหน้าเว็บที่สร้างเสร็จในขั้นนี้ ยังเป็นเวอร์ชันแรก](/images/step4-create-site-result2.webp)

## สิ่งที่ agent ตัดสินใจเอง

เราไม่ได้สั่งเรื่องเหล่านี้เลย — ทั้งหมดเกิดจากดุลยพินิจของ agent ร่วมกับ skill:

| หัวข้อ | ที่ agent เลือก | ที่มาของการตัดสินใจ |
| --- | --- | --- |
| ชื่อเว็บ | “เล ไปกัน” พร้อมแท็กอังกฤษ Phuket & Beyond | ตีความจากโทนสนทนาภาษาพูดใน prompt |
| โทนสี | เขียวทะเล–ขาว ตัดกับภาพทะเลอันดามัน | ui-ux-pro-max วางดีไซน์ตามประเภทเว็บท่องเที่ยวทะเล |
| ภาพประกอบ | ภาพ hero และบรรยากาศจาก GPT Image | ผู้ใช้อนุญาตไว้ใน prompt |
| โครงหน้า | hero พร้อมช่องค้นหา + ส่วนเนื้อหาแยกตามทริป | แบบแผนของเว็บท่องเที่ยวจากฐานข้อมูล skill |
| Responsive | ทำทั้งมือถือและคอมพิวเตอร์ตั้งแต่เวอร์ชันแรก | มาตรฐานที่ skill กำหนด |

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

## ข้อควรระวังและบทเรียน

- **ชื่อแบรนด์ที่ AI ตั้งให้อาจติดล้อไปเลย** — “เล ไปกัน” โดนใจเจ้าของจึงเก็บไว้ ถ้าไม่ถูกใจให้สั่งแก้ทันทีก่อนงานต่อยอด เพราะชื่อจะไปอยู่ในโดเมน ข้อความ และอีเมลทดสอบในขั้นถัด ๆ ไป
- **ภาพจาก GPT Image สวยแต่ไม่ใช่ภาพจริง** — ใช้เป็นบรรยากาศได้ แต่ภายหลังเราเปลี่ยนมาใช้ภาพจริงพร้อมเครดิตใน [บท 05](05-card-images.md)
- **การ “เผยแพร่แบบส่วนตัว” ไม่ใช่ deploy** — ขั้นนี้เว็บยังอยู่บนตัว agent เท่านั้น การขึ้นอินเทอร์เน็ตจริงเกิดที่ [บท 07](07-deploy-cloudflare.md)

ต่อไป: [บท 03 — เพิ่ม contact form ด้วย FormSubmit](03-contact-form.md)