跨软件设计素材包
目标是交付可以继续修改的素材,不是只交一张合成图片。AI 在这里指 Adobe Illustrator。默认支持屏幕用途、像素坐标;用户指定的软件、格式、尺寸与风格优先。
理解与补问
- 先检查参考图。区分忠实拆分、参考风格重新创作、纯文字创作。忠实拆分不擅改配色、文字、比例或添加常见装饰;被遮挡的内容无法原样恢复,需要说明补绘范围。
- 提取硬性要求,整理素材清单:背景、主体、图案、装饰、边框、文字,以及每项是否需要内部可编辑。
- 只询问会影响结构的缺项:画布/用途、必需内容、风格方向、提取还是重绘、文字和路径的编辑要求。可合理推断的次要细节采用明确标注的默认值,不重复确认已授权事项。
- 用户没提到的必要设计选择,应给出理由与建议;非必要新增元素先让用户选择。没有规定的常规对齐、命名、合理留白可以自行完成。
- 遇到“距离”确认测量边界(可见轮廓、含描边边界、中心或文件框);遇到缩放确认锚点、裁切、是否同时缩放描边。数值几何对齐与视觉居中不同,视觉补偿不可悄悄覆盖硬性坐标。
制作路线
- 先确定一组统一风格参数:色板、线宽、形状语言、光源、纹理、字体与留白;已有参考优先。无需固定生成多套方案。
- 简单图案、边框、符号直接制作真实 SVG 路径;插画、背景和纹理通过当前可用图像生成工具制作。需要生图时按可用 imagegen 技能和工具规范调用;未连接生图工具就明确缺口,不能伪称已生成。
- 各素材独立制作或提取,整组放在一起检查一致性。合成大图裁格子不能冒充完整独立素材。透明棋盘格不能烘焙进 PNG。涉及抠图、截图提取、透明图案或用户反馈漏抠/毛刺/脏边时,必须阅读 抠图与边缘质量,执行其中的内孔、多底色与放大检查。
- 文字优先独立保留。SVG 内嵌位图仍是位图;自动描摹不能保证好编辑的路径,复杂绘画不强制矢量化。
- 先阅读 交付与布局,建立 layout.json。硬性大小、比例与间距落实为数值;旋转、裁切、蒙版先烘焙为单项素材或制作专用导入逻辑,不偷偷忽略。
- 调用
python scripts/build_pack.py <素材包目录>校验并生成组合 SVG、PS 导入 JSX、Illustrator 打开 JSX 和操作说明。脚本只支持文档明确的有限格式;不要强行把复杂布局塞进它。使用新目录避免覆盖用户文件。
验证与交付
- 打开最终预览,不仅检查源代码;逐项检查素材数量、透明边缘、字体、文字、遮挡、裁切、尺寸和风格。用浏览器或矢量渲染器渲染 composition.svg,保存 preview.png;可再生成素材总览图。透明素材同时运行
python scripts/audit_alpha.py <assets目录> <新的诊断目录>(需要 Pillow),实际打开白/黑/品红底、Alpha 图及 4 倍局部图。只报告 alpha 最小/最大值或包围框不算抠图通过;诊断统计本身不能自动判定视觉合格。 - 核对实际可见边界和布局记录。PNG 应裁去意外透明外沿,再通过布局记录位置;PS 自动导入依据可见边界,因此有意透明留白需要单独处理。
- 用户要求原生 PSD/AI 时,若应用可用则在新文档中运行脚本、读回图层和尺寸、保存到新文件;只有成功保存才称交付了 PSD/AI。不得把脚本已生成当作 Adobe 实机验证。
- Adobe 不可用时仍交付完整素材、组合稿和导入脚本,清楚标注未实机验证。向用户说明 SVG 路径、可编辑文字、PNG 各能修改到哪一层。
- 调整只改指定素材和布局项。保留原始文件;不安装 MCP、不改应用配置、不运行生产修改,除非用户明确授权相应操作。
调用示例
- “用 $design-asset-pack,按这张图制作背景和独立图案,供 PS 和 Illustrator 调整。”
- “做一套魔法卡面素材,1920×1080,边框要矢量,文字独立,先问我漏掉的必要信息。”
- “只把星星之间的可见间隙改为 24 px,其余位置和颜色保持不变。”
流程参考来源与适配边界见 sources.md。不需要安装这些上游项目才能使用本技能。