A free agent skill that explains a technical idea by building it as a real, working object: detailed, interactive isometric illustrations of machines and complex systems, as polished SVGs with optional WebGL shaders and a beta 3D mode. A cache key becomes a pin-tumbler lock; one GPU context becomes a gantry plotter. Every number shown comes from the same small model that moves the parts, and a geometry audit proves nothing passes through anything. Eight complete examples ship with built pages, from a 300-line dial gauge to a Raptor 2 engine that comes apart into 11 assemblies. Works in Claude Code, Antigravity, OpenCode, Codex, and MiniMax Code. MIT; no dependencies, no API keys.一个免费 agent 技能：把技术概念讲清楚的办法，是把它建成一个真实会动的机器——细致、可交互的等距插画，描绘真实机器与复杂系统，输出精致的 SVG，可选 WebGL 着色器与 beta 3D 模式。缓存键变成弹子锁，一个 GPU 上下文变成龙门绘图仪；图上每个数字都来自驱动零件运动的同一个小模型，几何审计证明没有任何零件相互穿透。仓库自带 8 个完整示例与已构建页面，从约 300 行的千分表到可拆成 11 个组件的 Raptor 2 发动机。支持 Claude Code、Antigravity、OpenCode、Codex 与 MiniMax Code。MIT；无依赖、无需 API 密钥。一個免費 agent 技能：把技術概念講清楚的方法，是把它建成一台真實會動的機器——細緻、可互動的等距插畫，描繪真實機器與複雜系統，輸出精緻的 SVG，可選 WebGL 著色器與 beta 3D 模式。快取鍵變成彈子鎖，一個 GPU 上下文變成龍門繪圖儀；圖上每個數字都來自驅動零件運動的同一個小模型，幾何稽核證明沒有任何零件相互穿透。倉庫自帶 8 個完整範例與已建構頁面，從約 300 行的千分錶到可拆成 11 個組件的 Raptor 2 發動機。支援 Claude Code、Antigravity、OpenCode、Codex 與 MiniMax Code。MIT；無依賴、無需 API 金鑰。技術的なアイデアを説明するために、それを実際に動くモノとして作り上げる無料のエージェントスキル。機械や複雑なシステムを細かく描いたインタラクティブな等角図で、磨き上げた SVG に、任意で WebGL シェーダーとベータの 3D モードを添える。キャッシュキーはピンシリンダー錠になり、1 つの GPU コンテキストはガントリー式プロッタになる。図中の数字はすべて部品を動かす同じ小さなモデルから来ており、幾何学監査が何も貫通していないことを証明する。約 300 行のダイヤルゲージから 11 のアセンブリに分解できる Raptor 2 エンジンまで、8 つの完成例と構築済みページが付属する。Claude Code、Antigravity、OpenCode、Codex、MiniMax Code に対応。MIT、依存関係なし、API キー不要。
Quick start快速上手快速上手クイックスタート
What it does
Anatomy is an agent skill that explains a technical idea by building it as a real, working object: detailed, interactive isometric illustrations of machines and complex systems. Figures are polished SVGs with optional WebGL shaders for fire, water, light, and glow, plus a beta 3D mode for parts that turn in true 3D. Every number a figure shows comes from the same small model that moves its parts.
How it works
Claude collects the true numbers first, invents the object, writes a parts list, plans the world, builds the geometry once with the kit, paints back to front, frames it, and makes it live. The kit supplies the isometric camera, solids, a parts library, round parts on any axis, pipes and cables, the WebGL layer, and the 3D runtime. Verification is built in: kit/audit.mjs proves nothing passes through anything, every end sits on a mount, and every overlap is drawn in depth order; headless Chrome scripts take screenshots, close-ups, and contact sheets, and lines.mjs fails any line that ends in mid-air.
How to use it
Install with
npx skills add wheresryan22/anatomy -g
adding
-a claude-code
-a antigravity
-a opencode
-a codex
or
-a minimax-code
to skip the agent question; or clone the repo into your skills folder, for example
/anatomy explain how a token bucket rate limiter works, interactive
in Codex use $anatomy.
Name the idea and give the real numbers (sizes, counts, rates, thresholds), or name the object and say what should move; say where it will live (standalone HTML page, lone SVG, or React/Next.js component; light or dark).
Build an example with
node examples/dial-indicator/build.mjs
(add --light for the light theme), and audit the geometry with
node examples/raptor-engine/build.mjs --audit
Print a figure with
node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all
which writes three A4 PDFs: a poster, a technical drawing, and a detailed explainer.
Key points
Three figure kinds share one kit, one camera, and one set of craft rules: plain SVG, SVG plus WebGL, and beta 3D. The SVG still reads without WebGL, and under reduced motion every figure goes still.
It is not a chart library: no axes, series, or data plots. It draws machines, instruments, tools, and furniture, not people or exact maps; an idea with no mechanism to build comes out weaker.
It is slow on purpose: a figure takes a long session, the Raptor build takes a few minutes, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts.
Needs Node.js 20.10 or later and Chrome or Chromium for the checks (set CHROME_PATH for other binaries); React output needs React 18 or later. No API keys, nothing to npm install: the kit uses only Node's built-in modules.
Anatomy は、技術的なアイデアを実際に動くモノとして作り上げることで説明するエージェントスキルだ。機械や複雑なシステムを細かく描いたインタラクティブな等角図で、磨き上げた SVG に、炎、水、光、輝きのための WebGL シェーダーを任意で添え、ベータの 3D モードでは部品が真の 3D で回る。図中の数字はすべて部品を動かす同じ小さなモデルから来ている。
仕組み
Claude はまず真の数値を集め、対象を発明し、部品リストを書き、世界を計画し、キットで幾何学を一度だけ構築し、後ろから前に塗り、枠に入れて動かし、批評家のように検証する。キットは等角カメラ、ソリッド、部品ライブラリ、あらゆる軸の回転体、パイプとケーブル、WebGL 層、3D ランタイムを備える。検証は内蔵だ。kit/audit.mjs が何も貫通せず、すべての端が台座に乗り、すべての重なりが奥行き順に描かれていることを証明し、ヘッドレス Chrome のスクリプトがスクリーンショット、クローズアップ、コンタクトシートを撮り、lines.mjs は空中に終わる線を失敗させる。
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则，产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則，產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。
A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集，已收录 70 多个真实品牌系统，包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目，编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch，合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集，已收錄 70 多個真實品牌系統，包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案，編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch，合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。
Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)
Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能：艺术指导、参考图和浏览器检查，而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局，而是推动智能体选定方向、用参考图 grounding，并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend，旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能：藝術指導、參考圖和瀏覽器檢查，而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面，而是推動智慧體選定方向、用參考圖 grounding，並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend，舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。