หากคุณส่งคำสั่งสั้นๆ เช่น “ทำเว็บพอร์ตโฟลิโอให้หน่อย” AI จะสุ่มองค์ประกอบที่คุณอาจไม่ต้องการมาให้ ดังนั้น โครงสร้าง Prompt ที่ดีที่สุดควรประกอบด้วย 4 ส่วนสำคัญเสมอ:
โครงสร้าง Prompt ที่สมบูรณ์:
ประเภทเว็บไซต์] + [สไตล์ & โทนสี] + [ลำดับ Sections และรายละเอียด] + [เงื่อนไขทางเทคนิค
(เช่น Responsive)]
คุณสามารถคัดลอก Prompt ด้านล่างนี้ไปปรับใช้ หรือนำไปใส่ใน Gemini Canvas ได้ทันที:
1. เว็บไซต์พอร์ตโฟลิโอส่วนตัว (Personal Portfolio)
แนวคิด: เหมาะสำหรับฟรีแลนซ์ นักศึกษา หรือคนทำงานที่ต้องการหน้าเว็บแสดงประวัติและผลงานเพื่อสร้างความน่าเชื่อถือ
Plaintext
ช่วยสร้างเว็บไซต์ Portfolio หน้าเดียวแบบ Responsive ด้วย HTML และ CSS โทนสีมินิมอล (ขาว-ดำ-เทา) ขอให้มีส่วนประกอบดังนี้:
1. ส่วน Hero มีรูปโปรไฟล์และคำแนะนำตัวสั้นๆ
2. ส่วนทักษะ (Skills) แสดงเป็นแถบความคืบหน้า (Progress bar)
3. ส่วนผลงาน (Projects) จัดเรียงแบบ Grid 3 คอลัมน์
4. ฟอร์มติดต่อ (ชื่อ, อีเมล, ข้อความ) ที่พร้อมเชื่อมต่อกับ JavaScript
- จุดที่ต้องสังเกต: การสั่งให้ส่วน Skills เป็น Progress Bar และส่วน Projects เป็น Grid 3 คอลัมน์ จะช่วยให้ AI เขียน CSS Layout มาให้อย่างเป๊ะๆ โดยที่คุณไม่ต้องมานั่งจัดช่องไฟเองทีหลัง
2. หน้า Landing Page เปิดตัวสินค้า/แอปพลิเคชัน
แนวคิด: สไตล์บริษัทเทคโนโลยียุคใหม่ (SaaS) ที่ต้องการดึงดูดให้คนดาวน์โหลดแอป หรือสมัครใช้งาน
Plaintext
สร้างหน้า Landing Page สไตล์ Modern ธีมสีน้ำเงิน-ขาว สำหรับเปิดตัวแอปพลิเคชันใหม่ โครงสร้างประกอบด้วย: ภาพแบนเนอร์ด้านบนพร้อมปุ่ม Call to Action ขนาดใหญ่, ส่วนอธิบายฟีเจอร์เด่น 3 ข้อโดยใช้ไอคอนประกอบ, และตารางเปรียบเทียบราคาแพ็กเกจ 3 ระดับ ขอดีไซน์ที่ดูสะอาดตาและน่าเชื่อถือแบบบริษัทเทคโนโลยี
- จุดที่ต้องสังเกต: การระบุตารางเปรียบเทียบราคา 3 ระดับ (Pricing Table) จะทำให้ AI สร้างโครงสร้างกล่องข้อความที่มีการเน้นย้ำแพ็กเกจแนะนำ (Highlighted Plan) มาให้โดยอัตโนมัติ
3. เว็บไซต์ร้านอาหาร/คาเฟ่ (Restaurant / Cafe)
แนวคิด: เน้นการสร้างบรรยากาศ คลุมโทนสีให้เข้ากับแบรนด์ และระบุข้อมูลสำคัญที่ลูกค้าต้องการรู้ทันที
Plaintext
เขียนโค้ด HTML/CSS สำหรับเว็บไซต์ร้านกาแฟสไตล์โฮมมี่ ใช้โทนสีน้ำตาลและเอิร์ธโทน ส่วน Hero เป็นภาพบรรยากาศร้าน, ถัดมาเป็นเมนูแนะนำ 3 เมนูแสดงผลแบบการ์ด (มีรูป ชื่อเมนู และราคา), และส่วนล่างสุดเป็นข้อมูลเวลาเปิด-ปิดพร้อมพื้นที่สำหรับฝังแผนที่ Google Maps
- จุดที่ต้องสังเกต: การระบุโครงสร้างเป็น “การ์ด (Card)” จะช่วยให้การแสดงผลรายการอาหารสวยงาม เป็นสัดส่วน และอ่านง่ายบนจอมือถือ
4. หน้าลงทะเบียนเข้าร่วมกิจกรรม (Event Registration)
แนวคิด: เว็บไซต์หน้าเดียวที่สร้างขึ้นเพื่อจุดประสงค์เดียว คือการเก็บข้อมูลผู้เข้าร่วมงานสัมมนาหรืออีเวนต์
Plaintext
ออกแบบหน้าเว็บลงทะเบียนเข้าร่วมงานสัมมนา 1 หน้า โทนสี Professional (สีน้ำเงินเข้มและสีทอง) มีรายละเอียดชื่องาน, วันเวลา, วิทยากร และไฮไลต์คือ 'ฟอร์มลงทะเบียน' (ชื่อ-นามสกุล, อีเมล, เบอร์โทรศัพท์, ปุ่มส่งข้อมูล) โครงสร้างฟอร์มต้องรองรับการเขียน JavaScript เพื่อส่งข้อมูลเข้า Google Sheets แบบไม่รีเฟรชหน้าเว็บ
- จุดที่ต้องสังเกต: ประโยคท้ายสุดที่ระบุเรื่อง “ส่งข้อมูลเข้า Google Sheets แบบไม่รีเฟรชหน้าเว็บ” เป็นการบอกให้ AI เตรียมชื่อ
idหรือclassของฟอร์มไว้ล่วงหน้า เพื่อให้เราเขียนโค้ด Apps Script เชื่อมต่อได้ง่ายในบทถัดๆ ไป
5. เว็บไซต์รวมลิงก์ (Link-in-Bio / Linktree Alternative)
แนวคิด: หน้าเว็บขนาดเล็กสำหรับใส่บน Bio ของ Instagram, TikTok หรือ Facebook เน้นเปิดบนมือถือเร็วและดีไซน์ล้ำสมัย
Plaintext
สร้างหน้า Link-in-bio สไตล์กระจกฝ้า (Glassmorphism) สำหรับใส่ในหน้าโปรไฟล์ Instagram เน้นแสดงผลบนมือถือเป็นหลัก (Mobile First) มีรูปโปรไฟล์ทรงกลมตรงกลาง, ชื่อบัญชี, คำอธิบายสั้นๆ, และปุ่มลิงก์ 5 ปุ่ม เมื่อนำเมาส์ไปวาง (Hover) หรือกดทัช ขอให้มีเอฟเฟกต์เคลื่อนไหวเล็กน้อย
- จุดที่ต้องสังเกต: คำว่า Mobile First จะบังคับให้ AI ออกแบบขนาดตัวหนังสือและปุ่มกดให้กว้างพอดีกับนิ้วโป้งบนหน้าจอมือถือพอดี
6. หน้าเว็บ ‘Coming Soon’ เก็บอีเมลลูกค้า
แนวคิด: ใช้เปิดสร้างกระแสก่อนเปิดตัวธุรกิจจริง เพื่อสะสมรายชื่อลูกค้าที่สนใจ (Leads) ไว้ล่วงหน้า
Plaintext
สร้างหน้าเว็บ Coming Soon แบบเต็มจอ (Full Screen) มีภาพพื้นหลังแบบเบลอหรือใส่ฟิลเตอร์สีทับ ตรงกลางหน้าจอมีตัวหนังสือนับถอยหลัง (Countdown timer) แสดง วัน/ชั่วโมง/นาที และด้านล่างมีช่องกรอกอีเมลพร้อมปุ่ม 'แจ้งเตือนฉันเมื่อเปิดใช้งาน' ขอดีไซน์สไตล์หรูหรา (Elegant)
- จุดที่ต้องสังเกต: Gemini Canvas จะเขียนโค้ด JavaScript นับถอยหลัง (Countdown) มาให้ในตัว ทำให้หน้าเว็บมีองค์ประกอบที่เคลื่อนไหวสมจริง
7. เมนูอาหารดิจิทัลสำหรับสแกน QR Code
แนวคิด: สำหรับร้านค้าที่ต้องการให้ลูกค้าสแกน QR Code บนโต๊ะเพื่อดูเมนูผ่านมือถือโดยไม่ต้องโหลดไฟล์ PDF หนักๆ
Plaintext
ออกแบบหน้าเว็บเมนูอาหารสำหรับให้ลูกค้าสแกน QR Code ดูบนมือถือ (Mobile UI) โทนสีสว่างและโหลดเร็ว แบ่งหมวดหมู่เมนูเป็นแท็บ (Tab) ด้านบน เช่น อาหารคาว, ของหวาน, เครื่องดื่ม รายการอาหารแต่ละแถวมีรูปภาพขนาดเล็กด้านซ้าย ชื่อเมนูและราคาอยู่ด้านขวา
- จุดที่ต้องสังเกต: การสั่งแบ่งหมวดหมู่เป็น แท็บ (Tab) จะช่วยให้ AI เขียน JavaScript สำหรับสลับหน้าหมวดหมู่เมนูได้โดยไม่ต้องโหลดหน้าเว็บใหม่
8. แกลลอรี่ภาพถ่าย (Photography Gallery)
แนวคิด: สำหรับช่างภาพ หรือนักออกแบบที่ต้องการแสดงผลงานภาพถ่ายจำนวนมากในรูปแบบที่น่าตื่นตาตื่นใจ
Plaintext
สร้างหน้าเว็บแกลลอรี่ภาพถ่ายสไตล์ Masonry Grid (จัดเรียงรูปภาพสลับฟันปลาคล้าย Pinterest) พื้นหลังสีดำ โทน Cinematic เมื่อคลิกที่รูปภาพ ขอให้มีเอฟเฟกต์ขยายภาพให้ใหญ่ขึ้นกลางหน้าจอ (Lightbox) โดยใช้ HTML, CSS และ JavaScript เบื้องต้น
- จุดที่ต้องสังเกต: คำว่า Masonry Grid เป็นคีย์เวิร์ดสำคัญทาง CSS ที่จะทำให้รูปภาพที่มีความสูงไม่เท่ากัน ถูกจัดเรียงต่อกันได้อย่างสวยงามโดยไม่เกิดช่องว่างแหว่งๆ
9. หน้าจองคิวบริการ / คลินิก / ซาลอน
แนวคิด: สร้างความน่าเชื่อถือให้กับธุรกิจบริการ พร้อมมีระบบนัดหมายเบื้องต้นให้ลูกค้าเลือกวันเวลาได้เอง
Plaintext
ช่วยสร้างหน้าเว็บสำหรับคลินิกความงาม โทนสีชมพูพาสเทลและขาว ดูสะอาดและปลอดภัย มีส่วนแนะนำบริการหลัก 4 อย่าง, ส่วนรีวิวจากลูกค้า (Testimonials), และฟอร์มสำหรับนัดหมายวัน-เวลาล่วงหน้า (มีช่องให้เลือกวันที่และเวลา) ออกแบบให้ดูนุ่มนวลและเป็นมิตร
- จุดที่ต้องสังเกต: AI จะใช้ Element แท็ก
<input type="date">และ<input type="time">ในการทำตัวเลือกวันที่และเวลา ทำให้ผู้ใช้สามารถคลิกเลือกปฏิทินบนมือถือได้ทันที
10. เว็บไซต์ให้ความรู้ / ถาม-ตอบ (FAQ & Help Center)
แนวคิด: ศูนย์รวมคำถามที่พบบ่อย ช่วยลดภาระแอดมินในการตอบคำถามเดิมๆ ซ้ำๆ
Plaintext
สร้างหน้าเว็บศูนย์ช่วยเหลือ (Help Center) สไตล์มินิมอล มีช่องค้นหาขนาดใหญ่อยู่ด้านบน (Hero section) ถัดลงมาเป็นหมวดหมู่คำถามที่พบบ่อย (FAQ) จัดเรียงแบบ Accordion (คลิกที่คำถามแล้วเนื้อหาคำตอบจะเลื่อนขยายลงมา) ใช้ JavaScript เบื้องต้นในการทำเอฟเฟกต์เปิด-ปิดคำตอบ
- จุดที่ต้องสังเกต: Accordion คือโครงสร้างที่จะซ่อนคำตอบไว้ และเปิดออกมาเฉพาะเมื่อลูกค้าคลิกที่คำถาม ช่วยให้หน้าเว็บดูสะอาดตา ไม่ยาวจนเกินไป
เทคนิคพิเศษในการทำงานบน Gemini Canvas: เมื่อคุณวาง Prompt เหล่านี้ลงไปแล้ว Gemini จะเปิดหน้าต่าง Canvas ขึ้นมาทางด้านขวามือ หากคุณต้องการปรับเปลี่ยนส่วนไหน ไม่จำเป็นต้องสั่งให้ทำใหม่ทั้งหมด!
คุณสามารถใช้เมาส์ไฮไลต์ (Drag & Select) โค้ดหรือข้อความเฉพาะจุดบน Canvas แล้วพิมพ์สั่งปรับแก้เป็นภาษาพูดได้เลย เช่น “เปลี่ยนปุ่มนี้เป็นสีแดง” หรือ “เพิ่มช่องใส่เบอร์โทรศัพท์ในฟอร์ม” AI จะแก้ไขเฉพาะจุดที่คุณเลือกทันที