ใช้ HTML เขียนแผนงานใน Claude ให้อ่านง่ายขึ้น

อ่านแผน Claude ใน terminal ไม่รู้เรื่อง

ตัวหนังสือยาวไปหมด 😔

สั่งให้เขียนไฟล์ md แล้วก็ไม่ช่วย

ถ้าไม่เคย..ลองสั่งให้เขียนเป็นไฟล์ html สิ อ่านง่ายกว่ามาก 😲

🚀🚀 (แจก prompt ท้ายบทความ) 🚀🚀

html คืออะไร 🌎

. สำหรับคนที่ไม่รู้จัก html มันคือประเภทไฟล์ในการทำ website

เราสามารถเปิดไฟล์นี้ผ่าน browser เช่น google chrome ได้

และในเวลาเราพูดถึง html เรามักพูดถึงภาษา css และ javascript ด้วย . html เปรียบเสมือน โครงสร้าง layout การจัดวางหลัก

css คือการจัดการ styling สีสัน ความสวยงาม

javascript (js) คือ “สมอง” ที่สามารถควบคุมการทำงานต่างๆ

และทั้ง 3 ภาษานี้สามารถรวมกันอยู่ในไฟล์เดียว

ประโยชน์ของการเขียนแผนด้วย html 🤖

นั่นแปลว่า เมื่อใช้ html เราสามารถสั่งให้ Claude

เขียนแผนงานที่มีสีสัน สวยงาม layout สะอาดตา

และมีลูกเล่น เช่น

• การ filter ข้อมูลได้
• การใส่ diagram, chart สวยๆได้อีก 😲

นอกจากนี้ การจัดวาง layout ที่เป็นระบบ

ยังช่วยลด cognitive load ได้เยอะ

ไม่ต้องเปลืองพลังไปกับการเพ่งตัวหนังสือที่เล็ก 🥳

สรุปโดยหัวหน้าฮง

เขียนแผนงานด้วย .html ช่วยให้เราอ่านแผนงานได้ง่ายขึ้น

มีประสิทธิภาพมากขึ้น สวยสะอาดตา

ถ้ายังไม่เคยลอง ต้องลองแล้วครับ

ขอบคุณครับ

Bonus - แจก prompt การเขียนแผนด้วย html 🥳

แบ่งเป็น 2 ส่วน Human read, Claude read

1️⃣ Human read - ตามชื่อเลย ให้คนอ่าน พวก high level detail

before vs after, แผนภาพต่างๆ, concern

2️⃣ Claude read - execution plan. แก้ไขไฟล์อะไร ใช้วิธีไหน

แบ่งงานอย่างไร task ไหนทำ parallel ด้วย multi agent ได้บ้าง

ตัวอย่าง prompt ด้านล่าง ได้ไอเดียมาจากงาน

Claude Code #2 Bangkok Meetup ครับ 🥳

Context: After grilling the user for requirements (problem, current vs. desired state, constraints, alternatives), save the
plan to .claude/plans/plan-<kebab-slug>.html using this structure:

Two sections: Human Read (for people) and Claude Read (for AI to execute from).

Human Read contains:
- Before/After cards — concrete, user-facing, no jargon
- Mermaid flow diagram (flowchart LR or sequenceDiagram)
- User impact block — who is affected, how their experience changes, any risk
- High-level todo list — steps a non-coder can understand
- Expected result — what "done" looks like from the user's perspective
- Solutions section — only if 2+ viable approaches exist; mark one recommended with pros/cons

Claude Read contains:
- Ordered task list — discrete, specific, unambiguous units of work
- Affected files table — each row has: file path, action tag (add/edit/delete), change description (what and why)

Visual design: Dark background (#0f1117), Mermaid via CDN, badge chips to label each section, color-coded cards (red for
before, green for after, yellow border for recommended solution).

Slug rule: Title → lowercase + hyphens, e.g. "Add dark mode toggle" → plan-add-dark-mode-toggle.html