# Skill Anatomy của Claude Code: biến mọi câu hỏi thành cỗ máy tương tác bấm được
URL: https://opcaios.org/blog/skill-anatomy-claude-code
Ngày: 2026-10-30
Cập nhật: 2026-10-25
Tác giả: Lê Quốc Nghĩa
Chuyên mục: Hướng dẫn
Skill Anatomy là một Agent Skill miễn phí (giấy phép MIT) chạy trong Claude Code (Anthropic): bạn đặt một câu hỏi như "máy pha espresso tạo áp suất thế nào?", và Claude dựng câu trả lời thành một cỗ máy thật bằng đồ hoạ isometric, có nút bấm cho từng bước, ô cửa sổ nhìn vào bộ phận đang làm việc, và mọi con số trên màn hình lấy từ một mô hình tính toán duy nhất. Theo Elvar Sun (@elvar_official, bài đăng trên X ngày 18/10/2026, hơn 313 nghìn lượt xem theo X), kỹ năng này do wheresryan22 viết, và chỉ khoảng 10 phút là ra một cỗ máy espresso tương tác. Bài này viết lại hướng dẫn đó bằng tiếng Việt, kèm hai video và ảnh bìa từ bài gốc, và đối chiếu kho mã trên GitHub ngày 23/10/2026.
*Cỗ máy espresso đòn bẩy: chạy lần lượt từng bước từ xay đến đổ sữa, 36 giây. Video: Elvar Sun, lấy từ [bài gốc trên X](https://x.com/elvar_official/status/2111831136171151589).*
*Ảnh bìa của bài gốc: Claude Code và kỹ năng anatomy. Ảnh: Elvar Sun.*
## Skill Anatomy là gì?
Anatomy là một Agent Skill (thư mục có tệp `SKILL.md` theo chuẩn mở agentskills.io) giúp Claude giải thích một ý tưởng bằng cách dựng nó thành vật thể hoạt động được. Theo README, khi bạn nhờ Claude vẽ hình giải thích một ý niệm kỹ thuật, Anatomy bắt nó phát minh một vật thể mà cách vận hành của vật thể chính là khái niệm: ví dụ khoá chìa chốt trụ chỉ xoay khi mọi chốt khớp để minh hoạ khoá bộ nhớ đệm.
Kho `wheresryan22/anatomy` (GitHub, kiểm tra 23/10/2026) có khoảng 19.350 sao, giấy phép MIT, cập nhật gần nhất ngày 18/10/2026, mô tả là kỹ năng tạo hình isometric tương tác chi tiết về máy móc và hệ thống phức tạp, xuất ra SVG và tuỳ chọn WebGL hoặc 3D. Nó chạy trong Claude Code và theo README cũng chạy được trong Antigravity, OpenCode, Codex và MiniMax Code. Nếu chưa quen khái niệm kỹ năng, xem [MCP là gì?](/blog/mcp-la-gi) cho bức tranh về cách agent dùng công cụ ngoài.
## Một "cỗ máy tương tác" gồm những phần nào?
Mỗi hình là một trang HTML đứng riêng, mở được bằng trình duyệt trên máy tính hoặc máy tính bảng, và theo tác giả bài gốc mọi hình đều có sáu phần giống nhau. Ví dụ trên máy espresso:
1. **Cỗ máy:** một vật thể quen thuộc dựng từ nhiều chi tiết nhỏ: bu lông, đồng hồ đo, khay hứng, cân dưới tách.
2. **Các nút:** mỗi bước một nút, theo thứ tự, chỉ nút kế tiếp bấm được nên không ai bỏ qua phần quan trọng. Một công tắc chọn chế độ: Manual đợi từng lần bấm, Auto tự chạy lặp.
3. **Ô cửa sổ:** một mặt cắt vào chỗ công việc diễn ra; ở máy espresso, ô cửa sổ cho thấy piston, lò xo và nước bên trong đầu nhóm.
4. **Các con số:** đồng hồ, màn hình trên máy và các chip bên dưới: liều cà phê, nồi hơi, áp suất pha, gram trong tách, thời gian pha, nhiệt độ sữa; tất cả đến từ một mô hình nhỏ của máy thật.
5. **Chữ:** một gợi ý cho mỗi bước ở trên cùng, cộng các chữ tượng thanh vẽ ngay trên hành động như grrrr, tok, psssh, knock.
6. **Ý tưởng lớn:** một câu dưới hình, ví dụ "lò xo tạo ra áp suất".
*Cùng một quy trình cho nhiều cỗ máy: máy espresso, động cơ ô tô, máy giặt, lò vi sóng, đầu báo khói, máy bán đồ chơi nang. Video: Elvar Sun.*
## Cần chuẩn bị gì để dùng Anatomy?
Cần Claude Code, Node.js, Chrome và với phần video cuối thì cần thêm ffmpeg cùng Python 3. Theo bài gốc:
- **Claude Code** trên gói Claude có Claude Code.
- **Node.js 22.20 trở lên** (bài gốc cho biết bộ cài kỹ năng yêu cầu). README của kỹ năng ghi chính kỹ năng cần Node 20.10 trở lên, chỉ dùng module có sẵn, không cần `npm install`; hãy theo mức cao hơn nếu bộ cài báo.
- **Google Chrome:** kỹ năng tự kiểm tra bằng trình duyệt không giao diện; README ghi các kịch bản tìm Chrome hoặc Chromium ở nơi thường gặp trên macOS, Linux, Windows, và bạn đặt `CHROME_PATH` nếu dùng bản khác.
- **ffmpeg và Python 3:** chỉ cho phần video ở cuối; Claude Code cài giúp nếu bạn nhờ.
## Bước 1: Cài kỹ năng và chọn câu hỏi
Cài bằng bộ cài kỹ năng rồi gõ `/anatomy` trong Claude Code. Lệnh khớp README của dự án:
\`\`\`bash
npx skills add wheresryan22/anatomy -g -a claude-code
\`\`\`
Không có npm thì clone thẳng vào thư mục kỹ năng:
\`\`\`bash
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
\`\`\`
Câu hỏi hay nhất là câu có một bộ phận chuyển động và một con số. Tác giả gợi ý năm câu chưa làm: bồn cầu nạp nước lại sau khi xả thế nào, líp xe đạp làm đạp nhẹ hơn ra sao, chìa khoá mở ổ khoá thế nào, thang máy dừng đúng tầng thế nào, và lãi kép tăng thế nào khi gửi 100 USD mỗi tháng. Hãy chọn câu bạn tự mình chưa trả lời được.
## Bước 2: Giao đề bài để Claude dựng cỗ máy
Dán một câu lệnh vào Claude Code và thay mọi phần trong ngoặc vuông. Bản dịch rút gọn câu lệnh gốc của tác giả:
\`\`\`
/anatomy Có người hỏi tôi: "[Máy pha espresso tạo cà phê thế nào?]"
Hãy trả lời bằng một cỗ máy, không phải sơ đồ. Dựng một [máy espresso đòn bẩy thật
sự, có máy xay bên cạnh, tay cầm lọc, dụng cụ nén, bình sữa và tách trên cân],
làm từ nhiều chi tiết nhỏ, góc nhìn isometric, thành một trang HTML đứng riêng.
Các bước là nút xếp cột bên trái: [Xay 18 g] [Nén] [Khoá vào] [Kéo đòn bẩy]
[Nhả] [Đánh sữa] [Rót] [Tách mới]. Chỉ bước kế tiếp bấm được. Mỗi nút chạy
bước đó ngay trên cỗ máy.
Khoét một ô cửa sổ vào chỗ công việc thật diễn ra [đầu nhóm: piston, lò xo và
nước bên trong]. Người xem thấy nguyên nhân và kết quả cùng lúc.
Viết một mô hình nhỏ của vật thật ...
\`\`\`
Phần cuối của câu lệnh trong bài gốc yêu cầu một mô hình tính toán thuần để mọi con số đọc từ đó. Tác giả giải thích vì sao cách này bền:
- **Mô hình có trước hình vẽ:** đồng hồ, cân và đồng hồ bấm giờ cùng đọc một hàm nên không thể mâu thuẫn nhau. Bản của ông tự in kiểm tra khi dựng: lần pha 27,0 giây, giọt đầu tiên lúc 5,4 giây, thu được 36 g.
- **Một ý tưởng lớn:** nếu không nói được trong một dòng thì hình đang giải thích hai việc và không việc nào đến nơi.
Theo tác giả, mọi cỗ máy khác của ông đều ra từ cùng câu lệnh này với phần ngoặc vuông mới.
## Bước 3: Làm cho nhìn một lần là hiểu
Bước 3 là làm cho cỗ máy nhìn một lần là hiểu. Phép thử, theo Elvar Sun, là một đứa bé bảy tuổi: gợi ý mà trẻ hiểu sau một lần đọc thì người lớn hiểu trong nửa giây. Câu lệnh gốc gửi cho Claude (Anthropic) đặt năm yêu cầu:
1. Mỗi bước một gợi ý ngắn trên đầu, đơn giản cho trẻ bảy tuổi: chuyện gì đang xảy ra và vì sao.
2. Nút viên thuốc lớn có số trong vòng tròn; bước đang chạy sáng lên, bước đã xong mờ đi.
3. Chữ tượng thanh viết tay trên mỗi hành động.
4. Nhãn tốc độ khi một bước chạy nhanh hoặc chậm hơn thời gian thật (×4, ×1/20), tính từ số giây thật.
5. Công tắc hai chế độ: Manual mặc định (không gì chuyển động cho đến khi có người bấm, nút kế tiếp nhấp nháy) và Auto (máy tự chạy lặp), nhớ lựa chọn giữa các lần ghé.
Ví dụ trong bài đăng ngày 18/10/2026: lần pha thật 27 giây nhưng chạy 6,5 giây nên nhãn ghi ×4 trong khi đồng hồ bấm giờ vẫn ghi 27 giây; động cơ ô tô thì ngược lại, 800 vòng mỗi phút ở chế độ chờ, chạy chậm ×1/20.
## Bước 4: Tạo phong cách hình ảnh
Câu lệnh phong cách của tác giả mô tả một cuốn sách thiếu nhi vẽ bằng mực chứ không phải bản vẽ kỹ thuật: nét viền mực xanh navy dày 1,2 px, màu phẳng với ba sắc độ cho mỗi màu (trên sáng nhất, hai bên đậm hơn), nền giấy kem `#f5f0e5`, một màu nổi bật cho mỗi vật, kim loại crôm và đồng thau, ô màu bên dưới để đổi màu cỗ máy, và bóng đổ xám ấm ngắn, cứng `#ddd4c3` ngay phía sau mỗi vật, không bao giờ xanh hay tím. Mọi núm xoay, màn hình và nhãn phải nằm trên mặt không bị gì che.
Tác giả nói mỗi dòng ở đây là một bản sửa: bản đầu có bóng tím dài và một đồng hồ bị đầu nhóm che mất. Hãy xem đó là cách học: mỗi lỗi nhìn thấy được nên biến thành một dòng quy tắc.
## Bước 5: Bắt Claude tự kiểm tra như một nhà phê bình
Bước 5 là việc bắt Claude tự soi bài như một nhà phê bình trước khi cho bạn xem. Đây là bản dịch ý của câu lệnh gốc trong bài đăng ngày 18/10/2026 của Elvar Sun:
\`\`\`
Trước khi cho tôi xem bất cứ gì, hãy kiểm tra như một nhà phê bình:
1. Chụp một khung giữa mỗi bước và đọc từng ảnh: chi tiết bị che sau chi tiết
khác, chữ tràn khỏi ô, con số không khớp mô hình.
2. Quét mọi chuyển động dài hơn 1 giây với bước 0,1 giây và đếm số pixel đổi
mỗi khung. Khung nào đổi gấp 3 lần các khung lân cận là bị giật: tìm và sửa.
3. Chuyển động chậm phải liên tục. Không bao giờ nhảy giữa các tư thế vẽ sẵn
trong chuyển động dài hơn một giây.
Cho tôi biết bạn đã kiểm tra và sửa gì. Cho tôi xem các ảnh chụp.
\`\`\`
Theo Elvar Sun, quy tắc số 2 bắt được lỗi tệ nhất: ở một khung, một góc duy nhất, đòn bẩy phóng thành một đĩa đen khổng lồ. Một khung bình thường lúc đòn bẩy nâng đổi từ 900 đến 1.400 pixel, còn khung lỗi đổi 95.245. Sau khi sửa, theo Elvar Sun, ông quét cả 612 khung của chuyển động nâng và không khung nào còn nhảy. Đây là số liệu của tác giả, chưa kiểm chứng độc lập, nhưng phương pháp đếm pixel đổi giữa các khung là thứ bạn tái dùng được cho mọi hoạt hoạ.
## Bước 6: Biến thành video và đặt âm nhạc
Làm video theo ba câu lệnh nối tiếp, theo bài gốc:
1. **Làm cho chuyến tham quan ghi hình được:** thêm `window.seek(t)` phát lại toàn bộ từ đầu đến thời điểm t để vẽ được khung bất kỳ theo thứ tự bất kỳ; khi URL có `?render` thì trang dừng đồng hồ của chính nó; vẽ con trỏ đi đến từng nút và bấm trước khi bước bắt đầu; rút cả chuyến còn 36 giây, 0,7 giây giữa các bước, lần bấm đầu lúc 0,9 giây, bước chính vẫn chậm nhất.
2. **Ghi hình:** mở trang với `?render` trong Chrome không giao diện, gọi `window.seek()` cho từng khung ở 60 fps, kích thước 1500 × 1320, chụp từng khung rồi đẩy vào ffmpeg thành H.264, yuv420p, faststart; sau đó làm một tấm ảnh tổng hợp mỗi 3 giây một khung để xem.
3. **Phối nhạc:** yêu cầu tự phối trong mã, không dùng mẫu có bản quyền: nhạc nền lo-fi 36 giây ở 84 BPM với piano điện nhẹ trên các hợp âm Fmaj7, Em7, Dm7, Cmaj7, bass tròn, trống chổi sau ô nhịp đầu và tiếng xào xạc đĩa than; phía trên là các âm khẽ đúng giây của hình (click mỗi lần bấm, tiếng ù máy xay, hơi nước, dòng espresso nhỏ giọt), cân bằng âm lượng -14 LUFS, đỉnh thật dưới -1 dB, ghép vào video bằng ffmpeg.
Tác giả giải thích: máy quay màn hình bỏ khung khi chuyển động chậm, còn chuyến tham quan được "seek" luôn ra 60 fps; bản của ông gồm 2.160 khung, 36 giây, nặng 4,5 MB.
## Làm hàng loạt và đưa lên một trang web
Khi một hình chạy ổn, Claude Code dựng phần còn lại song song, mỗi cỗ máy một agent. Điểm quan trọng nhất là cho mỗi agent một sự thật riêng cần chứng minh, kèm con số thật: một agent chỉ nhận lệnh "làm lò vi sóng" sẽ vẽ cái hộp có đĩa bên trong, còn agent được giao "đo tốc độ ánh sáng bằng thanh sô-cô-la" phải vẽ sóng đứng. Ví dụ tác giả đưa: lò vi sóng đo tốc độ ánh sáng từ hai điểm tan chảy trên thanh sô-cô-la cách nhau 6,12 cm. Mỗi agent làm trong thư mục riêng, không sửa tệp dùng chung và tự kiểm tra ảnh chụp trước khi báo lại.
Khi có hai ba hình, gom chúng vào một trang: trang chủ có mỗi hình một thẻ (ảnh đẹp nhất, tên và một dòng nói nó trả lời câu hỏi gì), mỗi hình một trang riêng với thanh điều hướng, phím mũi tên đổi cỗ máy, phím cách hoặc Enter chạy bước kế, ảnh xem trước 1200 × 630 cho mỗi trang với đường dẫn ảnh tuyệt đối để thẻ hiện ra khi chia sẻ lên X, liên kết ra ngoài mở tab mới, rồi triển khai lên Vercel. Theo tác giả, dòng chữ dưới mỗi thẻ là thứ bán hàng.
Phần thưởng: thêm một thanh trượt (ví dụ liều cà phê từ 9 đến 22 g) và chạy lại mô hình khi kéo, để người xem phá thử cỗ máy và tự thấy mỗi con số làm gì.
## Skill Anatomy có giới hạn gì?
README của dự án nêu rõ các giới hạn:
- **Không phải thư viện biểu đồ:** không có trục, chuỗi dữ liệu hay đồ thị; con số hiện dưới dạng bảng đọc theo mô hình và kích thước, số lượng thật của các chi tiết.
- **Chỉ vẽ máy móc, dụng cụ, đồ đạc:** không vẽ người hay bản đồ chính xác; ý tưởng không có cơ chế để dựng sẽ ra yếu hơn.
- **Cố tình chậm:** một hình mất cả phiên làm việc dài: danh sách chi tiết, hình học, kiểm tra và cận cảnh mọi khớp nối ở cả hai giao diện; động cơ Raptor mất vài phút, còn kiểm tra quỹ đạo 3D đầy đủ mất 15 đến 20 phút cho 30 chi tiết.
- **Hiệu ứng cần WebGL:** thiếu WebGL thì SVG vẫn đọc được, và khi bật giảm chuyển động mọi hình đứng yên.
- **Chế độ 3D còn beta:** mới được chứng minh trên một ví dụ và một hình thử, chưa trên hình sản xuất.
Bài gốc còn nêu các con số lượt xem của tác giả (bài học bơm bánh xe 122.818 lượt, máy giặt 110.691 lượt) mà chúng tôi chưa kiểm chứng. Trang visual-learning.app của tác giả, vào ngày 23/10/2026, liệt kê 30 cỗ máy (bài gốc lúc đăng nói 12), có thể xem miễn phí để thử bấm.
## Kinh nghiệm của OPCAIOS
OPCAIOS chưa chạy thử Anatomy; bài này dựa trên bài gốc, README của kho và kiểm tra trang visual-learning.app. Có hai điểm chung với cách chúng tôi làm ảnh cho blog: sơ đồ và ảnh bìa cũng được dựng bằng mã (viết HTML rồi chụp bằng Chrome không giao diện), và một bài học nên dùng lại là bước tự kiểm tra: bắt AI chụp ảnh, đọc từng ảnh và sửa trước khi bạn xem. Nếu bạn quan tâm tới video dựng bằng mã, xem thêm [Làm motion graphics bằng Claude Opus 5.5](/blog/motion-graphics-claude-opus-5-5) và [Motion engineering với Claude Opus 5.5](/blog/motion-engineering-opus-5-5).
## Câu hỏi thường gặp
### Skill Anatomy của Claude Code là gì?
Là một Agent Skill miễn phí (MIT) giúp Claude dựng câu trả lời thành một cỗ máy isometric tương tác với nút từng bước, ô cửa sổ vào bộ phận chính và các con số lấy từ một mô hình tính toán.
### Cài Anatomy thế nào?
Chạy `npx skills add wheresryan22/anatomy -g -a claude-code`, hoặc clone kho vào `~/.claude/skills/anatomy`, rồi mở Claude Code và gõ `/anatomy` kèm câu hỏi. Cần Node.js, Chrome; ffmpeg và Python 3 chỉ cho phần video.
### Anatomy có miễn phí không và chạy được ở agent nào?
Miễn phí, giấy phép MIT, không có phụ thuộc phải cài. Viết cho Claude Code và theo README cũng chạy ở Antigravity, OpenCode, Codex và MiniMax Code; bạn vẫn cần gói để dùng agent của mình.
### Anatomy vẽ được loại nội dung nào?
Máy móc, dụng cụ, đồ đạc và các hệ thống có cơ chế để dựng; không phải biểu đồ, người hay bản đồ chính xác. Ý tưởng không có cơ chế sẽ ra yếu hơn.
### Dùng Anatomy làm bài giảng hoặc nội dung thì bắt đầu từ đâu?
Nên bắt đầu từ một câu hỏi có bộ phận chuyển động và một con số. Đầu tiên, chọn một câu hỏi bạn tự chưa trả lời được, ví dụ "thang máy dừng đúng tầng thế nào". Tiếp theo, nhờ Claude (Anthropic) dựng một cỗ máy bằng lệnh `/anatomy` theo Bước 1 và Bước 2 ở trên. Sau đó, bắt Claude tự chụp ảnh và kiểm tra từng bước như ở Bước 5, rồi sửa những chỗ chi tiết bị che hoặc con số không khớp mô hình. Cuối cùng, chỉ chia sẻ khi bạn đã bấm thử cả chế độ Manual lẫn Auto. Theo bài gốc của Elvar Sun (18/10/2026), một cỗ máy espresso mất khoảng 10 phút; OPCAIOS chưa chạy thử Anatomy nên chưa kiểm chứng con số này. Muốn học ứng dụng AI vào công việc, xem [khoá đào tạo ứng dụng AI](/services/dao-tao-ung-dung-ai) của OPCAIOS.
*Nguồn: bài viết "How I Turn Any Question Into a Machine You Can Run" của Elvar Sun (@elvar_official) trên X, [x.com/elvar_official/status/2111831136171151589](https://x.com/elvar_official/status/2111831136171151589), đăng 18/10/2026; video và ảnh bìa lấy từ bài gốc theo yêu cầu, thuộc về tác giả; đây là bản viết lại bằng tiếng Việt. Kho [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) (README, giấy phép, giới hạn, lệnh cài) và trang [visual-learning.app](https://visual-learning.app) đối chiếu ngày 23/10/2026. Số lượt xem và các số liệu kiểm thử trong bài gốc là của tác giả, chưa kiểm chứng; OPCAIOS chưa chạy thử Anatomy.*