iso-figure Skill 技能

iso-figure — 一句话生成可交互的等距视图

技能简介

iso-figure 是一款 Claude Skill，让 Agent 用单文件 HTML 画出一张可按动的等距图（isometric figure）。告诉它要画的物件名（例如"带分钟按钮的厨房定时器、显示屏倒计时"），Agent 就会输出一份带编号图板的细线 SVG，配有可交互按钮；不需要任何前端库，纯 SVG + 几行投影矩阵代码即可完成。Skill 在生成前会要求 Claude 思考"按下去会发生什么"——如果有按钮却按不出结果，它会主动换物件或加上明确的输入/输出，确保产物真的可玩。Skillstore 上多数 isometric 工具只画静态 SVG，本 Skill 的差异化在于"画完就能玩"，并且兼容任何 Claude 环境。

核心能力

• 单文件 HTML 输出，无外部依赖、可直接双击打开或嵌入任何页面
• 自研约 15 行等距投影代码，把每个面映射到 SVG matrix()，文字、圆角、矩形、路径都能正确落位
• 内置一个状态对象 + render() 函数驱动交互，CSS 负责过渡动画，性能与一致性兼得
• 绘制前先让 Agent 决定每个可按部分的效果（输入文本、数字、播放音符等），让物件"动起来"
• 严格的图层顺序处理深度，避免按钮被遮挡或上下错位
• 多示例仓库（desk-synth、pocket-calculator 等）展示同一技能下不同领域产物

安装配置

1. 作为 Claude Code 插件安装：

   /plugin marketplace add MrBongoC/ai-iso-skill
   /plugin install iso-figure@ai-iso-skill

2. 手动复制 skill 文件夹：

   git clone https://github.com/MrBongoC/ai-iso-skill.git
   cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/

3. 在 Claude.ai Web 版中，下载 latest release 中的 iso-figure.skill 文件，直接上传到 Skills 设置面板

使用步骤

1. 发起新对话，确认 Skill 已加载（应看到 iso-figure 工具或 /iso-figure 命令）
2. 输入一句英文描述物件名，例如 iso figure of a kitchen timer with minute buttons and a display that counts down
3. Agent 会先问清"按下去会触发什么"，必要时让你补充输入/输出定义
4. Agent 调用 Skill 渲染 SVG 图板，写入单个 HTML 文件
5. 用浏览器打开文件，点击各部件验证动画、计数、声音等交互是否按预期工作
6. 调样式或加新按钮时，直接在 HTML 里改 SVG 与 CSS，保存即可生效（无构建步骤）

适用场景

• 技术博客作者用一张会动的示意图替代静态原型，比 Figma 截图更具说服力
• 教学课件里嵌入可点击的实物模型，让学生操作而不是看图
• 产品文档快速产出"示意控件"插图，无需设计师介入
• 数据可视化：把抽象流程画成有按钮的等距装置，帮助审阅者点开理解

适用人群

• 技术作家 / 内容创作者，需要快速做出可交互示意图
• 独立开发者做产品演示、原型验证、内部沟通
• 教师与培训师，把抽象原理画成可操作的等距模型
• 设计师做早期概念表达，与工程团队快速对齐交互意图

工作原理

Skill 的核心是 skills/iso-figure/SKILL.md 中的"内核 + 流程 + 视觉规则"。Claude 在生成物件之前必须先确定每个可按部件的输出（文本、数字、声音等），否则换物件；进入绘制阶段后，用约 15 行投影矩阵把每个 SVG rect/text/path 映射到等距平面上，再用一个共享的 state 对象 + 单一 render() 驱动交互，CSS 处理所有动画。

官方链接

• GitHub 仓库：https://github.com/MrBongoC/ai-iso-skill
• 示例展示：https://mrbongoc.github.io/ai-iso-skill/examples/desk-synth.html
• License：MIT