ACTUAL CODEX CLI RUN / STEP 02
Codex CLI 0.153.4 · captured 11 September 2026

This is a selected event transcript, not the Codex Desktop UI.
Reasoning, environment diagnostics and supporting skill instructions are omitted. Paths are shortened.

COMMAND
codex exec -C <workspace> --sandbox workspace-write --json --output-last-message 02-final.txt - < prompts/02-html.txt

PROMPT SENT
อ่าน inputs.md, scope.txt และ brief.md สร้าง index.html เท่านั้น ใช้ semantic HTML ภาษาไทยที่ทำงานได้โดยยังไม่มี CSS/JS
หน้าที่ของเว็บ: อธิบายบริบท 977-121 Module: Website Design and Development ที่ PSU Phuket และพาผู้เรียนเข้าสู่สื่อ AI Web Studio
ต้องมี skip link ไป main tabindex=-1, header/nav, hero พร้อมชื่อรายวิชาและป้ายเว็บไซต์ตัวอย่างเพื่อการเรียน, เป้าหมายworkshop, แผน2วัน (4ชั่วโมงต่อวันรวมพัก), รายการบทเรียนครบ11บท, แหล่งเรียนต่อ และ footer ที่ลิงก์ rawinsoft.com ในฐานะผู้จัดทำสื่อ
CTAหลักไป /learn/lessons/00-course-map/ (ตรวจชื่อจริงใน inputs.md ก่อนใช้; หากต่างให้ใช้ URL ใน inputs)
CTAรองไป #lessons; linkคู่มือไป /handbook/ และ /resources/
แบ่งบท00–05 เป็น day1, 06–10 เป็น day2 ตามคลังบทเรียน ไม่สัญญาว่าจะสอนครบทุกบทใน8ชั่วโมง
วางแต่ละบทเป็น article[data-lesson][data-day="day1" หรือ "day2"] โดยมีชื่อ ลิงก์อ่าน คำอธิบายสั้นจากชื่อบท และลำดับที่จริง
ยังไม่สร้าง search หรือ theme button ที่กดแล้วไม่มีผล ปุ่มเหล่านั้นเพิ่มในขั้นJS
ไม่สร้างฟอร์มสมัคร login ข้อมูลผู้สอน หน่วยกิต คะแนน review หรือโลโก้มหาวิทยาลัย
ไม่ใช้ภาพหรือรันserver ไม่แก้ brief/evidence. ส่งท้ายสรุปสิ่งที่ทำและสิ่งที่ยังไม่ทำอย่างสั้น


EXECUTED COMMAND
/bin/bash -lc "pwd && rg --files -g 'inputs.md' -g 'scope.txt' -g 'brief.md' -g 'AGENTS.md' -g 'index.html' ."
OUTPUT
<workspace>
./inputs.md
./scope.txt
./brief.md

EXIT 0

EXECUTED COMMAND
/bin/bash -lc "sed -n '1,240p' inputs.md && sed -n '1,240p' scope.txt && sed -n '1,260p' brief.md"
OUTPUT
# ข้อมูลตั้งต้นสำหรับเว็บไซต์ตัวอย่างรายวิชา

S1 — ข้อมูลที่ผู้ใช้ให้: 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต / Prince of Songkla University, Phuket Campus.
S2 — design-system/course.json และ docs/instructor/course-guide.md ของหลักสูตรนี้: AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI เป็นหน่วย workshop 2 วัน × 4 ชั่วโมง = 8 ชั่วโมง รวมพัก 10 นาทีต่อวัน เป็นส่วนหนึ่งของรายวิชา ไม่ใช่ชั่วโมง/หน่วยกิต/ประมวลรายวิชาฉบับมหาวิทยาลัยทั้งหมด
S3 — DESIGN.md และ Rawinnipa Brand Guidelines v1.0 ที่ใช้กับ course shell: Inter + Noto Sans Thai, light default: #F7F7F7 พื้น, #0A0A0A ข้อความ, #3EDC81 accent มีข้อความเข้ม, #17653F สำหรับข้อความเขียวบนพื้นอ่อน. Dark: #0A0A0A canvas, #171717 surface, #F7F7F7 text. จำกัด green เป็นจุดเน้น; focus มองเห็น; print กระดาษขาว. ลิงก์ผู้ออกแบบ/ผู้จัดทำสื่อ https://rawinsoft.com/ ไม่อ้าง partnership หรือเจ้าของมหาวิทยาลัยเพิ่ม. ห้ามสร้างตราหรือโลโก้มหาวิทยาลัยขึ้นเอง
S4 — บทเรียนที่มีจริงใน repository (ชื่อย่อใช้แสดงได้):
- 00 | บทเรียน 00 — เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร | /learn/lessons/00-setup-and-web-basics/
- 01 | บทที่ 1: พื้นฐาน Vibe Coding สำหรับเว็บที่ส่งมอบได้จริง | /learn/lessons/01-vibe-coding-foundations/
- 02 | บทที่ 2: Agent Skills, MCP และ Plugins โดยไม่ทำให้บริบทพัง | /learn/lessons/02-agent-skills/
- 03 | บทที่ 3: Specs และ Prompts สำหรับเว็บบริษัท, Catalog และเว็บ animation | /learn/lessons/03-specs-and-prompts/
- 04 | บทเรียน 04 — ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ | /learn/lessons/04-design-and-assets/
- 05 | บทเรียน 05 — เว็บบริษัท: contact form ที่รันกับ demo นี้ได้จริง | /learn/lessons/05-company-website/
- 06 | บทเรียน 06 — เว็บเช่าอุปกรณ์: availability และ capacity ของ demo ที่รันได้จริง | /learn/lessons/06-rental-and-data/
- 07 | บทเรียน 07 — GSAP product story, storefront และ quote demo | /learn/lessons/07-gsap-storefront/
- 08 | บทเรียน 08 — รันและตรวจ deployment path ของโปรเจกต์ Cloudflare นี้ | /learn/lessons/08-cloudflare-deploy/
- 09 | บทเรียน 09 — Production Operations: security, observability, rollback และต้นทุน | /learn/lessons/09-production-operations/
- 10 | บทเรียน 10 — สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้ | /learn/lessons/10-capstone-and-handoff/

S5 — ปลายทางที่มีจริง: / (เว็บไซต์สื่อหลักสูตร), /resources/, /handbook/, /learn/labs/install-ai-tools/, /learn/labs/research-to-brand-website/, /learn/labs/design-tools-and-mcp/. เว็บไซต์ตัวอย่างจะอยู่ /examples/course-website/. ลิงก์อ่านการสร้างทีละขั้นใช้ /learn/labs/build-course-website-step-by-step/ (กำลังสร้าง)
S6 — สินทรัพย์ font ที่ใช้ได้: /fonts/Inter-Regular.woff2, /fonts/Inter-Bold.woff2, /fonts/NotoSansThai-Regular.woff2, /fonts/NotoSansThai-Bold.woff2. ใช้ตัวอักษร/HTML/SVG ธรรมดา ไม่ต้องสร้างภาพ raster หรือโหลด font ภายนอก

GAP — ยังไม่มีเจ้าของยืนยันชื่อผู้สอน จำนวนหน่วยกิต ตารางภาคเรียน เกณฑ์ให้คะแนน ช่องทางสมัคร หรือบัญชี LMS. ไม่สร้างข้อมูลเหล่านี้ ไม่สร้าง login/รับสมัครที่ทำงานปลอม
PROPOSAL — กลุ่มเป้าหมายของ prototype คือผู้เรียนที่ต้องการรู้ว่าเริ่มตรงไหน เลือกบทเรียน และดูแผน workshop. เว็บไซต์นี้เป็นตัวอย่างประกอบการเรียน ไม่ใช่ระบบมหาวิทยาลัยอย่างเป็นทางการ

ขอบเขตงาน
- เว็บภาษาไทย static HTML/CSS/JS หน้าเดียว; API/ฐานข้อมูลไม่จำเป็นสำหรับเนื้อหาสาธารณะ
- ให้ไปถึงบทเรียนได้จริง; optional ค้นหาบทเรียนและกรอง Day1/Day2/ทั้งหมด
- โปรเจ็กต์เดิมมีเวลา workshop 8h; เนื้อหาเกินเวลาเป็นอ่านต่อ. แสดง Day1/Day2 สรุปไม่แต่งตารางรายวิชาเต็ม
- สร้างแบบทีละขั้น: brief → semantic HTML → responsive CSS → JS interaction → QA → publication
- code ทั้งหมดและผลแต่ละช่วงต้องตรวจ/ย้อนดูได้

ข้อมูลยืนยันเพิ่มเติมหลังทบทวน brief (ก่อนขั้น02): แบ่ง Day1 เป็นบท00–05, Day2 เป็นบท06–10 ตาม dayData ใน scripts/build.mjs. การแบ่งนี้เป็นเส้นทางคลังบทเรียน; ตารางในห้องยังเลือกกิจกรรมตามเวลา4ชม/วัน ไม่ได้หมายถึงต้องทำครบทุกเนื้อหา
แหล่งอ้างอิงชื่อรายวิชาภายนอก: https://computing.psu.ac.th/th/b-eng-digital-engineer-international-program/ ตรวจ11กันยายน2026. ใช้เฉพาะยืนยันชื่อวิชา/บริบทPSUPhuket; ไม่เอาจำนวนหน่วยกิตในแผนคนละรุ่นมาใส่เป็นเวลาworkshop
Work only in this isolated directory. No network, servers, dependencies, auth, deployment or files outside this directory. Use the supplied inputs. Write only explicitly requested files. Do not read global config or credentials. Do not spawn agents. Your work will be reviewed and published by the parent agent. Keep the final reply brief in Thai, naming created files and remaining gaps.
# Brief — เว็บไซต์ตัวอย่างรายวิชา 977-121

## กรอบงานและสถานะข้อมูล

- **ขอบเขตผลลัพธ์:** เอกสารสังเคราะห์สำหรับหน้า static HTML/CSS/JS ภาษาไทยหน้าเดียวในอนาคต; เอกสารนี้ไม่ใช่หน้าเว็บ และไม่มีการทำ web research
- **สถานะ:** Draft สำหรับให้เจ้าของตรวจสอบก่อนเข้าสู่ semantic HTML
- **ตำแหน่งผลิตภัณฑ์:** เว็บไซต์ตัวอย่างประกอบการเรียนที่ `/examples/course-website/` ไม่ใช่ระบบมหาวิทยาลัยอย่างเป็นทางการ
- **ข้อจำกัด:** ไม่สร้างตรา/โลโก้มหาวิทยาลัย ข้อมูลผู้สอน หน่วยกิต ตารางภาคเรียน เกณฑ์คะแนน ช่องทางสมัคร บัญชี LMS หรือ login/รับสมัครจำลอง

## FACT

- ชื่อรายวิชา: **977-121 Module: Website Design and Development**
- สถาบันที่ระบุ: **มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต / Prince of Songkla University, Phuket Campus**
- **AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI** เป็น workshop ภายในรายวิชา ระยะเวลา 2 วัน × 4 ชั่วโมง (รวม 8 ชั่วโมง) และมีพัก 10 นาทีต่อวัน; ไม่ใช่ชั่วโมง หน่วยกิต หรือประมวลรายวิชาฉบับเต็มของมหาวิทยาลัย
- มีบทเรียนจริง 11 บท (00–10) และมีปลายทางบทเรียน/ทรัพยากรตาม content inventory ด้านล่าง
- visual system ที่มีอยู่ใช้ Inter + Noto Sans Thai, light เป็นค่าเริ่มต้น และใช้สีเขียวอย่างจำกัดเพื่อเน้น

## INFERENCE

- ผู้เข้าชมหลักต้องการตอบคำถามเร็ว ๆ ว่า “เริ่มตรงไหน”, “มีบทเรียนใดบ้าง” และ “workshop สองวันนี้ทำอะไร”; ดังนั้นหน้าเดียวควรให้ทางเลือกเริ่มเรียนและแผน Day 1/Day 2 อยู่ก่อนเนื้อหารายละเอียด
- CTA ควรพาไปยังปลายทางที่มีอยู่จริงเท่านั้น และป้ายกำกับต้องบอกชนิด/สถานะของปลายทางอย่างตรงไปตรงมา โดยเฉพาะลิงก์บทความแบบทีละขั้นที่ยังอยู่ระหว่างสร้าง
- เนื่องจาก workshop เป็นเพียงส่วนหนึ่งของ module จึงควรนำเสนอเป็น “แผน workshop” ไม่ใช่ตารางสอนหรือคำอธิบายรายวิชาฉบับสมบูรณ์

## PROPOSAL

### เป้าหมายและ audience

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

**Audience หลัก:** ผู้เรียนที่ต้องการเริ่มทำเว็บไซต์ด้วย AI และต้องเลือกบทเรียน/ดูภาพรวม workshop ก่อนเข้าเนื้อหา

**Audience รอง:** ผู้สอนหรือผู้ทบทวนสื่อที่ต้องการตรวจรายการบทเรียนและปลายทางของหลักสูตรอย่างรวดเร็ว

### ข้อเสนอคุณค่า (value proposition)

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

### CTA และปลายทาง

| ระดับ | ป้าย CTA ที่เสนอ | ปลายทาง | หมายเหตุ |
| --- | --- | --- | --- |
| หลัก | `เริ่มจากบทเรียน 00` | `/learn/lessons/00-setup-and-web-basics/` | เริ่มต้นที่จุดเข้าเรียนชัดเจน |
| รอง | `ดูบทเรียนทั้งหมด` | `/` | ใช้เมื่อหน้าเว็บไซต์สื่อหลักสูตรแสดงรายการเรียน; ยืนยัน label ใน implementation อีกครั้ง |
| รอง | `ดูแผน AI Web Studio 2 วัน` | anchor `#workshop` | เลื่อนภายในหน้า ไม่อ้างว่าเป็นตารางรายวิชาเต็ม |
| รอง | `เปิดคู่มือการเรียน` | `/handbook/` | ปลายทางที่มีจริง |
| รอง | `ดูทรัพยากร` | `/resources/` | ปลายทางที่มีจริง |
| บริบท | `อ่านการสร้างทีละขั้น` | `/learn/labs/build-course-website-step-by-step/` | ติดป้าย “กำลังสร้าง” จนกว่าจะยืนยันว่าเผยแพร่แล้ว |
| เครดิต | `Rawinnipa` | `https://rawinsoft.com/` | ลิงก์ผู้ออกแบบ/ผู้จัดทำสื่อเท่านั้น ไม่อ้าง partnership หรือเจ้าของมหาวิทยาลัย |

### ลำดับ section ของหน้าเดียว

1. **Utility/header** — ชื่อรายวิชา, สถาบัน, ป้าย “เว็บไซต์ตัวอย่างประกอบการเรียน”, การข้ามไปเนื้อหาหลัก (skip link), สวิตช์ theme
2. **Hero** — ชื่อรายวิชาเต็ม, ชื่อ workshop, value proposition, CTA หลัก และ CTA ดู workshop
3. **ขอบเขต AI Web Studio** — ข้อความชัดเจนว่าเป็นส่วนหนึ่งของ module; 2 วัน × 4 ชั่วโมง, พัก 10 นาที/วัน, รวม 8 ชั่วโมง; ไม่แทนรายละเอียดรายวิชาฉบับมหาวิทยาลัย
4. **แผน workshop Day 1 / Day 2** — สรุปกิจกรรมตามระดับหัวข้อเท่านั้น; ไม่ประดิษฐ์ตารางเวลาเต็มหรือผลการประเมิน
5. **เส้นทางบทเรียน** — รายการ 00–10 พร้อมชื่อและลิงก์ที่มีจริง; search/filter แบบ optional: ทั้งหมด, Day 1, Day 2 โดยต้องประกาศเกณฑ์การจัดกลุ่มก่อนใช้
6. **Labs และแหล่งเรียนต่อ** — ลิงก์ labs ที่มีจริง, handbook และ resources; ลิงก์ “อ่านการสร้างทีละขั้น” พร้อมป้าย “กำลังสร้าง”
7. **ข้อจำกัด/ความโปร่งใส** — ย้ำสถานะเว็บไซต์ตัวอย่าง; ไม่มี login, รับสมัคร, LMS หรือข้อมูลทางวิชาการที่ยังไม่ยืนยัน
8. **Footer** — ชื่อรายวิชาและ PSU Phuket เป็นข้อความ, ลิงก์ Rawinnipa ตามขอบเขตเครดิต; ไม่มีตราหรือโลโก้ที่สร้างขึ้น

### Content inventory

| กลุ่ม | เนื้อหาที่แสดง | ปลายทาง |
| --- | --- | --- |
| รายวิชา | 977-121 Module: Website Design and Development; มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต / Prince of Songkla University, Phuket Campus | ไม่มีลิงก์สถาบันที่ยืนยัน |
| Workshop | AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI; 2 วัน × 4 ชั่วโมง = 8 ชั่วโมง; พัก 10 นาที/วัน | `#workshop` |
| บทเรียน 00 | เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร | `/learn/lessons/00-setup-and-web-basics/` |
| บทเรียน 01 | พื้นฐาน Vibe Coding สำหรับเว็บที่ส่งมอบได้จริง | `/learn/lessons/01-vibe-coding-foundations/` |
| บทเรียน 02 | Agent Skills, MCP และ Plugins โดยไม่ทำให้บริบทพัง | `/learn/lessons/02-agent-skills/` |
| บทเรียน 03 | Specs และ Prompts สำหรับเว็บบริษัท, Catalog และเว็บ animation | `/learn/lessons/03-specs-and-prompts/` |
| บทเรียน 04 | ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ | `/learn/lessons/04-design-and-assets/` |
| บทเรียน 05 | เว็บบริษัท: contact form ที่รันกับ demo นี้ได้จริง | `/learn/lessons/05-company-website/` |
| บทเรียน 06 | เว็บเช่าอุปกรณ์: availability และ capacity ของ demo ที่รันได้จริง | `/learn/lessons/06-rental-and-data/` |
| บทเรียน 07 | GSAP product story, storefront และ quote demo | `/learn/lessons/07-gsap-storefront/` |
| บทเรียน 08 | รันและตรวจ deployment path ของโปรเจกต์ Cloudflare นี้ | `/learn/lessons/08-cloudflare-deploy/` |
| บทเรียน 09 | Production Operations: security, observability, rollback และต้นทุน | `/learn/lessons/09-production-operations/` |
| บทเรียน 10 | สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้ | `/learn/lessons/10-capstone-and-handoff/` |
| Labs/ทรัพยากร | install AI tools; research-to-brand website; design tools and MCP; resources; handbook | `/learn/labs/install-ai-tools/`; `/learn/labs/research-to-brand-website/`; `/learn/labs/design-tools-and-mcp/`; `/resources/`; `/handbook/` |

### States

| State | ข้อเสนอพฤติกรรม/ข้อความ |
| --- | --- |
| Default | แสดง hero, CTA, workshop summary และรายการบทเรียนทั้งหมด |
| Light (default) | พื้น `#F7F7F7`, ข้อความ `#0A0A0A`, accent `#3EDC81` พร้อมข้อความเข้ม, ข้อความเขียวบนพื้นอ่อน `#17653F` |
| Dark | canvas `#0A0A0A`, surface `#171717`, ข้อความ `#F7F7F7`; รักษา contrast และไม่ใช้เขียวเป็นข้อความหลักบนพื้นมืดหากยังไม่ตรวจ contrast |
| Theme preference | ใช้ light เป็น default; หากมีสวิตช์ ต้องมองเห็นสถานะและทำงานด้วยคีย์บอร์ด |
| Lesson filter/search (optional) | แสดงผล “ไม่พบบทเรียนที่ตรงกัน” พร้อมปุ่ม/ลิงก์คืนค่า; filter Day 1/Day 2 ใช้ได้ต่อเมื่อเจ้าของยืนยัน mapping |
| CTA pending | `อ่านการสร้างทีละขั้น` มีป้าย “กำลังสร้าง” และไม่อ้างว่าอ่านได้แล้ว |
| Link failure/unknown | ไม่สร้างหน้า 404 หรือ loading simulation; ใช้เฉพาะปลายทางที่ S5 ระบุ |
| Print | พื้นกระดาษขาว, ข้อความอ่านได้, ไม่พึ่งสีอย่างเดียวเพื่อสื่อความหมาย |

### Responsive

- **Mobile ก่อน:** หนึ่งคอลัมน์, CTA กว้างแตะง่าย, nav ไม่บังคับเลื่อนแนวนอน, lesson cards เรียงแนวตั้ง
- **Tablet:** hero และ workshop สามารถจัดสองคอลัมน์เมื่อยังเหลือพื้นที่อ่านง่าย; filters อยู่ก่อนรายการผลลัพธ์
- **Desktop:** ใช้ความกว้างข้อความจำกัดเพื่อการอ่าน, lesson grid หลายคอลัมน์ตามพื้นที่, header ยังเข้าถึง CTA หลักได้
- ทุกขนาด: ไม่ซ่อนเนื้อหาสำคัญเพียงเพราะ viewport, รองรับ text zoom/reflow, และไม่ยึดความหมายด้วย hover เพียงอย่างเดียว

### Accessibility acceptance checks

- [ ] ใช้ semantic landmarks (`header`, `nav`, `main`, `section`, `footer`) และลำดับ heading ไม่ข้ามระดับ
- [ ] มี skip link; ทุก CTA/ลิงก์เข้าถึงด้วยคีย์บอร์ด และ focus ชัดเจน
- [ ] สี light/dark และทุกสถานะ focus/hover/selected ผ่าน contrast ที่เหมาะสม; สีเขียวไม่ใช่ตัวบอกความหมายเพียงอย่างเดียว
- [ ] สวิตช์ theme และ filter/search (หากสร้าง) มี accessible name, state และประกาศการเปลี่ยนแปลงผลลัพธ์อย่างเหมาะสม
- [ ] ข้อความไทยใช้ Noto Sans Thai และข้อความ Latin ใช้ Inter จาก font ในระบบ; ไม่มี external font
- [ ] ขนาดเป้าหมายสัมผัสเพียงพอ, หน้า reflow ได้ที่ความกว้างแคบ/zoom, และไม่มี horizontal overflow โดยไม่จำเป็น
- [ ] ไม่มีภาพที่ต้องพึ่งพาเพื่อเข้าใจเนื้อหา; ถ้ามี SVG ตกแต่งต้องซ่อนจาก assistive technology
- [ ] โครงสร้าง print เป็นพื้นขาวและยังอ่านลิงก์/ป้าย “กำลังสร้าง” ได้

## ทางเลือกภาพ (ไม่สร้าง raster/ตรามหาวิทยาลัย)

### ทางเลือก A — Type-led learning map

ใช้ typography เป็นภาพหลัก: หมายเลขบทเรียน 00–10 ขนาดใหญ่, เส้นทาง/จุดสถานะด้วย CSS หรือ SVG ธรรมดา, และ chip “Day 1/Day 2”. ภาพสื่อการเดินทางผ่านเนื้อหาโดยไม่ต้องใช้รูปถ่ายหรือสินทรัพย์ใหม่; ใช้ green เฉพาะจุดเริ่มต้น, CTA และสถานะที่ได้รับการยืนยัน.

### ทางเลือก B — Editorial workshop cards

ใช้การ์ดขาว/ผิว dark ที่มีตัวเลข “Day 1”, “Day 2” และ glyph จาก HTML/SVG ธรรมดา (เช่น cursor, bracket, check) พร้อมภาพพิมพ์ขนาดใหญ่. ให้บรรยากาศ workshop ชัด แต่ต้องระวังไม่ทำให้ผู้ใช้เข้าใจว่าบัตรเหล่านี้คือกำหนดการรายวิชาทางการ.

### Draft ที่เลือก — ทางเลือก A

เลือก **Type-led learning map** เพราะสอดคล้องกับแบรนด์เดิมที่เรียบ ใช้สีเขียวจำกัด และให้บทเรียนจริงเป็นศูนย์กลาง. ลดความเสี่ยงการสร้างภาพ/ตรามหาวิทยาลัยหรือการใส่บริบท workshop เกินข้อเท็จจริง. จะใช้เฉพาะข้อความ, HTML และ SVG ธรรมดาตามสินทรัพย์ที่อนุญาต.

## GAP — ต้องถามเจ้าของก่อน implementation

1. ต้องการให้ชื่อไทยของรายวิชามีหรือไม่? ปัจจุบันยืนยันเพียงชื่อ `977-121 Module: Website Design and Development`.
2. Mapping ที่ได้รับอนุมัติของบทเรียนใดอยู่ Day 1 และ Day 2 คืออะไร? จนกว่าจะยืนยัน ต้องไม่เปิด filter Day 1/Day 2 หรือใส่ป้ายรายบท.
3. CTA `ดูบทเรียนทั้งหมด` ควรชี้ไปหน้าใด/anchor ใด? S5 ยืนยันเพียง `/` เป็นเว็บไซต์สื่อหลักสูตร ไม่ได้ยืนยันส่วนรายการบทเรียน.
4. ปลายทาง `/learn/labs/build-course-website-step-by-step/` เผยแพร่เมื่อใด? ก่อนนั้นต้องคงป้าย “กำลังสร้าง” หรือซ่อน CTA.
5. อนุมัติข้อความ disclaimer ว่า “เว็บไซต์ตัวอย่างประกอบการเรียน ไม่ใช่ระบบมหาวิทยาลัยอย่างเป็นทางการ” หรือมีถ้อยคำที่เจ้าของกำหนดหรือไม่?
6. ผู้ใช้ต้องการ theme toggle จริงหรือเพียงรองรับ system preference? ข้อกำหนด design system ระบุ light default และ dark palette แต่ยังไม่ยืนยัน interaction.
7. ยืนยันว่าต้องการแสดงลิงก์ Rawinnipa ใน footer หรือไม่; หากแสดงให้ใช้เพียงเครดิตผู้ออกแบบ/ผู้จัดทำสื่อ.
8. ผู้สอน หน่วยกิต ภาคเรียน เกณฑ์คะแนน ช่องทางสมัคร และ LMS จะได้รับอนุมัติให้แสดงหรือไม่? ถ้าไม่ ต้องคงไม่แสดงทั้งหมด.


EXIT 0

FILE CHANGES
[
  {
    "path": "<workspace>/index.html",
    "kind": "add"
  }
]

CODEX MESSAGE
สร้างหน้าเรียบร้อยแล้ว โดย CTA หลักยืนยันจาก `inputs.md` ว่าชี้ไปบทเรียน 00 จริง และรายการทั้ง 11 บทถูกจัดตาม Day 1/Day 2 โดยไม่ผูกเป็นตารางสอนเต็ม. กำลังตรวจจำนวนบท ลิงก์ และข้อห้ามของหน้า.

EXECUTED COMMAND
/bin/bash -lc "rg -n '<(main|header|nav|footer|article|form|button|script|style)\\b|data-lesson|data-day=|/learn/lessons/|rawinsoft\\.com|tabindex=\"-1\"|#lessons' index.html && git status --short"
OUTPUT
12:    <header>
16:      <nav aria-label="เมนูหลัก">
18:        <a href="#lessons">บทเรียน</a>
25:    <main id="main-content" tabindex="-1">
32:          <a href="/learn/lessons/00-setup-and-web-basics/">เริ่มจากบทเรียน 00</a>
33:          <a href="#lessons">ดูบทเรียนทั้งหมด</a>
68:          <article data-lesson data-day="day1">
71:            <a href="/learn/lessons/00-setup-and-web-basics/">อ่านบทเรียน 00</a>
73:          <article data-lesson data-day="day1">
76:            <a href="/learn/lessons/01-vibe-coding-foundations/">อ่านบทเรียน 01</a>
78:          <article data-lesson data-day="day1">
81:            <a href="/learn/lessons/02-agent-skills/">อ่านบทเรียน 02</a>
83:          <article data-lesson data-day="day1">
86:            <a href="/learn/lessons/03-specs-and-prompts/">อ่านบทเรียน 03</a>
88:          <article data-lesson data-day="day1">
91:            <a href="/learn/lessons/04-design-and-assets/">อ่านบทเรียน 04</a>
93:          <article data-lesson data-day="day1">
96:            <a href="/learn/lessons/05-company-website/">อ่านบทเรียน 05</a>
102:          <article data-lesson data-day="day2">
105:            <a href="/learn/lessons/06-rental-and-data/">อ่านบทเรียน 06</a>
107:          <article data-lesson data-day="day2">
110:            <a href="/learn/lessons/07-gsap-storefront/">อ่านบทเรียน 07</a>
112:          <article data-lesson data-day="day2">
115:            <a href="/learn/lessons/08-cloudflare-deploy/">อ่านบทเรียน 08</a>
117:          <article data-lesson data-day="day2">
120:            <a href="/learn/lessons/09-production-operations/">อ่านบทเรียน 09</a>
122:          <article data-lesson data-day="day2">
125:            <a href="/learn/lessons/10-capstone-and-handoff/">อ่านบทเรียน 10</a>
143:    <footer>
145:      <p>สื่อออกแบบและจัดทำโดย <a href="https://rawinsoft.com/">Rawinnipa</a></p>
?? ../../../.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

EXIT 0

EXECUTED COMMAND
/bin/bash -lc "node -e \"const fs=require('fs'); const h=fs.readFileSync('index.html','utf8'); const required=['<a href=\\\"#main-content\\\">','<main id=\\\"main-content\\\" tabindex=\\\"-1\\\">','<header>','<nav ','<footer>','href=\\\"#lessons\\\"','href=\\\"/handbook/\\\"','href=\\\"/resources/\\\"','href=\\\"https://rawinsoft.com/\\\"']; for (const x of required) if ("'!h.includes(x)) throw new Error('"'Missing '+x); const lessons=[...h.matchAll(/<article data-lesson data-day=\\\"(day[12])\\\">/g)].map(m=>m[1]); if (lessons.length"'!==11 || lessons.filter(x=>x==='"'day1').length"'!==6 || lessons.filter(x=>x==='"'day2').length"'!==5) throw new Error('"'Unexpected lesson grouping'); if (/<(?:script|style|form|button)\\\\b/i.test(h)) throw new Error('Disallowed interactive or styling element'); console.log('Validated: 11 lesson articles (6 day1, 5 day2); semantic landmarks and required links present; no CSS, JS, forms, or buttons.');\""
OUTPUT
Validated: 11 lesson articles (6 day1, 5 day2); semantic landmarks and required links present; no CSS, JS, forms, or buttons.

EXIT 0

CODEX MESSAGE
สร้าง [index.html](<workspace>/index.html) แล้ว

มี semantic landmarks, skip link, CTA, แผน workshop 2 วัน, บทเรียนครบ 11 บทพร้อม `data-lesson`/`data-day`, แหล่งเรียนต่อ และเครดิต Rawinnipa

ตรวจแล้ว: Day 1 6 บท, Day 2 5 บท, ไม่มี CSS/JS, ฟอร์ม, search หรือ theme button

ยังไม่ทำ: CSS, JavaScript interaction และการรัน server ตามขอบเขตที่กำหนด.

FINAL RESPONSE
สร้าง [index.html](<workspace>/index.html) แล้ว

มี semantic landmarks, skip link, CTA, แผน workshop 2 วัน, บทเรียนครบ 11 บทพร้อม `data-lesson`/`data-day`, แหล่งเรียนต่อ และเครดิต Rawinnipa

ตรวจแล้ว: Day 1 6 บท, Day 2 5 บท, ไม่มี CSS/JS, ฟอร์ม, search หรือ theme button

ยังไม่ทำ: CSS, JavaScript interaction และการรัน server ตามขอบเขตที่กำหนด.
