102.3K+下载
跳转到使用指南
Anatomy作者 wheresryan22

Anatomy Skill.

把一个技术概念讲解成读者能理解的机器。Anatomy 指导你的编码代理完成等距 SVG 几何、物理隐喻,以及与运动部件保持一致的读数。

  • 等距 SVG
  • 技术讲解
  • 交互式图示
下载 OpenDesign查看使用指南
来源审阅 · anatomySKILL.md
任务 技术插图 产出 • 一个 SVG 图示、独立的 HTML 页面或 React 组件 • 带有由模型驱动数值的物理隐喻,可选交互 • 运行检查时产生的几何与浏览器审阅证据 开始之前 该工具包需要 Node.js 20.10+,检查时需要 Chrome 或 Chromium。skills CLI 有自己的 Node 要求;README 记录 CLI 1.7.1 需要 22.20+。
编辑摘要 · 已审阅来源 2026-10-12 · 并非生成的示例

01 功能介绍

通过物理机制解释系统

Anatomy 用一个易辨认的物体来解释技术关系。此处描述基于其来源,而非我们生成的图示。

基于来源的工作流程不是执行基准测试

工作方式

队列可以变成一个容纳并释放物体的机构;阈值可以变成带有标记上限的仪表。有用之处在于映射关系:什么在移动、它衡量什么、观看者应学到什么。该技能要求代理在绘制各部件之前先建立这一模型。

随附的工具包可构建带阴影面和明确深度排序的实体等距形体。图示可以以 SVG、独立 HTML 或 React 组件的形式交付。交互版本把控件、动效和读数连接到同一个模型;可选的 WebGL 可在 SVG 场景中添加水或光等效果。

预期交付物

  • 可编辑的 SVG 图示、独立 HTML 页面或 React 组件
  • 图注;对于交互式图示,还有控件和由模型驱动的读数
  • 几何检查和浏览器截图(在目标环境中执行时)
查看示例需求

从需求到审阅

  1. 01
    把概念映射到物体

    提供真实的行为,并选择一个能解释它的机构。在添加装饰细节之前,先定义每个运动和读数的含义。

  2. 02
    规划部件与镜头

    列出支撑结构、工作机构和控件。选择能呈现而不是被外壳遮挡关系的视角。

  3. 03
    构建几何与行为

    使用工具包处理实体形状和深度排序。静态几何只计算一次;把交互部件和显示的数值连接到同一个模型。

  4. 04
    在上下文中检查图示

    运行相关的几何和线条检查,然后在两种主题下检查浏览器截图。审计通过并不能证明解释准确或构图易读。

02 适用场景

适用场景

当物理类比能让技术概念更易理解时,使用 Anatomy。它比通用的图表或插图生成器更专门。

适合的情形

  • 解释机制的文档通过一个可见的物理关系展示队列、阈值、控件或组件的行为。
  • 编辑类技术图示为博客文章或落地页制作详细图示,由物体本身承载解释。
  • 交互式讲解让读者修改参数,并看到动效和数值同步更新,同时考虑键盘操作和减弱动效的行为。

需要检查的限制

  • 不是通用流程图工具对于最适合用带标签的方框和箭头说明的流程,这种物理物体方式可能带来不必要的复杂性。
  • 3D 是可选的 Beta 功能固定版本的来源仅以一个示例和一个测试图示作为其 3D 的证据。密集的运动几何需要单独做性能检查;不保证效果流畅。
  • 检查需要浏览器Node.js 20.10+ 用于运行工具包;浏览器检查需要 Chrome 或 Chromium。安装该技能并不会让这些检查通过,也不会提供项目所需的全部依赖。

请提供这些输入

  • 要解释的行为提供真实的状态、阈值或公式,以及受众已有的知识。假设性的数值请标明为假设。
  • 一个物理隐喻描述物体、什么在移动以及该移动的含义。可分享视觉参考以说明质感或材质,但不是要求复制现有图示。
  • 输出与交互范围选择 SVG、独立 HTML 或 React 组件;指定尺寸、主题,以及是否真正需要交互、WebGL 或实验性 3D。

03 关键决策

关键决策

  1. 读数与运动共用同一模型

    数字只有反映与机构相同的状态才有用。该技能要求动效、图注和显示数值共用一个模型。

  2. 深度排序是绘图的一部分

    重叠的实体、管道和运动部件需要一致的前后顺序。随附的审计检查几何;线条端点需要单独检查。

  3. 交互需有静态版本

    文档所述的工作流程包括键盘控制、屏幕外暂停和减弱动效。若使用 WebGL,没有它时 SVG 也应保持易懂。

04 试用一个聚焦的需求

试用一个聚焦的需求

下面的示例需求尚未经过测试。使用前请先检查该技能的配置。

查看配置

下面的命令会把该技能安装到项目中,并让你选择代理。运行前请查看上游 README。

文档记载的安装命令
npx skills add wheresryan22/anatomy

该工具包需要 Node.js 20.10+;README 记录 skills CLI 1.7.1 需要 Node.js 22.20+。浏览器检查需要 Chrome 或 Chromium。在 Claude Code 或 OpenCode 中调用 /anatomy;在 Codex 中使用 $anatomy。

从一个机构开始

在尝试密集场景之前,先使用一个小而明确定义的模型。下面的需求是未经测试的示例,而不是提供的成品图示。

示例需求
使用 Anatomy 在独立的 HTML 图示中,把有界队列解释为一个小型物理机构。队列最多容纳 5 个项目:有空位时入队增加一个,非空时出队移除一个,被拒绝的操作不改变计数。先提出物体并解释其运动的含义。使用这些假设规则,不要编造基准数据。使控件可通过键盘访问,并由同一个模型驱动计数和动效。支持浅色和深色主题、390 px 视口以及减弱动效。不要添加 WebGL 或 3D。先展示静态设计再添加交互,然后报告你实际运行了哪些几何、线条和浏览器检查。

检查解释与绘图

对照模型和浏览器证据检查结果。记录无法运行的检查。

  • 计数、运动以及空/满状态与所述队列规则一致。
  • 图示在窄屏和无动效时仍然易读;其控件可通过键盘使用。
  • 两种主题以及适用的几何和线条检查均已审阅;未运行的检查需注明。

OpenDesign 为编码代理提供本地设计工作区。此列表并不意味着该技能已内置,也不意味着其外部工具、凭据和软件依赖已包含在内。

下载 OpenDesign阅读快速入门

05 来源与许可证

来源与许可证

本页描述下方链接的固定来源版本。上游行为和要求可能会变化。

来源所有者
wheresryan22
仓库
wheresryan22/anatomy
技能文件
SKILL.md
许可证
MIT
已审阅快照
2026-10-12 · 689dcf966e63
编辑来源摘要
Anatomy 将物理物体解释方法与等距 SVG 工具包、可选交互以及来源定义的几何和浏览器检查结合在一起。这是对固定来源的编辑摘要,而非执行报告。

由 OpenDesign 依据所链接来源撰写的原创摘要。仓库星标数是带日期的热度信号,不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

Anatomy 需要 React 吗?

不需要。该来源支持生成 SVG 和 HTML 的无框架 JavaScript 或 TypeScript,也支持 React 和 Next.js 组件。请选择适合宿主项目的输出。

Anatomy 图示需要 WebGL 或 3D 吗?

不需要。SVG 是核心输出。WebGL 对水、火或光等效果是可选的;旋转的 3D 几何是单独的 Beta 选项。只请求解释所需的模式。

该技能与 anatomy-figures 包是一回事吗?

不是。Anatomy 是创作技能和工具包。单独记录的 anatomy-figures 包提供预制图示。不应把安装其中一个说成安装了另一个。

Anatomy

让一个技术概念可见

从真实行为入手,选择一个物理隐喻,并在其预期场景中检查图示。运行该技能前,请查看来源和配置。

下载 OpenDesign浏览设计技能
文档记载的安装命令
npx skills add wheresryan22/anatomy