AI生成专业级App插画：appllama-skills图像素材管线与Prompt模式详解
【免费下载链接】appllama-skillsA builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.项目地址: https://gitcode.com/gh_mirrors/ap/appllama-skills
appllama-skills 是一套让 AI Agent 学会"像顶级 App 设计师一样工作"的技能集，其核心能力之一，就是AI生成专业级App插画：内置的图像素材管线（Image & illustration assets pipeline）把"一条 Prompt 直出"的土味生成，变成一套"定风格系统 → 高质量生成 → 后处理 → 质量门"的工业级流程。本文详解这条管线的 5 个环节和可直接套用的 Prompt 模式，帮助你产出的插画像"整套外包定制"，而不是 12 张东拼西凑的素材。
为什么"一条 Prompt 直出"的插画总像模板货 🎨
AI 生成的插画最大的通病是风格漂移：同一 App 里，空状态图是扁平风、成功页是 3D 黏土风、引导页又是照片风——用户几秒内就会把它归为"模板感"。
appllama-skills 的设计技能 SKILL.md 对此定了一条硬规则：
一个 App 只允许一种视觉语言（渐变网格 / 扁平双色 / 3D 黏土 / 手绘 / 吉祥物风），所有插画必须同一风格、同一色板、同一光照。
而完整的操作手册就在 references/image-assets.md，开头一句话点明管线本质："App 级美术是生成、筛选、后处理出来的，从来不是'一条 Prompt 交付'。"
图像素材管线：5 步流程详解
第一步：生成之前，先写下"风格系统"
管线的第 1 节要求：在生成任何素材前，先把这套东西写下来、一个 App 只写一次——
- 风格家族：flat-duotone / gradient-mesh / 3D-clay / 纸拼贴 / 手绘墨水 / 摄影风，只选一个
- 色板：3–5 个从 App 设计令牌中提取的 hex 值，必须包含插画将放置其上的精确底色
- 光照/质感：例如"左上柔光、哑光、无高光"——同一套措辞出现在每一条 Prompt 里
- 主体语法：吉祥物？抽象形状？物体？人物（若有人物，是什么渲染风格）？
之后每条素材 Prompt 都是"风格系统 + 主体"的拼装。这就是为什么 12 张素材读起来像一套定制作品。
第二步：用最强的模型、最高的质量生成
- 用你环境里最好的生图能力（imagegen 工具、Higgsfield MCP/CLI 等），最高画质 + 最大尺寸生成，再下采样到 @1x/@2x/@3x；严禁放大小图
- 每个素材生成3–4 个候选，挑最佳；若胜出者风格漂了，让其余素材向它重生成
- 图标集/重复元素：一次性生成一张sprite sheet（同一 Prompt 保证光照色板一致），再切片
- 背景：要求精确的底色 hex 或真透明；400% 放大检查边缘，有白边光晕就重生成或跑抠图
第三步：套用"万能 Prompt 模板" ✍️
这是整条管线最可直接抄作业的部分。原文给出的工作模板是：
[主体], [风格家族] illustration, [色板描述 + hex值], [光照], solid background #0F0F13, centered composition, generous negative space, app illustration, no text, no watermark四个场景化技巧：
| 场景 | 技巧 |
|---|---|
| 所有素材 | 永远追加no text—— 模型特别喜欢在图里"烤"进乱码文字 |
| 空状态 | 主体要"安静"（静置的物体、柔和的场景），而不是热闹的主角 |
| 庆祝/成功页 | 用构图暗示动感（彩带弧线、倾斜），不要直白的速度线 |
| 引导页 Hero 图 | 在 Prompt 里明说"构图重心在下半部"，给标题留 1/3 空间 |
第四步：后处理与双主题验证
- 裁切到内容 + 统一留白
- 导出 @1x/@2x/@3x PNG（满版插画可只出一张高清图交给 expo-image 缩放），大尺寸摄影素材用 WebP
- 亮色 + 暗色双主题下实测：在深色底上生成的素材放到浅色底常会出现光晕；双主题 App 要么生成"主题孪生"，要么把素材放在主题无关的表面上
- 压体积：一张装饰性插画不该超过 2 MB，屏级素材目标 < 200 KB
第五步：App 图标与商店素材
- App 图标生成1024×1024，无透明、无圆角（系统自己裁），并缩小到 60px 测试——缩到小尺寸就"死"的概念，说明要简化
- 商店截图框等营销素材的视觉风格，不能与 App 内风格漂移
质量门：这 5 种情况一律打回 ⚠️
管线最后设了一道机械质检——命中任何一条即拒收：
- 风格漂移：光照、色板、线宽与素材集不一致
- 400% 放大下有背景光晕/毛边
- 烤进的文字或水印残留
- 构图打架：主体被安全区裁切、焦点压在按钮下面
- 一眼"剪贴画"——没有任何美术指导痕迹
这套质检和技能的"反模板定律"（Anti-slop laws）一脉相承：素材集必须单一风格家族、@3x 下锐利、无合成光晕，才能通过 SKILL.md 中"完成定义"（Definition of done）的逐屏验收。
如何在工作流中触发这条管线 🚀
安装 appllama-skills 只需在项目根目录执行一条命令（支持 Claude Code、Cursor、Codex 等 70+ Agent）：
npx skills@latest add appllama/appllama-skills装上后，当 Agent 遇到"做引导页插画""设计空状态"这类任务时，设计技能会自动加载图像素材管线；若同时连上了 Appllama MCP（端点配置见 mcp.json），它还会先研究同类 Top 营收 App 的真实屏幕——先弄清"什么位置该放插画、什么位置纯文字"，再生成，这正是"研究先行"（study before you draw）原则的体现，研究方法的完整说明见 appllama-usage 技能 及其 references/research-methods.md。
相关文件速查
| 文件 | 作用 |
|---|---|
| references/image-assets.md | 图像素材管线与 Prompt 模式（本文主角） |
| skills/appllama-app-design-skill/SKILL.md | 原生质感建设标准：反模板定律、验收清单 |
| skills/appllama-usage/SKILL.md | 研究引擎：如何用 MCP 研究 Top 营收 App |
| references/simulator-loop.md | 模拟器验证清单：插画最终在真机上过检 |
| references/motion.md | 动效模式：插画进场动画的"原生感"标准 |
一句话总结：先把风格系统写成文档，再让最强的模型按模板生成，最后用机械质检打回不合格的——appllama-skills 的图像素材管线就是这三句话的执行版。
【免费下载链接】appllama-skillsA builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.项目地址: https://gitcode.com/gh_mirrors/ap/appllama-skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
