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

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

\n

977-121 Module: Website Design and Development

\n

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

\n
\n \n
\n
\n\n
\n
\n
\n

AI Web Studio

\n

977-121 Module: Website Design and Development

\n

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

\n

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

\n

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

\n
\n
\n

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

\n
    \n
  1. Brief
    2. \n
  2. Build
    3. \n
  3. Verify
    4. \n
  4. Publish
    5. \n
\n
\n
\n\n
\n

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

\n

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

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

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

\n
\n\n
\n

แผน AI Web Studio 2 วัน

\n

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

\n

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

\n
\n
\n

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

\n

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

\n
\n
\n

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

\n

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

\n
\n
\n
\n\n
\n

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

\n

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

\n\n
\n

Day 1: บท 00–05

\n
\n
\n

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

\n

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

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

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

\n

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

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

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

\n

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

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

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

\n

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

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

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

\n

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

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

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

\n

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

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

Day 2: บท 06–10

\n
\n
\n

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

\n

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

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

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

\n

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

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

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

\n

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

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

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

\n

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

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

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

\n

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

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

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

\n \n
\n
\n\n
\n

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

\n

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

\n
\n \n\nstyle.css:45: --page-width: 72rem;\nstyle.css:67: min-width: 0;\nstyle.css:89:.header-inner, .page-shell, .site-footer { width: min(100% - 2rem, var(--page-width)); margin-inline: auto; }\nstyle.css:101:h1 { max-width: 15ch; font-size: clamp(2.3rem, 7vw, 5.6rem); letter-spacing: -0.055em; }\nstyle.css:106:.hero-summary { max-width: 58ch; margin: 0.85rem 0 0; color: var(--muted); font-size: 1.08rem; }\nstyle.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; }\nstyle.css:116:.content-section > p, .goals-section li { max-width: 72ch; }\nstyle.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); }\nstyle.css:127:[data-lesson] a { width: fit-content; margin-top: auto; font-weight: 700; }\nstyle.css:135:input, textarea { width: 100%; padding: 0.6rem 0.8rem; }\nstyle.css:137:@media (max-width: 46rem) {\nstyle.css:140: h1 { max-width: none; }\nindex.html:167:

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

\n", "exitCode": 0 }, { "type": "file_change", "changes": [ { "path": "/index.html", "kind": "update" }, { "path": "/style.css", "kind": "update" } ] }, { "type": "agent_message", "text": "งานออกแบบเสร็จในระดับไฟล์แล้ว: สี/ฟอนต์เป็น Rawinnipa ตาม S3/S6, ไม่โหลด CDN, และโครงสร้าง responsive ใช้ grid ที่ยุบเป็นคอลัมน์เดียว. ตอนนี้กำลังตรวจ syntax, ขอบเขตไฟล์ และจุดเข้าถึงก่อนสรุป." }, { "type": "command_execution", "command": "/bin/bash -lc \"git status --short\ngit diff --check\nrg -n -- '--(surface|text|muted|line|action|focus):|html\\\\[data-theme=\\\"dark\\\"\\\\]|@media print|@font-face|@media \\\\(max-width' style.css\nrg -n 'style.css|skip-link|course-hero|learning-preview|lesson-grid|site-footer' index.html\ncommand -v tidy || true\ncommand -v chromium || command -v chromium-browser || true\"", "output": "?? ../../../.diagram-design\n?? ../../../.gitattributes\n?? ../../../.gitignore\n?? ../../../CLAUDE.md\n?? ../../../DESIGN.md\n?? ../../../INFRASTRUCTURE.md\n?? ../../../PROJECT_PLAN.md\n?? ../../../README.md\n?? ../../\n?? ../../../design-system/\n?? ../../../diagrams/\n?? ../../../docs/\n?? ../../../examples/\n?? ../../../migrations/\n?? ../../../package-lock.json\n?? ../../../package.json\n?? ../../../playwright.config.mjs\n?? ../../../public/\n?? ../../../scripts/\n?? ../../../src/\n?? ../../../tests/\n?? ../../../training-skills/\n?? ../../../tsconfig.json\n?? ../../../worker-configuration.d.ts\n?? ../../../wrangler.jsonc\n1:@font-face {\n9:@font-face {\n17:@font-face {\n25:@font-face {\n35: --surface: #f7f7f7;\n37: --text: #0a0a0a;\n38: --muted: #505050;\n39: --line: #d0d0d0;\n40: --action: #3edc81;\n43: --focus: #17653f;\n48:html[data-theme=\"dark\"] {\n50: --surface: #0a0a0a;\n52: --text: #f7f7f7;\n53: --muted: #c8c8c8;\n54: --line: #555555;\n55: --action: #3edc81;\n58: --focus: #82efae;\n135:@media (max-width: 46rem) {\n142:@media print {\n143: :root, html[data-theme=\"dark\"] { color-scheme: light; --surface: #fff; --surface-raised: #fff; --text: #000; --muted: #333; --line: #888; --link: #000; }\n8: \n11: ข้ามไปยังเนื้อหาหลัก\n31:
\n42:
\n86:
\n122:
\n165: