Anatomy คืออะไร Skill ให้ Claude Code อธิบายเรื่องยากเป็นเครื่องจักรที่ขยับได้

ใครเคยต้องอธิบายเรื่องยากให้คนอื่นเข้าใจ น่าจะเคยวาดกล่องกับลูกศรกันมาบ้างครับ กล่องนี้คือคิว ลูกศรนี้คือข้อมูลวิ่งไป แต่คนดูก็ยังต้องนึกเอาเองว่าของจริงมันขยับยังไง

Anatomy เป็น Skill ของ Claude Code ที่มาแก้ตรงนี้ เราบอกไอเดียบรรทัดเดียว Claude จะคิดเครื่องจักรที่ทำงานแบบนั้นขึ้นมา แล้ววาดเป็นภาพ isometric ที่ขยับได้ กด หมุน ถอดดูข้างในได้ บทความนี้สรุปวิธีติดตั้ง วิธีสั่ง เวลาที่แต่ละภาพใช้ และวิธีเอาภาพไปใช้ในเว็บของเราครับ

Anatomy คืออะไร

Anatomy ทำโดย Ryan (@wheresryan22) ปล่อยเมื่อ 9 ต.ค. 2026 เป็น license MIT ทั้งตัว Skill และภาพทุกภาพ หลักของมันมีข้อเดียว เขียนไว้บนสุดของไฟล์ SKILL.md ว่า "The object is the explanation." ตัวของคือคำอธิบาย

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

นาฬิกาในภาพมาจากคำสั่งบรรทัดเดียว /anatomy explain how a mechanical watch keeps time, interactive แล้ว Claude ทำเองต่อเนื่อง 1 ชั่วโมง 54 นาที ไม่มีใครวาดเส้นเองเลยสักเส้น

ส่วนที่สนุกคือของที่ Claude เลือกมาแทนแต่ละไอเดีย ตัวอย่างจากหน้าเว็บ

ไอเดีย	ของที่ Claude คิดขึ้นมา
Message queue	รางลูกแก้ว 2 ถังปล่อยลูกแก้วลงรางเดียว ลูกแก้วรอเรียงคิว แล้วกลองจับเวลารับไปทีละลูก
LRU cache	ชั้นหนังสือ ด้านบนวางได้ 4 เล่ม เล่มที่ใช้ล่าสุดอยู่ซ้ายสุด
Bloom filter	ตู้สล็อต 3 วงล้อคือ 3 hash function จ่ายรางวัลเมื่อธงของคำนั้นยกขึ้นครบทั้ง 3
Hash map collisions	โต๊ะคัดแยกจดหมาย จดหมายที่ลงช่องเดียวกันจะซ้อนกัน
TCP handshake	กระเช้าส่งจดหมายระหว่าง 2 สถานี
Temperature ของ LLM	วงล้อรูเล็ต ช่องกว้างตามความน่าจะเป็นของ token

ก่อนวาด Claude ทำตามลำดับเดิมทุกครั้ง กำหนดขนาดงาน เก็บตัวเลขจริงของเรื่องนั้น คิดว่าจะเป็นเครื่องอะไร ลิสต์ชิ้นส่วนอย่างน้อย 40 ชิ้น แล้วค่อยวาด จบด้วยการตรวจงานตัวเองจาก screenshot และภาพซูม 4 เท่า

สิ่งที่ต้องมี

• Claude Code
• Node.js README บอกว่าตัว kit ใช้ Node 20.10 ขึ้นไป ส่วนคำสั่ง npx skills (CLI เวอร์ชัน 1.7.1) ต้องใช้ Node 22.20 ขึ้นไป
• Chrome หรือ Chromium ในเครื่อง Skill ใช้เปิดแบบไม่มีหน้าต่างเพื่อเช็กภาพของตัวเอง
• ไม่ต้องมี API key และไม่ต้อง npm install อะไรเพิ่มสำหรับตัว Skill

เช็กเวอร์ชัน Node ก่อน ถ้าขึ้นเลขต่ำกว่าที่บอกไว้ให้อัปเดตก่อนครับ

node --version

ติดตั้งยังไง

ขั้นที่ 1 — ลงด้วยคำสั่งเดียว

npx skills add wheresryan22/anatomy

ตาม README คำสั่งนี้ลงไว้ในโปรเจกต์ที่เปิดอยู่ (.claude/skills/anatomy) ถ้า CLI ถามว่าจะลงให้ตัวไหน เลือก Claude Code

หรือ — ใช้ไฟล์ zip

ดาวน์โหลด anatomy.zip จากหน้าเว็บ แล้วรันคำสั่งนี้ในโฟลเดอร์ที่มีไฟล์ zip อยู่

unzip anatomy.zip -d ~/.claude/skills

ขั้นที่ 2 — เปิด Claude Code ในโปรเจกต์

Claude Code เห็น Skill ใหม่ได้ใน session ที่เปิดอยู่เลย แต่ถ้าโฟลเดอร์ skills เพิ่งถูกสร้างหลังเปิด session ให้พิมพ์คำสั่งนี้ก่อน (จาก README)

/reload-skills

สั่งยังไง: บอกไอเดีย ไม่ต้องบอกว่าจะวาดอะไร

หน้าเว็บสรุปไว้ประโยคเดียว "Name the idea, not the drawing." Ryan เล่าว่าเขาแทบไม่เคยบอกว่าให้วาดอะไรเลย แค่ "Explain how an LRU cache evicts entries" ก็พอ การคิดว่ามันควรเป็นชั้นหนังสือคืองานของ Claude

/anatomy explain how a pin tumbler lock opens, interactive

มี 3 คำที่เปลี่ยนสิ่งที่ได้ และ Claude จะใช้ก็ต่อเมื่อเราพิมพ์ไว้ในคำสั่งเท่านั้น

คำ	ได้อะไร
interactive	ภาพตอบเมาส์และคีย์บอร์ด ลาก กด กดค้างได้ ถ้าไม่ใส่จะได้ภาพนิ่ง
WebGL	ใส่ shader สำหรับไฟ น้ำ พลาสมา ลม และแสง วาดอยู่ในมุมกล้องเดียวกับชิ้นส่วน
3D (beta)	ชิ้นส่วนหมุนในมุมลึกได้จริง ช้ากว่ามาก ใช้เวลาเป็นชั่วโมง

ตัวอย่างคำสั่งจากหน้าเว็บ

/anatomy explain how a jet engine afterburner works, interactive, WebGL

/anatomy explain why the Earth has seasons, interactive, 3D

ถ้ารู้อยู่แล้วว่าอยากได้ของอะไร ก็บอกชื่อของไปเลย พร้อมตัวเลขจริงที่สำคัญ

/anatomy a mechanical metronome on a small wooden plinth, swinging at 120 bpm, with a sliding weight you can drag, interactive

และถ้าจะเอาไปใช้ที่ไหน ให้บอกด้วย Skill เขียนได้ทั้ง TypeScript ที่ออกมาเป็น SVG กับ HTML ธรรมดา หรือ React component สำหรับ Next.js มีทั้งธีมมืดและสว่าง

/anatomy explain how a CDN edge cache serves a request, interactive, as React components for our Next.js docs, dark theme

ไม่พิมพ์ /anatomy ก็ได้ครับ ถ้าเราขอภาพอธิบาย ภาพประกอบเชิงเทคนิค หรือ interactive explainer Claude จะหยิบ Skill นี้มาใช้เอง

ขนาดและเวลาที่ใช้

ก่อนเริ่ม Claude จะบอกก่อนว่างานนี้อยู่ขนาดไหน และใช้เวลาประมาณเท่าไร

ขนาด	มีอะไร	เวลา
Figure	40–80 ชิ้น เป็น SVG มี shader ได้ไม่เกิน 1 ตัว	30–90 นาที
Hero	80–150 ชิ้น มีหลาย shader หรือมีชิ้นที่หมุน 1 ชิ้น	2–4 ชั่วโมง
Epic	ทั้งคัน ทั้งตึก หรือทั้งโรงงาน	6 ชั่วโมงขึ้นไป

• Figure ทำเลยโดยไม่ถาม
• Hero แจ้งเราก่อนแล้วค่อยทำ
• Epic ไม่เริ่มเองเด็ดขาดถ้าเราไม่อนุมัติ Claude จะให้ตัวเลขประเมิน เสนอ Hero ที่เก็บแก่นของไอเดียไว้ และบอกว่าเวอร์ชันเต็มจะเพิ่มอะไร

ไม่ว่าขนาดไหน ภายในชั่วโมงแรกจะมีหน้าเว็บที่เปิดดูได้แล้ว เวลาที่เหลือคือการเก็บรายละเอียด เวลาจริงที่หน้าเว็บบอกไว้ คือนาฬิกา 1 ชม. 54 นาที, Seasons 1 ชม. 57 นาที, เครื่องยนต์ Raptor 10 ชม. 33 นาที (เวอร์ชันแรกที่ใช้ได้ใช้แค่ 38 นาที) และ Turbofan 14 ชม.

ตัวอย่างที่ควรเปิดดู

หน้าแรกมีเครื่องใหญ่ 2 ตัว ตัวที่เห็นการถอดชัดที่สุดคือ Raptor 2 เครื่องยนต์จรวดของ SpaceX ที่แขวนอยู่ในแท่นทดสอบ เอาเมาส์ชี้แล้วมันจะแยกออกเป็น 11 ชุดให้ดูทีละชิ้น ตั้งแต่ gimbal ด้านบนลงไปถึง nozzle และกด I เพื่อจุดเครื่องได้ด้วย

อีก 2 ตัวที่ควรลองเล่น

• Turbofan เครื่องยนต์ Rolls-Royce Trent 970 ของ A380 ผ่าออกหนึ่งส่วน ลากคันเร่งแล้วดูแกนหมุน 3 ชุดเร่งรอบด้วยความเร็วของตัวเอง กด Space เพื่อจำลองการขึ้นบิน
• Seasons ตัวอย่างโหมด 3D อธิบายว่าทำไมโลกมีฤดู ชิ้นส่วนหมุนในมุมลึกได้จริง

ที่เหลือรวมอยู่ในหน้า Collection แต่ละภาพมีหน้าของตัวเอง กดเล่นได้ และมีคำสั่งที่ใช้สร้างภาพนั้นให้ก๊อปไปลองได้ทันที

เอาภาพไปใช้ในเว็บของเรา

ภาพทุกภาพใน Collection เป็น React component อยู่ในแพ็กเกจเดียว

npm install anatomy-figures

ตัวอย่างในไฟล์ page.tsx ของโปรเจกต์ React หรือ Next.js

import { Watch } from "anatomy-figures";

export default function Page() {
  return <Watch theme="light" />;
}

อยากให้โหลดแค่ภาพเดียว ไม่ดึงภาพอื่นมาด้วย ให้ import แยกแบบนี้

import Turbofan from "anatomy-figures/turbofan";

• ธีม มี 5 แบบ คือ dark, light, paper, blueprint และ sepia ใส่ทีละภาพผ่าน theme หรือครอบทั้งหน้าด้วย AnatomyTheme
• สีเอง ปรับได้ผ่าน token --anatomy-* ทั้งหมด 26 ตัว เช่นสีพื้นการ์ด สีเส้น และสีของชิ้นที่ไฮไลต์
• ไม่ใช้ React ทุกภาพเป็น custom element ด้วย เอาไปใส่ใน HTML ธรรมดาได้

ส่วนภาพที่เราสั่ง Skill ทำเอง ก็เป็นโค้ดธรรมดาในโปรเจกต์ของเรา อยากแก้ก็บอก Claude หรือแก้ตัวเลขใน model เอง ชิ้นส่วน ตัวเลข และการขยับจะเปลี่ยนตามกันหมด

ข้อควรระวัง

• ช้าเมื่อจะให้ดี Skill บังคับอย่างน้อย 40 ชิ้นต่อภาพ และไม่ลดรายละเอียดเพื่อความเร็วเอง ถ้ารีบให้บอกไปเลย แล้วคาดว่าจะได้ Figure ไม่ใช่ Hero
• 3D ยังเป็น beta หมุนได้ทีละชิ้นหลัก และการตรวจภาพที่หมุนใช้เวลา 15–20 นาที ขอเฉพาะตอนที่ชิ้นส่วนต้องหมุนจริงๆ
• ภาพแรกคือดราฟต์ Ryan เขียนเองว่า Claude เก่งเรื่องสร้าง แต่ไม่ได้เก่งเรื่องมองเสมอไป ตัวเลขถูกหมดแต่ดูแปลกก็มี ให้เล่นกับภาพก่อน บอกว่าตรงไหนดูไม่ใช่ แล้วสั่งใหม่
• ภาพอ้างอิงใช้ได้แค่อารมณ์ ส่งรูปไป มันจะเอาแค่ผิว วัสดุ และบรรยากาศ ไม่ก๊อปตัวของ และไม่ได้มีไว้ลอกงานวาดของคนอื่น
• ไม่ใช่เครื่องมือทำกราฟ README บอกว่าไม่มีแกนหรือกราฟข้อมูล วาดคนหรือแผนที่ที่ต้องแม่นไม่ได้ และไอเดียที่ไม่มีกลไกให้สร้างจะออกมาไม่ค่อยดี
• shader ต้องใช้ WebGL ถ้าเครื่องไม่รองรับ ส่วน SVG ยังอ่านได้ปกติ

สิ่งที่ได้

• เรื่องที่เคยอธิบายด้วยกล่องกับลูกศร กลายเป็นเครื่องจักรที่คนกดเล่นแล้วเข้าใจเอง
• รู้ก่อนสั่งว่างานจะใหญ่แค่ไหน และใช้เวลาเท่าไร
• เอาภาพสำเร็จไปใส่เว็บได้ทันทีด้วย anatomy-figures

ขั้นต่อไป: ติดตั้ง Skill แล้วลองเรื่องที่เราอธิบายบ่อยที่สุด เริ่มจากขนาด Figure ก่อน เช่น /anatomy explain how a pin tumbler lock opens, interactive ระหว่างรอ เปิด Collection ดูว่าไอเดียอื่นกลายเป็นเครื่องอะไรบ้างครับ

ลิงก์

• หน้าทางการ: Anatomy · a skill for Claude Code · Collection · How I built it
• โค้ด: GitHub wheresryan22/anatomy · anatomy-figures บน npm
• ดาวน์โหลด: anatomy.zip
• คลิปตัวอย่าง: โพสต์ของ @0xMovez บน X

อยากใช้ Claude Code ทำงานแบบนี้ได้คล่องขึ้น ดูคอร์สทั้งหมดได้ครับ