ACTUAL CODEX CLI RUN / STEP 03 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 --sandbox workspace-write --json --output-last-message 03-final.txt - < prompts/03-design.txt PROMPT SENT อ่าน inputs.md, scope.txt, brief.md และ index.html ปรับ index.html เท่าที่ต้องใช้ class และสร้าง style.css กับ design-notes.md ห้ามเปลี่ยนข้อมูลชื่อรายวิชา สถาบัน เส้นทางบทเรียน หรือแต่งข้อมูลวิชาการเพิ่ม ออกแบบหน้า course website ให้ชวนเรียน มีเนื้อหาอ่านง่าย ใช้หลักfrontend-design: heroบอกงานชัด เส้นทางการเรียนเป็นจุดเด่นหนึ่งแห่ง ลำดับจริงช่วยนำทาง ไม่ใช้heroภาพstock ยึดแบรนด์Rawinnipaของสื่อการสอนตามS3 ไม่อ้างเป็นPSUcorporatebrand. ใช้Inter + Noto Sans Thai localfontsจากS6; defaultlight แม้ระบบOSdark สร้าง CSS semantic tokens สำหรับsurface/text/muted/line/action/focus และ dark override html[data-theme="dark"] พร้อมprintlight ภาพรวม lightเป็นกระดาษoffwhite/textดำ มีgreenaccentที่CTAเดียว ส่วนcourseheroมีการจัดวางชื่อและpreviewเส้นทาง Brief→Build→Verify→Publish ที่เป็นHTML/CSS รองรับ320/390/1440px: ไม่ใช้fixedwidthจนล้น, หัวข้อไทยไม่ตัด, navwrap, cardsเรียง1columnบนมือถือ, focusvisible, ลิงก์ชัด, hitareaเหมาะสม, ไม่มีanimationที่จำเป็นต่อเนื้อหา stylelight/darkทั้งสองผ่านคู่สีข้อความพื้นหลัง; form/controls stylesเตรียมไว้ตามroleแต่ยังไม่เพิ่มJSในขั้นนี้ เก็บสิ่งที่เลือก/เหตุผล/evidenceID/ข้อจำกัดในdesign-notes.md สั้นๆ. ห้ามใช้remoteCDNใหม่ CODEX MESSAGE ขอบเขตยืนยันแล้ว: หน้านี้มีข้อมูลจริงครบอยู่แล้ว จึงจะคงข้อความและปลายทางเดิมทั้งหมดไว้; การเพิ่มเดียวคือแผนภาพข้อความใน hero (`Brief → Build → Verify → Publish`) ตามที่ระบุ ซึ่งเป็นองค์ประกอบการนำทาง ไม่ใช่ข้อมูลวิชาการใหม่. FILE CHANGES [ { "path": "/design-notes.md", "kind": "add" }, { "path": "/index.html", "kind": "update" }, { "path": "/style.css", "kind": "add" } ] EXECUTED COMMAND /bin/bash -lc "sed -n '1,280p' index.html node --check /dev/null rg -n 'https?://|@import|width:' index.html style.css git diff --check && git diff --stat && git diff -- index.html style.css design-notes.md" OUTPUT 977-121 Module: Website Design and Development | AI Web Studio

เว็บไซต์ตัวอย่างประกอบการเรียน

977-121 Module: Website Design and Development

มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

AI Web Studio

977-121 Module: Website Design and Development

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

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

เริ่มจากบทเรียน 00 ดูบทเรียนทั้งหมด

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

  1. Brief
  2. Build
  3. Verify
  4. 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

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

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

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

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

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

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

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

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

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

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

977-121 Module: Website Design and Development · มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

สื่อออกแบบและจัดทำโดย Rawinnipa

style.css:45: --page-width: 72rem; style.css:67: min-width: 0; style.css:89:.header-inner, .page-shell, .site-footer { width: min(100% - 2rem, var(--page-width)); margin-inline: auto; } style.css:101:h1 { max-width: 15ch; font-size: clamp(2.3rem, 7vw, 5.6rem); letter-spacing: -0.055em; } style.css:106:.hero-summary { max-width: 58ch; margin: 0.85rem 0 0; color: var(--muted); font-size: 1.08rem; } style.css:112:.learning-preview li::before { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); content: counter(route, decimal-leading-zero); counter-increment: route; font: 700 0.7rem/1 Inter, sans-serif; } style.css:116:.content-section > p, .goals-section li { max-width: 72ch; } style.css:121:.day-card, [data-lesson] { min-width: 0; padding: clamp(1.1rem, 3vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); } style.css:127:[data-lesson] a { width: fit-content; margin-top: auto; font-weight: 700; } style.css:135:input, textarea { width: 100%; padding: 0.6rem 0.8rem; } style.css:137:@media (max-width: 46rem) { style.css:140: h1 { max-width: none; } index.html:167:

สื่อออกแบบและจัดทำโดย Rawinnipa

EXIT 0 FILE CHANGES [ { "path": "/index.html", "kind": "update" }, { "path": "/style.css", "kind": "update" } ] CODEX MESSAGE งานออกแบบเสร็จในระดับไฟล์แล้ว: สี/ฟอนต์เป็น Rawinnipa ตาม S3/S6, ไม่โหลด CDN, และโครงสร้าง responsive ใช้ grid ที่ยุบเป็นคอลัมน์เดียว. ตอนนี้กำลังตรวจ syntax, ขอบเขตไฟล์ และจุดเข้าถึงก่อนสรุป. EXECUTED COMMAND /bin/bash -lc "git status --short git diff --check rg -n -- '--(surface|text|muted|line|action|focus):|html\\[data-theme=\"dark\"\\]|@media print|@font-face|@media \\(max-width' style.css rg -n 'style.css|skip-link|course-hero|learning-preview|lesson-grid|site-footer' index.html command -v tidy || true command -v chromium || command -v chromium-browser || true" 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 1:@font-face { 9:@font-face { 17:@font-face { 25:@font-face { 35: --surface: #f7f7f7; 37: --text: #0a0a0a; 38: --muted: #505050; 39: --line: #d0d0d0; 40: --action: #3edc81; 43: --focus: #17653f; 48:html[data-theme="dark"] { 50: --surface: #0a0a0a; 52: --text: #f7f7f7; 53: --muted: #c8c8c8; 54: --line: #555555; 55: --action: #3edc81; 58: --focus: #82efae; 135:@media (max-width: 46rem) { 142:@media print { 143: :root, html[data-theme="dark"] { color-scheme: light; --surface: #fff; --surface-raised: #fff; --text: #000; --muted: #333; --line: #888; --link: #000; } 8: 11: 31:
42:
86:
122:
165: