anatomy-asset

Anatomy Asset

Anatomy 的一个分支，面向素材而非解说图。绘制方式保持不变：描绘一个真实、可制作的物体，由许多精细、扎实的小部件组成，使用四种色调着色，并按从后到前的顺序绘制，每条线都落在某个物体上。变化的是用途。Anatomy 图需要解释；素材则需要在页面上看起来合适：传达品牌形象、支撑版面构图、为标题留出空间，并经得起细看。

因此，规则分为两部分：

• 工艺标准固定。 使用实体，不用线框。工具包负责着色。细节精致而准确，不制造杂乱。每条线都落在某个物体上。部件之间不能相互穿透。绘制顺序必须正确。曲面应平滑着色。每个作品在 1× 尺寸下都细节丰富，在 4× 尺寸下仍值得细看。这些标准从 Anatomy 原样继承，并使用相同的检查。
• 风格由用户决定。 主题、氛围、颜色、构图、物体要多写实或多活泼、是否添加文字：这些都由用户决定。如果用户要求的内容违反 Anatomy 的规则（双重点缀色、标牌上的文字、悬浮部件、粉彩背景），就照做，并保持同样的工艺水准。

此分支附带了 13 个示例，并保留了 Anatomy 中的 8 个示例作为工艺参考。开始前，先打开最接近你需求的示例。

• examples/synth-hero/ 是素材参考：一台紧凑型合成器，用作 1200 × 640 的落地页主视觉，插画占右侧 56%，左侧留出标题空间。两个旋钮采用品牌色，黑色琴键使用深色中性色，一个旋钮帽从轴上抬起，营造产品摄影效果；LED 会闪烁，推子仅通过 CSS 移动。约有 95 个实体和 880 条路径，大小为 240 KB。运行 node build.mjs（深色）和 node build.mjs --light，会生成 synth-hero.svg 和预览页面。
• examples/writing-desk/ 是一张具有手工艺氛围的主视觉：一张带鸽洞式架子的橡木书桌，以黄铜、木材、皮革和乌木构成材质色阶，绿色钢笔悬浮在笔槽上方。约有 157 个实体。示例展示了如何将线条作为卡片的 inner 传入，这样线条端点就不会在卡片轮廓上形成凹口。
• examples/espresso-tile/ 是一张 640 × 480 的专题卡片，以严格的方式表现活泼的主题：一台红色浓缩咖啡机和一个带关节臂的小型机器人咖啡师。约有 113 个实体。示例包含垂直面辅助函数，以及通过 assetSvg 的 css 实现的自定义“基本常亮”闪烁效果。
• examples/feature-spots/ 是一组三张 320 × 320 的小插画（秒表、保险箱、电池灯笼），由同一个脚本生成：使用同一台相机、同一比例、同一套部件词汇，weight 为 0.5；经过路径精简后处理，每张都小于 70 KB。
• examples/bottling-line/ 是一张 1600 × 560 的横幅：灌装线以 62° 方位角斜向延伸，瓶子采用玻璃灰材质色阶，瓶盖为紫色，一只瓶子正沿传送带滑动一个节距。约有 190 个实体，大小不到 400 KB。
• examples/aero-* 和 examples/energy-* 是两套完整的品牌素材，各包含一张主视觉、一张横幅、一张专题卡片和三张小插画，供同一个落地页使用：Aether（电动航空，深色，冰蓝色）和 Halden（清洁能源，浅色，绿色）。它们展示了如何将同一品牌风格贯穿不同版位、如何使用车床构建飞机并进行审计、如何使用浅色复合材质色阶让机身在深色页面上保持明亮、如何使用 G.prismOf 倾斜太阳能板，以及如何绘制立体场景地面板。
• Anatomy 中保留的工艺示例：dial-indicator/（最小，约 300 行）、test-rig/（绘制质量标杆）、desk-computer/（绘制在表面上的屏幕）、arcade-cabinet/（剖切和相机摆放）、raptor-engine/（圆形部件、管道、线束和审计）、spot-plate/（会变形的形状）、ripple-tank/（WebGL 水面和光线）、turning-dial/（3D 模式）。阅读这些示例，了解如何构建部件，而不是如何进行版面编排：其中的卡片、读数和图例属于解说图。

最重要的理念

物件本身承载信息。 不要在板子上画个徽标、堆叠一叠悬浮卡片，也不要把截图放进等距视角的画框里。找到一件真实、制作精美、本身就代表产品承诺的物件，并把它打造得如此出色，让人忍不住想多看几眼。

简介	物件
一款音乐创作应用，主打“秒刻成音”	一台紧凑型合成器，配有品牌色旋钮，其中一个旋钮帽从轴上取下
一款为收件箱分类的邮件工具	一座黄铜与橡木制成的信件分拣柜，格口逐渐装满，其中一封信正飞在半空
一个永不丢失数据的数据库	一扇虚掩的银行金库门，可见门闩结构和刻度盘，内部透出柔和的光
一个支付 API	一台结合了收银机与电报键的设备，收据纸带卷曲而出
一款让人平静专注的计时器	一个厨房计时器、一支蜡烛和一罐茶叶，放在小巧的胡桃木托盘上
一个开发平台的“加速发布”理念	一枚模型火箭架在工作台上的发射导轨上，旁边放着打开的工具箱

物件可以是具象的（将产品表现为一台机器）、一种隐喻（表现产品给人的感受），也可以是一个小场景（围绕物件搭建的微缩景观）。它可以俏皮，也可以超乎想象——比如茶杯上的灯塔，或者兼作书架的服务器机架——只要每个部分都像真实物件那样精心打造。可以夸张比例，但绝不能敷衍工艺。

容易失败的做法：

• 太抽象。 悬浮的板块、立方体和卡片看不出是什么，也无法传达任何产品价值。
• 太扁平、太单调。 一个大形状加几条线，既没有体积感，也没有值得探索的细节。
• 太繁杂。 所有细节的权重都一样，导致没有视觉引导。突出一个主体，搭配一两处点缀，周围保持简洁。
• 偏离品牌调性。 画得不错，却用了错误的氛围：为一款温馨的日记应用配上铬合金工业机器。

references/concepts.md 中介绍了构思方法和更多映射示例。

每件作品都要高度精细。 无论素材有多小——包括 160 px 的点缀插画——都要表现为细节丰富、真实可信的物件，绝不能只是几块板状结构。随着尺寸变化（工作流第 1 步），变化的是 4× 扫描的深入程度。

• 参照真实物件。 按真实物件的构造方式来制作：每颗螺丝、每道接缝、每个倒角、铰链、支脚、滚花、铭牌和线缆，都要表现出来。
• 两种观感。 在 1× 尺寸下，它看起来是一个醒目的物件；在 4× 尺寸下，每个区域仍有值得发现的真实细节。
• 有目的，绝不堆砌。 细节应来自物件本身应有的组成部分。每个部件都与其他部分相连，收在边缘处，并自然淡出，而不是戛然而止。

工作流

按此顺序进行。在制作任何几何结构之前，先写好需求简介、概念和部件清单。

1. 确定尺寸。 在开展其他工作前，先说明尺寸。
   • Spot：一个小型物件，包含 25–50 个部件，呈正方形或近似正方形，适用于功能列表、空状态或图标集。无需询问，直接制作。
   • Asset：一个主视觉物件，包含 50–120 个部件，具有构图，可选配环境动效。无需询问，直接制作；若制作时间较长，请说明。
   • Scene：一个立体场景、一整套必须风格统一的 Spot，或任何涉及 WebGL 或 3D 模式的内容，包含 120 个以上部件。给出预估，提出保留核心内容的 Asset 版本，并仅在用户选择后制作 Scene。
   • 在第一个小时内提供可用的预览页面，然后继续完善。
2. 先写简报。 从请求中确定，或只询问无法推断的信息：产品或页面是什么、Asset 要传递的核心感受或承诺、所在页面的颜色、品牌色、放置位置（主视觉右侧、主视觉中央、功能卡片、Spot、横幅、OG 卡片、演示文稿页面）以及交付尺寸。如果用户没有提供这些信息，且请求很简单，就选择合理的默认值并说明你的选择。
3. 构思方案。 用一行一个的方式写出 3–5 个物件构想（具象、隐喻、场景），说明你会选哪个以及原因，然后采用用户的选择或你的首选。再用一句话说明物件是什么，以及视线会落在哪里。不要照搬参考图片：借鉴其质感，而不是物件本身。
4. 列出部件。 按类别分组列出部件：底座（底板、脚、托盘、布料）、结构（外壳、框架、侧板、立柱）、机构（让它成为该物件的部件）、控件（旋钮、按键、锁扣）以及主体——承载点缀色或关键时刻的那个部件。Spot 至少包含 25 个部件，Asset 至少包含 50 个部件。references/craft.md 中提供了部件术语和制作方法。
5. 构图。 选择画布和图稿在画布中的位置（references/composition.md）：为图稿设置区域、为标题文字设置安全区，并确定相机视角。使用 kit/asset.mjs 中的 fitInto(points, region, { pad, azimuth }) 调整尺寸和位置。调整方位角，直到最有意思的一面朝向观众（合成器使用 60° 方位角，展示带按键的长正面）。
6. 只构建一次几何形状。 使用工具包，严格遵循 Anatomy 的做法：slabOf、cylinder、extrude、planOutline、topTicks、knurl、coil、radialTicks；使用 kit/lathe.mjs 沿任意轴制作圆形部件，使用 kit/tube.mjs 制作管道和线缆。
7. 从后向前、从下向上绘制。 使用 depthOf 对重复部件排序。将任何环绕其他部件的部分拆开。一旦 Asset 中包含管道、线缆和圆形部件，就用 A.recorder 记录形状，用 A.settle 调整按键，并以 A.auditOrExit 结束（Anatomy 的第 7 步，保持不变）。
8. 上色。 以单色为主，以页面颜色为基础，并按作用范围使用品牌色作为令牌集（references/brand.md）：assetSvg({ paper, accents: { brand: "#ff5a1f" } })，并在承载品牌色的部件外包上 <g class="ac-brand">。默认使用一组点缀色；用户提出要求时再增加。
9. 赋予生命。 每个 Asset 都要动起来，且只能使用 CSS，这样才能在 <img> 中运行；标志性动效应表现物件的运作方式（转子使用 amRotor 旋转，传送带使用 amLoop 运转，指针使用 amSwing 摆动，按键使用 amPress 弹奏，墨水使用 amDraw 书写，其他物件使用 amFlip），并辅以细微动效：某个部件漂浮（amFloat）、漂移（amSlide）、呼吸（amPulse）、闪烁（amBlink）或在自身平面内旋转（amSpin：转子、螺旋桨、风扇、涡轮叶片，它们必须始终转动）。最多让两三个部件运动，速度放慢、错开相位，不得改变绘制顺序，并且在减少动态效果设置下仍须正常显示。仅当用户提出要求时才实现交互行为（指针、滚动、键盘）；届时遵循 Anatomy 的 references/motion.md。
10. 交付。 assetSvg 会写入独立的 .svg 文件；previewHtml 会生成一个页面，在页面底色上展示该文件并检查安全区。references/export.md 介绍了可用格式：SVG、2× PNG、在 React 中内联以及整套导出。
11. 像评论家一样验证。 使用 Anatomy 的检查项，在预览页面上运行：
    • xmllint --noout asset.svg 必须静默无输出：无效的 SVG XML 在 <img> 中会呈现空白。
    • 对每个交付主题运行 node scripts/capture.mjs asset.html --out shots/asset.png；若要在手机上显示，还要在 390 px 宽度下运行。控制台必须干净：当图稿进入安全区时，预览会记录错误（使用 ?safe 打开即可查看安全区）。
    • node scripts/lines.mjs asset.html --out shots/lines.png 必须打印 line ends: 0。
    • 若包含管道、线缆或圆形部件，node build.mjs --audit 必须以 audit passed 结束。
    • 在每个主题下，对每个接合处和点缀色部件进行 4× 特写检查（--zoom）。
    • 若包含动效，使用多个 --times 截图，并再截一张 --reduced 截图。
    • 将 PNG 放在合成器旁边，检查：它是否一眼看起来就是制作精良的真实物件？视线是否落在预期位置？它是否与页面相衬——颜色、氛围和标题空间是否合适？放大到 4× 后是否依然经得起细看？反复迭代，直到答案都是肯定的。检查清单：references/verify.md，以及 references/export.md 中的 Asset 检查项。

设置

工具包是 Anatomy 的（kit/），外加一个模块：

文件	用途
kit/asset.mjs	资源层。assetSvg（独立交付版本：样式内联并限定作用域，为页面颜色设置基底令牌、添加强调色、环境动效，并确保 XML 有效）、previewHtml（检查所运行的页面，包含安全区检查）、fitInto（适配到宽画布中的一个区域）、groundTokens 和 accentTokens/accentCss（调色板）、amFloat、amSlide、amPulse、amBlink、amSpin，以及 planeMatrix、topPlane 和 bladesPath（纯 CSS 动效）。
kit/iso-kit.mjs、kit/iso-kit.ts、kit/iso.css	核心：摄像机、实体、部件库、SVG 字符串、ISO_CSS。
kit/lathe.mjs、kit/tube.mjs、kit/audit.mjs	圆形部件、管道和线缆，以及用于验证它们的审计工具。
kit/gl.mjs、kit/turn*.mjs、kit/react/	WebGL 图层、3D 模式和 React 组件，适用于需要这些功能的资源。
scripts/capture.mjs、scripts/drive.mjs、scripts/lines.mjs	截图、脚本化序列和线条端点检查。它们会自行找到预览页的舞台。

构建脚本可参照 examples/synth-hero/build.mjs：导入 kit/iso-kit.mjs 和 kit/asset.mjs，用 solidSvg、lineSvg、dotsSvg 组装字符串，以 assetSvg 包装，然后写入 .svg 和 previewHtml(...)。对于 React 或 Next.js 网站，除非用户需要交互，否则应交付 .svg（用 <img> 或 unoptimized 的 next/image 加载）；如需交互，请遵循 Anatomy 的 references/react.md。

工艺规则（简版）

Anatomy 的规则，以及资源需要做出的调整。references/craft.md 提供完整的原理说明和制作方法；其中关于卡片、读数和图例的内容仅适用于说明文档。

• 使用实体，不用线框。 每个部件都填充页面颜色，并按顺序绘制。不要有透视可见的边缘，也不要画虚线隐藏线。
• 让工具包负责明暗处理。 extrude 会返回四种侧面色调和一种更亮的顶面色调。仅当嵌件厚度小于 1 个单位时才使用 flat。
• 色调层级。 底座和支脚使用 lo，结构使用 mid，主体使用 hi，另设一个 lit 部件。强调色不能取代层级：强调色部件也要有色调、明暗变化和线条，且全部来自其自身的色阶。
• 颜色是选择，不是噪声。 默认使用灰色，主体使用品牌强调色，并在一两处呼应这一颜色。所有颜色都必须是令牌（references/brand.md），填充色中不得直接填写十六进制值。用户要求时可增加颜色：此时每种颜色都应有自己的色阶，且它们的明度一致。
• 细节要精巧准确，切忌杂乱。 倒角宽度为 0.4–1.6，凹槽距边缘内缩 3–5，螺丝画成带环的 0.4–0.55 圆点，旋钮加滚花，刻度线须起于条带或刻度弧线上。
• 线条要有明确终点。 每条线都必须终止于某个对象：一个面、另一条线或一个圆点。指针始于中心轴圆点；滚花止于接缝。
• 管道或线缆不得穿过任何物体， 且每处交叉都必须符合真实的深度顺序，并通过审计验证。
• 曲面明暗应平滑过渡， 不得呈阶梯状。纹理应止于真实边缘，或逐渐淡出。
• 文字由用户决定。 默认图稿中不加文字，页面已有标题。若用户希望物体上带有文字（如铭牌上的品牌名、显示屏上的数字），则文字是物体的一部分：应放在面所在的平面上，适配并裁切到其窗口内（craft.md 第 10 节）。
• 体积感。 厚度要真实，物体要有承托关系，底座下方及任何悬空物体下方都要有柔和的光晕。
• 构图。 图稿应填满所在区域，而非整个画布；避开安全区；并确保在实际展示尺寸下清晰易读（references/composition.md）。
• 线宽随画布缩放。 600 像素宽的图稿适合使用 0.6 px 线宽；1200 像素宽的主视觉适合使用 weight: 0.8–1，160 px 的小图适合使用 0.5。

WebGL 和 3D

它们的工作方式与 Anatomy 完全相同，成本也一样，因此会让素材成为 Scene。只有线条无法绘制的效果（火焰、水、灯光、辉光、蒸汽）才使用着色器；浅色主题仍应针对纸张设计，并注意着色器需要一个带脚本的页面：它不能作为纯 .svg 文件交付。请先阅读 references/webgl.md 和 references/3d.md。

参考资料

按需阅读：

• references/concepts.md：从简报到物件——构思方法、字面表达与隐喻表达及场景、氛围与完成度，以及更多映射方式。
• references/composition.md：画布和布局（右侧或居中的主视觉、功能磁贴、点缀图、横幅、OG 卡片、幻灯片）、安全区、主视觉的视角、风格匹配的套件、线条粗细和手机尺寸。
• references/brand.md：调色板——在任何页面颜色中融入灰色、强调色渐变（body 和 ink）、深色中性色、多个强调色、浅色和深色主题。
• references/export.md：交付——.svg、预览页面、<img> 与内联方式、PNG、尺寸预算、环境动效和素材检查。
• references/craft.md：深入了解视觉风格：部件词汇、色调、绘制顺序、圆形部件和管道、屏幕和面部上的元素、反模式。
• references/kit.md：API，包括签名和示例。
• references/verify.md：capture.mjs、drive.mjs、线条检查、审计和特写。
• references/motion.md：交互动效，适用于用户希望素材响应指针或滚动的情况。
• references/webgl.md、references/3d.md、references/react.md：着色器、3D 模式和 React，与 Anatomy 中的内容一致。
• references/walkthrough.md：Anatomy 的测试框架如何逐步设计——同样的严谨方法也适用于素材。