AI Web Studio

977-121 Module: Website Design and Development

ออกแบบและพัฒนาเว็บไซต์ด้วย AI

เส้นทางเรียนรู้เพื่อเริ่มสร้างเว็บไซต์ด้วย AI ตั้งแต่เครื่องมือและพื้นฐาน ไปจนถึงการส่งมอบที่ตรวจสอบได้

ภาพรวมเส้นทางการทำงาน

Brief
Build
Verify
Publish

เป้าหมายของ workshop

AI Web Studio เป็นส่วนหนึ่งของรายวิชา เพื่อช่วยผู้เรียนเลือกจุดเริ่มต้น เข้าถึงบทเรียนจริง และฝึกสร้างเว็บไซต์ด้วย AI อย่างมีขั้นตอน

เข้าใจเครื่องมือและพื้นฐานของเว็บก่อนเริ่มลงมือ
ใช้ specs, prompts และเครื่องมือ AI เพื่อพัฒนาเว็บไซต์
ตรวจคุณภาพและส่งมอบงานที่ตรวจสอบได้

workshop นี้ไม่ใช่รายละเอียดรายวิชาฉบับมหาวิทยาลัยหรือระบบมหาวิทยาลัยอย่างเป็นทางการ

แผน AI Web Studio 2 วัน

รวม 8 ชั่วโมง: 2 วัน วันละ 4 ชั่วโมง และพัก 10 นาทีต่อวัน

แผนนี้เป็นเส้นทางเลือกใช้คลังบทเรียนตามเวลาจริงในห้องเรียน ไม่ได้สัญญาว่าจะสอนครบทุกบทภายใน 8 ชั่วโมง

Day 1 — เริ่มต้น ออกแบบ และสร้างฐานงาน

4 ชั่วโมง รวมพัก 10 นาที: เลือกกิจกรรมจากบท 00–05 เพื่อเตรียมเครื่องมือ วางบริบท และเริ่มทำเว็บไซต์

Day 2 — ขยายงาน ตรวจสอบ และส่งมอบ

4 ชั่วโมง รวมพัก 10 นาที: เลือกกิจกรรมจากบท 06–10 เพื่อทำงานกับข้อมูล ประสบการณ์เว็บ การ deploy และการส่งมอบ

เส้นทางบทเรียน

บท 00–05 อยู่ในเส้นทาง Day 1 และบท 06–10 อยู่ในเส้นทาง Day 2 เพื่อใช้เลือกเนื้อหาใน workshop

Day 1: บท 00–05

00 — เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร

เตรียมเครื่องมือและทำความเข้าใจพื้นฐานการทำงานของเว็บก่อนเริ่มสร้างงาน

อ่านบทเรียน 00

01 — พื้นฐาน Vibe Coding สำหรับเว็บที่ส่งมอบได้จริง

เรียนรู้พื้นฐาน Vibe Coding เพื่อสร้างเว็บที่พร้อมส่งมอบ

อ่านบทเรียน 01

02 — Agent Skills, MCP และ Plugins โดยไม่ทำให้บริบทพัง

ทำความเข้าใจ Agent Skills, MCP และ Plugins พร้อมดูแลบริบทการทำงาน

อ่านบทเรียน 02

03 — Specs และ Prompts สำหรับเว็บบริษัท, Catalog และเว็บ animation

เขียน specs และ prompts สำหรับเว็บบริษัท catalog และเว็บที่มี animation

อ่านบทเรียน 03

04 — ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ

วางงานออกแบบ ภาพ และเกณฑ์คุณภาพก่อนเริ่มเขียนหน้าเว็บ

อ่านบทเรียน 04

05 — เว็บบริษัท: contact form ที่รันกับ demo นี้ได้จริง

สร้างเว็บบริษัทและ contact form ที่ทำงานกับ demo ได้จริง

อ่านบทเรียน 05

Day 2: บท 06–10

06 — เว็บเช่าอุปกรณ์: availability และ capacity ของ demo ที่รันได้จริง

พัฒนาเว็บเช่าอุปกรณ์ที่จัดการ availability และ capacity ของ demo ได้

อ่านบทเรียน 06

07 — GSAP product story, storefront และ quote demo

สร้าง product story, storefront และ quote demo ด้วย GSAP

อ่านบทเรียน 07

08 — รันและตรวจ deployment path ของโปรเจกต์ Cloudflare นี้

รันโปรเจกต์และตรวจเส้นทาง deployment ของ Cloudflare

อ่านบทเรียน 08

09 — Production Operations: security, observability, rollback และต้นทุน

ดูแล production ทั้งความปลอดภัย การสังเกตการณ์ การ rollback และต้นทุน

อ่านบทเรียน 09

10 — สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้

สร้างเว็บของตนเองและเตรียมการส่งมอบที่ตรวจสอบได้

อ่านบทเรียน 10

Labs และแหล่งเรียนต่อ

index.html:27: index.html:96: index.html:97: index.html:101:

index.html:103: index.html:190: Lesson cards: 11 Day 1 cards: 6 Day 2 cards: 5 EXIT 0 CODEX MESSAGE ผลการตรวจแบบ static ผ่านแล้ว: `main.js` ผ่าน syntax check, พบ lesson cards 11 ใบ (Day 1 = 6, Day 2 = 5) และ diff ไม่มี whitespace error. ยังไม่ได้เปิดเบราว์เซอร์ จึงบันทึกไว้ตรงไปตรงมาใน acceptance notes ว่าส่วน interaction/runtime รอการตรวจจริงครับ EXECUTED COMMAND /bin/bash -lc "git status --short && sed -n '1,240p' main.js && sed -n '1,180p' acceptance-notes.md" OUTPUT ?? ../../../.diagram-design ?? ../../../.gitattributes ?? ../../../.gitignore ?? ../../../CLAUDE.md ?? ../../../DESIGN.md ?? ../../../INFRASTRUCTURE.md ?? ../../../PROJECT_PLAN.md ?? ../../../README.md ?? ../../ ?? ../../../design-system/ ?? ../../../diagrams/ ?? ../../../docs/ ?? ../../../examples/ ?? ../../../migrations/ ?? ../../../package-lock.json ?? ../../../package.json ?? ../../../playwright.config.mjs ?? ../../../public/ ?? ../../../scripts/ ?? ../../../src/ ?? ../../../tests/ ?? ../../../training-skills/ ?? ../../../tsconfig.json ?? ../../../worker-configuration.d.ts ?? ../../../wrangler.jsonc (() => { "use strict"; const storageKey = "psu-course-website-theme-v1"; const root = document.documentElement; const themeToggle = document.querySelector("#theme-toggle"); const controls = document.querySelector(".lesson-controls"); const search = document.querySelector("#lesson-search"); const filterButtons = [...document.querySelectorAll("[data-filter]")]; const clearSearch = document.querySelector("#clear-search"); const status = document.querySelector("#lesson-status"); const empty = document.querySelector("#lesson-empty"); const lessons = [...document.querySelectorAll("article[data-lesson][data-day]")]; const lessonDays = [...document.querySelectorAll(".lesson-day")]; let theme = "light"; let selectedFilter = "all"; try { const savedTheme = window.localStorage.getItem(storageKey); if (savedTheme === "light" || savedTheme === "dark") { theme = savedTheme; } } catch (_) { // Theme selection still works for this visit when storage is unavailable. } function setTheme(nextTheme) { theme = nextTheme; root.dataset.theme = theme; const isDark = theme === "dark"; themeToggle.setAttribute("aria-pressed", String(isDark)); themeToggle.textContent = isDark ? "เปลี่ยนเป็นโหมดสว่าง" : "เปลี่ยนเป็นโหมดมืด"; themeToggle.setAttribute( "aria-label", isDark ? "โหมดปัจจุบัน: มืด เปลี่ยนเป็นโหมดสว่าง" : "โหมดปัจจุบัน: สว่าง เปลี่ยนเป็นโหมดมืด" ); } function normalise(value) { return value.replace(/\s+/g, " ").trim().toLocaleLowerCase(); } function lessonText(lesson) { const title = lesson.querySelector("h4"); const description = lesson.querySelector("p"); return normalise(`${title?.textContent ?? ""} ${description?.textContent ?? ""}`); } function updateLessons() { const query = normalise(search.value); let count = 0; lessons.forEach((lesson) => { const matchesFilter = selectedFilter === "all" || lesson.dataset.day === selectedFilter; const matchesQuery = query === "" || lessonText(lesson).includes(query); const visible = matchesFilter && matchesQuery; lesson.hidden = !visible; if (visible) count += 1; }); lessonDays.forEach((day) => { day.hidden = !day.querySelector("article[data-lesson]:not([hidden])"); }); empty.hidden = count !== 0; status.textContent = `พบบทเรียน ${count} จาก ${lessons.length} บท`; } function setFilter(nextFilter) { selectedFilter = nextFilter; filterButtons.forEach((button) => { button.setAttribute("aria-pressed", String(button.dataset.filter === selectedFilter)); }); updateLessons(); } if (themeToggle) { themeToggle.hidden = false; setTheme(theme); themeToggle.addEventListener("click", () => { const nextTheme = theme === "dark" ? "light" : "dark"; setTheme(nextTheme); try { window.localStorage.setItem(storageKey, nextTheme); } catch (_) { // Storage can be disabled without preventing the visual toggle. } }); } if (controls && search && clearSearch && status && empty && lessons.length > 0) { controls.hidden = false; search.addEventListener("input", updateLessons); filterButtons.forEach((button) => { button.addEventListener("click", () => setFilter(button.dataset.filter)); }); clearSearch.addEventListener("click", () => { search.value = ""; setFilter("all"); search.focus(); }); updateLessons(); } })(); # Acceptance notes ## ตรวจที่ทำได้จริง - ตรวจ source ด้วย `rg` และการอ่านไฟล์ว่า HTML มีบทเรียน `article[data-lesson][data-day]` 11 บท: Day 1 คือ 00–05 (6 บท) และ Day 2 คือ 06–10 (5 บท) - ตรวจว่า controls ของ theme, search และ filter เริ่มต้นด้วย `hidden`; หาก JavaScript ไม่ทำงาน เนื้อหาบทเรียนและลิงก์ anchor ทั้ง 11 บทยังคงอยู่ใน HTML - ตรวจว่า `main.js` ใช้ `textContent` เพื่อนำชื่อและคำอธิบายมาค้นหา และไม่สร้าง HTML จากค่าค้นหาของผู้ใช้ - ตรวจ logic แบบ static ว่า default theme คือ light, `data-theme` อยู่บน `html`, `aria-pressed` เปลี่ยนตาม dark mode, และอ่าน/เขียน `psu-course-website-theme-v1` อยู่ใน `try/catch` - ตรวจว่า search trim ช่องว่าง, search/filter ประกอบกัน, clear คืนค่า query และ filter all แล้วจึง focus ช่องค้นหา - ตรวจ CSS ว่ามี `[hidden] { display: none !important; }` และ media print ยังบังคับสีสำหรับกระดาษพร้อมซ่อน controls ## สิ่งที่ยังรอการตรวจในเบราว์เซอร์ - ยังไม่ได้รันเบราว์เซอร์หรือ local server ในงานนี้ จึงยังไม่ได้ยืนยันการกดปุ่ม, การประกาศ live region, keyboard focus, localStorage ที่ถูกปิด, responsive layout, reduced-motion และ print preview จาก runtime จริง EXIT 0 CODEX MESSAGE เสร็จแล้ว - สร้าง [main.js](/main.js) สำหรับ theme toggle, ค้นหา, filter, status และ clear/focus - แก้ [index.html](/index.html) และ [style.css](/style.css) เพื่อ progressive enhancement และ `[hidden]` - สร้าง [acceptance-notes.md](/acceptance-notes.md) พร้อมหลักฐาน static checks และรายการที่ยังรอตรวจในเบราว์เซอร์ ตรวจแล้ว: `node --check main.js`, ตรวจจำนวนบทเรียน 11 บท (Day 1: 6, Day 2: 5), และ `git diff --check` ผ่าน. ยังไม่ได้รัน browser/local server จึงไม่ได้อ้างผล interaction runtime. FINAL RESPONSE เสร็จแล้ว - สร้าง [main.js](/main.js) สำหรับ theme toggle, ค้นหา, filter, status และ clear/focus - แก้ [index.html](/index.html) และ [style.css](/style.css) เพื่อ progressive enhancement และ `[hidden]` - สร้าง [acceptance-notes.md](/acceptance-notes.md) พร้อมหลักฐาน static checks และรายการที่ยังรอตรวจในเบราว์เซอร์ ตรวจแล้ว: `node --check main.js`, ตรวจจำนวนบทเรียน 11 บท (Day 1: 6, Day 2: 5), และ `git diff --check` ผ่าน. ยังไม่ได้รัน browser/local server จึงไม่ได้อ้างผล interaction runtime.