Prompt library — จาก design brief สู่เว็บที่ตรวจรับได้

ใช้กับ Lab Design Tools และ MCP ใน AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI ซึ่งเป็นส่วนหนึ่งของ 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต แต่ละ block เป็น prompt ฉบับเต็ม ให้แทนค่าที่อยู่ใน <...> ก่อนส่ง เก็บ prompt ที่ส่งจริงพร้อมผลลัพธ์ในงานของผู้เรียน

เครื่องมือบนเว็บอ่าน path ในคอมพิวเตอร์ผู้สอนไม่ได้ ต้องแนบไฟล์หรือใช้ design system ที่บัญชีนั้นเข้าถึงได้ ส่วน agent ใน repository อ่าน DESIGN.md และ design-system/ ได้เมื่อได้รับสิทธิ์ หากต้องสร้างภาพประกอบ raster ให้ใช้ gpt-image-2 ผ่าน Codex ตามเครื่องมือที่ host เปิดให้ใช้ และเก็บ prompt กับที่มาภาพตาม image provenance

1. Brief และสองทิศทางสำหรับ Claude Design หรือ Google Stitch

สำหรับ prompt ที่ใช้ เว็บบ้านสบายที่สร้างแล้ว → mobile app ดู lab ฉบับเต็มพร้อม prompt ทุกเครื่องมือ และ prototype ส่วน block ด้านล่างเป็นโจทย์หน้าเว็บไซต์หลักสูตร

ออกแบบ landing page ภาษาไทยสำหรับ “AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI”
หน่วยปฏิบัติส่วนหนึ่งของ “977-121 Module: Website Design and Development”
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต
Prince of Songkla University, Phuket Campus

กลุ่มผู้ใช้: นักศึกษาที่เริ่มสร้างเว็บด้วย AI ต้องรู้ว่าจะเรียนอะไร เตรียมเครื่องอย่างไร
และส่งงานแบบใด เป้าหมายหลักของหน้าคือให้เริ่มเตรียมเครื่องก่อนเรียนได้
เวลา workshop: 2 วัน วันละ 4 ชั่วโมง รวม 8 ชั่วโมง รวมพักวันละ 10 นาทีแล้ว
เนื้อหาที่เกินเวลาให้แสดงเป็น “เรียนต่อด้วยตัวเอง” ห้ามแสดงเป็นชั่วโมงเรียนเพิ่ม
อย่าแต่งวันจัดอบรม ราคา ช่องทางติดต่อผู้สอน หรือคำรับรองจากมหาวิทยาลัย

อัตลักษณ์ Rawinnipa ที่ใช้ในโครงการนี้:
- Light mode เป็นค่าเริ่มต้น: พื้น #F7F7F7, surface สีขาว, ข้อความ #0A0A0A
- มี Dark mode ให้เลือก: พื้น #0A0A0A, surface #1A1A1A, ข้อความ #F7F7F7, รอง #9CA3AF
- สีเน้น #3EDC81 ใช้กับ CTA หลักและจุดสำคัญอย่างประหยัด
- Inter สำหรับละติน และ Noto Sans Thai สำหรับภาษาไทย
- ใช้เฉพาะโลโก้ต้นฉบับที่แนบ ไม่วาดใหม่ ไม่ยืด ไม่เปลี่ยนสี
- อ่านกติกาโลโก้และระยะว่างจาก brand guideline ที่แนบ หากไม่มีให้เว้นพื้นที่ไว้
- น้ำเสียงเรียบ ชัด เป็นมืออาชีพ อธิบายประโยชน์ที่ตรวจได้

ข้อมูลหน้า: ชื่อและผลลัพธ์การเรียนรู้, ภาพรวม 2 วัน, checklist เตรียมเครื่อง,
บททดลอง design-to-code, ตัวอย่างผลงาน และ CTA “เตรียมเครื่องก่อนเรียน”
วัน 1 เน้น brief, context/skills, design และเว็บบริษัท
วัน 2 เน้น data/API, motion, deploy และ capstone

สร้างทางเลือก A ที่เน้นผลลัพธ์การเรียนรู้ และ B ที่เน้นเส้นทาง 2 วัน
แต่ละแบบต้องมีหน้าจอ 1440px และ 390px, ลำดับ heading ที่ชัด, ข้อความไทยจริง,
focus ที่มองเห็น, พื้นที่แตะที่ใช้งานได้ และ contrast เป้าหมาย WCAG AA
ถ้ามี form ให้แสดง label, error, submitting และ success ด้วย
อธิบาย grid, hierarchy, token/component ที่ใช้ และข้อสมมติที่ยังตรวจไม่ได้
ให้ส่งแบบและคำอธิบายก่อน ยังไม่ publish หรือ deploy

สิ่งที่ตรวจรับ: สองแบบต่างกันที่ลำดับข้อมูลจริง ใช้ชื่อและชั่วโมงถูกต้อง สรุป brand constraints ได้ และระบุสิ่งที่ไม่มีแหล่งข้อมูล หากระบบยังสร้าง mobile/state ไม่ได้ ให้บันทึกเป็นงานค้าง ห้ามอ้างว่าครบจากภาพ desktop เพียงภาพเดียว

2. อ่าน design context ผ่าน MCP ก่อนเขียนโค้ด

ใช้กับ client ที่เชื่อม server สำเร็จแล้ว เช่น Figma MCP ใน Claude Code หรือ Codex หรือเครื่องมือออกแบบอื่นที่มีคำแนะนำทางการของ client นั้น

ตรวจการเชื่อมต่อ design tool แบบอ่านอย่างเดียว
เครื่องมือและชื่อ MCP server: <ชื่อที่ตั้งไว้จริง>
เป้าหมาย: <ลิงก์ไปยัง frame/design หรือชื่อ page ที่เลือกไว้>

เรียก tool เพื่ออ่านเป้าหมายนี้ แล้วรายงานชื่อ tool ที่เรียกและผลที่ได้รับ
สรุปชื่อ frame/page, ขนาด, ข้อความสำคัญ, component, color/type/spacing tokens,
และ assets ที่อ่านได้จริง แยกแต่ละรายการเป็น “อ่านจาก tool”, “อ่านจากไฟล์แนบ”,
หรือ “ยังไม่ทราบ” อย่าเดา token จากสีที่มองเห็นใน screenshot

อ่าน DESIGN.md และ design-system/ หากมีใน repository ที่อนุญาต
เทียบ design context กับ Rawinnipa tokens ของโครงการ ระบุจุดตรงกันและข้อขัดแย้ง
ตรวจว่ามี mobile layout, hover/focus, error/loading และ reduced-motion requirement หรือยัง

ไม่แก้ design file ไม่เขียน code ไม่ติดตั้ง package ไม่เผยแพร่
ถ้า tool เรียกไม่ได้ ให้รายงาน error ที่ตัด credential ออกแล้วและขั้นตรวจถัดไป
ห้ามบอกว่าเชื่อมต่อสำเร็จจากการเห็นชื่อ server ใน config เพียงอย่างเดียว

สิ่งที่ตรวจรับ: เทียบชื่อ frame, สีหนึ่งค่า และ component หนึ่งชื่อกับต้นฉบับได้จริง หากมีเฉพาะไฟล์ export ให้ระบุเป็น file handoff และใช้ prompt ถัดไป แทนการแต่ง tool call

3. นำแบบที่เลือกมา implement หนึ่งหน้า

สร้างหน้า landing page AI Web Studio จากแบบที่เลือกใน repository ปัจจุบัน
Design source: <ลิงก์ frame ที่ MCP อ่านได้ หรือ path ไฟล์ export/ภาพที่แนบจริง>
เส้นทางเป้าหมาย: <route ที่ต้องการ>
แบบที่เลือกและเหตุผล: <A/B และเหตุผลสั้น ๆ>

ก่อนแก้ อ่าน AGENTS.md, DESIGN.md, package.json และ component ที่เกี่ยวข้อง
อ่าน source ที่ให้ผ่าน MCP หรือไฟล์ตามวิธีที่เข้าถึงได้จริง แล้วสรุปไฟล์ที่จะเปลี่ยน
ใช้ Rawinnipa tokens เดิมและ component ที่มีอยู่ ห้ามเพิ่ม dependency โดยไม่มีเหตุผลและข้อตกลง
หาก token ในแบบขัดกับ brandbook ให้รายงานและใช้กติกาแบรนด์ที่อนุมัติเป็นหลัก

ชื่อเต็มคือ “AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI”
เป็นส่วนหนึ่งของ “977-121 Module: Website Design and Development”
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต
แสดง workshop 2 วัน วันละ 4 ชั่วโมง รวม 8 ชั่วโมงรวมพัก
แยกเนื้อหาเรียนต่อด้วยตัวเองออกจากชั่วโมง workshop

Implement เฉพาะหน้าและ component ที่จำเป็น ใช้ semantic HTML, label และ alt ตามความหมาย
รองรับ 390px และ 1440px, Tab/Shift+Tab, focus visible, ข้อความไทยยาว และ reduced motion
มี Light/Dark mode โดย default เป็น Light และจำการเลือกของผู้ใช้ ตรวจ contrast ทั้งสองโหมด
ใช้ assets ที่มีสิทธิ์และระบุ source ห้ามเอา API key, session หรือข้อมูลนักศึกษาลง source
ใช้ scripts และพอร์ตที่โครงการจองไว้ ตรวจ shared-infra ก่อนเปิด server
ไม่แก้ API contract, database, deployment configuration หรือเผยแพร่บริการ

รัน checks ที่เกี่ยวข้องจาก package.json เปรียบเทียบผล render กับแบบทั้งสองขนาด
สรุปสิ่งที่เปลี่ยน หลักฐาน command/ผลตรวจ จุดต่างที่ตั้งใจ และข้อจำกัดที่ยังไม่ทดสอบ
ส่ง prompt ที่ใช้จริงและรายการไฟล์เปลี่ยนเป็นส่วนหนึ่งของ handoff

4. ตรวจแบบด้วย Claude Desktop หรือ ChatGPT Desktop

ตรวจ screenshot และ brief ที่แนบของหน้า AI Web Studio เป็นภาษาไทย
ใช้เฉพาะสิ่งที่แนบในแชตนี้ อย่าสมมติว่าอ่าน local repository หรือ Figma ได้
ถ้ามีภาพเดียว อย่าอ้างว่าทดสอบ breakpoint หรือ interaction อื่นแล้ว

บริบท: หน่วยปฏิบัติ 2 วัน วันละ 4 ชั่วโมง รวมพัก รวม 8 ชั่วโมง
อยู่ใน 977-121 Module: Website Design and Development ของ PSU วิทยาเขตภูเก็ต
ใช้ Rawinnipa guideline ที่แนบเป็น source of truth ของสี ฟอนต์ และโลโก้

รายงานปัญหา hierarchy ที่สำคัญไม่เกิน 3 ข้อ, ความเสี่ยงข้อความไทย/mobile,
heading/label/contrast ที่เห็น, state ที่ขาด และการแก้ที่ผู้พัฒนาทำตามได้
แยก “เห็นจากภาพ”, “อ้างอิง brief”, และ “ต้องตรวจใน browser”
อย่าให้คะแนน contrast แบบตัวเลขหากยังไม่มีค่าสีจริงและการคำนวณ
อย่าสรุปว่า keyboard หรือ screen reader ผ่านจาก screenshot
จัดลำดับการแก้ตามผลต่อการอ่านและการเริ่มเตรียมเครื่องของนักศึกษา
ยังไม่สร้าง code หรือ publish

5. ส่งต่อแบบและหลักฐานให้ผู้ตรวจ

สรุป design handoff ของงาน AI Web Studio ที่เราทำใน session นี้
ใช้ข้อมูลที่มีจริงเท่านั้น หากไม่เคยรันให้เขียน “ยังไม่ทดสอบ”

ส่งออกเป็น Markdown มี:
1. เป้าหมาย ผู้ใช้ และ design source ที่เปิดได้โดยผู้ตรวจ (ไม่เปิด public เพิ่มเอง)
2. prompt ฉบับเต็มที่ส่งจริง พร้อม tool/client/version หรือวันที่ใช้งาน
3. ตัวเลือกที่พิจารณา แบบที่เลือก และเหตุผล
4. component/token mapping, รายการ asset และแหล่งสิทธิ์
5. responsive rules และ interaction states ที่ทำแล้ว/ยังขาด
6. screenshot ที่ 390px และ 1440px หากรัน browser แล้ว
7. ผลตรวจ keyboard, contrast, reduced motion และ project checks พร้อม command/output
8. ข้อแตกต่างจากต้นฉบับ งานค้าง และผู้ที่ต้องตัดสินใจ

ตัด API key, OAuth token, personal MCP URL และข้อมูลผู้เรียนออกจากหลักฐาน
ไม่แต่งผลทดสอบ ไม่สร้างใบรับรอง และไม่ deploy

Prompt เหล่านี้เป็นการออกแบบการสอนของหลักสูตร ข้อมูลความสามารถและวิธีเชื่อมต่อของผลิตภัณฑ์อ้างอิงแยกใน รายงานวิจัย Design Tools/MCP