สร้างเว็บแนะนำตัว 1 หน้า แค่ตอบคำถามไม่กี่ข้อ

ก่อน-หลัง

ที่คนส่วนใหญ่พิมพ์ มักเป็นคำสั่งสั้นๆ แบบนี้

ทำเว็บแนะนำตัวให้หน่อย

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

ถ้าใช้ prompt นี้ จะได้เว็บที่มีแต่ข้อมูลจริงของเรา ส่วนที่ยังไม่มีข้อมูลจะขึ้นเป็น [วงเล็บ] ให้เห็นชัดว่าต้องแก้ หน้าตาตรงกับสไตล์ที่เลือก เปิดบนมือถือได้ และเรารู้วิธีเปิดไฟล์ดูได้ทันที

แกะทีละส่วน

"ถามทีละ 1 ข้อ"

ถ้าถามทีเดียวทั้ง 6 ข้อ คนส่วนใหญ่จะตอบไม่ครบ หรือตอบสั้นจนไม่มีข้อมูลให้ใช้ การถามทีละข้อพร้อมตัวอย่างคำตอบทำให้ตอบง่ายเหมือนคุยกับเพื่อน

"ถ้าจะใส่เบอร์โทรหรืออีเมล ให้ถามยืนยันก่อน"

เว็บแนะนำตัวมักเปิดให้ทุกคนดู บรรทัดนี้ทำให้ AI เตือนเราก่อนที่จะเผลอเปิดเผยข้อมูลส่วนตัว

4 สไตล์ที่บอกรายละเอียด

คำว่า "สวยๆ" ตีความได้ร้อยแบบ แต่คำอธิบายอย่าง "พื้นครีม ช่องว่างเยอะ หัวเรื่องบาง ใหญ่" ทำให้ AI รู้ว่าต้องเลือกสี ฟอนต์ และการจัดวางอย่างไร ส่วนเราแค่เลือกเลข 1–4

"ไฟล์ HTML ไฟล์เดียว ใส่ CSS ในไฟล์"

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

"ฟอนต์ที่รองรับภาษาไทย"

ถ้าไม่บอก AI มักเลือกฟอนต์อังกฤษ ตัวหนังสือไทยจึงขึ้นเป็นฟอนต์พื้นฐานของเครื่อง ซึ่งดูไม่เข้ากับการออกแบบ

"ห้ามแต่ง URL" และ "ห้ามแต่งข้อมูลเกี่ยวกับตัวฉัน"

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

ขั้นที่ 3 สรุปให้ยืนยันก่อนสร้าง

AI จะให้เราตรวจข้อมูลก่อนลงมือสร้าง ถ้าพิมพ์ชื่อผิดหรือลืมบอกอะไร การแก้ตรงนี้ง่ายกว่าแก้เว็บที่สร้างเสร็จแล้ว

"ตอบเป็นโค้ดบล็อกเดียว" และขั้นที่ 5 บอกวิธีเปิดไฟล์

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

ตัวอย่างใช้จริง

ตัวอย่างนี้ใช้ข้อมูลสมมติ

คำตอบที่ให้ไป

เราตอบคำถามทั้ง 6 ข้อและเลือกสไตล์ไว้ดังนี้

1. มิ้นท์
2. นักออกแบบกราฟิกฟรีแลนซ์ ที่เชียงใหม่
3. ออกแบบโลโก้ร้านกาแฟ · ทำภาพโพสต์โซเชียล · ออกแบบแพ็กเกจสินค้าท้องถิ่น
4. ชอบเปลี่ยนเรื่องราวของร้านเล็กๆ ให้เป็นภาพที่คนจำได้ ทำงานกับร้านในเชียงใหม่มา 5 ปี
5. Facebook, Instagram, LINE OA (ไม่ใส่เบอร์โทร)
6. มีรูป
สไตล์: 1 เรียบหรู

ผลลัพธ์จาก Claude เมื่อรันจริง (ข้อมูล ณ 21 ต.ค. 2569) ใช้ 9 รอบ Claude ถามทีละข้อจนครบ 6 ข้อ ให้เลือกสไตล์ แล้วสรุปให้ยืนยันก่อนสร้าง ตัวอย่างนี้แสดงคำสรุปนั้น สรุปสิ่งที่อยู่ในไฟล์ HTML ที่ได้ (ไม่แสดงโค้ด) และแสดงคำแนะนำท้ายคำตอบ

ขั้นที่ 3: Claude สรุปให้ยืนยันก่อนสร้าง

เลือกสไตล์ เรียบหรู ครับ ✨ ก่อนเริ่มสร้าง ขอสรุปให้ตรวจดูอีกรอบนะครับ

📋 สรุปข้อมูลเว็บของมิ้นท์

• ชื่อ: มิ้นท์
• ทำอะไร: นักออกแบบกราฟิกฟรีแลนซ์ ที่เชียงใหม่
• จุดเด่น 3 อย่าง:
  1. ออกแบบโลโก้ร้านกาแฟ
  2. ทำภาพโพสต์โซเชียล
  3. ออกแบบแพ็กเกจสินค้าท้องถิ่น
• เกี่ยวกับฉัน: "ชอบเปลี่ยนเรื่องราวของร้านเล็กๆ ให้เป็นภาพที่คนจำได้ ทำงานกับร้านในเชียงใหม่มา 5 ปี"
• ช่องทางติดต่อ: Facebook · Instagram · LINE OA
  • ยังไม่มีลิงก์ ผมจะใส่ "#" ไว้ให้ก่อน มิ้นท์ค่อยมาแก้ทีหลัง
  • ไม่ใส่เบอร์โทร
• รูปโปรไฟล์: มี ผมจะเว้นที่ไว้และบอกชื่อไฟล์ที่ต้องวาง
• สไตล์: เรียบหรู พื้นสีครีม ตัวหนังสือสีเข้ม เว้นที่ว่างเยอะ หัวเรื่องตัวใหญ่เส้นบาง
  • สีเน้น: ผมเสนอเป็นเขียวเข้ม เพราะเข้ากับชื่อ "มิ้นท์" และดูเป็นธรรมชาติแบบเชียงใหม่ ถ้าชอบสีทองมากกว่า บอกได้เลยครับ

ถูกต้องไหม หรืออยากแก้อะไร

(ถ้ามีลิงก์ Facebook / Instagram / LINE OA ส่งมาตอนนี้ได้เลยนะครับ ผมจะใส่ให้ในเว็บทันที)

ขั้นที่ 4: ไฟล์ HTML ที่ได้

เราตอบว่า "ถูกต้อง" แล้ว Claude ส่งไฟล์ HTML ยาว 470 บรรทัดมาในโค้ดบล็อกเดียว ในไฟล์มีสิ่งเหล่านี้

• พื้นสีครีม สีเน้นเป็นเขียวเข้ม หัวเรื่องใช้ฟอนต์ Noto Serif Thai แบบเส้นบาง และเนื้อความใช้ฟอนต์ Sarabun ซึ่งรองรับภาษาไทยทั้งคู่
• หัวเว็บมีชื่อ "มิ้นท์" ตัวใหญ่ ใต้ชื่อเขียนว่า "นักออกแบบกราฟิกฟรีแลนซ์ ที่เชียงใหม่" และมีปุ่ม "ติดต่อมิ้นท์"
• กรอบรูปโปรไฟล์บอกให้วางไฟล์ชื่อ profile.jpg ไว้ในโฟลเดอร์เดียวกับไฟล์เว็บ
• ส่วน "เกี่ยวกับฉัน" ใช้เรื่องเล่าที่เราตอบตรงตัว และแสดงเลข 5 ตัวใหญ่คู่กับข้อความ "ปี ที่ทำงานกับร้านในเชียงใหม่"
• ส่วน "สิ่งที่ถนัด" มี 3 ข้อตามที่ตอบ ใต้แต่ละข้อเป็นช่อง [เพิ่มคำอธิบายสั้นๆ หรือตัวอย่างผลงาน] ให้เราเติมเอง
• ส่วน "ช่องทางติดต่อ" มี Facebook, Instagram และ LINE OA ลิงก์ทุกอันเป็น "#" ชื่อบัญชีเป็นวงเล็บ เช่น [@ไอดี LINE OA] และไม่มีเบอร์โทร

ขั้นที่ 5: คำแนะนำหลังสร้างเสร็จ

ต่อจากโค้ด Claude บอกวิธีเปิดไฟล์และเสนอไอเดียปรับเพิ่มดังนี้ ("กล่องโค้ดด้านบน" ในข้อ 1 หมายถึงโค้ดบล็อกในคำตอบของ Claude)

🖥️ วิธีเปิดดูเว็บ

1. ก๊อปโค้ด: กดปุ่ม Copy ที่มุมขวาบนของกล่องโค้ดด้านบน
2. วางในโปรแกรมพิมพ์ข้อความ
   • Windows: เปิด Notepad แล้ววางโค้ด
   • Mac: เปิด TextEdit แล้วไปที่เมนู Format เลือก Make Plain Text ก่อน แล้วค่อยวางโค้ด
3. บันทึกไฟล์: สร้างโฟลเดอร์ใหม่ เช่น "เว็บมิ้นท์" แล้วบันทึกไฟล์ในโฟลเดอร์นั้นชื่อ index.html
   • Windows: ช่อง "Save as type" เลือก All Files และช่อง Encoding เลือก UTF-8 (ถ้าไม่เลือก ภาษาไทยอาจกลายเป็นตัวอ่านไม่ออก)
4. ใส่รูป: เปลี่ยนชื่อรูปโปรไฟล์เป็น profile.jpg แล้ววางไว้ในโฟลเดอร์เดียวกัน
5. เปิดดู: ดับเบิลคลิกไฟล์ index.html เว็บจะเปิดขึ้นมาในเบราว์เซอร์

สิ่งที่ต้องแก้เอง: เปิดไฟล์ด้วย Notepad หรือ TextEdit แล้วแก้ 2 อย่างนี้

• ข้อความที่อยู่ใน [วงเล็บ] ให้เปลี่ยนเป็นข้อมูลจริง
• href="#" ให้เปลี่ยน # เป็นลิงก์จริงของ Facebook, Instagram และ LINE OA

💡 ไอเดียที่น่าเพิ่ม

1. เพิ่มส่วน "ผลงาน" — ใส่รูปงานจริง 3–6 ชิ้น เช่น โลโก้ร้านกาแฟหรือแพ็กเกจสินค้า ลูกค้ามักอยากเห็นงานก่อนตัดสินใจจ้าง ส่วนนี้น่าจะช่วยให้ได้งานมากที่สุด
2. เพิ่มคำรีวิวจากเจ้าของร้าน — ขอคำพูดสั้นๆ จากร้านที่เคยร่วมงาน 2–3 ร้าน มาใส่พร้อมชื่อร้าน จะช่วยให้คนเชื่อใจมากขึ้น
3. ใส่ QR Code LINE OA และแพ็กเกจราคาเริ่มต้น — คนที่เปิดเว็บในคอมจะสแกนทักมาได้เลย และถ้าบอกราคาเริ่มต้นไว้ เช่น "โลโก้เริ่มต้น [ราคา] บาท" ลูกค้าจะกล้าทักมาถามมากขึ้น

ถ้าอยากให้ผมเพิ่มส่วนไหน หรือปรับสีหรือฟอนต์ บอกได้เลยครับ 😊

สังเกต 3 อย่างในผลลัพธ์นี้

1. Claude ไม่สร้างเว็บทันที แต่สรุปข้อมูลทั้งหมดให้ตรวจก่อน แล้วถามว่า "ถูกต้องไหม หรืออยากแก้อะไร" ตามขั้นที่ 3
2. Claude ไม่แต่งชื่อลูกค้า รางวัล หรือลิงก์ขึ้นมาเลย ข้อมูลที่เราไม่ได้ให้ขึ้นเป็น [วงเล็บ] และลิงก์เป็น "#" ทั้งหมด
3. ไอเดียข้อ 2 ชวนเพิ่มคำรีวิว แต่ให้ไปขอคำพูดจริงจากร้านที่เคยร่วมงาน ไม่ได้แต่งรีวิวมาให้

ปรับใช้ต่อ

• เปลี่ยนสี ในแชทเดิม พิมพ์ว่า "เปลี่ยนสีเน้นเป็น [สีที่ชอบ] แต่คงสไตล์เดิม"
• เพิ่มส่วนใหม่ พิมพ์ว่า "เพิ่มส่วน [เช่น ราคาบริการ 3 แพ็กเกจ] ต่อจากจุดเด่น"
• ทำเป็นเว็บร้าน แก้ขั้นที่ 1 ให้เป็นคำถามเกี่ยวกับร้าน เช่น ชื่อร้าน เมนูเด่น เวลาเปิด และแผนที่
• ⚠️ ห้ามใส่ที่อยู่บ้าน เลขบัตรประชาชน หรือเบอร์ส่วนตัวบนเว็บที่เปิดให้ทุกคนดู