anatomy

一句话把技术想法变成可交互等距机械图

开源 unknown 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 2436

维护状态活跃

是否开源是

定价模式 unknown

项目预览

项目数据

分类设计创意

开发团队wheresryan22

所属国家

官网地址https://skills.wheresryan.sh/anatomy

GitHubhttps://github.com/wheresryan22/anatomy

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议MIT

主要语言JavaScript

技术栈/模型

GitHub 星标★ 2436

30天Star增速

HF 下载量

上线时间2026-10-08 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-12

浏览次数0

项目介绍

anatomy 是一个面向 Claude Code 的开源技能（skill），目标是把一段技术想法自动转成一张精细、可交互的等距（isometric）机械结构图。它解决的是技术文档、文章和落地页里缺少高质量示意图的问题：过去要么手绘、要么用通用图标，既费时又难以准确表达内部结构。该技能会生成 SVG 图形，并可选叠加 WebGL 着色器与 3D 效果，让机器剖面、部件关系和层次结构以可视化方式呈现。用户只需用自然语言描述技术概念，Claude Code 调用该技能即可产出可直接嵌入网页的矢量图，兼顾清晰度与交互性。它适合需要频繁产出技术插图的开发者、技术写作者和产品团队，把原本依赖设计师的制图流程压缩到对话式生成，降低可视化门槛。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 5 分钟部署方式：本地安装 6 步

环境要求

Node.js ≥ 20.10（skills CLI 1.7.1 要求 22.20 或更高）
已安装 Claude Code
无需 API Key，项目零依赖，不用执行 npm install

安装与启动步骤

1全局安装技能

用 skills CLI 把 anatomy 装到用户级目录 ~/.claude/skills/anatomy，供所有项目使用。
```
npx skills add wheresryan22/anatomy -g -a claude-code
```
2或项目内安装

不带 -g 时安装到当前项目的 .claude/skills/anatomy，可提交到仓库让团队共用。
```
npx skills add wheresryan22/anatomy
```
3或用 git 克隆

不想用 skills CLI 时，直接把仓库克隆进 Claude Code 的技能目录即可。
```
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
```

4无 git 下载安装

下载 tar 包并解压到技能目录，注意目录名必须是 anatomy。

mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy

5重载技能列表

若会话启动时 skills 目录还不存在，需在 Claude Code 里执行该命令重新加载。
```
/reload-skills
```
6生成第一张结构图

在 Claude Code 中调用 /anatomy，用自然语言描述要解释的技术概念和目标载体。
```
/anatomy explain how a token bucket rate limiter works, interactive
```

如何确认成功

执行 /reload-skills 后技能被识别；再运行 /anatomy 提示词，能产出 SVG/HTML 交互图文件即成功。

常见问题

Q：需要申请 API Key 或 npm install 吗？

A：都不需要。README 明确说明该技能只使用 Node 内置模块，零依赖，也不需要任何密钥。

Q：安装后 Claude Code 里找不到技能怎么办？

A：如果会话开始时 skills 文件夹本身不存在，运行 /reload-skills 即可让运行中的会话识别新技能。

Q：以后怎么更新到最新版？

A：在安装目录（如 ~/.claude/skills/anatomy）内执行 git pull。若用 skills CLI 安装，重新运行安装命令即可。

Q：技能安装到了哪个位置？

A：带 -g 装到 ~/.claude/skills/anatomy，不带 -g 装到当前项目的 .claude/skills/anatomy。

注意事项

skills CLI 会连同示例一起复制整个仓库，约 10 MB。
提示词里最好说明真实数字（数量、速率、阈值）、希望的载体（独立 HTML、单个 SVG 或 React 组件）以及明暗主题。
项目内安装时可把 .claude/skills/anatomy 提交到版本库，让团队共享该技能。

核心亮点

用自然语言描述即可生成等距机械结构图，省去手绘或找设计师的环节
输出 SVG 矢量图，可无损缩放并直接嵌入文档与网页
可选 WebGL 着色器和 3D 效果，让示意图具备交互与动态表现力

不足之处

依赖 Claude Code 环境，脱离该工具无法独立使用
生成质量受描述精度和模型能力影响，复杂机械结构可能需要多轮调整

适用场景

技术博客或文档中需要机器内部结构示意图
产品落地页展示硬件或系统的工作原理
教学材料里用可交互等距图讲解复杂技术概念

替代项目

Excalidraw、Mermaid、draw.io

上一篇：Tokokino

下一篇：没有了！