คู่มือผู้สอน: AI Web Studio — 2 วัน / 8 ชั่วโมง

ออกแบบและพัฒนาเว็บไซต์ด้วย AI — หน่วยปฏิบัตินี้เป็นส่วนหนึ่งของ 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต (Prince of Songkla University, Phuket Campus). เวลา workshop คือ 2 วัน × 240 นาที รวม 8 ชั่วโมง โดย 240 นาทีของแต่ละวันรวมพัก 10 นาทีแล้ว; 8 ชั่วโมงไม่ใช่คำอธิบายชั่วโมงรวม รายวิชาฉบับเต็ม หรือจำนวนหน่วยกิตของ module มหาวิทยาลัย. บทเรียน 12 บท, คู่มือและบททดลองเสริม 11 ชุด และ prompt libraries เป็นคลังสำหรับผู้สอนเลือกใช้และให้ผู้เรียนศึกษาต่อ ไม่ได้หมายความว่าต้องสอนครบทุกบรรทัดใน 8 ชั่วโมง. ตรวจคำสั่งกับ package.json, wrangler.jsonc, src/worker.ts และ examples/ เมื่อ 9 กันยายน 2026; คู่มือนี้ไม่อ้างว่าคำสั่งใดได้รันผ่านแล้วในเครื่องผู้เรียน

ผลลัพธ์ปลายทางและหน้าที่ผู้สอน

ผู้เรียนสร้าง capstone เป็นหนึ่งในสามแบบ: เว็บบริษัท, เว็บเช่าอุปกรณ์ หรือ product showcase ที่มี quote request. ทุกชิ้นต้องมี brief/spec, UI ที่ responsive/accessibility-aware, หลักฐาน validation, preview deployment และ release packet; หน้า store เป็น quote demo ไม่ใช่ payment. ผู้สอนทำให้ AI เป็นคู่ทำงานที่มีหลักฐาน ไม่ใช่เครื่องมือที่เดาความจริงทางธุรกิจหรือ deploy โดยไร้การตรวจรับ.

เปิดแผนภาพเส้นทางผู้เรียนแบบเต็มหน้า เพื่อใช้เปิดคอร์สและ recap ต้นวัน ตารางนาทีต่อนาทีด้านล่างยังเป็น source of truth ของเวลา เพราะตารางเหมาะกับการเทียบกิจกรรม ผู้สอน และหลักฐานมากกว่าแผนภาพ

โครง repository ที่ต้องพูดถึงตั้งแต่วันแรก:

ก่อนเริ่มคอร์ส: ห้องและ setup

ผู้สอนเตรียม Node.js ที่เข้ากับ project, npm, browser Chromium และบัญชี Cloudflare สำหรับภาพรวม deploy ในวันที่ 2. อย่าแจก production API token ในห้อง. ผู้เรียนทำงานใน clone ของตนเองหรือ branch/worktree แยก และใช้ demo content เท่านั้น.

ส่ง คู่มือติดตั้ง Claude Code, Codex, Claude Desktop และ ChatGPT Desktop ให้ผู้เรียนก่อนวันแรก โดยเลือก coding tool หลักหนึ่งตัวและส่ง version/sign-in check ที่ตัดข้อมูลบัญชีออก การติดตั้งและดาวน์โหลดเป็น prework; ช่วง setup 25 นาทีในห้องใช้ตรวจความพร้อมและแก้ปัญหาสำคัญ ผู้เรียนที่ยังไม่มีสิทธิ์ใช้ Desktop/web ฝึก brief และทำงานคู่กับผู้สอนได้

เพิ่ม Lab Research to Brand เป็น prework/self-study 150 นาที: ข้อมูล → evidence → brief → brandbook → icons/key visual → handoff มี HUSH kit ให้เปิดเทียบ ผู้สอนเลือกสาธิต inventory/research/brief 20 นาทีภายในช่วง design 30 นาทีเดิม ไม่บวกเวลาอบรมเพิ่ม และให้ผู้เรียนทำ visual assets ต่อหลังเรียน

สำหรับ design demo ให้เตรียม frame/export ที่ใช้ข้อมูลสมมติและอ่านได้จริง เลือกเส้นทางเดียวจาก Lab Design Tools/MCP: Claude Design → Claude Code, Stitch → handoff หรือ Figma remote MCP → coding agent ตรวจสิทธิ์และลอง read-only ก่อนวันสอน หาก connector ใช้ไม่ได้ให้ใช้ screenshot/HTML ที่เตรียมไว้ พร้อมระบุว่ารอบนั้นเป็น file handoff

ก่อนวัน 2 ให้ทำ คู่มือ Wrangler login และ Cloudflare API token เลือก OAuth สำหรับเครื่องส่วนตัว หรือ token สำหรับ environment ที่เหมาะสม ตรวจ account ให้ตรงและส่งเฉพาะผลตรวจที่ไม่แสดง credential เนื้อหาสร้าง token/แก้ปัญหาเป็น prework หรือ self-study 30–45 นาที ไม่เพิ่มเวลาช่วง deploy/release 40 นาทีในตาราง

สำหรับผู้เรียนที่ต้องการเห็น workflow เต็มจากข้อมูลถึงเว็บไซต์ ใช้ Lab RW Web เป็น self-study 120–180 นาทีหลังบท 02 Lab นี้ติดตั้ง skill 4 ตัว ทดลองทั้งการเรียกแยกช่วงและ $rw-web แบบ one-shot สร้างภาพ hero/key visual ด้วย built-in imagegen เป็นทางเลือก และส่งต่อไปยัง Cloudflare เฉพาะเมื่อมี account/hostname ที่ได้รับอนุญาต ผู้สอนอาจเลือกสาธิต pipeline diagram และ prompt หนึ่งช่วงในเวลา Context and skills 30 นาทีเดิม โดยแทนที่แบบฝึกย่อย ไม่เพิ่มเวลา 480 นาที

Lesson 00 — setup และ verify (ใช้เปิดวัน 1)

ให้ผู้เรียนเปิด terminal ที่ repository root แล้วทำตามลำดับนี้:

npm ci
npm run
npm run types
npm run typecheck
npm run build
npm run db:local
npm run dev

ผลที่ควรสังเกต ไม่ใช่ผลที่ผู้สอนรับประกันล่วงหน้า: npm run แสดง scripts ที่มีอยู่; types อาจเขียน worker-configuration.d.ts; build ควรสร้าง dist/; db:local ใช้ migration migrations/ กับ binding DB; dev เปิด Wrangler ที่ port 3320 ตาม script. ให้เปิด http://localhost:3320/, /examples/company/, /examples/rental/, /examples/store/, และ http://localhost:3320/api/health. หาก command ใดล้มเหลว ผู้เรียนเก็บ output เต็ม, node --version, npm --version, current directory และแก้จากข้อมูลจริง—ไม่ให้ AI เดา command ใหม่.

npm run test และ npm run test:e2e เป็น scripts ที่ประกาศไว้ แต่ผู้สอนไม่ควรบอกว่า test ผ่านจนกว่าจะรันใน session นั้นและอ่านผล. ตรวจว่ามีไฟล์ใต้ tests/ และ Playwright configuration/required browser ก่อนนำเข้า acceptance gate.

แบบฝึก install/verify skill แบบ portable (20 นาที)

ให้สอนแนวคิด ไม่ติดตั้ง global skill จริง. สร้าง ชั่วคราว ใน working folder ของผู้เรียน เช่น scratch-skills/marketing-page-review/SKILL.md จากตัวอย่างเต็มใน บท 02. ตรวจว่ามี frontmatter name และ description, body ระบุ evidence/stop condition, และไม่มี secret/script/MCP config. จากนั้นให้ผู้เรียนใช้ agent ของตนอ่านไฟล์นั้นโดย explicit file path แล้วทำ review หน้า /examples/company/; บันทึกว่ามันอ่าน skill และรายงาน not verified อย่างซื่อตรงหรือไม่.

อย่าบอกว่า $marketing-page-review จะใช้ได้ทุกเครื่อง. Claude Code ใช้ /skill-name; Codex/host อื่นอาจ auto-select, ใช้ $..., หรือมี syntax ต่างกัน. ทดลอง direct invocation เฉพาะเมื่อ documentation และ installation ของเครื่องนั้นยืนยัน. การสอนนี้วัด portable core ไม่ใช่ command ของ vendor.

ตาราง 2 วันแบบนาทีต่อนาที

ตารางนี้คือเส้นทาง workshop 480 นาทีรวมพัก ผู้สอนใช้ lesson ที่ระบุเป็นแหล่งเตรียมตัวและเลือก exercise ตามเวลา ส่วนกิจกรรมที่ไม่ได้เลือกให้เป็น self-study/extension

วัน 1 — brief, skills, design และเว็บบริษัท (240 นาที)

สคริปต์ demo: “ผมจะไม่ขอให้ agent สร้างเว็บทั้งเว็บ. ผมจะให้มันอ่าน spec แล้วตอบสามอย่าง: facts ที่ยืนยัน, assumptions, และแผน. ถ้ามันแต่งราคา เราหยุดและแก้ brief—ไม่แก้ CSS.” จากนั้นเปิด docs/lessons/01-vibe-coding-foundations.md ให้เห็น prompt contract.

ขอบเขตที่เลือกในชั้น: บท 00–05 ใช้เฉพาะส่วนที่สนับสนุน brief, skill, design และ company slice. แบบฝึก 45–75 นาทีในแต่ละบทเป็นเวลาทำเต็มแบบอิสระ ผู้สอนไม่ต้องทำครบทุกชุดในวัน 1

วัน 2 — data, motion overview, deploy และ capstone (240 นาที)

ขอบเขตที่เลือกในชั้น: บท 06–10 ใช้สำหรับ rental exercise, motion/quote overview, deploy rehearsal และ capstone slice. Operations เชิงลึก, production deploy จริง, real-estate lab, Diagram Design lab และ prompt variants ที่เหลือเป็น self-study/extension เว้นแต่ผู้สอนจัดเวลาเพิ่ม

บท 11 — เลือกบริการ Cloudflare สำหรับเว็บไซต์ เป็นบทอ่านเสริมสำหรับเทียบ Workers Static Assets/Pages, D1, KV, R2, Queues, Workflows, Turnstile, Images และบริการด้าน performance/security กับ requirement จริง ไม่เพิ่มบริการเพียงเพราะมีใน catalog ผู้สอนเลือกตารางตัดสินใจหนึ่งส่วนมา recap ช่วง deploy เดิมได้โดยไม่เพิ่มเวลา

Actual repository reference solutions

Use these as “what to inspect”, not as code to overwrite.

Company contact lab

examples/company/main.js reads a form, generates crypto.randomUUID() idempotency key, and posts JSON to /api/contact with Content-Type and Idempotency-Key. The Worker accepts only name, email, message, consent, website, turnstileToken; validation rejects unknown fields, requires same origin, consent, empty honeypot, and eventually runs Turnstile unless DEMO_MODE is true. In demo mode, it stores [demo-redacted] in contacts. The reference success is HTTP 201 with a demo message/id; it is not an email delivery system.

Rental lab

GET /api/catalog returns equipment/products read from D1 through src/worker.ts; a missing DB binding is a 503, not a fixture fallback. GET /api/availability?equipmentId=camera&start=YYYY-MM-DD&end=YYYY-MM-DD&quantity=1 validates allowed query parameters/date interval/quantity and reads rental_days to return available, remaining, totalPrice, currency, days. POST /api/rentals calculates price on the server and batches insertion of rentals and daily rows. The SQL trigger rental_days_capacity_before_insert aborts capacity overrun; Worker maps this to 409 UNAVAILABLE. Learners must not use the old names from generic docs such as /api/rental-requests or cam-a for this repository.

Store lab

examples/store/main.js keeps a client Map of product id/quantity for UI only. Its request sends {items:[{productId, quantity}], name, email, consent, website} to POST /api/quotes; Worker permits 1–10 unique products and quantities 1–10, finds authoritative product records, recomputes totalPrice, writes quotes/quote_items, and returns 201 status: "quote-demo". The server never accepts client total/price. GSAP is registered once and gsap.matchMedia() makes animations only under (prefers-reduced-motion: no-preference); static content remains available.

Facilitation interventions

Daily instructor close-out

Collect a tiny artifact, not a vague feeling: Day 1 ส่ง brief/prompt + mobile/keyboard finding; Day 2 ส่ง API evidence + capstone evidence record. Photograph or export errors only after removing tokens, emails and personal data. Record blockers for self-study or the next course activity; never “solve” by quietly changing a learner’s production configuration.

หลัง workshop 2 วัน / 8 ชั่วโมง ผู้สอนอาจมอบ Lab Diagram Design หรือ Lab Real Estate UI/UX เป็น full lab เรียนต่อด้วยตัวเองประมาณ 2 ชั่วโมงต่อชุด เนื้อหาเหล่านี้ไม่รวมอยู่ในตาราง 480 นาทีข้างต้น

Lab Design Tools/MCP ใช้ฝึกต่อ 90–120 นาที โดยส่ง prompt ที่ใช้จริง, design source, token/component mapping และหลักฐาน browser ทั้ง Light/Dark ส่วน prompt library มี brief, read-only inspection, implementation, critique และ handoff ฉบับเต็ม การเลือกใช้ทุกเครื่องมือเป็นทางเลือกศึกษาต่อ ไม่ใช่เงื่อนไขการผ่าน workshop

Website → Mobile App เป็นอีก lab เรียนต่อที่ใช้เว็บบ้านสบายของหลักสูตรเป็นต้นทาง มี prompt แยกตาม design tool และ browser prototype สำหรับทดลอง flow โดยไม่เพิ่มชั่วโมงในตาราง 2 วัน

สาธิตสร้างเว็บไซต์ของหลักสูตรเอง

ใช้ Lab สร้างเว็บไซต์หลักสูตรด้วย Codex ทีละขั้น เป็นตัวอย่างหลักสำหรับผู้เรียนที่อยากเริ่มจากโจทย์ใกล้ตัว เปิด snapshot HTML → CSS → interaction เทียบกันก่อนอ่านโค้ด มี prompt จริง, transcript และภาพ Terminal/เบราว์เซอร์แต่ละช่วง ให้ผู้เรียนตอบว่าแต่ละรอบเปลี่ยนอะไรและตรวจอย่างไร Lab เต็ม 160–180 นาทีเป็น self-study; ในห้องเลือกบางช่วงภายในเวลาเดิม ไม่เพิ่มจาก 2 วัน × 4 ชั่วโมง

ต่อจากเว็บตัวอย่าง: deploy เป็นเว็บไซต์ของผู้เรียน

Lab Deploy เว็บตัวอย่างขึ้น Cloudflare เป็นส่วนเสริม 45–60 นาทีหลัง Lab สร้างเว็บ 160–180 นาที ผู้สอนเลือกสาธิตช่วง dry-run → deploy ในช่วงเผยแพร่ของ Day 2 ได้ โดยเวลา workshop ยังคง 2 วัน วันละ 4 ชั่วโมง ใช้ชื่อ Worker และบัญชีของผู้เรียน แยกจากเว็บไซต์หลักสูตรที่มี API/D1

Lab เสริม: HUSH × brandkit

ใช้ Lab brandkit ต่อจาก Research → Brandbook เป็น self-study 60–90 นาที ผู้สอนเปิด ภาพที่สร้างจริงและ review 9 panels เพื่อสาธิต 5 นาทีภายในช่วง design เดิม โดยแทนที่ส่วนสาธิตอื่น ไม่บวกเวลาตาราง 2 วัน × 4 ชั่วโมง ให้ผู้เรียนตรวจ source/pinned skill, ส่ง prompt, บันทึกผล, review แล้วทำ handoff สำหรับเว็บไซต์ เกณฑ์สำคัญคือแยกภาพ concept ออกจาก approved brandbook, SVG และ UI ที่ผ่านการทดสอบ หากสร้างภาพไม่ได้ ใช้ภาพ worked example เพื่อฝึก review/handoff โดยระบุว่าไม่ได้ generate เอง

Lab เสริม: RW Web pipeline

Lab RW Web: Research → Brandkit → Website → Cloudflare เป็น self-study 120–180 นาทีและทำให้จำนวนคู่มือ/บททดลองเสริมเป็น 11 ชุด ใช้ profile สมมติ Harbor Flow Studio เพื่อให้ตรวจ workflow ได้โดยไม่แต่งข้อมูลบริษัทจริง ผู้เรียนส่ง evidence/brandkit, sitemap/copy, source/build, browser QA และ deployment record เฉพาะผู้ที่ deploy จริง

ผู้เรียนที่ไม่มี browser tooling ยังทำ research/build ได้ แต่ต้องรายงาน QA เป็น partial; ผู้ที่ไม่มี Cloudflare credential ทำ local release packet และอธิบาย preflight/recovery แทน ห้ามแชร์ token หรือยึด tw.rawinlab.com จากตัวอย่าง package เป็นเป้าหมายจริง ภาพตัวอย่างที่หลักสูตรให้เป็น browser capture จากไฟล์ build ผ่าน file:// ไม่ใช่ภาพ Codex Desktop และไม่ใช่หลักฐานว่าเว็บขึ้น Cloudflare แล้ว