技能使用指南

等轴测技术图解Skill与anatomy怎么用skill画交互图解？

等轴测技术图解Skill（anatomy）能把抽象技术概念画成一台真实运转的等轴测机器，产出可交互 SVG、实时读数与 WebGL 效果。本文讲清它的安装前提、十步工作流、与 Mermaid、Excalidraw、Figma 的对比，以及审计验证与常见坑，帮你判断是否值得接入。

等轴测技术图解Skillanatomy
8 个章节 约 18 分钟阅读 AI 智能生成

等轴测技术图解Skill：把抽象技术概念画成一台真实运转的机器

  • 它解决的是“图看不懂”的问题：不画方框、箭头和标签，而是发明一台真实、做工精良的物理机器，让机器的运转本身就等于你要解释的概念。
  • 产出的是可交互的等轴测 SVG 页面：等轴测透视、实体填充、四段色调、画家算法排序，带卡框（Fig 编号、标题、交互提示、实时读数）和平缓的缓动运动。
  • 自带完整的工程化套件：kit/ 目录提供几何、车削件、管线、深度审计、WebGL 着色器和可选 3D 模式，不依赖框架，也可用于 React/Next.js。
  • 有“质量关”可以量化：用 --audit 把间隙、端子、折叠、抖动、深度顺序逐项跑到零，而不是凭眼睛调。
  • 适合技术博客、产品文档、落地页和教学场景：只要你想让读者“认出这台机器”，它就比示意图更有说服力。

该技能叫什么？如何一键安装 AI 技能提升开发效率？

等轴测技术图解Skill，英文名 anatomy，技能 ID 为 2116451858878758914。它的定位很明确：当你需要一张等轴测插图、说明性图表或可交互解说图（用于文档、博客、落地页或文章），或者想要“Linear 风格”“高级感”的技术绘图，哪怕你从未说出“等轴测”这个词，这个技能也应该被启用。

它要解决的问题是示意图的两种典型失败：过于抽象（堆叠的平板、漂浮的板块、贴标签的方框，读起来什么都不像）和过于扁平平淡（一块大板加几条线，没有体积、没有零件、没有可发现的东西）。Anatomy 的答案是同一句话——物体就是解释：发明一台可识别的机器，由许多细小、精确、有目的的零件构成，读者因为认出了这台机器，所以看懂了这个想法。而且，图中显示的每一个数字都来自驱动其零件运动的同一个模型。

安装前提与兼容性（以下均来自技能说明）：

  • 技能为 Claude Code 编写，同时可在 Antigravity、OpenCode、Codex 和 MiniMax Code 中运行。
  • 需要 Node.js 20.10+，以及用于各项检查的 Chrome 或 Chromium。
  • 许可证为 MIT。
  • 具体的技能市场入口与安装命令，请以官方说明为准。

一键安装与接入的思路，可以拆成四步：

  1. 安装技能本体：在支持该技能的客户端中，按技能名称或技能 ID 2116451858878758914 找到并安装。安装命令与存放路径以官方说明为准。
  2. 把套件接入项目：技能的 kit/ 目录就是整套核心。纯 HTML / 静态站点场景直接导入 kit/iso-kit.mjs（同一核心编译为纯 ESM，供 Node 脚本使用）；TypeScript 项目把 kit/iso-kit.ts 复制进去；React/Next.js 项目把 kit/ 复制到项目内（例如 components/iso/），使用 kit/react/draw.tsx（服务端安全组件）与 kit/react/live.tsx（"use client" hooks）。
  3. 接上样式：导入一次 kit/iso.css，并在包裹器或 <body> 上加 class="iso"；浅色主题再加 data-theme="light"。
  4. 验证是否生效：运行自带示例最省事，例如 node examples/dial-indicator/build.mjs（最小的一个，支架上的千分表，约 300 行），加 --light 得到浅色主题；生成的独立 HTML 页面就在脚本旁边，用浏览器打开即可。带管线、线缆或圆形零件的图，再跑 node build.mjs --audit，必须以 audit passed 结束才算真正通过。

该技能的主要功能和特点

  • 等轴测实体绘制，不是线框：每个零件都用纸色填充并按顺序绘制，前面的东西遮住后面的；没有透视边，没有虚线隐藏线。extrude 返回四个侧面色调（按朝向）外加更浅的顶面，任何有高度的东西都保留它。
  • 四段色调层级：底座和脚用 lo，结构用 mid，主体用 hi，恰好一个强调色用 lit（深色主题为白，浅色为黑）——读者应该注视哪个零件，由色调直接指出来。
  • 正确的绘制顺序（画家算法）：用 depthOf 对重复零件排序；把包裹另一零件的任何东西拆成后半和前半（绕杆的弹簧、绕滑架的框架杆）；一旦图有了管线、线缆和圆形零件，就用 A.recorder 记录真实形状、A.settle 测真实深度、A.auditOrExit 收尾，而不是凭眼睛调键。
  • 卡框式交付：图放在卡片里，左上 Fig n、右上简短标题、左下交互提示、右下实时读数；图例键和真实说明放在卡片下方，图内除至多一个极小的雕刻标签外不出现文字。
  • 平缓的实时运动：基于时间的指数跟随或真实弹簧，无人触碰时进入空闲巡游循环，响应指针和键盘，离开屏幕时停止，在“减弱运动”偏好下静止。
  • 真实的零件库：kit/lathe.mjs 处理沿任意轴的圆形零件（法兰、阀体、执行器，任何带平滑节点的轮廓会自动开启平滑着色），kit/tube.mjs 把 3D 管或线缆拆成可深度排序的块（带 breaks、套环、卡箍下的 gaps、椭圆端盖、编织/波纹/缠绕纹理）。
  • 可选的 WebGL 着色器：火焰与排气、水与焦散、真实灯光、辉光、蒸汽——三层结构（后层 SVG、canvas、前层 SVG），与 SVG 共用同一个等轴测相机，世界空间、无跳变、无缝。
  • 可选 3D 模式（beta）：当零件在深度中运动就是想法时使用，例如旋转的密码拨盘；一次只旋转一个主体，其余保持静态套件艺术。
  • 八个完整示例作为标杆：千分表、台式电脑、竖直街机柜、吊在测试台架上的火箭发动机、波纹水槽、生产级测试台架（React/Next）、凹点板、旋转拨盘。
  • 框架无关：用 TypeScript/JS 生成 SVG 和 HTML，可直接产出独立 .svg（figureSvg({ standalone: "dark" | "light" })）或完整 HTML 页面，也可嵌入 React/Next.js。
  • 可量化的验证工具链：scripts/capture.mjs 截图与特写、scripts/drive.mjs 脚本化交互与慢动作接触表、scripts/lines.mjs 线端检查（每条缝、规则线、肋、刻度都必须结束在一条描边、一个点或一个轮廓上）。

和普通作图工具比，它强在不是让你“画得像”，而是让你“造得对”：几何只构建一次、运动只改属性、重叠由审计证明、细节必须收束在真实边缘上。这套约束把“好看”变成了可复现的工程结果。

如何使用该技能？

技能内部给出了一条明确的工作流，照着走即可。在写任何几何之前，先把概念和零件清单写下来——大部分质量在那里就已决定。

  1. 开工前先定规模：Figure（一个机构，40–80 个零件，最多一个 WebGL 层，常不到一小时）；Hero（一个密集物体，80–150 个零件，约 2–4 小时）；Epic（整车、整栋建筑或带多个运动系统的工厂，6 小时以上——技能明确要求不要直接开始，而是给出估算并提议一个保留想法核心的 Hero 版本）。无论哪种规模，第一个小时内都要有一个能在浏览器中打开的可用页面。
  2. 真实优先：收集被解释事物的真实数字和行为（尺寸、数量、阈值、曲线），把模型写成一个小的纯模块（如示例中的 rig.ts），让读数、运动和说明文字全部由它驱动。
  3. 发明物体：选一台机器、工具、仪器或家具，其机构与概念一一对应，并用一句话说明“什么在动、这个运动意味着什么”。例如：共享 GPU 上下文服务多个画布 → 龙门绘图仪，一个打印头访问 16 个井；内容不变时跳过工作的缓存键 → 弹子锁，每颗弹子匹配时锁芯转动。
  4. 写零件清单：至少 40 个零件，分为底座、结构、机构、控制和“主体”，每个零件都坐在另一个零件上。
  5. 规划世界：世界单位约等于实物 1 px，x/y 在地面、z 向上；用圆角矩形和圆布局平面图；默认方位角 45°、仰角 30°（需要看清开阔内部时可到 44°）；用 fitProjection 适配画布。
  6. 几何只构建一次：静态路径全部预计算，运动零件在静止位置构建一次并用 translateAlong 移动，只有形状会变的零件才每帧重建。
  7. 从后到前、从下到上绘制，并用审计收尾：node build.mjs --audit 必须以 audit passed 结束，每一行失败项都为 0。
  8. 装框：套上卡片，填好 Fig 编号、标题、提示与实时读数。
  9. 让它活起来：属性写在 refs 上，不要每帧重新渲染。
  10. 像评论家一样验证：放大到 4× 检查每个法兰、三通、弯头、卡箍、阀门、鞍座和交叉处；跑 node scripts/lines.mjs page.html --out shots/lines.png，必须打印 line ends: 0；深浅两种主题都要出图。

一次典型的调用长这样：

输入示例（对助手说）：“用 anatomy 技能画一张解释‘可分离模糊用 49+49 次采样替代 49×49 次’的等轴测图，规模 Figure，深色主题，要有实时读数。”

期望的输出：一个独立 HTML 页面（旁边是构建脚本），图中是一台钉床印章加导轨上的两把梳子，卡片右下角显示采样次数读数，鼠标悬停时梳子沿导轨平缓移动，--light 参数可再出一版浅色主题；如果涉及管线或圆形零件，构建脚本以 audit passed 结束。

同类型竞品对比分析

方案名称 定位 核心功能 安装/使用门槛 适用场景 优势与不足
等轴测技术图解Skill（anatomy） 把技术想法画成一台真实的等轴测物理机器 等轴测实体 SVG、画家算法、四段色调、卡框与实时读数、缓动运动、可选 WebGL 着色器与 3D 模式、几何审计 需 Node.js 20.10+ 与 Chrome/Chromium；懂 TypeScript/JS 更顺；Epic 规模耗时长 技术博客配图、产品文档、落地页 Hero 图、教学解说 优势：细节密度与真实感远超流程图，质量可审计、可交互、可嵌 React；不足：学习曲线偏陡，需要写代码而非拖拽
Mermaid 文本转图表的标记语言 流程图、时序图、状态图等，语法即图 极低，粘一段文本即可渲染 快速说明流程、README 中的结构图 优势：几分钟出图、维护成本低；不足：样式统一且扁平，无法表达体积、机构与运动，读者很难“认出”实体
Excalidraw / draw.io 手绘风白板与流程图工具 拖拽绘制方框、箭头、泳道，协作与导出 低，浏览器打开即用 头脑风暴、架构草图、会议沟通 优势：上手快、自由度高；不足：全靠手工，缺少系统性的零件与层次规范，细节一多就容易杂乱，也没有几何正确性检查
Figma / Illustrator 手工插画 通用矢量设计工具 贝塞尔绘制、组件、样式系统 中高，需要设计功底与大量工时 品牌视觉、正式宣传插画 优势：审美上限高、完全可控；不足：等轴测透视、绘制顺序、管线不穿插要靠人工保证，改动一处往往要重画一片，且难以驱动真实数据
Three.js 等实时 3D 渲染 浏览器 3D 引擎 真实 3D 场景、材质、光照、动画 高，需要 3D 与图形学知识 产品 3D 展示、可旋转模型 优势：真正的三维与物理光照；不足：与文档/博客的插图工作流割裂，包体和性能成本高，也不擅长表达“机构的对应关系”

该技能的典型应用场景与实际体验情况

场景一：技术博主写渲染管线长文。 痛点是“七个渲染目标、每个 texel 字节数不同”这类内容用文字讲三遍读者还是懵。用 anatomy 可以画成七层抽屉柜，每层深度等于它的字节数，读者一眼看懂“深度不同”意味着什么。实际体验：Figure 规模上手很快，examples/ 里的示例就是最好的模板；需要注意的是别偷懒回到“堆叠平板”，一旦图里出现光秃表面或空角，就说明还没做完。

场景二：React/Next.js 团队做产品落地页 Hero 图。 痛点是营销图与产品实际机制脱节，改一版文案就要重画一版图。做法是把几何留在普通 .ts 模块里，服务端组件用 draw.tsx 构建静态图，再交给 "use client" 的实时组件驱动运动，读数由同一个模型计算。实际体验：服务端/客户端拆分很顺，references/react.md 还专门提示了大页面下的一个 key 警告陷阱；首屏静态可读、交互渐进增强，对 SEO 友好。

场景三：文档工程师解释 SDK 内部机制。 例如“一个共享 GPU 上下文服务多个画布”，画成龙门绘图仪：一个打印头访问 16 个井。痛点是原来的示意图看不出零件之间的从属关系。实际体验：零件清单一旦写到 40 个以上，图的“真实感”会明显跃升；注意事项是带管线、线缆后必须跑 --audit，干涉要在几何里修，绝不能用键偏置去糊——用替身形状让审计静默是一个 bug。

场景四：教学与科普解说。 波纹水槽从上方 44° 观察，两层 WebGL 分别负责灯光/阴影/纸上的焦散与水的反射/玻璃，频率变化通过历史纹理从振子向外传播。实际体验：这类带物理的图效果最惊艳，但也最考验验证流程——着色器不能用硬截断，每项都必须在边界或画布边缘之前归零，浅色主题还要逐帧测量墨量。性能上要有预期：小图可 60 fps，而一只 380 零件的密集弯曲手在 1440 下约 20 fps，手机配置下约 13–15 fps。

该技能能为用户带来的价值

  • 把“解释成本”换成“识别成本”：读者不需要读懂一堆标签，只需要认出这台机器。对技术内容而言，这是理解速度的量级差异。
  • 效率提升来自流程而非手速：几何只构建一次、运动只写属性、重叠由 A.settle 与审计决定，改一个参数不需要重画整张图；同一条工作流既能出独立 .svg，也能出完整 HTML 页面或 React 组件。
  • 门槛降低是双向的：对不会画画的技术人，零件词汇表和配方（底座、结构、机构、控制、主体）把“画图”变成了“列清单”；对设计资源紧张的团队，一个人一小时就能产出一张有体积、有细节、可交互的图。
  • 质量可量化：audit passed、line ends: 0、接触表无跳变，这些是能写进验收标准的指标，而不是“我觉得还行”。
  • 长期价值是可复用资产：kit/ 里的相机、零件库、审计与着色器层是通用基础设施，第一个图投入最大，之后每一张图都在同一套规范上叠加，风格自然统一。
  • 可访问性不打折：支持“减弱运动”静止、离开屏幕即停止渲染、深色与浅色双主题，且没有 WebGL 时 SVG 仍然可读。

常见问题 FAQ

Q1：怎么安装？我没有 TypeScript 经验能用吗？ 技能为 Claude Code 编写，也可在 Antigravity、OpenCode、Codex、MiniMax Code 中运行，按名称或技能 ID 2116451858878758914 安装即可，具体命令以官方说明为准。环境上需要 Node.js 20.10+ 和 Chrome/Chromium。不写 TypeScript 也能用：纯 HTML/静态站点路径只需一个像 examples/dial-indicator/build.mjs 的 Node 构建脚本，导入 kit/iso-kit.mjs 拼字符串即可；真正的门槛是“想清楚零件清单”，不是语法。

Q2：收费吗？商用可以吗？ 技能说明中标注的许可证为 MIT。至于所在平台的订阅、调用额度或社区画廊发布政策，请以官方说明为准。发布到 Anatomy 社区画廊是可选能力，scripts/publish.mjs 只在用户明确要求时才会执行，不会替用户推送任何东西。

Q3：适合谁用？我只是想画个流程图，是不是杀鸡用牛刀？ 适合技术博主、文档工程师、开发者关系/市场团队，以及需要在 React/Next.js 站点里嵌交互解说的前端团队。如果你要的只是“三个方框加两个箭头”，Mermaid 或 draw.io 更快。Anatomy 的价值区间是：这个概念靠文字讲不清、靠流程图讲不透，但可以用一台机器的运转来类比。

Q4：和 Excalidraw、Figma 这类工具怎么选？ 按“是否需要保证正确性”来分。Excalidraw 胜在随手画、协作快；Figma 胜在审美上限与完全可控；Anatomy 胜在系统性——等轴测透视由相机统一、绘制顺序由深度审计证明、管线不穿插由 --audit 卡死、细节必须收束在真实边缘上。要出正式宣传插画可以继续用 Figma，要做“能长期维护、能跟着数据变化”的技术图解，选 Anatomy。

Q5：为什么我的图跑完没有 audit passed？要多久？ 常见原因是管线或线缆穿过了别的实体、端点没有坐在真实支座上、弯折被夹扁、纹理在平面中间戛然而止，或者用替身形状骗过了审计。修复方式是在几何里改（切分、相切接触、加缺口、加鞍座垫），不要用绘制键偏置去掩盖。耗时上要有预期：Figure 常不到一小时，Hero 约 2–4 小时，3D 的完整环绕审计 30 个零件需 15–20 分钟，建议放到后台跑，用 --quick --only=… 迭代。