รีวิว Anatomy — skill ให้ AI อธิบายไอเดียเป็นภาพเครื่องจักร isometric ที่ขยับได้
ข้อมูล Repo
wheresryan22/anatomy- ภาษา
- JavaScript
- ดาว
- 14,063
- สร้างเมื่อ
- แก้ไขล่าสุด
เปลี่ยนสถานะผ่าน API: PATCH /api/reports/93f9fc14-3c8a-4458-b30a-20eea7da733d
แคปชันสำหรับ Facebook
อยากอธิบาย cache หรือ rate limiter ให้คนเข้าใจง่าย ๆ ลองให้ AI สร้างเป็นเครื่องจักรที่ขยับได้ดูครับ Anatomy เป็น skill ที่ให้ Claude คิดวัตถุจริงขึ้นมาแทนไอเดีย เช่น cache key กลายเป็นแม่กุญแจที่หมุนได้เฉพาะตอนสลักตรงกันทุกตัว ✅ ได้ภาพ isometric แบบ interactive ทั้ง SVG, SVG + WebGL และ 3D (beta) ✅ ส่งออกเป็น HTML, ไฟล์ SVG หรือ component ของ React/Next.js ✅ AI ซูมตรวจทุกรอยต่อเองก่อนส่งงาน ✅ ไม่ต้องใช้ API key ลงด้วย npx skills add ได้เลย เหมาะกับคนสอน คนเขียน docs และคนทำคอนเทนต์สายเทค ข้อควรรู้: ภาพหนึ่งใช้เวลาทำนาน และวาดคนหรือแผนที่ไม่ได้ 🔗 https://github.com/wheresryan22/anatomy #ClaudeCode #AgentSkills #AIDesign #OpenSource
ภาพปกแบบ HTML สด
แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที
สไตล์ Easy AI
1080×1350แก้ไข 2026-10-17
สไตล์ easy-app
1080×1350แก้ไข 2026-10-17
สรุป
Anatomy เป็น agent skill สำหรับ Claude Code (ใช้กับ Codex, OpenCode, Antigravity และ MiniMax Code ได้) ที่เปลี่ยนแนวคิดทางเทคนิคให้เป็นภาพ isometric แบบ interactive ทั้ง SVG, SVG + WebGL และ 3D (beta) โดยไม่ต้องใช้ API key
คืออะไร
Anatomy คือ agent skill ที่อธิบายไอเดียทางเทคนิคด้วยการ "สร้างเป็นวัตถุที่ทำงานได้จริง" ในรูปภาพ isometric แบบ interactive เขียนมาสำหรับ Claude Code และใช้ได้กับ Antigravity, OpenCode, Codex และ MiniMax Code ด้วย
ตัวอย่างใน README เช่น cache key ที่ข้ามงานเมื่อไม่มีอะไรเปลี่ยน ถูกเล่าเป็นแม่กุญแจที่หมุนได้เฉพาะตอนสลักทุกตัวตรงกัน จากนั้น Claude จะประกอบวัตถุนั้นจากชิ้นส่วนเล็ก ๆ หลายสิบชิ้น ใส่ในการ์ดที่มีชื่อ คำใบ้ และค่าตัวเลขที่ขยับตามจริง แล้วซูมตรวจทุกรอยต่อด้วยตัวเอง
จุดเด่น
- ทำภาพได้ 3 แบบ: SVG (แกนหลัก ชิ้นส่วน isometric แรเงา 4 โทน), SVG + WebGL (สำหรับไฟ น้ำ แสง ไอน้ำ) และ 3D (ยังเป็น beta)
- ส่งออกได้ทั้งหน้า HTML ไฟล์
.svgเดี่ยว หรือ component ของ React/Next.js - ขยับตามเมาส์และคีย์บอร์ด ตัวเลขที่แสดงมาจากโมเดลเดียวกับที่ขยับชิ้นส่วน
- มีตัวอย่างพร้อมเปิดดูใน
examples/เช่นraptor-engine,ripple-tank,turning-dial,dial-indicator - ไม่ต้องมี API key และไม่ต้อง
npm installเพราะใช้แค่ built-in module ของ Node - ทำเสร็จแล้วสั่ง agent ให้ส่งภาพเข้า community gallery ได้ (มันจะถามและโชว์สิ่งที่จะส่งก่อน)
เหมาะกับใคร
- คนเขียนบทความ สอน หรือทำ docs ที่อยากได้ภาพอธิบายระบบซับซ้อนแบบเล่นได้
- dev ที่ใช้ Claude Code, Codex หรือ OpenCode อยู่แล้วและอยากได้ภาพประกอบสวย ๆ โดยไม่ต้องวาดเอง
- สายออกแบบที่ชอบภาพ isometric แนวเครื่องจักร
เริ่มต้นใช้งาน
ติดตั้งด้วย skills CLI
npx skills add wheresryan22/anatomy -g
CLI จะถามว่าจะติดตั้งให้ agent ตัวไหน หรือระบุเลยด้วย -a claude-code จากนั้นใน Claude Code พิมพ์
/anatomy explain how a token bucket rate limiter works, interactive
ใน Codex ให้พิมพ์ $anatomy แทน หรือจะ git clone ลงโฟลเดอร์ skills ก็ได้ (README มีตารางบอก path ของแต่ละ agent)
ข้อควรรู้
- ต้องมี Node.js 20.10 ขึ้นไป และ Chrome หรือ Chromium สำหรับขั้นตอนตรวจงาน ส่วน skills CLI ต้องใช้ Node รุ่นใหม่ (เวอร์ชัน 1.7.1 ของ CLI ต้องการ 22.20 ขึ้นไป) และจะคัดลอกทั้ง repo ประมาณ 10 MB
- ไม่ใช่ chart library ไม่มีแกนหรือกราฟข้อมูล และวาดคนหรือแผนที่ไม่ได้ เน้นเครื่องจักร เครื่องมือ และเฟอร์นิเจอร์
- ช้าโดยตั้งใจ ภาพหนึ่งใช้ session ยาว ตัวอย่าง Raptor ใช้เวลาหลายนาที และการตรวจ 3D แบบหมุนรอบใช้ 15 ถึง 20 นาทีสำหรับ 30 ชิ้น
- โหมด 3D ยังเป็น beta
- License MIT สร้างเมื่อ 8 ต.ค. 2026 ยังใหม่มาก push ล่าสุด 15 ต.ค. 2026
🔗 https://github.com/wheresryan22/anatomy
ข้อมูลจาก GitHub ณ 17 ต.ค. 2026: ⭐ 14,063 | ภาษา JavaScript | license MIT