Agentic Workflow กับ Claude Code — 5 ขั้น · prompt ที่ดี 6 หลัก แผ่นเดียวจบ

VS Code                     1.136.0   # code --version
Claude Code for VS Code     2.1.261   # code --list-extensions --show-versions
Next.js                     16.3.5    # Turbopack · โปรเจกต์ create-next-app + shadcn
react                       19.2.8
typescript                  5.9.3
eslint                      9.39.5
tailwindcss                 4.3.3
node                        v24.14.0
git                         2.51.0

สารบัญ

1. Chat · Code · Cowork — งานแบบไหนใช้ตัวไหน
2. โหมดสิทธิ์ — ดูก่อนพิมพ์
3. ตาราง 5 ขั้น Explore → Commit
4. คำสั่งตรวจในขั้น Evaluate / Commit
5. ตาราง 6 หลักของ prompt
6. แม่แบบ prompt สั่งงานโค้ด
7. XML tag vs Markdown header
8. checklist ก่อนกด Enter
9. ตารางกับดักรวมทั้งกลุ่ม
10. อ้างอิง

1 · Chat · Code · Cowork — งานแบบไหนใช้ตัวไหน

ทั้งสามตัวใช้โมเดล Claude คิดเหมือนกัน ที่ต่างคือมือของมันเอื้อมไปถึงอะไรได้บ้าง · กฎหยาบ ๆ: ผลลัพธ์เป็น “ความรู้” → Chat · ผลลัพธ์เป็น “ไฟล์ที่เปลี่ยน” หรือ “ผลรันคำสั่ง” → Code

วงจรที่ agent วนเองมีชื่อในเอกสารทางการว่า agentic loop: gather context (ค้นไฟล์ · อ่าน error) → take action (แก้ไฟล์ · รันคำสั่ง) → verify results (รัน build / test ซ้ำ) → ยังไม่เสร็จก็วนใหม่ · ทุกลูกศรคือการตัดสินใจของ AI ไม่ใช่ของคุณ — นี่คือเหตุผลที่ต้องมี workflow 5 ขั้น (หัวข้อ 3)

$ code --list-extensions --show-versions | grep anthropic
anthropic.claude-code@2.1.261
$ which claude; echo "rc=$?"
claude not found
rc=1

2 · โหมดสิทธิ์ — ดูก่อนพิมพ์

ใน VS Code เปลี่ยนที่ตัวบอกโหมดใต้ช่องพิมพ์ · ใน CLI กด Shift+Tab · คำถามที่ต้องถามตัวเองก่อนสั่งงานทุกครั้ง: “ตอนนี้อยู่โหมดไหน”

3 · ตาราง 5 ขั้น Explore → Plan → Code → Evaluate → Commit

สไลด์หน้า 12 นิยาม agentic workflow ว่า “An AI-driven process where autonomous systems use reasoning, planning, and tool use to execute multi-step tasks dynamically” · เส้นประย้อนกลับของ diagram บอกว่า Evaluate ไม่ผ่าน → กลับไปขั้นที่เหมาะ (Plan หรือ Code) แล้ววนใหม่

$ git diff --stat
 app/globals.css          | 6 ++++++
 app/page.tsx             | 2 ++
 components/ui/button.tsx | 1 +
 3 files changed, 9 insertions(+)

4 · คำสั่งตรวจในขั้น Evaluate / Commit

ทุกคำสั่งในตารางนี้บท 87–89 รันจริง · โปรเจกต์นี้ package.json มีแค่ dev · build · start · lint — ไม่มี test ขั้น Evaluate จึงพึ่ง type-check · lint · build · และ “รันจริงแล้วดูผล”

$ npx tsc --noEmit; echo "rc=$?"
app/page.tsx(58,19): error TS2820: Type '"sucess"' is not assignable to type '"link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "success" | null | undefined'. Did you mean '"success"'?
rc=2
$ npx eslint .; echo "rc=$?"
rc=0

เทียบกับตอนเขียน Go

5 · ตาราง 6 หลักของ prompt (สไลด์หน้า 20)

สามข้อแรก (บท 88) ลดจำนวนสิ่งที่ AI ต้องเดา · สามข้อหลัง (บท 89) จัดวางเนื้อหา · กำหนดหน้าตาผลลัพธ์ · และทำอะไรต่อเมื่อยังไม่ตรง · ทุกคำถามที่คุณไม่ได้ตอบใน prompt AI ตอบแทนคุณ — และส่วนใหญ่ไม่ถามกลับ

หลัก 6 — แปลงอาการเป็นประโยคที่ต้องพิมพ์ (สไลด์หน้า 39 + งานโค้ด)

6 · แม่แบบ prompt สั่งงานโค้ด

ถอดตรง ๆ จากเฉลยภารกิจบท 89 (ช่องค้นหาสูตรอาหาร + empty state ของแอป Wongnok) · เป็น prompt ที่บทเรียนเขียนเอง ไม่ใช่ผลลัพธ์ของ AI และไม่ได้ส่งให้ Claude Code รัน · ชื่อไฟล์อิงโค้ดบท 85 — เปลี่ยนเป็น path จริงของคุณ · หัวข้อที่ต้องเปลี่ยนเนื้อทุกครั้งคือ Context · Task · Requirements · Examples

# รอบที่ 1 — prompt แรก (หัวข้อ Markdown + ตัวอย่างในแท็ก XML)
# Role
You are a senior Next.js engineer who follows existing project conventions strictly.

# Context
- Next.js App Router project "Wongnok", TypeScript, Tailwind, shadcn/ui.
- `app/recipes/page.tsx` renders `RecipeList` from `containers/RecipeList/RecipeList.tsx`
  (a "use client" component), which maps over `RECIPES_MOCK_DATA` from `./recipes`
  and renders `RecipeCard` from `@/components/RecipeCard`.
- Convention: `components/` = pure presentational, `containers/` = stateful composition.

# Task
Add a "search by recipe name" input and an empty state to the All Recipes page.

# Requirements
- Filter while typing. Case-insensitive. Trim spaces before matching.
- Match on `name` only.
- Empty input shows all recipes.
- No match shows: No recipes match your search
- Keep `RecipeCard` presentational — put state and filtering in `RecipeList`.
- Do not change `RECIPES_MOCK_DATA`, `RecipeCard`'s props, or any other page.

# Examples
<examples>
input: ""            → all 8 recipes
input: "beef"        → only "Beef Wellington"
input: "  BEEF "     → same as "beef"
input: "pizza"       → empty state: No recipes match your search
</examples>

# Steps
1. Explore: read RecipeList.tsx, recipes.ts, RecipeCard, and app/recipes/page.tsx. Do not edit anything yet.
2. Plan: think step by step, then show me which files you will change, and why,
   plus any edge case you see. STOP and wait for my approval.
3. Code: implement only the approved plan.
4. Evaluate: run `npx tsc --noEmit`, `npx eslint .`, `npx next build`, and fix any failure.
   Then re-check every item in Requirements and Examples, one by one.
5. Commit: only after step 4 fully passes, commit with a clear conventional message.

# Output
When done, reply with exactly 3 sections:
1. Files changed — one line per file
2. Checks — tsc / eslint / build: pass or fail
3. Requirements — each requirement with ✅ or ❌

Good plan, but two changes before you code:
1. Keep the state in RecipeList, not page.tsx — page.tsx must stay a Server Component.
2. Do not add a prop to RecipeCard. Filtering happens before rendering the cards.
Show me the updated plan, then wait again.

tsc fails with the error below. Fix it by using the existing `name` field —
do not add a `title` field to the Recipe type. Then re-run tsc and eslint.
<tsc_output>
containers/RecipeList/RecipeList.tsx(11,12): error TS2339: Property 'title' does not exist on type 'Recipe'.
</tsc_output>

ถ้ารายงานตอนจบจะถูกสคริปต์อ่านต่อ ให้ขอเป็น JSON แล้ววางโครงให้ดู — โครงนี้บท 89 ตรวจแล้วว่าผ่าน JSON.parse (valid JSON, keys: summary, filesChanged, checks, openQuestions):

{
  "summary": "Added name search and an empty state to RecipeList",
  "filesChanged": ["containers/RecipeList/RecipeList.tsx"],
  "checks": { "tsc": "pass", "eslint": "pass", "build": "pass" },
  "openQuestions": []
}

7 · XML tag vs Markdown header — เลือกเมื่อไหร่

สไลด์บอกแค่ “with XML or Markdown” · ชื่อแท็ก ไม่ใช่คำพิเศษ ไม่มีรายการให้ท่อง — เอกสาร Anthropic แนะนำให้ตั้งชื่อที่สื่อความหมาย และใช้ชื่อเดิมให้สม่ำเสมอ (<requirements> · <error_log> ก็ได้)

8 · checklist ก่อนกด Enter

9 · ตารางกับดักรวมทั้งกลุ่ม

10 · อ้างอิง

• Claude Code Docs — Use Claude Code in VS Code · Quickstart — หน้าแรกอ่าน VS Code extension vs. Claude Code CLI (ทำไม claude ไม่อยู่ใน PATH) และ Security and privacy · หน้าที่สองอ่าน Step 1: Install Claude Code ทุกครั้งก่อนรันคำสั่งติดตั้ง CLI
• Choose a permission mode · Configure permissions · Security — ตาราง Available modes · คอลัมน์ “Yes, and don't ask again” behavior · และ Protect against prompt injection
• How Claude Code works — หัวข้อ The agentic loop ที่มาของ gather context → take action → verify results
• Claude Code — Best practices — Explore first, then plan, then code (งานแบบไหนข้ามการวางแผนได้) · Give Claude a way to verify its work · Course-correct early and often (กฎแก้เกินสองรอบให้ /clear) · Avoid common failure patterns
• Claude Code — Common workflows — Plan before editing และ Understand new codebases สำหรับคำถามในขั้น Explore
• Claude Docs — Prompting best practices — Be clear and direct (golden rule) · Use examples effectively (Relevant · Diverse · 3–5 ตัวอย่าง) · Structure prompts with XML tags · Give Claude a role · Control the format of responses
• Claude Docs — Prompt engineering overview — Before prompt engineering: มีเกณฑ์ความสำเร็จและวิธีทดสอบก่อนปรับ prompt
• Anthropic — Building effective agents — What are agents? และ Workflow: Evaluator-optimizer ลูปเดียวกับเส้น Evaluate → Code
• Next.js — next CLI — คำสั่ง next typegen ที่แก้ LayoutProps และ next build ที่รัน type-check ในตัว