977-121 Module: Website Design and Development · มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต
อ่านภาพนี้อย่างไร
$rw-web เป็นตัวประสานงานที่เรียก 3 skills ต่อกัน: $rw-research-brandkit สร้าง research, brief และ brandkit; $rw-build-website วาง content, ออกแบบและสร้างเว็บ พร้อมเลือกใช้ gpt-image-2 สำหรับภาพประกอบ; แล้วตรวจด้วย browser capture ที่เป็นหลักฐานคนละอย่างกับภาพที่ AI สร้าง ก่อนส่งให้ $rw-deploy-cloudflare เผยแพร่และตรวจ HTTPS ตามสิทธิ์ที่ผู้ใช้ให้ไว้
แหล่งข้อมูล: skill-packs/rw-web/skills/rw-web/SKILL.md, skill-packs/rw-web/skills/rw-research-brandkit/SKILL.md, skill-packs/rw-web/skills/rw-build-website/SKILL.md, skill-packs/rw-web/skills/rw-deploy-cloudflare/SKILL.md
สิ่งที่ย่อ: รวม research, brief และ brandkit ที่ skill แรกดูแลเป็นสองโหนดเพื่อให้เห็น artifact ส่งต่อ; รวม content architecture, visual design และการสร้างเว็บไว้ในโหนด Build; ไม่แสดงไฟล์ handoff, token, คำสั่ง Wrangler หรือขั้นตอนแก้ QA รายข้อ และแสดง gpt-image-2 เป็นทางเลือกสร้าง asset แยกจาก browser capture ที่ใช้เป็นหลักฐาน
Prompt สำหรับสร้างซ้ำ
ใช้ $diagram-design สร้าง flowchart ภาษาไทยสำหรับผู้เริ่มต้น อธิบาย pipeline ของ $rw-web โดยยึด skill-packs/rw-web/skills/rw-web/SKILL.md และ skill ทั้ง 3 เป็น source of truth แสดงเส้นทางหลัก 5 nodes แนวนอน: $rw-research-brandkit (Research ข้อมูลจริง) → Brief + Brandkit → $rw-build-website (Content + Design) → Browser QA (capture + evidence) → $rw-deploy-cloudflare (Cloudflare + HTTPS) เพิ่ม optional node gpt-image-2 ใต้ขั้น Build พร้อมเส้นประย้อนขึ้นไปเพื่อสื่อว่าใช้สร้างภาพประกอบได้เมื่อช่วยให้งานสวยและตรงแบรนด์ ระบุให้ชัดว่า generated image คือ asset สำหรับหน้าเว็บ ส่วน browser capture คือหลักฐานตรวจหน้าเว็บและไม่ใช่ภาพชนิดเดียวกัน ให้ $rw-web ปรากฏในชื่อหรือคำบรรยายในฐานะ orchestrator โดยไม่เพิ่มเป็นโหนดซ้ำ ใช้ format html+svg, preset doc-inline viewBox 960×600, detail simplified, audience beginner/mixed, static ไม่มี animation ใช้ connector มุมฉากหรือเส้นตรงเมื่อแกนตรง ไม่เกิน 6 nodes/5 arrows เน้นขั้น $rw-build-website เพียงจุดเดียว ตาม profile rawinnipa-ai-web-studio: canvas #0A0A0A, surface #1A1A1A, ink #F7F7F7, muted #9CA3AF, rule #2A2A2A, accent #3EDC81, Inter + Noto Sans Thai ไม่มีเงา ไม่มี remote asset วาด connector ก่อน node ใส่ role=img, title เป็น child แรก, desc และ aria-labelledby ID เฉพาะภาพ เก็บ HTML เป็น source of truth และ extract SVG จาก HTML จากนั้นรัน installed diagram-design self_check.py และตรวจ browser/geometry ที่ 960×600 รายงาน source paths กับ fidelity ledger โดยระบุ Invented: none