Prompt Library ครูนุ่มเดฟเทค

Prompt:
“ออกแบบหน้าเว็บไซต์ของโรงเรียนสมัยใหม่ โทนสีสุภาพ น่าเชื่อถือ ใช้สีประจำโรงเรียน (สีน้ำเงิน–เหลือง หรือปรับตามต้องการ) เน้นความเป็นมืออาชีพ ใช้งานง่าย และรองรับการนำไปเป็นหน้า Landing Page จริง
ให้มีโครงสร้างดังนี้:
1. ส่วนหัวเว็บไซต์ (Hero Section)
• รูปภาพโรงเรียนหรือภาพสื่อถึงการเรียนรู้
• ข้อความเด่น: ‘โรงเรียน…(ชื่อโรงเรียน)… มุ่งสู่ความเป็นเลิศทางวิชาการและคุณธรรม’
• ปุ่ม Call-to-Action เช่น ‘ดูข้อมูลเพิ่มเติม’ หรือ ‘ระบบรับสมัคร’
2. เมนูหลัก
• หน้าแรก | เกี่ยวกับโรงเรียน | ข่าวประชาสัมพันธ์ | แผนการเรียน | ติดต่อเรา
3. ส่วนแสดงข่าว/ประกาศล่าสุด
• การ์ดข่าว 3–4 ใบ แนวสมัยใหม่
• ไอคอน/กราฟิกสื่อการศึกษา
4. ส่วนแนะนำโรงเรียน (About School)
• จุดเด่นของโรงเรียน
• ภาพกิจกรรม
• ข้อความสั้นแต่ชัดเจน
5. ส่วนกิจกรรม/ภาพถ่าย
• แกลเลอรีหรือกริดภาพขนาดสวยงาม
6. ส่วนลิงก์บริการออนไลน์
• ปุ่มแบบการ์ด: ระบบงานสารบรรณ, ระบบรับสมัครนักเรียน, ระบบส่งงานออนไลน์ ฯลฯ
7. ส่วนท้ายเว็บไซต์ (Footer)
• ชื่อโรงเรียน
• ที่อยู่ เบอร์ติดต่อ
• ไอคอนโซเชียลมีเดีย

สไตล์ทั้งหมดให้เป็นแบบโมเดิร์น ตัวหนังสืออ่านง่าย จัดวางเป็นระเบียบ ใช้ไอคอนและกราฟิกแบบ Flat Design รองรับการใช้งานบนมือถือ (Responsive).”

“โปรดสร้าง โค้ด HTML และ CSS พื้นฐาน สำหรับหน้าเว็บ [ระบุวัตถุประสงค์ เช่น หน้า Landing Page สำหรับโปรโมทหลักสูตร] โดยเน้นโครงสร้างที่ประกอบด้วย Header, ส่วนเนื้อหาหลัก 3 ส่วน, และ Footer โดยใช้ โทนสี [ระบุโทนสี เช่น สีน้ำเงินและขาว] และใช้โค้ดที่สะอาดและอ่านง่าย เหมาะสำหรับผู้เริ่มต้น”

“ช่วยออกแบบและพัฒนาระบบรายงานการประชุมผู้ปกครองออนไลน์ โดยมีคุณสมบัติดังนี้:
1. หน้าแบบฟอร์มลงทะเบียนผู้ปกครอง
• ใส่ข้อมูล: คำนำหน้า, ชื่อ–นามสกุลผู้ปกครอง, นักเรียน (ชื่อ–นามสกุล / เลขที่ / ห้อง), ความเกี่ยวข้อง (บิดา/มารดา/ผู้ปกครอง)
• บันทึกเวลาที่เข้าร่วมประชุมอัตโนมัติ
2. ระบบบันทึกรายงานการประชุม
• หัวข้อการประชุม
• ปัญหาที่พบของนักเรียน
• การให้ข้อมูลของครู
• ข้อตกลงร่วมกันระหว่างครูและผู้ปกครอง
• ช่องแนบรูปภาพ (ถ้าต้องการ)
3. ระบบลงชื่อเข้าร่วม
• มีปุ่ม “ยืนยันเข้าร่วม”
• บันทึกข้อมูลลงฐานข้อมูล (Google Sheet หรือฐานข้อมูลเว็บ)
4. ระบบสร้างรายงานอัตโนมัติ (Auto Report)
• สรุปข้อมูลการประชุมแต่ละครอบครัวออกเป็น PDF
• มีโลโก้โรงเรียน / ข้อมูลครูที่ปรึกษา
• รูปแบบเป็นทางการ พร้อมลายเซ็นดิจิทัล
5. แดชบอร์ดของครู
• แสดงรายชื่อนักเรียนทั้งหมด
• สถานะเข้าร่วมประชุม
• ปัญหา/ข้อเสนอแนะ
• ดาวน์โหลดรายงานรายบุคคลหรือแบบรวม
6. คุณสมบัติเพิ่มเติม (ถ้ามี)
• ส่งข้อความแจ้งเตือนผ่าน LINE Notify หรือ LINE API
• ระบบค้นหาผู้ปกครอง
• สรุปข้อมูลภาพรวมของห้องเรียน

ให้เขียนโครงสร้างระบบ UI/UX พร้อมตัวอย่างหน้าจอ, ตัวอย่างโค้ด front-end และ back-end (เช่น HTML, CSS, JavaScript, Google Apps Script), พร้อมโฟลว์การทำงานของระบบทั้งหมด เพื่อให้ครูสามารถนำไปใช้งานจริงได้ทันที”

สร้างเว็บแอป “Human or AI Quiz” แบบตอบคำถาม 10 ข้อ
โดยให้นักเรียนเลือกคำตอบว่า “มนุษย์” หรือ “AI”
พร้อมแบบฟอร์มกรอกข้อมูลก่อนเริ่มทำแบบทดสอบ ได้แก่

เลขประจำตัวนักเรียน

คำนำหน้า

ชื่อ

นามสกุล

เลขที่

ชั้น

เมื่อกรอกครบแล้วกดปุ่ม “เริ่มทำแบบทดสอบ” ระบบจะแสดงคำถามอัตโนมัติ 10 ข้อ
โดยแต่ละข้อให้แสดงข้อความ (ข้อความอาจเป็นประโยค, คำพูด, หรือคำบรรยายสั้น ๆ)
จากนั้นให้นักเรียนเลือกคำตอบได้ 2 ตัวเลือก:

✅ มนุษย์

🤖 AI

หลังตอบครบ 10 ข้อ ให้ระบบแสดงผลคะแนน เช่น
“คุณตอบถูก 8 จาก 10 ข้อ”
พร้อมแสดงข้อความสรุปเชิงสนุก เช่น

ถ้าคะแนน 8–10: “สุดยอด! คุณมีสัญชาตญาณแบบมนุษย์สุด ๆ”

ถ้าคะแนน 4–7: “เก่งนะ แต่ยังโดน AI หลอกบ้าง 😅”

ถ้าคะแนน 0–3: “โอ้โห... ดูเหมือน AI จะชนะคุณในรอบนี้ 🤖”

ใช้โทนสีฟ้า-ขาว
ฟอนต์ Prompt หรือ Sarabun
ออกแบบให้สวย เรียบง่าย ทันสมัย
มีปุ่ม “เริ่มใหม่” หลังจบแบบทดสอบ

สร้างเว็บไซต์หรือเว็บแอปพลิเคชัน “ระบบขออนุญาตนำรถจักรยานยนต์มาโรงเรียน” สำหรับนักเรียนระดับมัธยมศึกษา
ให้สามารถกรอกข้อมูลออนไลน์ และบันทึกข้อมูลลงฐานข้อมูลหรือส่งออกเป็นรายงานได้
ออกแบบให้ใช้งานง่าย เหมาะกับโรงเรียนในประเทศไทย โทนสีฟ้า–ขาว ฟอนต์ Prompt หรือ Sarabun

รายละเอียดฟอร์มที่ต้องมี:

วันที่ (วัน / เดือน / พ.ศ.)

ชื่อ–นามสกุลนักเรียน พร้อมคำนำหน้า (เด็กชาย / เด็กหญิง / นาย / นางสาว)

ชั้นมัธยมศึกษาปีที่ และห้อง

ชื่อครูที่ปรึกษา

เหตุผลที่ต้องนำรถจักรยานยนต์มาโรงเรียน

รายละเอียดรถ

ยี่ห้อ

รุ่น

สี

หมายเลขทะเบียน

ส่วนรับรองของผู้ปกครอง

ชื่อ–นามสกุลผู้ปกครอง

ความสัมพันธ์กับนักเรียน

ช่องติ๊ก “รับทราบและยินยอมตามระเบียบโรงเรียน”

ปุ่ม “บันทึกข้อมูล / ส่งคำขออนุญาต”

ส่วนสรุปข้อมูลสำหรับพิมพ์รายงาน PDF (เช่น ใบคำขอพร้อมลายเซ็น)

เพิ่มโลโก้โรงเรียน และข้อความ “โรงเรียนบางแม่หม้ายรัฐราษฎร์รังสฤษดิ์ จังหวัดสุพรรณบุรี”

แนวทางการออกแบบ:

จัดวางเป็นหน้าเว็บฟอร์มเรียบง่าย มีหัวข้อชัดเจน

ใช้ไอคอนรถจักรยานยนต์หรือภาพประกอบแนวโรงเรียน

เพิ่มส่วนประกาศ/ระเบียบการนำรถจักรยานยนต์มาโรงเรียน (อ่านก่อนส่งคำขอ)

ปรับให้แสดงผลได้ทั้งบนคอมพิวเตอร์และมือถือ

ออกแบบ เว็บแอปพลิเคชันบันทึกและรายงานผลการจัดกิจกรรมโฮมรูมออนไลน์
สำหรับโรงเรียนระดับมัธยมศึกษา

ฟังก์ชันหลักที่ต้องการ:

ฟอร์มกรอกข้อมูลกิจกรรมโฮมรูม

ระดับชั้น (ม.1 – ม.6)

ห้องเรียน (1 – 11)

ครูที่ปรึกษาคนที่ 1 → คำนำหน้า, ชื่อ–นามสกุล

ครูที่ปรึกษาคนที่ 2 → คำนำหน้า, ชื่อ–นามสกุล

วันเดือนปีที่จัดกิจกรรม

หัวข้อ / เรื่องที่อบรม–แนะนำ–แจ้งข่าวสาร

รายชื่อนักเรียนที่ขาดเรียน (กรอกได้หลายคน)

ระบบบันทึกข้อมูลลงฐานข้อมูล (จำลองใน Canva AI หรือเชื่อมต่อ Canva Sheet ก็ได้)

หน้ารายงานผลกิจกรรมโฮมรูมในรูปแบบ

Dashboard ที่สวยงาม แสดงสถิติ เช่น จำนวนกิจกรรม, ครูที่ปรึกษา, นักเรียนที่ขาดเรียน, กิจกรรมแยกตามชั้น

ตารางข้อมูล (Datatable) ที่สามารถค้นหา / เรียงลำดับ / กรองข้อมูลได้

ดีไซน์ให้เรียบง่าย ทันสมัย โทนสีฟ้า–ขาว

ใช้ฟอนต์ Prompt หรือฟอนต์อ่านง่ายแบบราชการ

รองรับการใช้งานบนมือถือและแท็บเล็ต

⚙️ เพิ่มข้อความส่วนหัวเว็บว่า
“ระบบบันทึกและรายงานผลกิจกรรมโฮมรูมออนไลน์”
🔗 มีปุ่ม "เพิ่มกิจกรรม", "ดูรายงาน", "ส่งออกข้อมูล (PDF/Excel)"

สร้างระบบส่ง "แผนการจัดการเรียนรู้ โครงการสอน และบันทึกหลังแผนการจัดการเรียนรู้"
ให้ครูสามารถอัปโหลดไฟล์ PDF ได้
โดยมีแบบฟอร์มกรอกข้อมูลดังนี้:
- คำนำหน้า (นาย, นาง, นางสาว)
- ชื่อ
- นามสกุล
- กลุ่มสาระการเรียนรู้ (เลือกจากเมนู เช่น ภาษาไทย, คณิตศาสตร์, วิทยาศาสตร์, สังคมศึกษา, สุขศึกษาและพลศึกษา, ศิลปะ, การงานอาชีพ, ภาษาต่างประเทศ, กิจกรรมพัฒนาผู้เรียน)
- ประเภทเอกสาร (แผนการจัดการเรียนรู้ / โครงการสอน / บันทึกหลังแผน)
- หมายเหตุ (ถ้ามี)

หลังจากอัปโหลดแล้ว ให้ระบบแสดง “ตารางข้อมูลการส่งงาน”
โดยแสดงคอลัมน์ดังนี้:
1. ลำดับที่
2. ชื่อ-นามสกุล
3. กลุ่มสาระการเรียนรู้
4. ประเภทเอกสาร
5. ชื่อไฟล์ PDF
6. วันที่ส่ง
7. สถานะ (รอตรวจ / ผ่าน / ไม่ผ่าน)

ออกแบบหน้าตาให้น่าใช้งาน สไตล์เว็บไซต์ระบบโรงเรียน
ใช้โทนสีฟ้า-ขาว ฟ้อนต์ “Sarabun”
เพิ่มปุ่ม “อัปโหลดไฟล์ PDF” และ “ดูข้อมูลการส่งทั้งหมด”
ให้รองรับการแสดงผลบนมือถือและแท็บเล็ตได้ด้วย

สร้างหน้าเว็บระบบส่งไฟล์ “Mind Mapping โครงงานคอมพิวเตอร์”
ออกแบบด้วยโทนสีฟ้าขาว สะอาดตา ใช้ฟอนต์ Prompt
มีโลโก้ด้านบน (ลิงก์โลโก้: https://imprnoom.com/images/logonoom1.png)
และหัวข้อใหญ่ “ระบบส่งไฟล์ Mind Mapping โครงงานคอมพิวเตอร์”
ใต้หัวข้อระบุข้อความย่อยว่า ครูพิชชยานาฏ รีรักษ์

ส่วนของแบบฟอร์มให้จัดในกล่องสวยงาม (Card Style)
มีช่องให้กรอกดังนี้
• คำนำหน้า (ดรอปดาวน์: เด็กชาย, เด็กหญิง, นาย, นางสาว)
• ชื่อ
• นามสกุล
• เลขที่
• ชั้น (ดรอปดาวน์: ม.6/1, ม.6/2, … ม.6/11)
• แนบไฟล์ PDF (จำกัดขนาดไม่เกิน 5 MB)
• ปุ่ม “ส่งไฟล์” (สีฟ้า เด่นชัด มีไอคอน Upload)

ใต้ฟอร์ม ให้แสดง ตารางข้อมูล (DataTable Style) แสดงผลการส่งไฟล์
หัวตารางประกอบด้วย
1. ลำดับ
2. ชื่อ–นามสกุล
3. เลขที่
4. ชั้น
5. ลิงค์ไฟล์
6. วันที่ส่ง

ออกแบบให้โครงสร้างหน้าเว็บมี 3 ส่วนหลัก:
1. Header: โลโก้ + ชื่อระบบ
2. Form Section: กล่องฟอร์มกรอกข้อมูล
3. Table Section: ตารางแสดงรายการไฟล์ที่ส่งแล้ว

เพิ่มไอคอนและองค์ประกอบกราฟิกแนว “Mind Map / Project / Idea” เบาๆ ในพื้นหลัง
เพื่อให้ดูเป็นธีมวิชาคอมพิวเตอร์

เพิ่มข้อความปิดท้ายหน้า:
“💡 ระบบนี้จัดทำเพื่อการเรียนการสอนรายวิชาโครงงานคอมพิวเตอร์
โรงเรียนแม่จันวิทยาคม โดยครูพิชชยานาฏ รีรักษ์”

⸻

✅ เคล็ดลับเพิ่มเติม (ใช้ใน Canva AI)
• ประเภทงานที่ควรเลือก: “เว็บไซต์” หรือ “แอปพลิเคชัน”
• โทนสีแนะนำ: ฟ้า (#3B82F6), ขาว, เทาอ่อน
• ฟอนต์: Sarabun หรือ Prompt
• สไตล์: Minimal, Clean, Educational, Tech-Inspired
• รองรับ Responstive มือถือ แท็บเล็ต คอมพิวเตอร์
• เป็น Bootstrap อย่างสวยงาม

สร้างเว็บไซต์โปรแกรมคำนวณชั่วโมงสอน (PA)
โดยมีรายละเอียดดังนี้:

🎯 ฟังก์ชันหลัก:
- ให้ผู้ใช้กรอก “กำหนดเวลาสอน” หน่วยเป็นนาที/คาบ (editable field)
- ให้กรอกข้อมูลรายวิชา (ชื่อวิชา, จำนวนคาบ/สัปดาห์)
- มีปุ่ม “➕ เพิ่มรายวิชา” เพื่อเพิ่มแถวกรอกข้อมูลได้ไม่จำกัด
- ระบบคำนวณอัตโนมัติ:
• ชั่วโมงสอนของแต่ละวิชา (คาบ × นาที ÷ 60)
• รวมจำนวน “ชั่วโมงสอนทั้งหมด” และ “นาทีทั้งหมด” ที่ส่วนล่างของตารางโดยอัตโนมัติ
- สามารถแก้ไข หรือลบรายวิชาได้
- รองรับ Responsive ทั้งมือถือและคอมพิวเตอร์

🧩 การออกแบบ:
- ส่วนหัวเว็บไซต์: “โปรแกรมคำนวณชั่วโมงสอน (PA)”
พร้อมโลโก้ทางซ้าย: https://imprnoom.com/images/logonoom1.png
- โทนสีหลัก: ฟ้า-ขาว ดูสะอาดตาแบบโปร
- ฟอนต์: “Sarabun”
- ปุ่มและกล่องกรอกข้อมูลโค้งมน (rounded-xl)
- มีเงาแบบ soft shadow ให้แต่ละการ์ด

📊 ส่วนแสดงผลรวม:
- แสดง “รวมชั่วโมงทั้งหมด (ชั่วโมง)” และ “รวมเวลาทั้งหมด (นาที)” แบบ real-time

📱 Footer:
Dev by Pichayanart Reerak.

💡 ใช้ HTML + Tailwind CSS + JavaScript
รองรับ Responsive ทั้งหน้าจอคอมพิวเตอร์และมือถือ