AI Web Studio977-121 · PSU PHUKET
รายงานวิจัย
ดาวน์โหลด Markdown

AI Web Studio · 977-121 · PSU Phuket

วิจัย: Vibe coding, Agent Skills และการทำงานอย่างมีหลักฐาน

สถานะการค้นคว้า: 9 กันยายน 2026. เอกสารนี้ใช้แหล่งปฐมภูมิเป็นหลัก และระบุชื่อผลิตภัณฑ์/รูปแบบคำสั่งตามเอกสารที่ตรวจในวันดังกล่าว เพราะ CLI และ marketplace เปลี่ยนได้เร็ว

คำตอบตรงประเด็น

Vibe coding ที่เหมาะกับเว็บบริษัทหรือเว็บขายของ ไม่ใช่การ “สั่ง AI ให้สร้างทั้งเว็บแล้วกด deploy” แต่เป็นวงจรที่มนุษย์กำหนดผลลัพธ์และข้อจำกัด, agent ทำงานในขอบเขตเล็กที่ตรวจได้, แล้วมนุษย์ตรวจหลักฐานก่อนขยายไปขั้นต่อไป. AI ช่วยให้รอบสร้างเร็วขึ้น แต่ไม่ได้ย้ายความรับผิดชอบเรื่องแบรนด์, ความถูกต้องของราคา/กฎหมาย, การเข้าถึงได้, ความปลอดภัย และการ deploy ไปให้เครื่องมือ

สำหรับหลักสูตรนี้ ให้เริ่มด้วย spec → prompt → แผน → สร้าง → ตรวจ → preview → อนุมัติ deploy. ใช้ AGENTS.md บันทึกกติกาโครงการที่ต้องใช้เกือบทุกงาน; ใช้ skill สำหรับขั้นตอนเฉพาะงานที่นำซ้ำได้; ใช้ MCP เมื่อต้องให้ agent เรียกเครื่องมือหรือข้อมูลภายนอก; ใช้ subagent เพื่อแยกงานค้นคว้า/ตรวจทานที่กิน context; และใช้ plugin เมื่อต้องการแจกชุดของ skill, MCP, agents หรือ hooks เป็นก้อนเดียว

แผนภาพ context ของ agent ห้าชั้นจากเป้าหมายผู้ใช้ กฎ workspace และ infra เอกสาร design lesson และ prompt ไปยัง source data และหลักฐาน tests build productionแผนภาพ context ของ agent ห้าชั้นจากเป้าหมายผู้ใช้ กฎ workspace และ infra เอกสาร design lesson และ prompt ไปยัง source data และหลักฐาน tests build production
บนจอเล็ก เลื่อนแนวนอนเพื่ออ่านแผนภาพ หรือเปิดไฟล์ HTML จากลิงก์ใต้ภาพ

เปิดแผนภาพ agent context แบบเต็มหน้า แล้วใช้ตารางคำศัพท์ถัดไปตรวจหน้าที่ของแต่ละส่วน แผนภาพเน้นการโหลด context ตามความจำเป็น ส่วนตารางยังเก็บความต่างและข้อห้ามที่ต้องเทียบทีละคอลัมน์ได้แม่นกว่า

คำศัพท์ที่ต้องแยกให้ชัด

สิ่ง หน้าที่ ควรใส่อะไร ไม่ใช่อะไร
Prompt คำสั่งสำหรับงาน/รอบนี้ เป้าหมาย, audience, acceptance criteria, ขอบเขต, หลักฐานที่ต้องส่ง คู่มือถาวรทั้งองค์กร
AGENTS.md / CLAUDE.md กติกาโครงการที่ agent ต้องรู้เสมอ คำสั่งทดสอบ, โครงสร้าง, style ที่ต่างจากมาตรฐาน, ข้อห้าม deploy คู่มือยาวหรือ API reference
Skill (SKILL.md) workflow หรือความรู้เฉพาะงานที่โหลดเมื่อเกี่ยวข้อง ขั้นตอน deploy preview, design audit, schema migration, references สิทธิ์หรือ executable policy ที่บังคับจริง
MCP server ช่องทางให้ agent เรียก tool/data ภายนอก Cloudflare API, Figma, issue tracker, database read-only ชุดคำสั่งว่าควรตัดสินใจอย่างไร
Agent/subagent ผู้ปฏิบัติงานที่มี context/tool boundary ของตน ค้นคว้า, review, test, งานคู่ขนานที่ไม่เขียนไฟล์ชนกัน ชื่อเรียก skill
Plugin แพ็กเกจติดตั้งได้ที่รวมหลาย capability skill + MCP + agent + hook และ metadata มาตรฐานเดียวที่ใช้ได้ทุก host

Cloudflare อธิบายแนวคิด skill ว่าเป็น instructions, resources และ scripts แบบ on-demand; catalog เล็กอยู่ใน system prompt แล้วจึง activate เมื่อ task ตรงกัน จึงไม่ทำให้ทุก prompt ใหญ่ขึ้น. แต่ agents/skills และการรัน script ยังเป็น experimental ณ วันที่ตรวจสอบ จึงต้อง pin version และทดสอบก่อนใช้ใน production (Cloudflare Agent Skills).

หลักฐานจากเอกสารทางการ

Codex / OpenAI

เอกสาร OpenAI แนะนำให้ prompt งาน coding ระบุการ reuse, การแบ่งงาน, ความคาดหวังของ test, acceptance criteria และกรณีที่ควรทำต่อหรือขอข้อมูลเพิ่ม (Model guidance). สำหรับ course ให้แปลเป็นภาษาง่ายว่า “ทุก prompt งานสร้างเว็บต้องบอกว่าหน้าสำเร็จหน้าตา/พฤติกรรมอย่างไร, ไฟล์ใดไม่ให้แตะ, ต้องรันอะไร, และ output ไหนนับเป็นหลักฐาน” ไม่ใช่บอกเพียง “ทำเว็บสวย ๆ”.

Codex ใน environment ที่ตรวจพบมีคำสั่ง mcp และ plugin; อย่าเขียนคู่มือที่อ้างว่า $ชื่อ-skill ใช้ได้เสมอ เพราะ syntax และ discovery ต่างกันตาม host. Cloudflare ระบุเส้นทางติดตั้ง Codex เป็น ~/.codex/skills/ และ plugin marketplace ของ Cloudflare ใช้ codex plugin marketplace add cloudflare/skills แล้ว codex plugin add cloudflare@cloudflare ในเอกสาร upstream ของโครงการ (cloudflare/skills README). คำสั่งนี้เป็นข้อมูลที่ต้องตรวจซ้ำด้วย codex plugin --help หรือ README เวอร์ชันที่ติดตั้งก่อนสอนจริง

Agent Skills specification และ progressive disclosure

มาตรฐาน Agent Skills กำหนดโครงพื้นฐานเป็น directory ที่มี SKILL.md และอาจมี scripts/, references/, assets/; SKILL.md มี YAML frontmatter (name, description) และ Markdown instructions. ข้อดีสำคัญคือ progressive disclosure: เริ่มจาก name/description, โหลด body เมื่อ activate, แล้วอ่าน resource เฉพาะที่ต้องใช้ (Agent Skills specification).

ผลเชิงปฏิบัติคืออย่าใส่คู่มือ Cloudflare 50 หน้าใน AGENTS.md หรือ body skill เดียว. body ควรบอกทางเลือกและเงื่อนไข เช่น “เมื่อ deploy Worker อ่าน references/worker-deploy.md”; ส่วน credential, resource IDs และ production URL อยู่นอก skill และห้าม hard-code ลง Git. หากซื้อ/ติดตั้ง skill ภายนอก ให้ review SKILL.md, scripts, hooks, MCP configuration, network/file permissions และ commit/tag ก่อนเปิดใช้; digest หรือ pinned commit ช่วยให้เนื้อหาที่ review แล้วไม่เปลี่ยนเงียบ ๆ

Claude Code เป็นหลักฐาน portability

Claude Code ระบุชัดว่า skill body จะโหลดเมื่อถูกใช้ ต่างจาก CLAUDE.md ที่โหลดเป็น context ต่อเนื่อง; skill ใหม่ควรเกิดเมื่อผู้ใช้ paste checklist/workflow เดิมซ้ำ หรือ CLAUDE.md เริ่มกลายเป็น procedure (Claude Code Skills). Claude Code รองรับ Agent Skills open standard แต่มี frontmatter และ dynamic context/subagent features เพิ่มเติม จึง ไม่ควรคัดลอกฟีเจอร์ vendor extension ข้าม Codex/Claude โดยสมมติว่าจะทำงานเหมือนกัน.

เอกสาร Anthropic แนะนำให้ file context ถาวรสั้น และเก็บเฉพาะคำสั่งที่ agent หาเองจาก code ไม่ได้ เช่น test runner, architectural decisions, env quirks และ gotchas; ไฟล์ยาวทำให้คำสั่งสำคัญถูกละเลย (Claude Code best practices). หลักการนี้ใช้กับ AGENTS.md ในทุก host ได้ แม้ชื่อไฟล์และลำดับ precedence จะต่างกัน

Cloudflare Skills เป็นตัวอย่าง upstream

cloudflare/skills เป็น repository ทางการที่แจก skills สำหรับ Workers, Agents SDK, D1, Wrangler และอื่น ๆ; README ระบุว่ามีทั้ง plugin ทางการและ skills ที่ใช้ได้กับ host ที่รองรับ Agent Skills (cloudflare/skills). เอกสาร Agent Skills ของ Cloudflare แสดงการแยก catalog, activate_skill, read_skill_resource และ (เมื่อเปิดใช้โดยชัดแจ้ง) run_skill_script; workspace access เป็น read-only โดย default ในตัวอย่าง และ network/tools/writes ต้อง opt-in (Cloudflare Agent Skills). นี่เป็น pattern ที่ควรสอน: least privilege, resource on-demand, และทดสอบ script ใน preview/sandbox ก่อน

ข้อควรระวังและข้อจำกัด

  • Agent Skills format พกพาได้เฉพาะส่วนแกนกลาง; paths, slash command, automatic invocation, frontmatter fields, plugin manifests และ permission model เป็นของ host. ให้เขียน core SKILL.md แบบ portable ก่อน แล้วทำ adapter แยกต่อ host.
  • Skill คือ prompt/instruction ไม่ใช่ sandbox. script, hook, MCP และ CLI ที่ skill เรียกมีผลตามสิทธิ์ของ host. สิทธิ์ production ต้องแยกจากสิทธิ์ local/preview และหยุดให้มนุษย์อนุมัติที่จุด deploy, schema migration, billing หรือ external write.
  • คำว่า “AI ตรวจแล้ว” ยังไม่ใช่หลักฐาน. ต้องเก็บผล test/build, preview URL, smoke test ของ form/checkout, Lighthouse/accessibility หรือ checklist ที่เหมาะกับหน้า และผล deploy ที่ตรวจจาก dashboard/CLI.
  • ไม่ส่ง secret, token, customer data หรือ private key เข้า prompt, SKILL.md, screenshot หรือ commit. ให้ใช้ secret store/environment binding ของ platform และใช้ชื่อ binding ในเอกสารแทนค่า secret.

Retrieval sufficiency และรายการแหล่งอ้างอิง

การค้นคว้านี้เป็น current best-practice research; เปิดอ่านเอกสารต้นทางของ OpenAI, Agent Skills, Anthropic, Cloudflare และ upstream Cloudflare Skills แล้ว. ยังไม่มีการอ้าง third-party tutorial เพราะไม่จำเป็นต่อคำแนะนำนี้.

  1. OpenAI, Model guidance — prompt สำหรับ coding agent และการจัดการ instruction files.
  2. Agent Skills, Specification — schema/portable core ของ SKILL.md และ progressive loading.
  3. Anthropic, Extend Claude with skills — body on-demand, use cases และ vendor extensions.
  4. Anthropic, Best practices — context hygiene, tight feedback loop, verification.
  5. Cloudflare, Agent Skills — catalog/activation/resources/scripts และสถานะ experimental.
  6. Cloudflare, cloudflare/skills — upstream installable skill collection และ Codex install path.
  7. cathrynlavery, diagram-design — skill สำหรับออกแบบแผนภาพแบบ self-contained; รอบปรับเอกสารนี้ใช้ SKILL.md metadata version 2.6 จาก global install ~/.codex/skills/diagram-design/ และบันทึก source/prompt ของภาพไว้ใน diagram provenance.

ความคืบหน้าบันทึกเฉพาะเบราว์เซอร์นี้ ไม่มีบัญชีผู้เรียนหรือการส่งข้อมูลการเรียนขึ้นเซิร์ฟเวอร์