Drawn UI
绘制屏幕以设计师为案例研究草图的方式展示产品：真实的界面被简化，仅保留其结构，并用产品自身的颜色进行着色。它看起来像是设计作品，而截图则像是粘贴上去的，并且永远不会显示私人数据，因为所有文本都被替换为条形。
外观保持平静，因为规则很少且严格。每个项目仍然看起来像它自己，因为色调、屏幕和抬起的一部分都来自项目本身。这些绘图的去向（英雄区、网格、功能列表、幻灯片）由使用它们的人决定。
按此顺序工作
- 阅读真实产品。 其当前屏幕，来自代码、应用程序或设计文件。每张绘图都追踪到真实的屏幕或组件。切勿发明隐喻（漂浮的秤、门、卡片之间的箭头）：如果产品没有它，绘图就不会显示它。
- 选择时刻。 每张绘图的用途：一个屏幕、一个组件、一个状态。一组绘图展示不同的组件，而不是一个组件每次都显示更多细节。
- 获取强调色。 产品自身的色调或品牌颜色。
scripts/tint.py "#hex"显示它产生的色调。只有当它们在产品中有意义时才使用更多强调色（状态颜色、品牌配对）。 - 编写规范。
drawings.json，格式在references/spec.md中（在绘图前阅读其关于尺寸、抬起和色调的部分），并参考examples/ledger/drawings.json中的示例。根据将要填充的空间调整每张绘图的大小。 - 绘制并检查。
python3 scripts/draw.py drawings.json --shots（截图需要Playwright和Chromium）。修复它打印的每个问题，然后打开out/shots/sheet.png并查看。数字标记，眼睛决定：卡片内部空角落、向一侧倾斜的绘图、看起来像药丸的堆叠。重复直到它通过检查并看起来平静。
规则
- 绘图中没有文字。所有文本变成条形：高度为12、8、6或4，宽度以4为步长，完全圆角。
- 白色卡片，每种角色一个圆角半径（卡片12，内框8，行4，手机32），一个卡片阴影，一个抬起阴影。
- 每张绘图的一个部分可以从其卡片中抬起：它仅从一侧离开，距离为16到72（24到40效果最佳），永远不超过卡片的顶部或底部，周围至少有8的间距。宽度为600或更大的绘图可以抬起两个部分。抬起的部分替换它抬起的内容，而不是覆盖一半。
- 每张绘图一个强调色，用于该屏幕中重要的元素上。
- 每张绘图最多一个线条图形，以1.5线宽和圆头端点绘制。
- 默认无背景：绘图仅为其阴影留出空间，并放置在任何页面上。使用
"ground": true时，它会得到一个着色地面，其宽度和高度的65%到75%被填充，并居中。 - 所有内容以1:1比例绘制在4网格上。一组中并排放置的绘图共享一个比例：以它们显示的大小绘制，当它们在一行中时匹配高度。
- 手机比例为1到2.05。
使用输出
out/<id>.svg 文件是自包含的，带有自身的宽度和高度，并自适应页面：浅色主题下为浅色，深色主题下为深色。它们遵循查看者的系统设置，任何父元素上的 dark 或 light 类（或 data-theme）可以强制一种模式。它们是 aria-hidden 的，id按绘图命名空间，因此多个可以内联在同一页面上。形状带有角色类（p-ground、p-card、p-bar、p-dot、p-glyph、p-hi 用于抬起部分）以实现悬停动画；out/index.html 显示一个带有减少动效回应的平静示例。对于手机屏幕过宽的绘图，会生成第二个较窄的绘图；切勿压缩它。
如果使用Figma进行设计：相同的规则适用，规范值一对一映射到画框（卡片使用自动布局，仅抬起部分使用绝对定位）。将每个地面导出为SVG。
当规则与产品冲突时
没有单一强调色的产品可以使用其最暗的中性色。只有通过两个高亮才能理解的屏幕可以画成两张绘图。一次只打破一条规则，并说明是哪一条。