Lab — RW Web: Research → Brandkit → Website → Cloudflare

Lab นี้ฝึกใช้ skill 4 ตัวเป็น pipeline สำหรับเปลี่ยนข้อมูลส่วนตัวหรือข้อมูลบริษัทให้เป็นเว็บไซต์ที่ตรวจสอบย้อนกลับได้ ตั้งแต่ evidence, brief, brandkit, เนื้อหาและหน้าเว็บจริง ไปจนถึง Cloudflare และ custom domain ที่ได้รับอนุญาต ใช้เวลาประมาณ 120–180 นาทีสำหรับ self-study และไม่เพิ่มเวลา workshop 2 วัน × 4 ชั่วโมง รวม 8 ชั่วโมง ของ 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

ทำเส้นทาง local ให้จบก่อน ผู้เรียนที่มีบัญชีและ hostname สำหรับฝึกจึงทำช่วง deploy จริง ผู้ที่ไม่มี credential ส่ง deployment preflight และ recovery plan แทนได้โดยไม่ต้องยืม token ของผู้อื่น

ผลลัพธ์การเรียนรู้

เมื่อจบ Lab ผู้เรียนจะสามารถ:

• แยกข้อมูลเป็น FACT, INFERENCE, PROPOSAL และ GAP โดยไม่แต่งข้อเท็จจริงธุรกิจ
• สร้าง brief, brandkit, design tokens, asset ledger และ prompt ภาพจากหลักฐาน
• เปลี่ยน brandkit เป็น sitemap, copy และ responsive website ที่ใช้งานได้จริง
• ใช้ frontend-design กับ ui-ux-pro-max เพื่อกำหนดทิศทางภาพและ UX ที่เหมาะกับโจทย์
• ใช้ built-in imagegen ใน Codex สำหรับ hero/key visual เมื่อเหมาะสม และบันทึก provenance ตามจริง
• แยกภาพที่สร้างด้วย AI ออกจาก screenshot ที่ capture จาก browser จริง
• ตรวจ build บนมือถือ, desktop, keyboard และ reduced motion ก่อนเผยแพร่
• ทำ Cloudflare preflight, deploy และผูก exact hostname โดยไม่เขียนทับเว็บไซต์อื่น

Pipeline และไฟล์ส่งต่อ

เปิดแผนภาพ RW Web pipeline ขนาดเต็ม พร้อม prompt และแหล่งข้อมูล

ไฟล์วางแผนและหลักฐานอยู่ใต้ web-plan/ ซึ่งไม่ใช่ public asset directory โดยอัตโนมัติ Skill ไม่เพิ่ม permission ให้ agent และสถานะใน JSON ไม่ใช่การอนุญาตให้ deploy

เวลาแนะนำ

เส้นทางแยกใช้ขั้น 2–4 ส่วน one-shot ใช้ขั้น 5 แทน ขั้น 2–4 ไม่ต้องทำทั้งสองทางในเวลาหลัก เลือกข้ามการสร้างภาพหรือ deploy จริงได้ตามเครื่องมือและสิทธิ์ เวลารวมจึงอยู่ระหว่าง 120–180 นาที หากใช้ artifact ที่ตรวจแล้วเพื่อสาธิต resume/one-shot ซ้ำแบบสั้น ให้เผื่อเวลาเพิ่มอีก 15–25 นาที; การสร้างใหม่ทั้งชุดต้องใช้เวลาตามแถว one-shot

สิ่งที่ต้องเตรียม

• Codex และ Python 3.10 ขึ้นไป
• repository ฝึกที่ไม่มีข้อมูลลับ พร้อม Node/npm หรือ stack ที่เว็บไซต์นั้นใช้
• ชุด RW Web skills
• frontend-design และ ui-ux-pro-max ตาม dependency setup
• browser tooling สำหรับ capture และตรวจ interaction หากต้องการ QA pass
• Wrangler กับบัญชี Cloudflare ของผู้เรียนเฉพาะผู้ทำช่วง deploy อ่าน คู่มือ login/API token ก่อน

ไม่ต้องมี OpenAI API key แยกเมื่อใช้ built-in image generation ที่ Codex เปิดให้ใช้อยู่แล้ว หากเครื่องไม่มี image tool ให้เก็บ prompt และบันทึก unavailable โดยไม่อ้างว่าสร้างภาพสำเร็จ

ตัวอย่างที่ใช้ใน Lab

ใช้ Harbor Flow Studio ซึ่งเป็นบริษัทวางแผนดูแลระบบน้ำในบ้านแบบสมมติ ตัวอย่างมีเฉพาะข้อมูลที่เจ้าของโจทย์ให้ เช่น บริการ review ระบบน้ำ วางแผนเก็บน้ำฝน และวางแผนบำรุงรักษา ไม่มีราคา รางวัล ใบรับรอง รีวิวลูกค้า หรือข้อมูลจดทะเบียนให้แต่งเพิ่ม

เปิดเว็บไซต์ตัวอย่าง และ อ่าน README ของ worked example

ดาวน์โหลด source พร้อม handoff และ QA ของตัวอย่าง รวม project.json, evidence.json, assets.json, build.json, qa.json และภาพที่อ้างถึงครบ แตก ZIP แล้วใช้ตัวตรวจ research/build กับโฟลเดอร์ harbor-flow-example/ ได้ อ่าน หมายเหตุการรันทดสอบซ้ำ ก่อนใช้ paths จากบันทึกเดิม

ภาพสองภาพนี้เป็น capture จาก build จริงที่เปิดผ่าน file:// ไม่ใช่หน้าจอ Codex Desktop และไม่ใช่หลักฐานว่าเว็บไซต์ถูก deploy ไป Cloudflare ตัวอย่างนี้ใช้ภาพประกอบจาก CSS/HTML และไม่ได้อ้างว่าใช้ image model สร้าง key visual

profile ต้นฉบับของ worked example กำหนด ไม่สร้างภาพและไม่ deploy เพื่อทดสอบเส้นทาง local อย่างตรงไปตรงมา ส่วน prompt ใน Lab นี้เป็น ตัวอย่างการสอนที่เขียนเพิ่มภายหลัง ไม่ใช่ transcript ของรอบที่สร้าง Harbor Flow การทดลอง GPT Image และ Cloudflare เป็น extension สำหรับ workspace/สิทธิ์ของผู้เรียนเอง

ขั้นที่ 1 — ตรวจและติดตั้ง skill ทั้ง 4 (15–20 นาที)

อ่าน README ของชุด skill และเปิด SKILL.md ของทั้ง 4 ตัวก่อนติดตั้ง ตรวจว่า package มีตัวติดตั้ง, contract และ scripts อะไรบ้าง ตัวติดตั้งไม่ควร login, อ่าน secret, deploy หรือแก้ DNS

จาก source repository ของหลักสูตร ติดตั้งแบบ project scope ใน workspace ฝึก:

mkdir -p practice/rw-web-lab
unzip artifacts/rw-web-skills.zip -d practice/rw-web-lab/package
mkdir -p practice/rw-web-lab/site/inputs
cp public/labs/rw-web-example/inputs/company-profile.md \
  practice/rw-web-lab/site/inputs/company-profile.md
python3 practice/rw-web-lab/package/rw-web-skills/install.py \
  --dest practice/rw-web-lab/site/.agents/skills \
  --dry-run
python3 practice/rw-web-lab/package/rw-web-skills/install.py \
  --dest practice/rw-web-lab/site/.agents/skills

หากใช้ไฟล์ที่ดาวน์โหลดผ่าน browser ให้แทน path ZIP ด้วยตำแหน่งจริงของตน หลังติดตั้งให้เปิด session ใหม่ใน practice/rw-web-lab/site/ แล้วตรวจ /skills หรือ catalog ของ host ว่าพบ:

• rw-research-brandkit
• rw-build-website
• rw-deploy-cloudflare
• rw-web

หากชื่อเดิมมีเนื้อหาต่างกัน installer จะหยุดก่อนเขียนไฟล์ อย่าลบของเดิมทันที ให้เทียบ diff หรือใช้ project scope ใหม่ ส่วน dependency การออกแบบติดตั้งตาม คู่มือที่ตรวจ upstream/license แล้ว ไม่คัดลอกจากเครื่องผู้สอนโดยไม่รู้ที่มา

หลักฐานที่เก็บ: output ของ --dry-run, path ที่ติดตั้งจริง, รายชื่อ skill ใน catalog และสิ่งที่ตรวจจาก package โดยตัด username ที่ไม่จำเป็นออก

prompt ทุกชุดด้านล่างเป็น ตัวอย่างสำหรับการสอน ไม่ใช่ transcript ที่บันทึกจาก Codex รอบสร้าง worked example ผู้เรียนต้องเก็บ prompt และ output ของรอบตนเองแยกต่างหาก

ขั้นที่ 2 — สร้าง evidence และ brandkit (30–40 นาที)

วาง profile สมมติหรือข้อมูลที่ผู้เรียนมีสิทธิ์ใช้ไว้ใน inputs/ แล้วเริ่มด้วย prompt แยกช่วง:

$rw-research-brandkit
อ่านข้อมูลใน inputs/ เพื่อสร้างเว็บไซต์บริษัท Harbor Flow Studio ภาษาไทย
ข้อมูลเจ้าของระบุเพียงบริการ review ระบบน้ำในบ้าน การวางแผนระบบเก็บน้ำฝน
และการวางแผนบำรุงรักษา สีตั้งต้น Ink #142C38 และ Mist #F3F7F8
แยกทุก claim เป็น FACT, INFERENCE, PROPOSAL หรือ GAP
FACT ต้องมี source ID และ GAP ห้ามกลายเป็น public copy
สร้าง web-plan/evidence.json, brief.md, brand/brandkit.md, tokens.css,
assets.json และ visual-prompts.md ยังไม่สร้างเว็บและยังไม่ deploy

ตรวจ evidence.json ทีละประเภท:

สุ่มข้อความ factual อย่างน้อยสามจุดจาก brief/brandkit แล้วย้อนกลับไปหา source locator ตรวจ contact, ราคา, qualification, logo และชื่อกฎหมายเป็นพิเศษ หากหา source ไม่เจอให้เปลี่ยน label หรือเอาออกก่อนสร้างหน้า

ขั้นที่ 3 — เปลี่ยน brandkit เป็น sitemap, copy และเว็บจริง (35–50 นาที)

$rw-build-website
ใช้ handoff ใน web-plan/ สร้างเว็บไซต์ Harbor Flow Studio ที่ใช้งานได้จริง
อ่าน frontend-design และ ui-ux-pro-max ก่อนออกแบบ
เลือกจำนวนหน้าจากข้อมูลและงานของผู้ใช้ เขียน copy จริงพร้อม claim ID สำหรับ FACT
ใช้ brand tokens, semantic HTML, responsive layout และ CTA ที่มีปลายทางจริงจาก source
สร้าง production build แล้วตรวจ 320px, 390px, desktop, keyboard และ reduced motion
เก็บ site-map.json, content.md, build.json, qa.json และ browser screenshots
ยังไม่ deploy

ก่อนรับงาน ให้ตรวจว่า site-map.json ระบุ purpose, section copy, factual, rendered_in และ claim IDs ครบ ไม่ควรมีหน้า Services เพียงเพราะเว็บบริษัททั่วไปมีหน้า Services; หน้าและ section ต้องตอบงานจริงของผู้ใช้ UI controls, headings และ CTA ต้องเป็น HTML/components ที่อ่านและกดได้ ไม่ทำเป็นข้อความในรูปภาพ

ทางเลือก — สร้าง hero/key visual ด้วย GPT Image ผ่าน Codex

profile ต้นฉบับระบุว่าไม่สร้างภาพ ดังนั้น activity นี้เป็น scope ใหม่สำหรับการฝึก: ให้ผู้เรียนหรือผู้สอนอนุญาตชัดเจนว่า “สร้าง generated hero หนึ่งภาพสำหรับ workspace ฝึกนี้และยังไม่ deploy” ก่อนใช้ prompt ภาพ historical captures ของ Harbor Flow ที่ให้มากับคอร์สยังคงเป็นรอบเดิมที่ไม่มี generated image ใช้เมื่อภาพช่วยสื่อสารบริการและมีพื้นที่ใน composition ตาม layout ไม่ต้องสร้างภาพเพียงเพื่อเติมช่องว่าง:

$rw-build-website
อ่าน web-plan/brand/brandkit.md, tokens.css, assets.json และ visual-prompts.md
ใช้ built-in imagegen ของ Codex สร้าง key visual สำหรับ hero ของ Harbor Flow Studio
ถ้าเครื่องมือเปิดเผย model และรองรับ ให้ใช้ gpt-image-2; ถ้าไม่แสดงชื่อ model
ให้บันทึกเฉพาะชื่อเครื่องมือและสถานะที่เห็นจริง

สร้างภาพ editorial กึ่งนามธรรมของระบบน้ำในบ้านที่วางแผนอย่างเป็นระเบียบ
มุมกว้างแนวนอน 16:9 ตัวแบบหลักอยู่ด้านขวา เว้น text-safe area ด้านซ้าย 42%
วัสดุด้าน แสงธรรมชาติอ่อน สี Ink #142C38, Mist #F3F7F8 และ accent สีน้ำที่มาจาก tokens
บรรยากาศสงบ แม่นยำ และเชื่อถือได้ ไม่มีตัวอักษร โลโก้ ลายน้ำ บุคคลจริง
ใบรับรอง ราคา หรือ claim ที่ source ไม่ได้รองรับ
สร้างเวอร์ชันแนวตั้ง 4:5 ที่รักษาตัวแบบและทิศทางแสงเดียวกัน

เก็บ prompt/reference และไฟล์ต้นฉบับแยกจาก WebP/AVIF สำหรับเว็บ
อัปเดต assets.json ตาม contract ด้วย id/path/role/source/rights_status/publish
ให้ source ระบุ built-in imagegen ที่ใช้จริงและ rights_status เป็น generated
บันทึก prompt/reference และ model เฉพาะที่ tool รายงาน พร้อม alt text หรือ alt ว่างตามหน้าที่

ตรวจ crop ทั้ง desktop/mobile, รูปทรงที่ผิดปกติ, text-safe area, file size และความสัมพันธ์กับข้อความจริง เก็บต้นฉบับ local และสร้าง delivery variant สำหรับเว็บ ภาพสร้างด้วย AI คือ asset; หลังนำไปใช้แล้วต้อง capture หน้าเว็บใน browser แยกอีกชุดเพื่อพิสูจน์ layout

ขั้นที่ 4 — Build และ QA ด้วยหลักฐานปัจจุบัน (25–35 นาที)

รันคำสั่งของ repository จริง เช่น lint/typecheck/test/build ตาม package.json แล้วเปิด production build หรือ production-equivalent preview ใน browser เก็บหลักฐานอย่างน้อย:

• 320px หรือ 360px: ไม่มี horizontal overflow และ CTA/nav ใช้ได้
• 390px: ลำดับเนื้อหา ภาพ และ touch target ใช้ได้
• desktop: hierarchy, max-width, navigation และภาพ hero
• keyboard: focus มองเห็น ลำดับสมเหตุผล Escape/close ทำงานและไม่มี trap
• reduced motion: ambient motion หยุด แต่สถานะสำคัญยังเข้าใจได้
• theme ทุกโหมดที่ brief สัญญา รวม contrast และ asset
• CTA/route/form ที่อยู่ใน scope, console error และ failed network requests

ภาพเก่าจาก build ก่อนแก้ไขใช้ยืนยัน build ล่าสุดไม่ได้ หลังแก้ source/config ให้ rebuild, อัปเดต hash ใน build.json, rerun เฉพาะ QA ที่ได้รับผล และผูก qa.json.build_manifest_sha256 กับ bytes ของ manifest ล่าสุด

คำสั่งต่อไปนี้เริ่มจาก terminal ที่ root ของ source repository หลักสูตร ซึ่งมองเห็นทั้ง practice/ และ package ที่แตกแล้ว ส่วน Codex session สำหรับทำเว็บยังเปิดที่ practice/rw-web-lab/site/ เรียก structural checkerด้วย path แบบนี้:

python3 practice/rw-web-lab/package/rw-web-skills/skills/rw-web/scripts/check_handoff.py \
  research --project practice/rw-web-lab/site
python3 practice/rw-web-lab/package/rw-web-skills/skills/rw-web/scripts/check_handoff.py \
  build --project practice/rw-web-lab/site

Checker ตรวจรูปแบบและ hash ไม่ได้พิสูจน์ว่าเนื้อหาจริง, accessibility ครบ หรือ screenshot มาจาก build ล่าสุดแทนผู้เรียน ต้องอ่าน evidence ด้วย

ขั้นที่ 5 — ทางเลือกแทนขั้น 2–4: one-shot ใน workspace ใหม่

หากเลือกฝึก one-shot ให้ใช้ขั้นนี้แทนขั้น 2–4 แล้วตรวจ handoff ชุดเดียวกัน หากทำหลังเส้นทางแยกเพื่อเปรียบเทียบ ให้คิดเป็นเวลาเสริม 15–25 นาที ทดลองโจทย์เดียวแบบ local:

$rw-web
สร้างเว็บไซต์ส่วนตัวหรือเว็บไซต์บริษัทจากไฟล์ใน inputs/
ระบุตัวตนและแยก FACT/INFERENCE/PROPOSAL/GAP ก่อนใช้ข้อมูล
สร้าง brandkit, sitemap, copy, working website, production build และ browser QA
โจทย์รอบฝึกนี้อนุญาตให้สร้าง generated hero หนึ่งภาพและยังคง publication=local
ใช้ frontend-design กับ ui-ux-pro-max และใช้ built-in imagegen สำหรับ key visual
เมื่อภาพช่วยงาน โดยใช้ gpt-image-2 เฉพาะเมื่อเครื่องมือเปิดเผยว่ารองรับ
เก็บ prompt/provenance/alt และแยก generated asset จาก browser screenshot
รอบนี้ local เท่านั้น ยังไม่ deploy

หากผู้เรียนเลือกไม่สร้างภาพ ให้ตัดบรรทัดที่เปลี่ยน scope และบรรทัด imagegen ออก เพื่อรักษาข้อกำหนด no images ของ profile ต้นฉบับ

เปรียบเทียบ web-plan/ กับรอบเรียกแยกช่วง ตรวจว่า one-shot ไม่ข้าม evidence, content หรือ QA และไม่ได้เปลี่ยน publication: local เป็น deploy เอง การกลับมาสั่ง “ทำต่อ” ต้องตรวจ hashes/artifacts จริง ไม่เชื่อ status flag เพียงอย่างเดียว

ขั้นที่ 6 — Cloudflare และ exact authorized hostname (15–35 นาที)

ทำขั้นนี้ต่อเมื่อ build QA ผ่านและผู้เรียนมี account/hostname ที่ได้รับอนุญาต อ่าน คู่มือ Wrangler login/API token และ Lab deploy เว็บตัวอย่าง ก่อน ห้ามใส่ token ใน prompt, source, screenshot หรือ web-plan/

$rw-deploy-cloudflare
ตรวจ production build และ QA ล่าสุดของโปรเจกต์นี้
ใช้ Cloudflare account <ACCOUNT_LABEL_OR_ID> และ hostname <EXACT_AUTHORIZED_HOSTNAME>
ทำ read-only preflight: whoami, Worker/config/runtime, active zone, DNS,
custom-domain/routes ปัจจุบัน และตรวจว่า hostname ไม่ให้บริการเว็บไซต์อื่น
ถ้าว่างและสิทธิ์ครบ ให้ dry-run แล้ว deploy โดยรักษา runtime/bindings เดิม
ตรวจ HTTPS certificate, expected content และ navigation/contact flows ที่ URL จริง
เก็บ deploy.json และหลักฐานแยกสามชนิดโดยไม่บันทึก credential

แทน placeholder ด้วยชื่อที่ผู้สอนจัดให้หรือโดเมนของผู้เรียนเท่านั้น tw.rawinlab.com ใน README ของ package เป็นเพียงตัวอย่าง syntax ไม่ใช่เป้าหมายของ Lab และไม่ใช่สิทธิ์ให้แก้ DNS

ถ้า login/token ไม่พร้อม

หยุดก่อน external mutation แต่ทำ local build/QA และ release packet ต่อได้ บันทึก:

1. authentication path ที่ตั้งใจใช้: Wrangler OAuth หรือ API token
2. account/zone/hostname ที่ยังตรวจไม่ได้ โดยไม่เดา ID
3. permission ที่ operation ต้องใช้ตามคู่มือ
4. คำสั่ง read-only/dry-run ที่จะรันเมื่อ credential พร้อม
5. สถานะ blocked และ next action; ห้ามเขียน complete

ถ้า hostname ชนเว็บไซต์เดิม

อย่า overwrite Worker route, Custom Domain หรือ DNS record เดิม เก็บ read-only observation และ previous target ถ้าอ่านได้ จากนั้นเลือก hostname อื่นที่ได้รับอนุญาตหรือขอการตัดสินใจจากเจ้าของระบบ การซื้อโดเมน เปลี่ยน nameserver และย้ายเว็บไซต์เดิมอยู่นอก Lab นี้

ถ้า deploy สำเร็จแต่ DNS/TLS ยัง pending

ใช้สถานะ domain_pending, เก็บเวลาที่ตรวจและ retry plan อย่าอ้างว่าเสร็จจน exact hostname ผ่านทั้ง:

• certificate/HTTPS ถูกต้อง
• เนื้อหาเป็น build ที่คาดหวัง
• navigation/contact flows ที่ตกลงทำงาน

CLI success เพียงบรรทัดเดียวไม่พิสูจน์สามข้อนี้

งานส่งและเกณฑ์ประเมิน

ส่ง repository หรือ archive ที่ตัด credential ออก พร้อมบันทึกสั้นว่าทำแบบแยกช่วงหรือ one-shot:

เกณฑ์ผ่านที่แนะนำคือ 70/100 และไม่มี blocker ด้าน invented business claim, credential leak, asset ที่ไม่มีสิทธิ์ หรือการเขียนทับ hostname ของผู้อื่น ผู้ไม่ deploy จริงยังได้คะแนนเต็มหัวข้อสุดท้ายจาก preflight/recovery ที่ระบุหลักฐานและขอบเขตครบ

เช็กลิสต์ก่อนจบ

• skill ทั้ง 4 ถูกติดตั้งจาก package ที่ตรวจแล้วและพบใน catalog
• FACT ทุกข้อที่เผยแพร่มี source ID; GAP ไม่ถูกแต่งเติม
• brandkit, tokens, asset ledger และ visual prompts สอดคล้องกัน
• หน้าและ copy มาจาก user tasks/หลักฐาน ไม่ใช่ template ทั่วไป
• UI ใช้ frontend-design และ ui-ux-pro-max หรือบันทึก gap ตามจริง
• generated image มี prompt, reference, tool/model ที่รายงาน, original/delivery files, alt และ rights decision
• generated image ไม่ถูกเรียกว่าสcreenshot และ browser screenshot ไม่ถูกเรียกว่าภาพจาก Codex Desktop
• production build และ hash ตรงกับ QA ปัจจุบัน
• mobile, desktop, keyboard และ reduced motion ถูกตรวจจริงหรือ QA ระบุ partial
• deploy ใช้ account/hostname ที่ได้รับอนุญาตและไม่ชนเว็บเดิม
• completion บน custom domain มีหลักฐาน HTTPS, content และ flows ครบ

ใช้ prompt ฉบับคัดลอกได้ใน RW Web prompt library และอ่าน contract ที่ mirror มากับ package ที่ /labs/rw-web-skills/skills/rw-web/references/contracts.md