Dimensional Drawing 尺寸规格图

关于这个 Skill

将一个 UI 组件或实物整理为结构清晰、信息密集的规格图。读取真实素材，测量可核实的数值，使用变量尺寸和公式检查记录结构。

为什么推荐

提供可复用的尺寸图示例、动画场景、测量规则及视觉检查步骤；使用前按任务确认浏览器与渲染依赖。

适合用来做什么

• 为卡片、对话框、控件和布局制作结构图、标注图或规格图。

用图纸描述结构

工作流在独立 HTML 图纸中输出黑白 SVG 示意图，以标题栏、平面视图、分解图、转角细节和变量表描述间距、圆角、层次与视口位置。界面文案用 HUG、FLEX、FILL 等中性占位结构表示。

尺寸使用变量编号与可核对的公式。缺失数值保持 [TBD]，除非用户要求，否则不加入品牌。实物采用有来源的尺寸与第三角投影视图。

尺寸图 Skill 原始指引

交付前检查图纸

每个尺寸编号均须对应表格，推导公式须可核算。将 HTML 以 1800 像素宽渲染，检查标签重叠与图纸边界，再交付 HTML 文件或 Claude Artifact。截图可以支持示意图，但不能据此确定无法测量的精确数值。

尺寸图 Skill 原始指引

安装上游 Skills

两个成员是同一仓库中的任务入口：绘图任务生成图纸，动画任务使用完成的图纸。本收录链接到作者提供的免费 MIT 许可资源。

官方仓库与安装说明MIT 许可证

使用前需要了解

• 提供组件源码、Storybook、网址、设计文件或截图。无法确认的尺寸保留为 [TBD]；实物尺寸须有公开规格来源。
• 保留各 Skill 目录中的示例、模板与适配器，使用浏览器渲染测量组件并检查最终图纸。

支持的 Agent