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

ออกแบบหน้า Dashboard ของ “ระบบคลังข้อสอบออนไลน์ (Online Exam Bank System)”
ให้สวยงาม ทันสมัย โทนสีฟ้า–น้ำเงิน แบบ Professional UI พร้อมไอคอนเชิงการศึกษา

องค์ประกอบที่ต้องมีในหน้าออกแบบ:
1. ส่วนหัวระบบ (Header)
- ชื่อระบบ: “ระบบคลังข้อสอบออนไลน์”
- คำอธิบาย: ศูนย์รวมข้อสอบทุกระดับชั้น ค้นหา ดาวน์โหลด และจัดการด้วย Google Sheets + Google Apps Script
- ไอคอนรูปหนังสือ ข้อสอบ หรือดิจิทัลไลบรารี

2. เมนูหลัก (Main Menu)
- ค้นหาข้อสอบ
- เพิ่มข้อสอบใหม่
- จัดการหมวดหมู่
- ประวัติการใช้งาน
- ระบบผู้ใช้/สิทธิ์การเข้าถึง

3. ส่วนแสดง “ฟอร์มค้นหาข้อสอบ”
- เลือกระดับชั้น: ป.1-ม.6
- เลือกวิชา: คณิตศาสตร์ วิทยาศาสตร์ ภาษาไทย อังกฤษ สังคม ฯลฯ
- เลือกประเภทข้อสอบ: ปลายภาค กลางภาค แบบฝึกหัด Pre-test Post-test
- ปุ่ม “ค้นหาข้อสอบ”
- ปุ่ม “ดาวน์โหลด PDF”

4. ส่วนแสดงผลลัพธ์ข้อสอบ (Result List)
- การ์ดข้อสอบ / ตารางแสดงรายการ
- ชื่อชุดข้อสอบ
- ระดับชั้น / วิชา
- ปีการศึกษา
- ปุ่มดาวน์โหลด
- ปุ่มเปิดดูข้อสอบ

5. แถบ Footer
- “ระบบทำงานร่วมกับ Google Sheets + Google Apps Script”
- ไอคอนคลาวด์หรือสคริปต์

เพิ่มเติมสำหรับภาพ:
- ทำสไตล์ UI Dashboard แบบทันสมัย Minimal Clean
- ใช้กราฟิกแสดงการเชื่อมต่อ Google Sheets และ Apps Script เช่น เส้นเชื่อม / ไอคอนสคริปต์
- วางภาพตัวอย่างสเปรดชีทจำลองสำหรับ “ฐานข้อมูลคลังข้อสอบ”
- ทำให้เหมือน Mockup ระบบจริงพร้อม UI ปุ่มและฟอร์มครบถ้วน

สร้างหน้าเว็บจำลองสำหรับระบบ "พิมพ์ข้อความแล้วแสดงผลเป็นรูปภาพ" (Text-to-Image Display System)
โดยใช้รูปจากลิงก์นี้เป็นภาพพื้นหลังทั้งหน้า:

กำหนดรูปแบบดังนี้:

1. โครงสร้างหน้าเว็บ
- Header ด้านบน ชื่อระบบ: “Text-to-Image Generator”
- พื้นหลังใช้ภาพจากลิงก์ (ให้ Canva ใส่แบบเต็มหน้าและลดความทึบ/ใส่ overlay บางๆ เพื่อให้ตัวหนังสืออ่านชัดเจน)

2. กล่อง Input (Text Input Area)
- ป้ายกำกับ: “พิมพ์ข้อความที่ต้องการให้แสดงเป็นรูปภาพ”
- กล่องข้อความสีขาวโปร่ง (Semi-transparent)

3. ปุ่ม Generate
- ปุ่มเด่นชัด ข้อความ: “แสดงผลเป็นรูปภาพ”
- โทนสีเข้ากับพื้นหลัง เช่น ฟ้า/ม่วง/ขาว

4. พื้นที่แสดงผล (Output Image Area)
- กรอบสี่เหลี่ยมแสดงตัวอย่างภาพที่สร้างจากข้อความ
- ใส่ placeholder เช่น “ผลลัพธ์จะแสดงที่นี่”

5. โทนสีและสไตล์
- โมเดิร์น มินิมอล UI/UX
- ฟอนต์ทันสมัย อ่านง่าย
- จัดวางองค์ประกอบให้เหมือนระบบเว็บจริง

6. คำสั่งเพิ่มเติม
- ใช้ภาพพื้นหลังจากลิงก์ตามจริง ใส่ลิงค์ URL ของพื้นหลังภาพ
- หากจำเป็นให้เติม overlay เข้ม 20–40% เพื่อช่วยให้อ่านตัวหนังสือได้ง่าย

สร้างเทมเพลตระบบงานประชุมและบันทึกการประชุม (Meeting & Minutes System) ในรูปแบบอินโฟกราฟิก/แดชบอร์ดที่ใช้งานง่าย ทันสมัย และเป็นมิตรมากขึ้น เน้นโทนสีฟ้า–น้ำเงิน–ขาว แบบมินิมอล พร้อมไอคอนประกอบ

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

รูปแบบโดยรวม: สไตล์โปรเฟสชันแนล สะอาดตา พร้อมใช้งานจริง สามารถดาวน์โหลดเป็น PDF หรือใช้พิมพ์บันทึกประชุมได้

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

หัวข้อหลักที่ต้องมี:
• ส่วนหัว (ชื่อโรงเรียน / ระบุวัน เดือน ปี)
• ข้อมูลงานประจำวันของครู
• รายวิชาที่สอนวันนี้ + เวลาเรียน
• งานที่มอบหมายให้นักเรียน
• บันทึกการสอน (Teaching Notes)
• ปัญหาที่พบและการแก้ไข
• งานเอกสาร/งานประจำวันอื่น ๆ
• งานพิเศษที่ได้รับมอบหมาย
• เช็กลิสต์งาน (Checklist)
• สรุปผลการปฏิบัติงานประจำวัน

ความต้องการเพิ่มเติม:
• ใช้กราฟิกไอคอนสื่อสาร เช่น หนังสือ ปฏิทิน เช็กลิสต์
• จัดวางเป็นบล็อกให้กรอกข้อมูลได้ง่าย
• เหมาะกับครูทุกกลุ่มสาระ
• ปรับแต่งข้อความไทยให้ชัดเจน อ่านง่าย
• ออกแบบให้สามารถใช้เป็นเทมเพลตบันทึกประจำวันได้ 30 วัน

“ออกแบบให้นำไปใช้จริงได้ทันที ทั้งพิมพ์ลงกระดาษและใช้แบบดิจิทัล”

⸻

✅ ถ้าต้องการแบบ “ระบบสรุปอัตโนมัติ” ให้เพิ่มบรรทัดนี้

เพิ่มหน้า Dashboard สรุปงาน เช่น จำนวนคาบสอน งานค้าง งานเสร็จแล้ว และพื้นที่ลงบันทึกสั้น ๆ ของแต่ละวัน

“สร้างหน้า Dashboard/หน้าเว็บสำหรับ ระบบบันทึกชั่วโมงกิจกรรมจิตอาสา (Volunteer Hours Tracking System) ดีไซน์ทันสมัย โทนสะอาด อ่านง่ายแบบ Professional โดยมีองค์ประกอบดังนี้:
• ส่วนหัว (Header): ชื่อระบบ “Volunteer Hours Tracking System – ระบบบันทึกชั่วโมงกิจกรรมจิตอาสา” พร้อมโลโก้องค์กร/โรงเรียน
• เมนูหลัก: หน้าหลัก | ลงทะเบียนกิจกรรม | บันทึกชั่วโมง | รายงานสรุป | ดาวน์โหลดเอกสาร | ติดต่อผู้ดูแล
• กล่องสรุปข้อมูล (Info Cards) เช่น
• จำนวนกิจกรรมทั้งหมด
• ชั่วโมงจิตอาสารวม
• นักเรียนที่เข้าร่วมทั้งหมด
• กิจกรรมที่กำลังจะมาถึง
• โซน ลงทะเบียนกิจกรรม: ฟอร์มกรอกชื่อกิจกรรม, วันที่, สถานที่, ประเภทกิจกรรม, ผู้รับผิดชอบ
• โซน บันทึกชั่วโมง: ฟอร์มกรอกเลขประจำตัว/ชื่อ, กิจกรรมที่เข้าร่วม, เวลาที่ทำ, แนบรูปหลักฐาน
• โซน สรุปรายงานชั่วโมงบุคคล: ตารางสรุปชั่วโมงของผู้เข้าร่วม พร้อม Progress Bar แสดงชั่วโมงที่สะสมเทียบตามเกณฑ์
• โซน กิจกรรมเร็ว ๆ นี้ (Upcoming Events): การ์ดกิจกรรม 3–5 รายการ
• โซน ดาวน์โหลดแบบฟอร์ม/ไฟล์ เช่น ใบเข้าร่วมกิจกรรม, ใบรับรองชั่วโมง
• Footer: ข้อมูลติดต่อ / ลิงก์โซเชียล / ชื่อผู้พัฒนา

ออกแบบสไตล์ Clean UI, Modern, Minimal, ใช้ไอคอนแบบเรียบง่าย, จัดองค์ประกอบให้ดูเหมือน Dashboard ระบบจริง พร้อมพื้นที่แก้ไขข้อมูลง่าย ๆ”

“สร้างหน้าเว็บ/แดชบอร์ดสำหรับ ระบบประกาศข่าวสารภายใน (Internal Board) สำหรับหน่วยงาน/โรงเรียนดีไซน์แบบทันสมัย สะอาด โทนสีมืออาชีพ จัดเลย์เอาต์อ่านง่าย แสดงข้อมูลดังนี้
• ส่วนหัว: ชื่อระบบ “Internal Board – ระบบประกาศข่าวสารภายใน” พร้อมโลโก้องค์กร
• เมนูหลัก: ข่าวล่าสุด | ประกาศฝ่ายบริหาร | ตารางกิจกรรม | ดาวน์โหลดแบบฟอร์ม | แจ้งเตือนด่วน
• โซนข่าวล่าสุด: การ์ดข่าว 4–6 ใบ พร้อมหัวข้อ + วันที่ + หมวดหมู่
• โซนประกาศฝ่ายบริหาร: กล่องข้อความแบบไฮไลต์ เน้นประกาศสำคัญ
• โซนตารางกิจกรรม: ปฏิทินกิจกรรมรายเดือนแบบมินิมอล
• โซนดาวน์โหลดเอกสาร: ปุ่มดาวน์โหลดสวยๆ เช่น แบบฟอร์มลา, แบบฟอร์มขอใช้ห้อง, เอกสารภายใน
• โซนแจ้งเตือนด่วน (Urgent Alert): แถบสีเด่นสำหรับข้อความเร่งด่วน
• ออกแบบให้เป็นสไตล์ทันสมัย Clean UI, ใช้ไอคอนเรียบง่าย, จัดโครงแบบ Dashboard
• พร้อมพื้นที่สำหรับแอดมินแก้ไขข่าวสารในอนาคต
สร้างในรูปแบบที่ดูเป็น ‘ระบบประกาศออนไลน์’ เหมือนหน้า Dashboard จริง พร้อมองค์ประกอบครบถ้วน”

สร้าง Infographic เรื่อง “โครงงานคอมพิวเตอร์” ให้มีการจัดวางข้อมูลอย่างเป็นระบบ สีเรียบง่าย อ่านง่าย ใช้ไอคอนช่วยสื่อความ ให้เน้นความเป็นวิชาการแบบโรงเรียน โดยมีหัวข้อและรายละเอียดดังนี้

1. ความหมายของโครงงานคอมพิวเตอร์  
- การศึกษาค้นคว้าอย่างเป็นระบบ  
- ใช้ความรู้ด้านคอมพิวเตอร์แก้ปัญหา  
- พัฒนาทักษะการคิดวิเคราะห์และการแก้ปัญหา

2. ประเภทของโครงงานคอมพิวเตอร์  
- โครงงานพัฒนาสื่อเพื่อการศึกษา
- โครงงานพัฒนาเครื่องมือ
- โครงงานประเภทการทดลองทฤษฎี
- โครงงานประเภทการประยุกต์ใช้งาน
- โครงงานพัฒนาเกม

3. ขั้นตอนการทำโครงงาน  
- เลือกหัวข้อ/ปัญหา  
- ศึกษาข้อมูลที่เกี่ยวข้อง  
- วางแผนและออกแบบระบบ  
- พัฒนาและสร้างชิ้นงาน  
- ทดสอบและปรับปรุง  
- สรุปผลและจัดทำรายงาน

4. องค์ประกอบของรายงานโครงงาน  
- บทคัดย่อ  
- บทนำ (ความเป็นมา / วัตถุประสงค์)  
- วิธีดำเนินงาน  
- ผลการทดลองหรือผลงาน  
- สรุปผล / ข้อเสนอแนะ / ปัญหา  
- บรรณานุกรม

5. ทักษะที่ผู้เรียนจะได้รับ  
- การคิดวิเคราะห์และแก้ปัญหา  
- การออกแบบระบบ  
- การเขียนโปรแกรม  
- การสื่อสารและนำเสนอผลงาน  
- การทำงานเป็นทีม

6. ตัวอย่างโครงงานคอมพิวเตอร์  
- ระบบส่งงานออนไลน์  
- แอปพลิเคชันบันทึกคะแนน  
- เว็บไซต์ประชาสัมพันธ์  
- เกมเพื่อการศึกษา  
- ระบบ IoT วัดอุณหภูมิ

จัดรูปแบบเป็น Infographic แนวตั้ง สวยงาม เหมาะสำหรับใช้สอนนักเรียนมัธยม และใช้โพสต์ในสื่อสังคมออนไลน์

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 โดยใช้ โทนสี [ระบุโทนสี เช่น สีน้ำเงินและขาว] และใช้โค้ดที่สะอาดและอ่านง่าย เหมาะสำหรับผู้เริ่มต้น”