Prompt Frameworks

C.A.N.V.A.S. Framework ซึ่งเป็นโครงสร้างที่ปรับแต่งมาเพื่อการสร้างโปรเจกต์แบบอินเทอร์แอกทีฟบนแพลตฟอร์ม Gemini Canvas โดยเฉพาะ

🎨 โครงสร้าง 

1. C - Concept & Context (แนวคิดและบริบท)

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

• เทคนิค: กำหนดบทบาทให้ AI เสมอ (เช่น "ทำตัวเป็น Front-end Developer และ Game Designer") และอธิบายภาพรวมของแอปใน 1-2 ประโยค

2. A - Audience & Aesthetics (กลุ่มเป้าหมายและสไตล์ UI/UX)

เนื่องจาก Canvas รองรับการเรนเดอร์หน้าเว็บเต็มรูปแบบ การระบุสไตล์ความสวยงามจึงสำคัญมาก

• เทคนิค: ระบุกลุ่มผู้ใช้งาน (เช่น เด็กประถม, วัยรุ่น) และบอกโทนสี หรือแนะนำให้ AI ใช้ Tailwind CSS ในการออกแบบ เพื่อให้ได้ UI ที่ดูทันสมัยและเป็น Responsive (รองรับหน้าจอมือถือ)

3. N - Needs & Mechanics (ฟีเจอร์หลักและกลไกการทำงาน)

อธิบายกติกา หรือขั้นตอนลอจิก (Logic) อย่างละเอียด หากเป็นเกมให้บอกว่าเริ่มอย่างไร เล่นอย่างไร และจบอย่างไร

• เทคนิค: ใช้ Bullet points หรือตัวเลข 1, 2, 3... ในการอธิบายกติกา เพื่อให้ AI เข้าใจลำดับการทำงานและไม่สร้างเงื่อนไขที่ขัดแย้งกันเอง

4. V - Variables & Data (ข้อมูลตั้งต้นและเนื้อหา)

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

• เทคนิค: หากสร้างเกมคำศัพท์ ให้กำหนดคู่คำศัพท์ไปเลย 5-10 คู่ หรือหากสร้างแอปคำนวณ ให้บอกสูตรสมการที่ถูกต้องไปใน Prompt ด้วย

5. A - Actions & Feedback (การโต้ตอบและผลลัพธ์)

กำหนดว่าเมื่อผู้ใช้โต้ตอบกับหน้าจอ (เช่น คลิก, ลากวาง, พิมพ์, หมดเวลา) จะเกิดอะไรขึ้นบ้าง

• เทคนิค: ระบุให้ชัดเจน เช่น การนับคะแนน, ระบบจับเวลา, เอฟเฟกต์สั่นเมื่อตอบผิด, การเปลี่ยนสีปุ่ม, หน้าต่าง Pop-up สรุปผลตอนจบ และปุ่ม "เริ่มเล่นใหม่ (Restart)"

6. S - Stack & Specs (เทคโนโลยีและข้อจำกัด)

Canvas ทำงานได้ดีที่สุดเมื่อโปรเจกต์ถูกเขียนรวมอยู่ในไฟล์เดียว

• เทคนิค: สั่งให้เขียนเป็น Single-file HTML (รวม CSS และ JS ไว้ในไฟล์เดียว) ระบุให้เรียกใช้ Library ภายนอกผ่าน CDN ได้ (เช่น FontAwesome สำหรับไอคอน, Canvas-confetti สำหรับเอฟเฟกต์จุดพลุ)

📝 เทมเพลต Prompt แบบ C.A.N.V.A.S (คัดลอกไปปรับใช้ได้เลย)

คุณสามารถนำเทมเพลตด้านล่างนี้ไปปรับแก้ข้อมูลในวงเล็บ [...] และวางใน Gemini เพื่อเริ่มสร้าง Canvas ได้ทันทีครับ:

ทำหน้าที่เป็น Expert Front-end Developer และ UI/UX Designer ช่วยสร้างโปรเจกต์บน Canvas ตามข้อกำหนดนี้:

[Concept]

สร้าง: [เกมตอบคำถามคณิตศาสตร์คิดเร็ว (Math Speed Test)]

เป้าหมาย: [เพื่อให้เด็กนักเรียนชั้น ป.4 ฝึกบวกลบเลขหลักสิบอย่างสนุกสนาน]

[Aesthetics]

สไตล์การออกแบบ: [สไตล์การ์ตูน สีสันสดใส พื้นหลังสีพาสเทล ปุ่มมีเงาแบบ 3 มิติขนาดใหญ่]

UI: [ต้องเป็น Responsive Design จัดกึ่งกลางหน้าจอ รองรับการเล่นบนมือถือและแท็บเล็ต]

[Mechanics]

กติกาการเล่น:

1. [แสดงโจทย์คณิตศาสตร์ตรงกลาง และมีปุ่มตัวเลือกคำตอบ 4 ปุ่ม]

2. [มีเวลาให้ข้อละ 10 วินาที หากตอบไม่ทันถือว่าผิดและข้ามไปข้อถัดไป]

3. [ระบบต้องสุ่มตำแหน่งของตัวเลือกที่ถูกต้องเสมอ]

[Variables]

ตัวอย่างข้อมูลที่ต้องสุ่มสร้างในเกม:

• [โจทย์บวกและลบ ตัวเลขระหว่าง 10 ถึง 99]

• [ให้เกมสุ่มสร้างโจทย์ขึ้นมาเองเรื่อยๆ จำนวน 10 ข้อ]

[Actions]

• [มีแถบหลอดเลือด (Progress bar) ด้านบนแสดงเวลาที่ลดลงเรื่อยๆ]

• [มี Score สรุปคะแนนอยู่มุมขวาบน]

• [หากตอบถูก ปุ่มเปลี่ยนเป็นสีเขียว / ตอบผิด ปุ่มเปลี่ยนเป็นสีแดง]

• [จบ 10 ข้อ ให้ขึ้นหน้าต่างสรุปคะแนน พร้อมปุ่ม "เล่นอีกครั้ง"]

[Specs]

• เขียนโค้ดเป็น Single-file HTML (รวม CSS/JS)

• ใช้ Tailwind CSS ผ่าน CDN สำหรับสไตล์ทั้งหมด

• ใช้ Vanilla JavaScript สำหรับระบบ Logic ทั้งหมด