素材

图从哪来、承担什么、怎样和页面接成一体。游戏、收集和养成类产品要的角色、道具、藏品和图集，见“成套素材”。

目录导航

• 先定图承担什么
• 复用、生成，还是交给代码
• 让图承担意思
• 写提示词
• 生成后放进页面再判断
• 让图和页面接成一体
• 让一张画当舞台
• 异质素材的单色化统一
• 抽象技术的主视觉推导
• 成套素材：角色、道具与图集
• 真实贴图与科学、工程素材
• 实时 3D
• 生成视频的可选路径
• 文件与说明

先定图承担什么

素材是设计的起点，不是布局完成后填进去的装饰。先问：如果只保留一张图、一个标题和一个动作，哪张图值得占据这个位置？再决定是否需要更多模块。

• 分清差距来自哪里。 是信息和构图的问题，还是确实缺一张能表达产品和品牌的图。不用更多图片、光效和动画掩盖层级问题，也不因为代码好写，就用通用渐变和几何形状顶替必要的图像。概念或容器结构不成立时，否决当前方案，先改方向和骨架；不用继续生图补救。
• 给每张图一句任务。 它展示对象、解释关系，还是建立品牌和情绪；要让人一眼看懂什么。答不上来就先别找图，也别生成。图已经说清的，文字不再重复。
• 后台和工具同样要判断。 对象缩略图帮助识别，内容封面支持浏览，地图或空间图帮助定位，示意图解释关系；它们可以是界面最有价值的部分。纯数据任务确实不受益时，保留清楚的数据表达，不硬塞气氛图。
• 图跟着北极星定，页面再和图呼应。 主体、视角、尺度、光线、颜色、材质和留白由设计北极星决定；页面的字体、背景、边缘处理和运动从这张图建立呼应，也可以用一处受控的反差突出主动作。同组的图统一主体尺度、视角、光线和边缘质感，不是给所有图套同一个滤镜。
• 图是结构，不是装在盒子里的插图。 让它跨过版面的分界、占满首屏，或者和文字叠在一起，做法见“让图和页面接成一体”。
• 先放进真实页面看一轮，再延展其他区域。 素材没到位时，占位版的审美评审不算最终通过。

复用、生成，还是交给代码

• 有合适的就复用。 实际看过图再引用它的特征；已有好素材时围绕它设计，不为证明用了工具而重复生成。
• 自然主体先准备真实位图。 植物、食物、人物、空间和自然材质担任主视觉时，默认先制作定制位图，或复用已经实际看过、符合方向的素材。简单矢量只用于图标、数据和结构可控的图形；需要自然观感的主视觉，不能用单薄线条图标冒充成品。
• 没有就做出来。 没有合适的现成素材时，主动制作关键素材，不因为正在写前端代码就省掉这一步。生成素材按这个来源顺序：宿主能生图就用宿主的。宿主不能生图且本任务已明确授权使用 oiloil 积分时，先运行 node <skill>/scripts/oiloil-image.mjs balance 检查登录状态；未登录或登录失效时，明确告诉用户需要登录，给出 npx github:oil-oil/oil-cli login 和 账户页，说明浏览器授权完成后继续当前任务。只提示一次，不反复催促，也不反复发送生图请求。登录后用 oiloil 生图脚本（先运行 node <skill>/scripts/oiloil-image.mjs --help；并发不超过 2 个进程，--prompt 参数用单引号包裹以防 $ 符号被 Shell 展开，基于参考图改图时传 --ref <参考图>）。任务没有明确授权时不使用积分，只在需要图的方向上友好提示一次，任务照常继续。已登录不等于授权消费。按所用工具自己的输入和编辑规则来。除了主产品本身，还可以把产品所处的地域环境、原材料肌理和工序细节一起做进这套画面里，让页面有完整的上下文，不只放几张孤立的棚拍白底图。需要真实材质、设计器物、历史摄影、工程测绘图、古地图、科学版画或航空航天实拍素材时，用 curate-media.mjs 从 Poly Haven、Wikimedia Commons、各大博物馆开放馆藏（含日本国立博物馆与国会图书馆）、LOC、Wellcome 和 NASA 检索到本地 assets/。授权不允许放进页面的条目也能派上用场：下载到不上线的目录，给生图当参考图，取它的题材、年代、构图和材质线索，不让生成结果复刻原图。编号拉取、贴图直链、联系表和视频 poster 的命令见 工具 [blocked]；下载自动生成 SOURCES.md，据此保留条目许可与署名。
• 需要随操作实时变形的实物，用多层次矢量或实时渲染配合静态图。 遇到选配器、规格切换、剖面拆解这类必须随用户点击立刻改变比例、部件或色泽的区域，如果只放一张不会变的静态照片，操作和画面就会脱节。把静态图像留给氛围、地域和材质特写；需要实时联动的主体用内联 SVG（画足外轮廓受光体积、结构连接件和表面肌理三层细节，不画成单薄的纯色图标）或 Canvas/3D 绘制，让每一次切换都在画面上立即兑现。
• 位图和代码分工。 位图负责自然形态、材质和光影；代码负责交互与可访问界面。文字、按钮、表单、数据标签和常规布局一律由真实 HTML/CSS 排版，不让生图模型画，也不拿完整截图当可交互的成品：生图画字容易出错，改不了，也不能被选中和读屏。
• 离线只限制运行时。 页面运行时不得请求外部素材；制作阶段仍可按授权使用 image-gen 生成，再把成品打包到本地 assets/。不把离线交付当成跳过定制素材的理由。
• 没有生成能力时才用替代。 没有符合方向的现成素材，且确认本任务没有可用生成能力后，才选用许可和实际显示质量都合格的临时替代素材或多层次矢量，并附素材简报，写清需要补做的主体、视角、材质、光向、留白和尺寸。不自动安装工具、切换收费服务，或要求用户把密钥粘进对话。
• 要转动、有物理或随视角变化的对象见“实时 3D”；预先确定的连续变化见“生成视频的可选路径”。

让图承担意思

生成图最常见的失败不是画得不好，而是画得太满：细节越丰富越像图库照片，放进版面后没有重点，也和页面没有关系。

跟产品无关的“好看场景”放进版面只会抢戏；处处都画满细节，就等于没有重点。画实物或真实场景时，把主体的质感和光影做足，背景和放字的地方留干净；画抽象功能或前后变化时，可以把大面压成单色、白模或失焦，只让关键的那几处亮出颜色、光或细节。

选能和页面“接上”的主体：

• 能跨过两块色面分界的单个物件。
• 能延伸出画面的线状物。
• 能在上面标注的空间：模型、地图、剖面、平面图。

这样的主体，之后能和页面里的线、标注和区块连成一体；一张自给自足的风景照做不到。

写提示词

按固定顺序写，每项一两句：

1. 主体与表现形式：什么东西，用什么体裁呈现（照片、插画、模型或图解），体裁从页面的方向推出。
2. 构图与留白：主体在画面里的位置和占比，哪一块留空给文字。按已选的首屏骨架写出主体所在的区域和占比，以及留给文字的那一块要完全干净。留白区不要有高光、反光或杂乱纹理，保证文字清晰好读。
3. 安全距离：主体、托台与阴影不要贴到文字边缘，留出 10% 左右的空隙，防止屏幕变窄时文字压到物体上。
4. 背景：直接写出页面实际使用的十六进制色值，或者要求纯透明背景。色值一致时边缘自然融进网页，不需要额外用 CSS 遮罩去修。
5. 材质与光：主光方向、辅光、质感。同一页的多张图用同一个光向。地面反光向留白侧自然衰减，不横扫到文字区。
6. 排除项：不要任何文字、标志、伪代码、界面截图或多余漂浮物；小件图标或透明图注明“不要地面投影”，外部投影交由前端 CSS filter: drop-shadow(...) 控制。

生成后放进页面再判断

在真实页面、真实尺寸里看，不在图片查看器里判断。单独看很好的图，放进版面后常常主体太满、朝向不对、留白在错的位置。

不对就改提示词重新生成，并写清要改什么，例如“主体往右移，左边留出一半空间”“去掉地面反光，背景换成页面的色值”。不要围着一张不合适的图改版式。每轮只生成少量有明确差异的候选，按预先写定的主体、构图和材质筛选，不反复随机抽卡。同一批里挑最能排版的一张，不挑细节最多的那张。

A/B 共用素材。 各版本使用同一批原图和同等质量的导出，只改被测变量；不拿定制位图对低质量替代图，以免把素材差距误判为方案差距。

让图和页面接成一体

背景融合。 要融进背景的主视觉和大图，不加框，也不关进圆角卡片：从图的四角实际取色，页面背景用同一个值，或者用 CSS 遮罩、导出渐隐把四条边淡出到背景色。纯色背景时，提示词里的底色和网页一致，边缘就能自然接上。

透明图。 先放在最终背景上检查边缘、白边和残留的棋盘格；检查透明通道要看像素，不能看文件后缀。阴影不烘焙在图里，由页面按实际背景加投影，这样换了背景也对。

跨越结构。 透明物件放在两个色块或两个区块的分界线上，让它同时属于两边。

图和代码接力。 生成图负责代码做不出来的材质和光，例如金属、玻璃、模型、光影。代码负责需要精确、可编辑、会延续的部分，例如从图里延伸出去的线、路径和标注。如果图里有一段本该延续到页面的部分，就把它裁掉，改用矢量接着画。这样它能准确穿过版面，带上真实文字，并在不同宽度下重新走线。

标注。 在图上标注用细引线加文字，不用带底色和阴影的气泡卡片。引线端点要对准图里的真实位置：图在版面里用固定的尺寸和位置，按图片像素换算坐标。窄屏上隐藏标注，或改成图下的列表，不让它们漂移到错误的位置。

窄屏裁切。 不把整张大场景等比缩小到看不清。从原图裁出焦点区域另存一张给窄屏用，或用对象定位对准焦点。桌面和手机两种裁切，都要保住承载信息的那几处。

一张图用多次。 结尾或其他区块可以用同一张图的局部特写，比再生成一张光线和风格对不上的图更统一。

让一张画当舞台

另一种用法正好相反：图不讲信息，只给气氛，界面保持黑白克制，全页只用一种有笔触的画当唯一的颜色来源。

• 画当舞台，界面在上面演示。 把真实界面的简化版放在画上，画从四周露出来。滚动时画固定不动，只换前面的界面内容，和“滚动叙事”接得上。
• 大胆裁切。 只留画的一角或一个局部，接近抽象，不和界面抢。题材不必和产品字面相关，但气质要对得上。
• 松和紧互相衬托。 画越松，界面越要精确、干净；两者一起出现，彼此都更好看。
• 用得少。 一张画贯穿全页，或者只在两三处出现，例如价格卡的顶端和页脚；不要每个区块配一张。同一页的画统一画种和笔触。
• 演示用简化过的真实界面。 次要内容虚化或换成骨架，只把要讲的那一处做清楚；数字对比直接用界面元素画出来，例如两条长短不同的进度条，而不是另做一张图表。

异质素材的单色化统一

引入历史画作、雕像肖像或外部摄影素材时，彩色位图容易与界面的主题色产生冲突。可以通过统一的单色处理将不同来源的素材收拢到当前方向里：

• 单色映射：将素材转为黑白高对比后，把暗部与亮部映射到页面的主色与底色。
• 网点与点阵抖动：对写实图片做半色调网点化或微弱的扫描线处理，消解照片的写实质感，让它能和排版、网格共处。

抽象技术的主视觉推导

缺少产品截图时，不回退到通用的彩色发光球或大渐变。从产品处理的东西里找一个有形的对象：它读写的数据长什么样，它替代的那件工具或那道工序是什么，它的用户手边有什么。表现形式满足两条：大面积色阶平稳，文字压得住；画面里的线和标尺能由 SVG/CSS 接着画。找不到有形的对象时，主视觉交给排版本身。

成套素材：角色、道具与图集

游戏、收集和养成类产品要的不是一张配图，而是一整套会被反复摆放、翻转、比较的素材。

• 先写风格说明。 画法、视角、光向、材质、比例和色板各写一句，同一批的提示词都按它写。
• 同系列靠轮廓区分。 统一比例和光向，用耳朵、道具、配饰这类轮廓特征区分个体，不只换颜色。缩到实际显示尺寸还要能一眼分开。
• 状态序列从同一素材改出来。 生长阶段、正反面、开壳前后和不同动作，都以第一张为参考图编辑变体，保持同一个角色，不逐状态独立生成；各状态的落地点对齐到同一条基线。
• 透明图集按轮廓切。 格子之间留透明间距，按实际轮廓裁切，不按格子均分，否则会切掉树冠、带进邻格的残片。检查 alpha 像素，不看预览图的背景色，再放到最终背景上看边缘。
• 贴到物体上要两面成立。 会翻转、落下或转到侧面的素材，正面背面都要有，边缘沿轮廓闭合。受光交给场景，不在图里烘焙和场景方向相反的光影。

真实贴图与科学、工程素材

读 --sheet 生成的联系表 PNG 挑选，imageUrl 用来下载；look 里的四边色、纸底和干净区域，直接对应下文的背景融合、正片叠底和压字位置。Poly Haven 的 textureMaps.diffuse.url 才是表面颜色贴图，roughness 和 normal 分别供实时材质的粗糙度与法线使用；渲染球和模型预览图不适合重复铺贴。

• 用 Diffuse JPG 做 CSS background-repeat: repeat 或 SVG <pattern>，在最终尺寸下检查四边接缝和重复频率。部分素材只沿一个轴重复；不要只看缩略图就认定双轴无缝。
• Three.js 的颜色贴图用 sRGB，粗糙度与法线用线性数据；本工具选择 OpenGL 法线，按模型 UV 和实际光照检查方向。重复材质设置两个轴的 RepeatWrapping；模型 glTF 依赖清单中的 UV 贴图用于该模型，不能当作无缝材质。
• 测绘结果只选 LOC hh 的图纸资源，照片、调查说明与图纸分开看。地图与版画的 IIIF 原图尺寸、下载尺寸可能不同，以下载输出的宽高判断能否承载页面放大和标注。
• NASA 视频检索排除标题或关键词明确标为动画、仿真或可视化的项，仍要看片确认是否符合实拍要求。首帧 poster 是静态回退；背景播放、循环与裁切先在真实页面里检查。
• 许可证跟素材记录走。Poly Haven 输出 CC0 与信源署名，Wellcome 保留条目许可；LOC 不推定所有条目无版权限制。Met、AIC、Cleveland 和 Rijksmuseum 只取公有领域或 CC0 条目；Japan Search 只取 CC0、公有领域、CC BY 和 CC BY-SA，ColBase 的图要按其要求署“出典：ColBase”；Commons 按每个文件自己的许可，BY-SA 改色或合成后要以同样许可共享。V&A 的公开 API 可访问高清图，但公开访问不等于取得首页、商业用途或高清发布授权，所以标为 reference。NASA 使用条件保留第三方署名与限制。官方条款随 SOURCES.md 一并保留，需要展示署名时放到页脚或项目的素材说明。

实时 3D

三类情况用实时 3D：用户要转动、检视的对象；堆叠、碰撞、推挤、摆动这类物理；玻璃、金属、透明塑料这类随视角变化的材质。一张生成图就能表达的，或者只为了显得高级，都不用。

• 用 three.js 这类成熟引擎，需要物理时再配一个刚体库。生成的图当贴图、精灵或环境光来源，代码负责空间、运动和受力。
• 验收看画面，不看用没用库：静帧看得出体积、透视、接触阴影和材质区分；序列图看动作关系，直接操作看运动是否连续、力能否传到被推的物体上。录屏条件按 工具 [blocked]，序列图不能证明正常速度下的手感。
• 新建的小样把库下载到任务目录的 vendor/ 并附许可证，不引用 CDN；存量项目按项目已有的依赖方式引入。以模块方式引入的页面和贴图要通过本地服务器打开；要求双击就能打开时，打包成一个普通脚本，贴图内联或放在同目录。
• 设备像素比上限取 2；页面隐藏或滚出视口时停帧；拿不到 WebGL 时显示同一场景的静态图；减少动态效果时照常算出结果，只关镜头晃动和装饰演出。
• 截图前确认画布真的画出了内容，见 工具 [blocked]。

生成视频的可选路径

要一段能叠在页面上循环播放的素材时，先检查三样：首尾接不接得上，主体的边缘干不干净，背景处理得怎么样。在单色背景上生成再抠像，只是可以试的办法之一：透明和反光的物体抠完可能丢边，或者带上背景的颜色，要放到最终的页面背景上看。

要把几段视频连成一段叙事时，可以拿前一段的最后一帧当下一段的第一帧，或者事先把各段的关键帧统一规划好。播放进度由滚动或手势控制时，要检查跳到任意一帧、倒着播、加载速度和内存占用，不要默认把整段视频解码成一张张大图。

玻璃、水晶这类需要折射或透光的物体，先在最终页面的背景色上生成画面，让折射和投影烘焙进素材，再用视频抠像模型去掉背景。直接在绿幕上生成再抠像，折射会带着绿色。预渲染的折射和光照只对应生成时的背景，不应承诺会随任意页面内容产生实时物理效果。

透明底的视频和图片一样，可以跨在两个区块的分界上，做法见上文的“跨越结构”。

文件与说明

• 生成、下载或用户给的图，放进页面前按显示尺寸的 2 倍导出，不直接内嵌原始大图。不透明的图用 JPEG 或 WebP，透明的用 WebP 或 PNG；单张控制在几百 KB 以内。内嵌成 data URL 后体积会再大约三分之一。压缩、缩放、多尺寸 srcset、比例裁切和透明裁边用 node <skill>/scripts/prep-image.mjs 一次批量完成，用法看 --help。
• 保留原图和处理后的版本；生成图记录提示词，以及工具明确提供的模型和实际成本（费用或积分）；未提供的项标为“未提供”，不估算。所有素材记录来源、用途和处理方式，分清复用、裁切、生成和后处理。
• 生成图和替代素材不冒充真实产品截图、真实场所、真实人物或产品证据。