如何把技术概念变成可交互的等距图解：Anatomy 交付指南与选型清单

如何把技术概念变成可交互的等距图解Anatomy 交付指南与选型清单【免费下载链接】anatomyAn agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional WebGL shaders and 3D effects.项目地址: https://gitcode.com/gh_mirrors/anato/anatomy正在给文档配一张能解释令牌桶限流器的图读者悬停或按方向键图里的机器就该动起来、读数实时更新。Anatomy 是一个 Agent 技能能把技术概念直接建成一台可交互的等距图解机器SVG 绘制为主可选 WebGL 着色器与 3D 模式。项目速写定位把概念建成一台真实机器来解释不画框框和箭头机制一个 Agent Skill。先查真实数据再发明一台工作原理就是概念本身的机器最后像审稿人一样自审入口SKILL.md 定义工作流kit/ 是绘图库等距相机、实体、零件库、SVG 渲染器除 React 组件外零依赖成品examples/ 内置 8 个成品图6 个带 Node 构建脚本产物 HTML 已提交仓库双击即开全流程速览阶段做什么产出关键模块输入概念、真实数字、目标格式与主题一句需求提示词设计概念映射成机器实体列 40 零件零件清单SKILL.md构建一次算完几何按面着色装卡片框架图形字符串kit/iso-kit.mjs打包工具库内联按目标格式导出HTML / SVG / 组件scripts/inline-kit.mjs验证几何审计、线条端点检查、无头 Chrome 截图审计通过 PNGkit/audit.mjs、scripts/capture.mjs场景化实操要一个双击就能演示的图解页给谁用技术博客、内部 wiki、给客户的 Demo 页。怎么做装好技能后跑最小示例加--light出浅色页node examples/dial-indicator/build.mjs node examples/dial-indicator/build.mjs --light构建脚本导入 kit/iso-kit.mjs用solidSvg、lineSvg等函数拼字符串再用 scripts/inline-kit.mjs 的kitScript()把工具库整段打进页面。你会拿到什么一个 HTML 文件样式与脚本全内联无需npm install、无网络请求。最小示例约 300 行产物页面约 136 KB更复杂的 examples/raptor-engine/ 约 1.6 MB。✅ 指针、键盘、待机巡览交互完整发个文件给同事就能跑⚠️ 工具库源码被内联文件偏大不适合当一张插图要一张放进文档的静态等距图解给谁用Markdown 文档、文章配图、落地页视觉元素。怎么做同一个 kit 的figureSvg({ standalone: dark | light })会把主题样式直接写进svg标签内部产出自包含的.svg文件。要交付 PNG让技能用 scripts/capture.mjs 截一张node scripts/capture.mjs page.html --out shots/page.pngevals 里的真实提示词就是这类需求an isometric SVG explaining how a CDN edge cache works, cache hit vs miss, TTL of 60 s … Just the SVG file and a PNG preview.你会拿到什么单文件 SVG自带样式与roleimg、aria-label任何支持 SVG 的地方都正确渲染。✅ 最小、最快无 JS天然适配 SEO 与无障碍⚠️ 没有交互与动效属于定格形态要把图解嵌进 React / Next.js 站点给谁用站点本身是 React/Next.js希望图解参与 SSR 与数据流。怎么做把 kit/ 拷进项目如components/iso/按 references/react.md 的布局拆模块model.ts放真实数字与读数逻辑geometry.ts模块加载时一次算完静态路径art.tsx用 kit/react/draw.tsx 的Solid、Line、IsoFigure搭静态部分live.tsx是唯一带use client的组件用 kit/react/live.tsx 的useReadout、useLoop驱动动效。你会拿到什么一组 TS/TSX 模块加 CSS几何在服务端算完浏览器只收 path 字符串和动效 hooks。✅ examples/test-rig/53 个实体、约 470 条路径就是从真实 Next.js 生产站点提取的成品直接拷走⚠️ 大页面下 React 会把元素 props 流式分块live.tsx会收到无 key 告警——给每个元素 prop 的根加稳定 key且别把use client组件混进服务端构建的静态零件里进阶能力SVG WebGL 着色器——什么时候才需要线条画不出来的东西火焰、尾焰、水面、焦散、灯光出现时。着色器画在前后两层 SVG 之间的 canvas 上与图共用同一台等距相机效果嵌在图里没有 WebGL 时 SVG 依然可读。规则在 references/webgl.md。3D 模式beta——什么时候才需要转动本身就是概念时旋钮、转盘、脱落零件。约 90 个零件每帧按 kit 规则重新投影与着色参考 examples/turning-dial/文档见 references/3d.md。✅ 两种增强都可以叠加在上述任意交付形态上⚠️ 3D 的 orbit audit 很慢30 个零件要 15–20 分钟380 零件的压力手实测约 20 fps移动端 13–15 fps验收清单交付前技能会把这些约束逐条过掉你也可以照此自查node build.mjs --audit打印audit passed穿模、悬空端点、折叠、自重叠、深度顺序全部为 0node scripts/lines.mjs page.html打印line ends: 0深色与浅色页、所有静止姿态都要为 0桌面 1440 与手机 390 宽截图各关节 4× 特写两张都读过1× 时整体读作一台机器4× 特写下每个区域仍有真实细节390 px 宽仍然可读卡片四件套齐全Fig n、标题、交互提示、实时读数无 WebGL 时 SVG 完整可读reduced motion 下全部静止选型速查你的情况推荐做法博客嵌入一张能玩的图独立 HTML嵌入或直接链接README / 文档配一张图静态 SVG需要 PNG 再截一张React/Next.js 站点要参与 SSRReact 组件服务端算几何客户端只跑动效要火焰、水面、灯光任意形态 WebGL 层转动本身就是概念任意形态 3D 模式最小上手git clone https://gitcode.com/gh_mirrors/anato/anatomy ~/.claude/skills/anatomy /anatomy explain how a token bucket rate limiter works, interactive三条习惯说概念和真实数字别说画法说图会出现在哪里哪种格式、明暗主题拿到源码后随时用构建脚本本地重跑。选对交付形态剩下的交给清单 【免费下载链接】anatomyAn agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional WebGL shaders and 3D effects.项目地址: https://gitcode.com/gh_mirrors/anato/anatomy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考