iso-figure 的作用
iso-figure 是 Claude 的一项技能，可根据自然语言描述生成交互式等距图形。你只需说出一个物体，技能就会生成一个 HTML 文件，其中包含绘制在编号底板上的细线等距图。
图示物体的各个部件可以响应按压操作。根据物体的不同，交互可能产生文字、数字或音符。如果一个物体没有适合按压的有意义部件，技能会选择其他主题。
如需查看示例，请尝试桌面合成器或口袋计算器。你也可以打开代码仓库中 examples 目录里的文件。
生成图形的工作原理
输出使用原生 SVG，无需外部库。大约 15 行投影代码会将盒子的每个面转换为 SVG matrix()。这样，平面绘制的普通矩形、文字和路径就能显示在正确的等距平面上。
投影也支持文字和圆角。绘制顺序控制深度，因此各元素会按预期显示在彼此前方或后方。
交互由单个状态对象和一个 render() 函数驱动。动画由 CSS 处理，使生成的文件保持自包含，同时仍允许部件进行动画或响应输入。
安装技能
使用 Claude Code 安装
最简单的 Claude Code 设置方式是将代码仓库添加为市场，然后安装插件：
/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill
手动安装
如果你希望将技能目录复制到本地 Claude 技能文件夹中，请克隆代码仓库，然后复制 iso-figure 文件夹：
git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/在 Claude.ai 上使用
对于 Claude.ai，请从最新版本下载 iso-figure.skill，然后在技能设置中上传它。
创建你的第一个图形
安装后，请 Claude 生成一个带有可按压部件的物体。说明主题，并描述你想看到的交互。
生成一个带有分钟按钮和倒计时显示屏的厨房计时器等距图这个提示词确定了一个实体物体，为它添加了交互按钮，并指定了显示屏的行为。Claude 可以利用这些细节来决定图形的状态和渲染逻辑。
你也可以请求类似开关的交互：
fig 6，一个可以打开和关闭台灯的墙壁灯开关fig 6 这一短语有助于指定编号底板的呈现方式，而开关描述则明确指出了可按压的部件及其结果。
提示词技巧
- 指定一个具体物体。 计时器、计算器、合成器和灯光开关都有易于识别、绘制和按压的部件。
- 描述控制部件。 提及应响应输入的按钮、琴键、开关或其他部件。
- 描述结果。 说明按压部件后应产生文字、数字、音符，或概念支持的其他行为。
- 需要时加入显示屏或输出。 倒计时、计算结果或变化的波形可以为交互提供可见结果。
- 没有可按压部件时更换物体。 这项技能围绕交互式图形设计，因此纯静态主题并不适合。
高级指南
查看技能说明
代码仓库在 SKILL.md 中包含完整流程。当你需要了解渲染内核、生成流程或控制视觉风格的规则时，请阅读该文件。
从平面和绘制顺序的角度思考
由于图形由 SVG 平面构成，每个可见表面都必须放置在合适的等距面上。投影代码会应用所需的 SVG matrix()，而绘制顺序决定哪些表面会覆盖其他表面。这对于分层控制部件和位于底座上方的部件尤其重要。
明确维护交互状态
生成的设计使用一个状态对象和一个 render() 函数。优化结果时，请清楚描述所需的状态变化，例如按下按钮后数值发生变化，或开关在开启与关闭状态之间移动。
将结果作为独立文件打开
输出是一个 HTML 文件，因此可以轻松地在浏览器中本地打开，或作为自包含示例分享。由于图形使用原生 SVG 和 CSS，而不是依赖库，因此项目没有要求额外安装依赖。
结语
iso-figure 可将简短的 Claude 提示词转换为紧凑且交互式的等距插画。你可以通过 Claude Code 安装，也可以手动复制该技能，或将发布文件上传到 Claude.ai。为获得最佳效果，请选择具有清晰可按压部件的对象，并说明每次交互应产生什么结果。
该项目依据 MIT 许可证发布。