จดๆจาก Claude Code BKK Sharing #2

Recap Claude Code ว่ามีอะไรบ้าง

• Source Map Leak - เบื่องหลังการทำงานว่าใน Claude Code มันทำยังไง
• 1M Context Token
• Claude Design - ของดีย์ ผมลองมาแล้ว กิน Token
• /loop - Run Schedule ใน Claude Code
• /security-review - agent
• /remote-control - เปิด remote ให้ claude run แล้วเราดูผล + chat ผ่านมือถือได้
• /ultra-review
• /usage สรุปว่า chat ที่คุย เราใช้อะไรไปบ้าง
• Agent View ทำ Workflow และเราคุมงานได้ Tmux
• Claude Legal มุมกฏหมาย
• /goal - ทำจนจบ

ใช้ Claude Code ยังไงให้ฟังแบบ Paypers

Speaker ปัน CTO at Paypers

📌 สำหรับ Payper ระบบจัดการใบเสร็จให้ง่ายขึ้น และที่สำคัญ Platform นี้เอา AI มาช่วยด้วย

• ลอง Gemini / Codex / Claude แต่ Claude Code มันดีสุด ยุค Model Claude 4.5
• การสร้าง Payper มี Tech Stack พวก Vercel / Supabase / Terraform ในใจแล้ว สั่ง AI ขึ้นงานมาให้ เพราะเข้ามือ ไม่ต้องปรับตัวเยอะ

📌 เริ่ม Code ด้วย AI ยังไง ?

• ความยากอยู่ที่การสกัด Requirement ให้ชัดเจน และการเพิ่ม Feature ใหม่ต้องสอดคล้องกับของเดิมทีมี ถ้าของเดิมขึ้นไปแล้วลูกค้าใช้น้อย เอาออกยาก อาจจะทำให้เสียลูกค้าได้
• การตัดสินใจ มีคุยกับ AI แต่คำถามจะเป็นส่วน logical ชัดเจน
• รวมถึงการถามหาคู่แข่งในตลอด + Feature เอามาประกอบ แต่ไม่ใช่การตัดสินใจหลัก เพราะข้อมูล AI เอามา อาจจะยังไม่ตอบตลาดจริงๆ เน้นคุยกับ Real User
• การ Support แยก 2 ส่วน
  - Line Bot ตอบทั่วไป
  - Line OA Human Support ถ้าลูกค้า่ขอ Feature อาจจะขอนัดคุยเพิ่มหา insight ในแต่ละ Sector Requirement มาจากส่วนนีด้วย

📌 Tools การทำงาน

• linear.app จัดการ Ticket ต่างๆ Feature Bug เอามาเชื่อม Claude Code เชื่อมกัน
• สำหรับการใช้ผ่าน CLI 2 ตัว superset.sh รองรับ Git WorkTree (1 repo dev หลายๆ feature ได้) / conductor.build เป็น CLI สำหรับ Agentic Coding เหมือนได้ยิน Warp ด้วย แต่ยังเอ๋อ Gen แล้ว Warp ไม่เห็นไฟล์ แต่จริงมันมี

📌 Workflow การทำงาน Claude ดึง Card จาก MCP ของ linear.app ถ้าประเมินชัดเจน

• /write-plan เป็น Skill ปรับเอง เขียน Plan + สร้าง Agent ที่ทำหน้าที่ Review และ Fixed Critcal เลย ให้ Mark ให้เรา Review ตอนท้าย รูปแบบของ Plan จะให้ออก 2 ส่วน
  1 Human Read - Diagram ให้เห็นภาพรวม
  2 อีกส่วนจะเป็น bullet ที่ AI ชอบ เป็นส่วนของ AI Agent
• output plan เป็น html แทน md > html มันจะ Interactive กว่า คนอ่านง่าย แล้วถ้า UI เห็นภาพจิงด้วย
  - https://x.com/i/status/2052809885763747935 ที่มา
  - ตอนเขียน Blog เห็นเค้า disscuss reddit.com: html_markdown_for_claude_code_outputs_thariqs/ เลยเอามาด้วย
• /implement-plan อันนี้ custom ขึ้นมาเหมือนกัน แบ่งงานให้ Agent ทำแล้ว ไปเน้นทำงานแบบ Parallel มีหลาย Agent ช่วยกัน Review และมีการใช้ Built in command อย่าง /simplify เพื่อปรับคุณภาพ Code|
  พอมีหลาย Agent พวก CLI superset.sh / conductor.build เอามาส่องดู

📌 การ fixed bug มี agent 2 ตัว

• /auto-fixer อันที่ simple case / no db change trigger มาจาก routine แต่ loop มันใช้ได้ ไม่ clear context นะ
• /validate-bug เป็น Agent ที่มาตรวจก่อนว่า human error หรือ bug ของแทร่
• sentry ดูจาก log แล้ว auto fixed หรือ raise
• นอกจากนี้ Daily-Churn - report สว่ามีลูกค้าเลิกใช้ของเราไปกี่ราย บราๆ

📌 การจัดการ Context การใช้ Claude Code

• /clear /compat เป็นตัวหลักควรใช้ นอกจากนี้มี
• CAVEMAN - ไม่ต้องน้ำเยอะ สั่นๆกระชับ
• rtk-ai/rtk ตัว Filter ของการส่งไป AI ลด Context เช่น
  - Test Result มันจะส่งส่วนที่ Fail ให้
  - ในมุม Infra จะ Log ที่มีปัญหาส่งให้ ตัดพวก Debug อะไรที่ไม่จำเป็นอะไรได้เยอะมาก
• code-review-graph - ให้หา Function ที่มีอยู่แล้ว จาก Structure Map ที่ทำไว้ ลดการไปหาจาก Code เพียวๆ แต่ต้องปรับ Prompt / Skill ให้มันมาเรียกใช้ด้วย

สุดท้าย อย่าไปลงหมดตามที่เค้าบอก ลองก่อน

📌 เรื่องของ Claude.md / เอาอะไรยัดบ้าง

• ของ Speaker 200 Line
• เน้นการทำเป็นตาราง Lookup หา Agent ต่างๆ มันจะได้ไม่ดึงหมด และก็มีอีกอัน .claude/rule อันนี้เป็น guideline ให้ได้เหมือนกัน

📌 Team Collaboration

• ทำ repo กลาง / เวลาครมี skill เอามาขึ้น + ทำ product cheatsheet
• การใช้ AI ช่วย เอา mcp database (read only) ทำให้ถามจากคำพูดทั่วไปเลย ถ้ามันมี pattern ยกเป็น skill ที่ repo กลาง เช่น line boardcast จาก user ที่ยังไม่ใช่ระบบเรา เชื่อม DB อ่าน และเลือกยิง target ตรง

📌 ถ้าต้อง scale ทีม ยุค ai ต้องการคนแบบไหน

• คนที่หาปัญหาเก่ง / เอ๊ะอะไรกับ Product ได้ แล้วทำได้เลย

📌 Vibe Coding กับ Prod

• Vibe Coding เหมาะกับการ Validate Idea ไวๆ ยังไม่เหมาะกับ Prod ในตอนนี้
• แต่ความท้าทาย เราทำยังไงไม่ให้ลูกค้าปัจจุบันพังไปด้วย จากของใหม่ที่เพิ่มเข้ามา ต้องมี Process การ Validate ที่เข้มข้ม

📌 AI มาแทน Software Eng หรือไม่ ?

• Coding น่าจะได้หมด ถ้าคนรอรับงานตาม Card อันนี้ AI ได้
• Logical Skill ความเอ๊ะ
  - Exploration ของใหม่ๆ
  - Critical Thinking ยังสำคัญอยู่ ข้อมูลมันเยอะ แต่มันถูกต้อง และเหมาะสมกับ Context ไหม ไม่ทำให้เกิด Loop Hole

📌 ถ้าเริ่ม Claude Code ควรจะทำยังไง

• รู้จัก Structure - Skill / Hook / Connector ง่ายๆแบบ Cowork ไปลองให้เข้าใจก่อน
• เอาความเข้าใจ มา Match กับ ปัญหา Use Case ที่เราจะทำ
• ลองไปดูว่าใน claude code ทำงานยังไง แล้วมี tools อะไรมาเพิ่ม และมาปรับ prompt skill ที่เรามีอยู่เดิม มี repo https://github.com/marckrenn/claude-code-changelog/blob/main/cc-prompt.md สรุปของใหม่ที่มี ให้เรามาปรับ Skill หรือ Prompt เดิมได้

Q&A - Discussion

• HTML Plan ตอน Review Refine ทำยังไง
  ANS prompt claude ทำ
• MCP DB ขอ Insight ต้อง Result มันตรงใจไหม
  ANS ตรงใจ ถ้าเราบอก Schema ให้ชัดด้วยนะ + เราฝึกการตั้งคำถามด้วย
• การ Review Code ใช้อะไร
  - devin.ai/ เอามา Review PR ได้ รู้สึกดีกว่า Claude แต่คำตอบ ตรง แต่หลังๆ ราคาแพงขึ้น 1 PR ตอนนี้ 3 USD ถ้ามี Free Trial ไปลองได้
  - อีกตัว coderabbit.ai/ - opensource หลาย repo อย่าง Bun ใช้งาน รูปแบบ Claude Code ทำ Code Rabbit review
• Code Review Graph ถ้าเอาพวก LSP มาใช้ด้วยจะดีขึ้นไหม
  ANS ตัว Claude Code เคสเชื่อม IDE VS Code มันจะเชื่อม LSP อยู่แล้ว ถ้ามัน Error Claude จะได้ไปด้วย

Claude Code that works is simple than you think

Speaker Thai Pangsakulyanont

📌 สำหรับ Session นี้มาเล่า bizdocgen ใช้ Claude Code มาช่วยสร้าง App แก้ Pain ยังไง

• bizdocgen opensource ที่ช่วยออกใบเสร็จเอกสารต่างๆ เช่น ใบเสร็จรับเงิน / quatation เป็นต้น เดิมมีหลายทางเลือกอย่าง FlowAccount / Word / Excel / Figma ห๊ะ
• custom มาจาก grist (airtable alternative) และทำ report ขึ้นมา
• อันนี้ Stack V3 นะ ใช้ Claude Code อันนี้ Speaker รู้จัก Claude Code และใช้ตั้งแต่ Beta

📌 แนวทางการใช้ Claude Code

• สัมภาษณ์ AI ให้เรารู้ก่อนว่ามันรู้่ ืทำอะไรได้ เช่น คุณสร้าง Custom Widget ใน Grist ไหม ถ้าไม่เป็นจะได้ส่ง Doc ไปให้มันเรียนเพิ่มและคุยไปเรื่อยให้เข้าใจตรงกัน ว่าทำอะไร
• จากนั้นมาทำ Foundation ให้มันขึ้นพวก CI/CD / Test (Unit Test / E2E Test) ต่างๆให้เรียบร้อย / Init Vue Project
• อธิบายเพิ่ม Context ลงไปว่าเรากำลังทำอะไร เพราะรอบนี้ใช้นาน มี Formating Convention ยังไง ? เช่น
  - เหมือนได้ยินห้ามใช้ Tailwindcss ตัว report จะเปิดให้ custom css ได้ เลยบอกให้ Claude รู้
  - ทุก Step ที่ Vibe + Test นะ

ตอนแรก Speaker ใช้ Model ราคาถูกอย่าง Haiku 4.5 มันไม่เก่ง เลยใช้วิธีการบอก Stack จับมือมันสอน
** เบื่องหลังใน Claude Sub-Agent ที่อ่าน web ใช้ Model ราคาถูกอย่าง Haiku นะ

• ขึ้น Feature โดยหลัก Prompt ล้วน ยุคนั้นยังไม่มี Skill
  - Claude Implement
  - Human มาตรวจเขียน Test โดย Test ยังทำมือ เนื่องจากสิ่งที่ Claude มันสร้างมาให้ ยังเป็น Playwright Version เก่า ทั่งที่มันควรเสนอ semantic locators แต่ให้ code แบบเดิมมา ต้องอธิบายสอนฅ
  ** พอเข้ามือแล้วให้มันทำ Test ตาม Pattern ของเรา

การ Run Claude แบบ yolo ให้มันยึดเครื่องทำตามใจเลย ต้องทำ |
- sandbox ให้มันวิ่งเล่นใน VM + remote desktop (เพื่อเราไป inspect )
- กำหนด Access token แยกระดับ repo
การเข้าเครื่อง ipad shell - เหมือนสำหรับยุค Agent สั่งได้ เพราะใน ipad code ยาก
- rootshell - terminal บน ipad เข้า VM เปิด Tailscale
- shell อีกตัว blink-shell

จากที่ Speaker ลอง ถ้า AI มันทำผิด แต่พยายามกลับมาได้นะ และมี Agent ตัวอื่น

• ให้ Agent Browser มาตรวจว่า Heading มันตำแหน่งทับกัน แล้วมีปัญหา
• และให้ Agent อีกตัวมาปรับ Code และเปิด PR

📌 ถ้าเรารู้จุดผิดแล้ว เราจะ prompt หรือ แก้เลย

• prompt บอกให้ละเอียดตามจดที่เราต้องการเลย
  - โอ๊ะ ตอนแรกเราก็เป็น แก้มือนะ กลัวเปลือง Token
  - Speaker ให้ทำเลย ปล่อย commit ด้วย (ฉันยังไม่กล้า ตอนนี้ดูทุกรอบ)
• voice typing ยังปัญหาภาษาไทย + ศัพท์เทคนิค อันนี้ spekaer แก้ปัญหาทำอีก App เรื่อง Voice Typeing โดยใช้ Model ของ Qwen มันรับพวกภาษาไทยคำ อังกฤษคำ และพวก ศัพท์เทคนิค ได้

ถ้าจะ Vibe ลองจาก Personal Software ก่อนนะ ใช้คนเดียว ถ้าีม pain อะไรก็ลุยเลย

📌 Claude Code Workflow ที่ใช้งาน

ถ้าในที่ทำงาน

• เชื่อม Clade Code กับ JIRA
• จากนั้นบอก AI ดึง Issue จาก JIRA แล้วมา Discuss ชอบ Let's Disscuess เดวไปลองบ้าง เวลาประมาณครึ่งวัน บางเคสอาจะยาว
• ถ้าอันไหนคิดว่าไม่ยาก จะให้ AI เข้าไปสืบเลยว่ามันพังยังไง บราๆ
• หลังๆใช้ Skill grill-me / grill-with-docs ข้อดีของ Skill ของคุณ mattpocock อันนี้ สั่นๆชัดเจนดี Skill ไม่จำเป็นต้องยาวนะ แล้วตัว grill ช่วย refine ให้ idea มันชัดเจนมากขึ้น ได้ Context Plan มากขึ้น
  - Blog อ่านเพิ่ม https://nutchanon.org/blog/until-we-reach-shared-understanding/
  - Grill-me Speaker ได้ Skill จาก Session ของคุณมายในงาน BKK.js อันนี้ผมไป Session ต่อจาก Copilot Dev Day เผื่อไปอ่านต่อ

เอาไปใช้ live skill ได้ด้วย grill-me ชอบ use case ของ speaker นะ ถามเรื่องน้ำยาล้างจาน จะเดิมที่ AI มันจะพ่นมาเยอะๆ พอใช้ grill-me มันช่วยถาม แนะนำความรู้ได้ด้วย

อีกเคส Rhythum Game Editor การปรับตั่งค่า และ Performance

• อันนี้ Vibe ยาก อันนี้เป็นอีกเคสที่ใช้ grill-with-docs ช่วยทำ profiler แสดงว่า render ที่ช้าตรงไหน
• แต่งานปรับ Perf AI ตอนนี้ยังไม่ได้เก่งนะ
• ถ้าทำพวกนี้เราต้องกำหนด Acceptance Criteria เพื่อให้ Model รู้ว่ามันเร็วขึ้นจริงนะ และทำงานได้เหมือนเดิม

รวมถึงการมีต่อม เอ๊ะ เพราะ AI มันซื่อๆ ตรงไป code เดิม 900 ai ไปเพิ่มอีก ถ้าอนาคต maintain ยากนะ เราต้องใส่ เอ๊ะให้ AI เพื่อให้มันแยก method / refactor code
AI ลอก Pattern ที่มี เช่นการเขียน Test ถ้าอยากให้ทำอะไรใหม่ ต้องบอกมันให้ชัด

📌 Claude Code - Rountine

• use case ของ Speaker ทำ Rountine เพื่อมา Run Linter > ถ้าเจอ Warning > Fixed + เปิด PR เพราะบางครั้งเราอาจจะใส่อะไรที่นอกกฏเข้าไป เอาตัวนี้มาช่วยตรวจสอบได้ ให้ Code ของเรามี Quality ดี

📌 harness-engineering

ตอนทำพวก AI Agent ควรมี Test + Infra (CI/CD) ด้วย เอาไว้คุม ที่มีคุณ martinfowler มาแนะนำ Feedforward / Feedback

• Feedforward เราบอก Context ให้มันสร้างสิงที่ถูกต้อง พวก Claude.md / Language Server ยกตัวอย่างเคส
  - Eventpop การจัดการ Localization ถ้าให้ Claude ไปแก้ตรงๆอาจจะผิด และเละได้ อันนี้เราทำ CLI Tools / Skill มาให้มันเรียก จะได้แก้ให้่ตรงจุด
  - การ Run Test ถ้าเรามี Step แน่นอน ทำ Skill หรือ Script ที่ใช้งาน เพื่อให้ได้ผลลัพธ์ที่ตรงความต้องการ
• Feedback ถ้าออกนอกทางไป มีตัวคุมให้มันกลับมา

📌 Use Case อื่นๆ

• ถ้าใช้ Claude Code - Conversation อยู่ที่ Local นะ เออ แล้วก็เพิ่งรู้มีเคสเอา Claude Code มาใช้ grill-me ปรึกษาชีวิตด้วย
• Claude Code On Cloud as personal agent แทนพวก Line Bot มันมี Notification ด้วย เช่น
  - บันทึกค่าใช้จ่าย แล้วมี Skill / CLI มาบันทึกลง grist ข้อจำกัดเหมือน Server Less ถ้า Start รอบแรกจะช้า

Q&A - Discussion

• หลังจากใช้ AI Agent ตัวออื่น มี Skill อยู่หลายๆ เรามีวิธีการจัดการ Skill ยังไง ถ้าทำงานผิดพลาดเราจะรู้ได้ยังไงว่า Skill ไหนมันตีกัน
  - เอ๊ะ และจับมือทำเป็นตัวอย่างให้ AI มันเรียนรู้
  - กรณีที่อยากเรียก Skiil หลายๆ Skill ให้ทำเป็น Chain ให้ลองทำ Todo List เป็น bullet
  - การจัดการ Skill - ทำ Mini Tools เอาไว้ Share Skill ให้กับแต่ละ Project ทั้งใน Local / Cloud
• Claude.md ใส่ rule แต่เยอะมันจะดีไหม ?
  - จริงๆควร refactor ตัว Claude.md ยิ่งเยอะ มันยิ่งสับสน
  - เพิมที่ละ bullet point สั้นๆกระชับ
  - ถ้ามีอีก project เอา claude md ของ project นั้นมา สรุป + grill me เพื่อให้มัน General มากขึ้น สำหรับงานของเรา
• ตอนเจอปัญหา Code Gen ซ้ำๆ แล้วมีวิธีป้องกันไม่ให้เกิดซ้ำยังไง
  - ทำยังไงก็ได้ให้ codebase ของเรามีตัวอย่างของที่ดีเยอะๆ
  - อีกเคส Transitional Arch อันนี้เรากำลังเปลี่ยนถ่าย ถ้าเอามาใช้กับ AI มันจะสับสน เอ๊ะเยอะๆ แล้วให้ AI มันหา Pattern ที่เราคิดว่าไม่ดี แล้วปรับ แต่มุมของ reviewer การปรับเยอะๆ อาจจะทำให้คน Review Shock ได้ อาจจะต้องแยก PR งานจริง และ improve ส่วน ai เจอที่เหลือเป็นต้น
  - grill-with-docs จุดเด่น grill แล้ว มันจะสร้าง glossary เพื่อให้มีภาษากลางที่เข้าใจให้ตรงกันทั้ง human + ai
  - ถ้าอันไหนใหญ่ เปิดอีก PR และ ต้องทำเอกสาร ADR เป็น Context ให้ AI
• ถ้า Code มันตีกันหละ จัดการยังไง Speaker มี Share Case เคยเจอ WordPress ตีกับ Plugin
  - ถามยังไงก็ไม่ใช้
  - สุดท้ายเอา Code WordPress + Code Plugin ให้ Claude ไปไล่หา สรุปเปิดการ Config Model ของ JS

แต่กว่าจะปรับ เราต้องเข้าใจก่อนว่า AI ยัดอะไรลงมือเรา

• อีกเคส Freaky Test - Local (Pass) VS CI Server (Fail) อันนี้ให้ Claude หา + บอก Step แล้วมันเจอประเด็นส่วนการ Run Headless ของ Playwright ต้องเพิ่ม Header เข้าไป

ให้ AI แก้ได้ เราเรียนรู้ไปพร้อมกันมัน AI is Amplifier - เพิ่ม/ลด Tech Debt
- ถ้าผมเองเอามาจด Blog ไว้

อ๋อเดี๋ยวมีเอาขึ้น Youtube ด้วยนะครับ อันนี้ FB Live

ขอบคุณที่งานที่มี live คับ ได้ Idea เยอะเลย ชอบที่เป็นถามตอบนะ

Reference

• https://www.eventpop.me/e/147387