Anatomy Asset 是 Anatomy 的一个分支,用途从“解释图”转向“页面资产”:为落地页、产品站点、发布帖、社交卡片和演示文稿制作精致、细节丰富的等轴测 SVG 素材。绘图方式与 Anatomy 相同——画一个真实可建造的物体,由大量小而精确的实体部件组成,用四种色调着色,按由后向前的顺序绘制,每条线都有明确落点;区别在于目标:Anatomy 图要解释,而 Asset 要在页面上好看,承载品牌、撑住构图、为标题留出空间,并让人愿意看第二眼。
用途与定位:制作落地页主视觉对象(hero object)、功能图块、聚光灯小图、横幅、OG 卡片或幻灯片配图。技能提供完整工作流:先写简报(产品/页面是什么、要传达的感受或承诺、所在页面颜色、品牌色、摆放位置和交付尺寸),再写 3–5 个物体概念(直白、隐喻或小场景)、列出部件清单(基座、结构、机构、控件、主体),然后才进入几何构建。
主要能力:内置等轴测绘图套件,提供相机、实体部件库、SVG 字符串输出、板材/圆柱/挤出/轮廓/刻度/滚花/线圈等构件,以及车削模块处理任意轴的圆形件、管线模块处理管道和线缆、审计模块验证深度顺序与不穿插。素材层 assetSvg 可生成独立的 .svg(样式内联并作用域化、页面底色 token、强调色、环境动效、合法 XML),previewHtml 生成带安全区检查的预览页,fitInto 把画面适配到宽画布中的指定区域。动效仅用 CSS,可在 <img> 中运行,包括部件浮动、漂移、呼吸、闪烁、自转以及转子、传送带、指针、按键、书写等签名动作,最多两三个慢速错相动作,并支持 reduced motion。
使用方式:示例 build.mjs 导入 kit/iso-kit.mjs 与 kit/asset.mjs,用 solidSvg、lineSvg、dotsSvg 组装字符串,经 assetSvg 包装后写出 .svg 和 previewHtml 预览页;例如合成器示例用 node build.mjs(深色)和 node build.mjs --light 生成 synth-hero.svg 与预览页。验证依赖 xmllint 检查 XML 合法性、capture.mjs 在各主题和 390px 宽度下截图并确认控制台无安全区报错、lines.mjs 检查线端为 0、build.mjs --audit 在有管道/线缆/圆件时须输出 audit passed,并对每个接合处和强调部件做 4× 特写检查。
适用场景:音乐应用、邮件整理工具、数据库、支付 API、专注计时器、开发者平台等产品的页面主视觉、功能点、横幅和品牌套件(示例含 Aether 电动航空深色冰蓝套装与 Halden 清洁能源浅色绿色套装)。
限制:强调资产质量而非解释;禁止漂浮板块、单一扁平大形状、细节同权重堆砌等失败模式;默认单强调色系,文字默认不画在物体上;WebGL 和 3D 模式会使资产变成 Scene,需含脚本的页面,不能作为纯 .svg 交付;互动行为仅在用户要求时加入。具体收费、价格与平台支持资料暂未提供。