workbuddy_skills/oil-ui-pro/references/media.md

素材

把资产作为设计起点

好的资产可以承担整个页面的情绪、对象识别或信息重心。先问“如果只保留一张图、一个标题和一个动作，哪张图值得占据这个位置”，再决定是否需要更多模块。不要把资产理解为布局完成后填进去的装饰。

跟随设计北极星决定图像的主体、视角、尺度、光线、颜色、材质和留白。页面的字体、背景、边缘处理与运动从这张图建立呼应；也可以通过一个受控的反差突出主动作。统一是共享视觉逻辑，不是对所有图片套同一个滤镜。

后台和工具同样需要资产判断：对象缩略图帮助识别，内容封面支持浏览，地图或空间图帮助定位，必要的示意图解释关系。它们可以成为界面最有价值的部分；不以“这是后台”为由默认只有表格和卡片。纯数据任务确实不受益时保留清楚的数据表达，不硬塞气氛图。

资产要成为结构，而不是装在盒子里的插图：让它跨过版面的分界、占满首屏，或者和文字叠在一起。页面可以是一个完整的世界，而不是“一张页面配一张图”。

先把关键资产放进真实页面看一轮，再延展其他区域。资产未到位时不能把占位版的审美评审视为最终通过。

没有合适的现成资产且宿主已有可用的图像生成能力时，主动制作关键素材，并给它明确的视觉任务；不要因为正在写前端代码就省略这一步。已有优秀素材时围绕它设计，不为证明使用了工具而重复生成。没有相关能力时保留清楚的素材简报与待完成项。

先确定表达作用

判断当前差距来自信息与构图，还是缺少能够表达产品和品牌的素材。不要用更多图片、光效和动画掩盖层级问题，也不要仅因代码容易编写，就用通用渐变和几何形状替代必要的图像。

素材可以用于展示对象、解释关系、建立品牌或情绪。先确定内容、位置、尺寸比例、裁切、背景和与文字的对比，再选择现有资源、摄影、插画或生成素材。

素材简报保持可执行：要表达什么、主体是什么、放在哪、宽窄屏如何裁切、哪里承载文字、什么细节不可丢失。若画面已经表达了主题，减少重复解说；叠字区域需有稳定明暗和足够空间，不默认给整张图盖浓重渐变。

图片与可编辑界面

实际查看输入图片后再引用其特征。复用质量合适且有使用依据的资源；不足时才生成或重绘。保留原始文件及来源，区分复用、裁切、生成和后处理。

界面文字、按钮、表单、数据标签和常规布局由可编辑元素表达，摄影、插画和特殊视觉放在明确容器中。不把完整截图作为可交互成品。

将素材需求交给宿主可用的生成工具，遵循工具自身的输入与编辑规则。怎样让生成图承担意思、怎样写提示词、怎样把图和页面接成一体，见 配图。

图像暂缺时预留合适容器并明确缺项，不自动安装工具、切换收费服务或要求用户把密钥粘进对话。替代素材不能冒充真实产品截图。

同组资产统一主体尺度、视角、光线和边缘质感，避免几张各自漂亮却互不相干的图拼在一起。生成素材不冒充真实现场或产品证据。最终交付保留来源与用途，网页按实际显示尺寸处理文件体积，重要主体在桌面和手机裁切中都必须成立。

生成视频的可选路径

需要可叠加的循环素材时，先验证首尾衔接、主体边缘和背景处理。单色背景加抠像只是候选技术；透明、反光物体可能丢失边缘或产生色溢，应在最终页面背景上检查。

需要连续叙事时，可以用前一段的末帧衔接下一段的首帧，或使用一致的关键帧规划。按滚动或手势控制播放进度时，检查寻帧、反向播放、加载和内存占用，不默认把整段视频解码成全部大图。

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

透明底的图片或视频适合放在两个区块的衔接处，跨越边界，把上下两部分连成一个画面，比放在容器里更有设计感。