# คู่มือผู้สอน: 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 โดยไร้การตรวจรับ.

![แผนภาพเส้นทางผู้เรียนตลอด 2 วัน เริ่มจาก brief และ prompt ผ่านเว็บตัวอย่างกับ server authority ไปยัง preview และ release packet](/diagrams/learner-roadmap.svg)

[เปิดแผนภาพเส้นทางผู้เรียนแบบเต็มหน้า](/diagrams/learner-roadmap.html) เพื่อใช้เปิดคอร์สและ recap ต้นวัน ตารางนาทีต่อนาทีด้านล่างยังเป็น source of truth ของเวลา เพราะตารางเหมาะกับการเทียบกิจกรรม ผู้สอน และหลักฐานมากกว่าแผนภาพ

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

| พื้นที่ | หน้าที่ใน workshop |
|---|---|
| `examples/company/` | หน้า form ติดต่อ; `main.js` ส่ง `POST /api/contact` |
| `examples/rental/` | catalog/availability/rental form; ใช้ `/api/catalog`, `/api/availability`, `POST /api/rentals` |
| `examples/store/` | GSAP, cart และ `POST /api/quotes` |
| `src/worker.ts` | Worker API, validation, idempotency, Turnstile และ static-assets fallback |
| `migrations/0001_initial.sql` + `0002_demo_retention.sql` | D1 schema, capacity trigger, quote/contact tables และ rate-limit counters |
| `scripts/build.mjs` | render Markdown ใน `docs/` เป็น site ไป `dist/` |
| `wrangler.jsonc` | Worker entry, static assets, `/api/*` routing, D1 binding และ DEMO_MODE |

## ก่อนเริ่มคอร์ส: ห้องและ 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](../labs/install-ai-tools.md) ให้ผู้เรียนก่อนวันแรก โดยเลือก coding tool หลักหนึ่งตัวและส่ง version/sign-in check ที่ตัดข้อมูลบัญชีออก การติดตั้งและดาวน์โหลดเป็น prework; ช่วง setup 25 นาทีในห้องใช้ตรวจความพร้อมและแก้ปัญหาสำคัญ ผู้เรียนที่ยังไม่มีสิทธิ์ใช้ Desktop/web ฝึก brief และทำงานคู่กับผู้สอนได้

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

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

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

สำหรับผู้เรียนที่ต้องการเห็น workflow เต็มจากข้อมูลถึงเว็บไซต์ ใช้ [Lab RW Web](../labs/rw-web-skills.md) เป็น 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** แล้วทำตามลำดับนี้:

```bash
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](../lessons/02-agent-skills.md#3-ตัวอย่าง-skillmd-ที่สมบูรณ์และ-portable). ตรวจว่ามี 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 นาที)

| นาที | กิจกรรม | ผู้สอนทำ/พูด | หลักฐานจากผู้เรียน |
|---:|---|---|---|
| 0–15 | เปิดหน่วยเรียน + diagnostic | อธิบายตำแหน่งใน 977-121; เลือก pretest 4 ข้อจากคลัง | คำตอบตั้งต้น |
| 15–40 | Setup และอ่าน repository | demo root commands, หน้าเว็บ และหลักฐาน error ที่ครบ | local URL หรือ error log |
| 40–80 | Brief → spec → prompt | สาธิต facts/assumptions/acceptance และ prompt แบบ plan-first | brief 7 ช่อง + prompt |
| 80–110 | Context และ skills | เทียบ project rule, task prompt, skill และ source of truth | context map สั้น |
| 110–120 | พัก | พัก 10 นาทีภายในเวลา 4 ชั่วโมง | — |
| 120–150 | Rawinnipa design + design tool | 10 นาทีอ่าน tokens; 10 นาที demo หนึ่งเส้นทาง; 10 นาทีตรวจ context/handoff | mini style board + หลักฐานอ่านแบบ |
| 150–200 | Company vertical slice | trace contact flow แล้วให้คู่เรียนแก้ hero/form state หนึ่งส่วน | diff + screenshot |
| 200–225 | Mobile, keyboard และ review | ตรวจ 390px, Tab, error/success และ finding จากเพื่อน | checklist + finding |
| 225–240 | Exit ticket | เขียนสิ่งที่ยืนยันแล้ว, risk หนึ่งข้อ และ slice ถัดไป | exit ticket |

**สคริปต์ 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 นาที)

| นาที | กิจกรรม | ผู้สอนทำ/พูด | หลักฐานจากผู้เรียน |
|---:|---|---|---|
| 0–25 | Recap + data authority | เทียบ browser state กับ Worker/D1 authority และ `[start,end)` | authority map |
| 25–70 | Rental/API exercise | trace catalog → availability → rental; ทดลอง valid/error/conflict หนึ่งเส้นทาง | request/response evidence |
| 70–100 | Motion + quote overview | เปิด store, reduced motion และ server repricing; ไม่ build animation ทั้งหน้า | motion/quote checklist |
| 100–110 | พัก | พัก 10 นาทีภายในเวลา 4 ชั่วโมง | — |
| 110–150 | Deploy/release boundaries | อ่าน config, dry-run, secret boundary, smoke และ rollback | release gate record |
| 150–205 | Capstone vertical slice | เลือก company/rental/store แล้วสร้างหรือปรับหนึ่ง slice พร้อมตรวจ | working diff + evidence log |
| 205–230 | Peer demo และ review | demo 4 นาที/คู่: outcome, boundary, evidence, risk | reviewer note |
| 230–240 | Posttest + close | ใช้ 4 ข้อคู่ขนานกับวัน 1 และกำหนดเส้นทางศึกษาต่อ | posttest + learning plan |

**ขอบเขตที่เลือกในชั้น:** บท 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 สำหรับเว็บไซต์](../lessons/11-cloudflare-services.md) เป็นบทอ่านเสริมสำหรับเทียบ 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

| Signal | Intervention in under 3 minutes |
|---|---|
| Learner pastes giant prompt | Ask them to underline Goal, scope, evidence, stop; make one blank explicit |
| AI invents business details | Convert to `[TODO: owner]`, add source owner, rerun plan-only |
| Terminal error overwhelms learner | Ask for current directory + full command + first error line; pair and isolate one failure |
| Learner says “AI tested it” | Ask “which command/URL/result?”; move claim to not verified if no evidence |
| Someone wants production now | redirect to `npm run deploy:check`, preview/release packet and human approval gate |
| Motion causes visual bug | toggle reduced motion; establish readable final DOM before debugging tween |

## 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](../labs/diagram-design.md) หรือ [Lab Real Estate UI/UX](../labs/real-estate-ui-ux-pro-max.md) เป็น full lab เรียนต่อด้วยตัวเองประมาณ 2 ชั่วโมงต่อชุด เนื้อหาเหล่านี้ไม่รวมอยู่ในตาราง 480 นาทีข้างต้น

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

[Website → Mobile App](../labs/website-to-mobile-app.md) เป็นอีก lab เรียนต่อที่ใช้เว็บบ้านสบายของหลักสูตรเป็นต้นทาง มี prompt แยกตาม design tool และ [browser prototype](/examples/real-estate-mobile/) สำหรับทดลอง flow โดยไม่เพิ่มชั่วโมงในตาราง 2 วัน

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

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


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

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

## Lab เสริม: HUSH × brandkit

ใช้ [Lab brandkit](../labs/brandkit-skill.md) ต่อจาก Research → Brandbook เป็น self-study 60–90 นาที ผู้สอนเปิด [ภาพที่สร้างจริงและ review 9 panels](/labs/brandkit-hush/) เพื่อสาธิต 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](../labs/rw-web-skills.md) เป็น 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 แล้ว