ทดลองติดตั้งและใช้ skill กับเว็บตัวอย่าง

เป้าหมาย

เห็นความต่างระหว่าง prompt รายครั้งกับ workflow ที่เรียกซ้ำได้ โดยใช้ skill website-evidence-review ซึ่งอยู่ใน source code ชุดอบรม ไม่มี script ที่แอบทำ network request หรือ deploy อยู่ใน skill นี้ ตรวจเนื้อหาด้วยตนเองก่อนคัดลอกไปยัง directory ที่ coding tool โหลดอัตโนมัติ

เปิดแผนภาพ agent context แบบเต็มหน้า แล้วชี้ให้ผู้เรียนเห็นว่า skill เพิ่มขั้นตอนเฉพาะงาน แต่ไม่ได้เพิ่ม permission หรือพิสูจน์ runtime โดยตัวมันเอง

ก่อนติดตั้ง

เปิด training-skills/website-evidence-review/SKILL.md จาก source หรือ ดาวน์โหลดไฟล์ตัวอย่าง อ่าน frontmatter และ body ให้ครบ จดชื่อ workflow, เงื่อนไขใช้, สิ่งที่จะอ่าน, ชนิดของ test และเงื่อนไขจบงาน

สำหรับ Codex ให้ตรวจเอกสาร Agent Skills ของรุ่นที่ใช้ก่อนเลือก install directory ตัวอย่าง project-local ในรุ่นที่รองรับ .agents/skills/:

mkdir -p .agents/skills/website-evidence-review
cp training-skills/website-evidence-review/SKILL.md .agents/skills/website-evidence-review/SKILL.md

หากมี skill ชื่อเดียวกันอยู่แล้ว ให้เทียบเนื้อหาก่อนแทนไฟล์ เมื่อ coding tool ไม่พบ skill ให้ตรวจ supported path และ reload session ตามคู่มือของ tool อย่าแก้ด้วยการคัดลอกไปทุก directory โดยไม่รู้ว่า host โหลดจากไหน สำหรับ Claude Code รูปแบบ invocation และ path ให้ดู Claude Code Skills โดยตรง

การทดลอง A: ใช้ prompt เดิม

ตรวจเว็บบริษัทของฉันว่าพร้อมใช้งานไหม

จดว่าคำตอบมีหลักฐานจริงหรือเพียงรายการคำแนะนำทั่วไป อย่าประเมินจากความยาวคำตอบ

การทดลอง B: ใช้ skill พร้อมโจทย์และขอบเขต

$website-evidence-review
ตรวจ examples/company/ ตาม brief ในบทเรียน 05
เว็บ local เปิดอยู่ที่ http://127.0.0.1:3320
อ่าน source และทดสอบ form ด้วยข้อมูลสมมติเท่านั้น
ระบุ file/route, trigger, expected, observed และหลักฐานแต่ละข้อ
ยังไม่แก้โค้ดและยังไม่ deploy

เครื่องมือที่ไม่ได้ใช้รูปแบบ $name ให้เลือก skill จากเมนูหรือใช้ invocation ของ host นั้น ส่วน core SKILL.md ใช้มาตรฐานเดียวกันได้บางส่วน แต่ permissions และคำสั่งไม่ได้พกพาอัตโนมัติ Agent Skills specification

ตรวจว่า skill ช่วยจริงหรือไม่

ให้ผู้เรียนเปรียบเทียบว่า agent อ่านไฟล์ที่ใช้จริงหรือไม่ แยกผล static review กับ runtime verification หรือไม่ และรายงานสิ่งที่ตรวจไม่ได้ตรงไปตรงมาหรือไม่ หากไม่มี browser agent ไม่ควรกล่าวว่า “ทดสอบมือถือผ่าน” แม้สามารถอ่าน media query ได้

ลองเปลี่ยนโจทย์เป็นหน้าเช่า แล้วดูว่า review ครอบคลุม stale availability และการส่งพร้อมกันหรือไม่ เมื่อเปลี่ยนเป็น product ให้ดูว่าตรวจ reduced motion และแหล่งราคาฝั่ง server หรือไม่ การโหลด branch ที่เกี่ยวข้องเป็นตัวอย่าง progressive disclosure ระดับ workflow

การต่อยอด

สร้าง skill ของตนเองหนึ่งตัวจากขั้นตอนที่ต้องทำซ้ำจริง เช่น ตรวจภาพก่อน publish หรือเขียน acceptance criteria ชื่อควรสื่อหน้าที่ แยก reference ยาวเฉพาะที่จำเป็น ให้เพื่อนใช้กับโจทย์ใหม่โดยไม่บอกคำตอบที่คาดหวัง แล้วปรับเฉพาะส่วนที่มีหลักฐานว่าเข้าใจผิด Skill ที่ดีต้องช่วยตัดสินใจ ไม่ใช่เพียงรวบรวมคำสั่ง “ทำให้ดีที่สุด”

สำหรับ workflow ที่ผลลัพธ์เป็นแผนภาพ ให้เรียน Lab Diagram Design เป็น full lab ศึกษาต่อประมาณ 2 ชั่วโมง บทเสริมนี้ใช้ skill ที่ติดตั้งใน Codex global directory ~/.codex/skills/diagram-design/ และอยู่นอก workshop 2 วัน / 8 ชั่วโมง

Prompt library: RW Web

ใช้ prompt ชุดนี้คู่กับ Lab RW Web หลังติดตั้ง skill ทั้ง 4 จาก /downloads/rw-web-skills.zip แล้ว แทนค่าระหว่าง <...> ด้วย path และข้อมูลจริงของงาน อย่าใส่ API token, password หรือข้อมูลส่วนบุคคลลงใน prompt

R1 — Research และสร้าง brandkit

$rw-research-brandkit
อ่านข้อมูลใน <INPUT_PATHS> และเว็บไซต์ทางการ <OFFICIAL_URLS> เพื่อเตรียมเว็บไซต์ <ชนิดเว็บไซต์>
ระบุตัวตนขององค์กรให้แน่นอนก่อนใช้ข้อมูลจากเว็บ แยกทุก claim เป็น FACT, INFERENCE, PROPOSAL หรือ GAP
FACT ต้องย้อนกลับไปหา source ได้; GAP ห้ามกลายเป็นข้อความประชาสัมพันธ์
สร้าง web-plan/evidence.json, brief.md, brand/brandkit.md, tokens.css, assets.json และ visual-prompts.md
ยังไม่สร้างเว็บและยังไม่ deploy

R2 — วางเนื้อหาและสร้างเว็บจริง

$rw-build-website
ใช้ handoff ใน web-plan/ สร้างเว็บไซต์ที่ใช้งานได้จริงสำหรับ <AUDIENCE_AND_GOAL>
อ่าน frontend-design และ ui-ux-pro-max ที่ติดตั้งก่อนออกแบบ
กำหนด sitemap จากงานของผู้ใช้ เขียน copy จริงโดยอ้าง claim ID สำหรับข้อเท็จจริง
สร้าง responsive production build และทดสอบ 320/390px, desktop, keyboard, reduced motion และทุก theme ที่สัญญาไว้
บันทึก site-map.json, content.md, build.json, qa.json และภาพ browser จริง
ยังไม่ deploy

R3 — สร้าง hero/key visual ด้วย built-in image generation

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

ภาพ: <SUBJECT_AND_ACTION>
composition: <DESKTOP_CROP> พร้อม text-safe area ที่ <LEFT_OR_RIGHT>
lighting/material: <BRAND_DIRECTION>
palette: <TOKENS_OR_HEX_FROM_BRANDKIT>
negative constraints: ไม่มีตัวอักษร โลโก้ ลายน้ำ หน้าตาคนจริง หรือทรัพย์สินที่ไม่มีสิทธิ์
สร้างต้นฉบับความละเอียดสูงและเวอร์ชันแนวตั้ง 4:5 ที่รักษาตัวแบบเดียวกัน

เก็บ prompt/reference, ชื่อไฟล์ต้นฉบับ, delivery WebP/AVIF, alt หรือ alt ว่างตามหน้าที่ และสถานะสิทธิ์ใน assets.json
ห้ามทำข้อความหัวเรื่องหรือ CTA เป็นส่วนหนึ่งของ raster; ข้อความและปุ่มต้องเป็น HTML ที่ใช้งานได้
แยกภาพที่สร้างด้วย AI ออกจาก screenshot ที่จับจาก browser หลังนำภาพไปใช้

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

R4 — QA ก่อนเผยแพร่

$rw-build-website
ตรวจ build ปัจจุบันจากไฟล์จริง ไม่ใช้ภาพหรือ qa.json เก่า
เทียบข้อความทุกหน้ากับ site-map.json และ evidence.json
เปิด production build ใน browser แล้วตรวจ viewport 320px, 390px และ desktop; keyboard journey; reduced motion; theme; CTA; console และ failed requests
แก้ defect ที่พบ จากนั้น rebuild, recapture และผูก qa.json กับ SHA-256 ของ build.json ฉบับล่าสุด
รายงานสิ่งที่ตรวจผ่าน สิ่งที่ไม่ได้ตรวจ และ path ของหลักฐาน

R5 — เตรียมและ deploy Cloudflare ไปยังโดเมนที่ได้รับอนุญาต

$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 และ adapter ปัจจุบัน
ตรวจ HTTPS certificate, expected content และ agreed navigation/contact flows ที่ hostname จริง แยกเป็นหลักฐานสามชนิด
อย่าแสดง token และอย่าแทนที่เว็บไซต์อื่น เปลี่ยน nameserver ซื้อโดเมน หรือสร้าง DNS ซ้ำ

ผู้เรียนต้องแทน <EXACT_AUTHORIZED_HOSTNAME> ด้วยโดเมนของตนเองที่ผู้สอนอนุญาต ตัวอย่าง tw.rawinlab.com ที่อาจเห็นใน README ของ package เป็นเพียง placeholder อธิบายรูปประโยค ไม่ใช่โดเมนสำหรับชั้นเรียนหรือสิทธิ์ให้ deploy

R6 — One-shot แบบ local ก่อน

$rw-web
สร้างเว็บไซต์ <PERSONAL_OR_COMPANY_SITE> จาก <INPUT_PATHS_OR_URLS>
กลุ่มเป้าหมายคือ <AUDIENCE> เป้าหมายหลักคือ <PRIMARY_TASK> ภาษา <LOCALE>
ทำ research และแยก FACT/INFERENCE/PROPOSAL/GAP, สร้าง brandkit, วาง sitemap/copy, สร้างเว็บจริงและตรวจใน browser
ใช้ frontend-design และ ui-ux-pro-max; สร้าง hero/key visual ด้วย built-in imagegen เมื่อช่วยงานและบันทึก provenance ตามจริง
รอบนี้ทำ local เท่านั้น ยังไม่ deploy

R7 — One-shot พร้อมเผยแพร่

$rw-web
สร้างเว็บไซต์ <PERSONAL_OR_COMPANY_SITE> จาก <INPUT_PATHS_OR_URLS>
ใช้ภาษา <LOCALE> และเป้าหมาย <PRIMARY_TASK>
ทำ research → brandkit → content/sitemap → working website → production build → browser QA
จากนั้น deploy ไป Cloudflare hostname <EXACT_AUTHORIZED_HOSTNAME> ใน account <ACCOUNT_LABEL_OR_ID>
ตรวจว่า hostname ไม่ชนเว็บเดิมก่อนแก้ external state และจบเมื่อ HTTPS, expected content และ agreed flows ผ่านที่ URL จริง

ดูวิธีติดตั้ง dependency frontend-design และ ui-ux-pro-max จากแหล่งที่ตรวจแล้วใน dependency setup และดู login/token ที่ คู่มือ Wrangler authentication