mcpField
D
dimensional-drawing

dimensional-drawing

github.com/enesozturk设计与 UI1.4k168 次安装5 天前更新
代码仓库

关于 dimensional-drawing

用于将单个 UI 组件或实体产品绘制成单色标注尺寸图，并输出独立 HTML 文件的技能。它涵盖源资料测量、变量尺寸、图纸布局和渲染检查。

主要功能

  1. 01单色标注图纸
  2. 02变量编码与公式表
  3. 03用 UI 占位槽替代示例文案
  4. 04SVG 绘图工具包与布局指南
  5. 05源资料测量和渲染检查

适用场景

  1. 01记录 UI 卡片或对话框尺寸
  2. 02依据已发布尺寸绘制产品图
  3. 03从源资料测量组件几何尺寸
  4. 04将渲染图作为 HTML 文件交付

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/enesozturk/dimensional-drawing --skill dimensional-drawing

安装后在 Claude Code 中输入/dimensional-drawing确认已加载。

附带文件examples/card-sheet.htmlexamples/dialog-sheet.html

详细介绍

尺寸图

像 Apple 配件尺寸图（developer.apple.com/accessories/dimensional-drawings）那样绘制一个主体：所有内容放在一张图纸上，注释放在左上角，视图分布在图纸上，并附带较小的细节视图；将表格放在其所对应视图的旁边。输出为一个独立的 HTML 文件（在 claude.ai 上，请将其发布为 Artifact）。示例：此文件旁边的 examples/dialog-sheet.html 和 examples/card-sheet.html——请直接复制其中的绘图工具包，不要从零开始。

基本规则

  1. 单色。 白纸上的黑色线条，只使用灰色。任何地方都不得使用强调色。通过线宽、虚线样式、剖面线和浅灰色填充来区分元素。按设计仅提供浅色主题（color-scheme: light，明确指定每种颜色）。
  2. 架构，不是内容。 对于 UI，只绘制槽位，不要放入实际文案：带 X 的主区域框、TITLE SLOT · FLEX、TRAIL / ACTION（HUG）、CONTENT SLOT · FILL、META SLOT · FLEX · WRAPS、LABEL SLOT、VALUE SLOT。不要标注文本宽度尺寸。尺寸术语：HUG（按内容确定大小）、FLEX（占用剩余空间）、FILL（填满父级宽度）。
  3. 变量，不是数字。 图纸上的每个尺寸都必须是代码；表格列出代码、变量名称和值。派生值使用公式并注明结果：H1 header-min = 2·S1+H3 = 64、R2 r-inner = R1−B−S6 = 11、E1 = BL+SP−Y、E2 = BL+SP、E3 = BL+SP+Y。
  4. 不带品牌。 除非用户要求，否则图纸、标题栏或页脚中不得出现产品或公司名称、徽标或文字标识。使用中性名称（UI-CARD-001、“UI 组件参考”）。
  5. 绝不编造数值。 源材料中没有的信息均标为 [TBD]（例如视口边距、溢出行为、未公布的物理尺寸），并以按比例绘制的示意图表示。

代码系统

前缀含义示例
S#间距S1 容器内边距，S2 内部内边距，S3 堆叠间距，S4 FLEX↔HUG 最小间距，S5 主区域间距，S6 内部缩进
H# / Z# / I#高度 / 正方形尺寸 / 图标尺寸H1 header-min，H2 footer-h，H3 action-h，H5 input-h，Z1 主区域，I1 图标
B、W边框、宽度（范围或固定值）W = 420–680
R#圆角半径R1 容器，R2 内部（派生值），R3 控件，R4 胶囊形 = h ÷ 2
Y、BL、SP、E#阴影偏移 / 模糊 / 扩散，包络E1 顶部，E2 侧边，E3 底部
T1、V1、MH触控最小尺寸、视口边距、最大高度MH = 100vh − 2·V1

页面结构

  1. 标题栏（HTML，顶部）。 样式与图纸一致：1.2 px 黑色边框、16 圆角、0.8 px 黑色单元格分隔线、普通大写字母（Arimo/Helvetica）、9.5 px 标签、大写值。单元格包括：大标题（细体大写、字距加宽）+ 一行范围说明、DWG NO.、REV、SHEETS、UNITS、SCALE、SOURCE。接着是 NOTES: (UNLESS OTHERWISE SPECIFIED) 通用注释，分为左右对齐的两列（不可按比例测量；单位；槽位为占位符；代码与公式；HUG/FLEX/FILL；[TBD]；灰度）。然后是一行 6–7 个关键变量（W · card-w 420–680、H1 · header-min 2·S1 + H3……），公式使用小写。
  2. 图纸。 每张图纸使用一个 SVG，viewBox="0 0 1700 1060"，在 overflow-x:auto 框架内设置 width:100%; min-width:1100px。使用圆角图纸边框。图纸上不放标题栏（会占用空间）；图纸标识放在图纸下方的页脚行：左侧 DATE | UI COMPONENT REFERENCE，右侧 NAME, ARCHITECTURE | n。
  3. 优先使用一张图纸。只有一张图纸无法清晰容纳时才添加新图纸；每张附加图纸都保持相同结构，并在注释中交叉引用（SEE SHEET 2）。

工作表布局（单张工作表）

  • 注释位于左上角：方框编号 [1]，这些编号也会出现在图中对应特征旁；未编号的行用于一般规则。
  • 平面视图位于顶部中央，比例为 0.9–1.1:1：带插槽的线框图；顶部和底部标注坐标尺寸链（代码、FLEX/HUG 字样、带范围标签的总宽 W）；左侧标注区域尺寸链（H1 / HUG / H2、总尺寸 (REF n)）；右侧标注内部尺寸链（S1 / H3 / S1 / S2 / S3 …）；半径引出线、点划中心线、方框注释编号，以及带标签（DETAIL C）并指向其他位置放大绘制特征的虚线细节圆。
  • **注释下方：**阴影包络（卡片轮廓、剖线占地轮廓、点划包络线、E1/E2/E3）。
  • **左侧／左下角：**图层堆栈的分解轴测图，标签和引出线位于左侧（画布 → [遮罩] → 阴影 → 容器 → 内嵌表面 → 插槽和控件）。
  • **底部一行：**嵌套圆角细节（共用圆心、B 和 S6，R2 = R1 − B − S6）、半径细节（每种半径一个四分之一圆弧，比例为 2–2.4:1）、约 0.65:1 的内部／主体细节，以及组件专属细节。
  • **右侧栏：**变量表（Spacing、Size、Radius、Shadow；适用时另含 Viewport / Keep-out）。

组件专属视图（按需选择）

  • 卡片／列表行：主体凹槽内边距、堆叠间距、弹性／固定高度页脚、触控目标。
  • 对话框／面板／弹出层：视口中的位置（双轴居中、全屏遮罩、MH 框、V1 [TBD]、视口内的包络）；分解视图中的遮罩图层；页眉控件（前导 R4、关闭 Z2，居中图标 (Z2−I1)÷2）；字段细节（标签 → S4 → 输入框 H5，内边距 S9，R3）；页脚操作（末端对齐、次要胶囊按钮、间距 S7、主要 R3、每个按钮的内边距）。
  • 按钮／标签／输入框：比例为 2–4:1 的细节图；并排展示不同状态；触控区域与绘制高度的对比。
  • 导航／页面布局：每个断点对应一张平面图、列网格、安全区域。
  • **实体产品：**第三角法的顶视图／正视图／右视图 + 剖面 A–A（剖切实体填充剖线）；位置页区域（收纳状态、展开状态、拆下部件）和按比例绘制的尺寸范围条；单位为 mm；仅列已发布的规格并注明来源；冲突标记为 CONFLICT，其余均标记为 [TBD]；不使用徽标或表面纹理。

测量 UI 组件

读取真实源文件（仓库文件、Storybook 故事、设计画布文件、工件、URL）。去除缩放和模板孔，在 Playwright 中渲染，等待字体加载，然后遍历盒模型树（getBoundingClientRect + getComputedStyle：内边距、间距、圆角、边框、最小高度、flex-shrink、最小宽度）。使用 grep 统计检查每个实例，确保变量反映整个系统，而非单个示例。

绘图工具包（SVG，内联 JS）

每张工作表使用一个 begin(svgId)，创建含有唯一箭头标记和 45° 剖线图案 ID 的 <defs>，并绘制工作表边框。所有辅助函数均使用工作表单位：

dimH(x1,x2,y,ext1Y,ext2Y,label,{below,dx,dy,c})   // horizontal dim; <28px span → arrows outside
dimV(y1,y2,x,ext1X,ext2X,label,{side:'l'|'r'})    // vertical dim; no side → rotated label
callout(px,py,ex,ey,label,dir)                    // dot + leader + shoulder + text
rad(cornerX,cornerY,r,'tl'|'tr'|'bl'|'br',label,len)
nb(x,y,n)                                          // boxed note number
detailRef(cx,cy,r,label,lx,ly)                     // dashed circle + leader
table(x,y,title,[[code,variable,value]…])          // widths 40/88/96, returns next y
notes([[n,text]…])                                 // n=0 → unnumbered

约定：对象轮廓 1.6 px；尺寸线 0.7 px；延长线 0.55 px，与特征相距 3 px，超出 5 px；实心箭头 7 px；尺寸文字 11 px，使用白色 paint-order: stroke 遮挡背景；插槽标签使用 9 px 大写字母并增加字间距；视图标题使用 12 px 大写字母并增加字间距，副标题为 9.5 px（SCALE 0.9:1 · …）。插槽使用虚线 4 3；hug 元素使用浅灰填充；内嵌表面使用更浅的灰色；虚影／区域线使用长虚线；包络线使用点划线；禁入区使用剖线填充。

注意事项：CSS 的 fill 规则若作用于某个类，会覆盖 fill="url(#hatch)" 属性，因此剖线形状所用的类不能设置 fill。在经过变换的组（分解视图）内使用 vector-effect: non-scaling-stroke，并通过 style 而非属性设置 CSS 变量填充。尺寸链紧密时，用 dx/dy 错开标签。分解投影：matrix(.94s, .17s, −.34s, .47s, tx, ty−z)。

发布前

  • 绘图中的每个代码都存在于表格中；每个公式都能闭合（表头 = 2·S1 + H3，总计 = 各区域之和）。
  • 不含品牌文字；不含颜色（在灰色标记之外搜索十六进制值）；不使用依赖内容的宽度。
  • 使用 Playwright 在 1800 px 宽度下渲染一次，检查截图中是否有标签重叠或元素越过图纸边界，集中修复一轮，然后交付（在 claude.ai 上发布为 Artifact，或保存为 .html）。

要为完成的图纸添加动画，请使用 dimensional-drawing-motion 技能。

用一到两句话回复：绘制了什么，以及团队需要确定的任何 [TBD] 值。

评论

支持 Markdown