# วิจัย: 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](/diagrams/agent-context.svg)

[เปิดแผนภาพ agent context แบบเต็มหน้า](/diagrams/agent-context.html) แล้วใช้ตารางคำศัพท์ถัดไปตรวจหน้าที่ของแต่ละส่วน แผนภาพเน้นการโหลด 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](https://developers.cloudflare.com/agents/runtime/execution/agent-skills/)).

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

### Codex / OpenAI

เอกสาร OpenAI แนะนำให้ prompt งาน coding ระบุการ reuse, การแบ่งงาน, ความคาดหวังของ test, acceptance criteria และกรณีที่ควรทำต่อหรือขอข้อมูลเพิ่ม ([Model guidance](https://developers.openai.com/api/docs/guides/latest-model)). สำหรับ 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](https://github.com/cloudflare/skills)). คำสั่งนี้เป็นข้อมูลที่ต้องตรวจซ้ำด้วย `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](https://agentskills.io/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](https://code.claude.com/docs/en/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](https://code.claude.com/docs/en/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](https://github.com/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](https://developers.cloudflare.com/agents/runtime/execution/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](https://developers.openai.com/api/docs/guides/latest-model) — prompt สำหรับ coding agent และการจัดการ instruction files.
2. Agent Skills, [Specification](https://agentskills.io/specification) — schema/portable core ของ `SKILL.md` และ progressive loading.
3. Anthropic, [Extend Claude with skills](https://code.claude.com/docs/en/skills) — body on-demand, use cases และ vendor extensions.
4. Anthropic, [Best practices](https://code.claude.com/docs/en/best-practices) — context hygiene, tight feedback loop, verification.
5. Cloudflare, [Agent Skills](https://developers.cloudflare.com/agents/runtime/execution/agent-skills/) — catalog/activation/resources/scripts และสถานะ experimental.
6. Cloudflare, [cloudflare/skills](https://github.com/cloudflare/skills) — upstream installable skill collection และ Codex install path.
7. cathrynlavery, [diagram-design](https://github.com/cathrynlavery/diagram-design) — skill สำหรับออกแบบแผนภาพแบบ self-contained; รอบปรับเอกสารนี้ใช้ `SKILL.md` metadata version 2.6 จาก global install `~/.codex/skills/diagram-design/` และบันทึก source/prompt ของภาพไว้ใน [diagram provenance](../assets/diagram-provenance.md).