【生活娱乐赛道】ZOME · 你造吗 — 一站式 AI IP 资产生成工具

TRAE AI 创造力大赛 【大赛初赛专区】
1

【标签】 生活娱乐

【标题】 【生活娱乐赛道】ZOME · 你造吗 — 一站式 AI IP 资产生成工具

【正文】

Demo 简介

ZOME · 你造吗 是一个纯前端的 AI IP 资产生成网站。用户上传一张照片（或选择预设），AI 自动分析并生成专属 IP 角色，再一键产出四类衍生资产包——三视图、表情包套组、节日海报、周边样机。

面向谁：个人创作者、自媒体博主、小品牌主理人——任何需要快速打造 IP 形象但缺乏设计资源的人。

核心功能：

  1. AI IP 角色生成：上传照片 → AI 分析特征 → 生成 4 种风格（可爱/潮酷/复古/手绘）的 IP 角色，支持左右切换预览

  2. 一站式资产包产出：自动生成三视图（正/侧/背）、6 个表情包、3 张节日海报、3 款周边样机，每项均可独立编辑提示词、重新生成和下载

  3. 自定义生图模型 API：用户可配置自己的生图大模型 API（支持 OpenAI / Stability / 火山引擎 / 自定义格式），让每个资产实时 AI 生成，网页本身就是一个 IP 资产生成工具

Demo 创作思路

灵感来源：很多创作者和小品牌想要一个专属 IP 形象，但找设计师定制成本高、周期长。如果 AI 能根据一张照片快速生成完整的 IP 资产包，就能大幅降低 IP 创作门槛。

想解决的问题：把"想要一个 IP"到"拿到可用素材"的过程，从几周缩短到几分钟。用户不需要懂设计、不需要装软件，打开网页就能用。

为什么做这个方向：

  • IP 形象在自媒体、品牌营销、社群运营中需求量大

  • 现有 AI 生图工具只出单张图，缺乏"一套完整的 IP 资产"的系统化产出

  • 每个资产配独立的提示词模板（4 风格 × 15 资产 = 60 个专属提示词），用户可编辑后实时重新生成，不是"生成一次就完事"

Demo 体验地址

在线体验：https://qwhe.github.io/project/ZOME/demo1/

打开链接 → 点击"开始体验" → 选择"宠物"预设 → 等待 AI 分析 → 确认风格 → 查看完整资产包。也可以点击"生图模型 API"按钮配置你自己的生图 API，配置后所有资产将实时 AI 生成。

TRAE 实践过程

整个 Demo 使用 TRAE 从零开发，单文件 HTML + CSS + JS，零后端依赖，部署在 GitHub Pages。

第一步：创意提案与页面架构搭建 用 TRAE 梳理产品流程（上传→分析→确认→资产），搭建 5 个页面的 SPA 架构，使用 CSS class 切换实现页面间过渡动画。

第二步：AI 角色生成与风格切换 用 Canvas 2D 实现 IP 角色绘制，支持 4 种风格切换。上传照片后通过颜色采样分析主色调，自动应用到 IP 角色配色中。左右箭头切换风格时加入淡入动画。

第三步：资产包系统与提示词模板 构建了 4 风格 × 15 资产 = 60 个专属提示词模板系统。每个资产卡片都有独立的提示词编辑器，支持展开编辑、应用重新生成、恢复默认。图片加载采用 API 优先 + 静态图 fallback 策略。

第四步：自定义生图 API 集成 实现统一的 callImageAPI 函数，支持 OpenAI 兼容格式、Stability AI、火山引擎三种 API 格式。配置保存在 localStorage，支持测试连接和一键保存。缓存系统避免重复调用，重新生成时强制刷新。

关键 Session ID

Session 1: 4316011793496320:0cc1c25c2ed8600b815f174819b331f1（完整开发过程：从创意提案到 API 集成到部署，单会话全流程）

Session 2:4316011793496320:fa79af2005d39cb7576dbf9d09f88410_6a4f0f2ca95ffab30d3d555f.6a4f14c6a95ffab30d3d5644.6a4f14c6a95ffab30d3d5642:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 11:25:58)

Session 3:4316011793496320:19a80c254fc51f33a70ea726d87ea387_6a4f1646a95ffab30d3d5674.6a4f1914a95ffab30d3d56dd.6a4f1913a95ffab30d3d56db:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 11:44:20)

开发截图

image
image1894×2490 379 KB

image
image1862×2336 384 KB

image
image1920×1274 192 KB

image
image3196×2476 453 KB

踩坑与心得

  1. 箭头 hover 狂跳 bug：左右切换箭头用 scale(1.12) 做 hover 效果，导致鼠标反复触发 mouseenter/mouseleave 循环。改为 translateY(-58%) 后解决，位移不影响元素边界。

  2. 图片叠加问题：初期 Canvas 绘制时叠加了渐变背景和文字标注，但用户上传的是成品图，导致图片不能完整展示。改为 drawImageCover 全幅铺满，不叠加任何元素。

  3. 表情包重新生成 bug：drawEmojiCardCanvas 用单个 index 同时表示卡片位置和表情类型，重新生成时图片和文字不同步。拆分为 cardIndex 和 exprIndex 两个参数后解决。

报名帖链接

https://forum.trae.cn/t/topic/51154

2 个赞