AI+UI提效|AI搞定C端APP:图片直出可编辑UI+代码

全平台ID：宋夏天Dazzle

在线版看公众号：送你整个夏天

给我生成一个潮酷社区风格的app首页，刚开始是4个功能入口，然后是banner，banner我要异形，多层，有卡通ip的，然后功能入口也是要3D的，再然后你看这放，黑绿配色，顶部是绿色渐变，背景是白色

根据这个风格生成【XX】页面，业务你自己根据潮流社区来

把这个【你想要的素材】提取出来，不要重新生成，要透明背景

请使用 Vue3 + Vite + TypeScript，根据我提供的移动端 APP 多个页面效果图和拆分视觉素材，高保真还原一个真实可落地的 C 端潮酷社区项目。

项目名称：CoolZone 潮酷社区

在开始写代码前，请先完成以下检查：

1.检查当前项目结构，确认已有页面、路由、组件目录、样式方案和依赖。

2.检查 public/assets/coolzone/ 下的全部素材。

3.重点查看 public/assets/coolzone/references/ 里的整页效果图。

4.根据参考图和素材文件名，建立素材使用清单，理解每个素材在页面中的位置和用途。

5.不要覆盖已有代码，只新增 CoolZone 相关页面、组件、样式、路由、mock 数据和类型文件。

素材目录：

public/assets/coolzone/

素材按类型归类：

•references/：整页效果图，只用于视觉对照和高保真还原，禁止直接作为页面背景或整图渲染。

•banners/：页面中的大型 Banner、会员卡 Banner、社区公约 Banner 等。

•icons-3d/：功能入口、消息入口、内容入口、成就图标、服务图标等 3D 图标素材。

•avatars/：用户头像、官方头像、角色头像等。

•stickers/：Logo、贴纸、装饰文字、笑脸、KEEP IT COOL 等装饰性素材。

如果实际文件名和目录名不同，请以当前项目真实文件为准，自动识别并使用。

核心目标：

请严格参考 references 文件夹中的页面效果图进行高保真还原。参考图用于判断页面布局、模块顺序、元素比例、尺寸、间距、字号、字重、圆角、阴影、渐变、贴纸层级、3D 质感和整体氛围。

非常重要：

1.references 里的整页效果图只能作为视觉参考，禁止直接放进页面。

2.禁止把整张参考图作为背景图。

3.禁止重新设计页面。

4.禁止随意改布局、改配色、改模块顺序。

5.禁止把我提供的视觉素材拉伸变形。

6.禁止用 emoji 代替 icon。

7.禁止写成一个巨大单文件。

8.页面必须是真实可维护的前端项目，而不是静态截图页面。

9.已提供的 banner、3D 图标、头像、贴纸、装饰图片等素材，必须作为真实 img 资源使用。

10.页面中的通用 icon 由图标库生成，不需要我提供。

技术要求：

•使用 Vue3 + Vite + TypeScript。

•使用 Vue Router 配置页面路由。

•根据 references 中的效果图自动识别页面数量、页面关系和底部导航状态。

•使用组件化开发，不要把所有内容写在一个页面文件里。

•使用 mock 数据驱动列表、卡片、消息、服务入口等内容。

•样式可以使用 scoped CSS / CSS Modules / SCSS，但结构必须清晰。

•页面以 375 × 812 移动端设计稿为基准。

•适配 375、390、414、430 等常见手机宽度。

•PC 浏览器预览时，App 容器居中展示，最大宽度 430px。

•页面允许纵向滚动，禁止横向滚动。

•支持 safe-area，底部 TabBar 不能遮挡页面内容。

•请遵循当前项目已有的路由、目录和组件规范，不要强行新建不符合项目风格的结构。

Icon 要求：

•通用 icon 请从图标库中选择，例如 lucide-vue-next、@iconify/vue 或当前项目已有图标库。

•icon 风格统一，线性、圆润、偏 C 端 App。

•包括搜索、通知、首页、发现、发布、消息、我的、更多、点赞、评论、收藏、返回、添加、设置、已读、扫码等。

•不要使用 emoji 作为正式 icon。

•3D 装饰图标优先使用 icons-3d/ 中的素材。

•普通功能 icon 使用图标库生成。

素材使用与缺失素材处理要求：

1.所有视觉素材都从 public/assets/coolzone/ 读取。

2.references/ 只用于视觉对照，禁止直接渲染。

3.banners/ 中的素材用于大型 Banner、会员卡、社区公约等横向视觉区域。

4.icons-3d/ 中的素材用于功能入口、消息入口、内容入口、成就图标、服务图标等区域。

5.avatars/ 中的素材用于用户头像、消息列表头像、个人主页头像。

6.stickers/ 中的素材用于 Logo、贴纸、装饰文字、笑脸等视觉装饰。

7.图片路径请统一管理，不要散落硬编码。

8.图片必须保持原始比例，不能拉伸变形。

9.优先使用 object-fit: contain 或 cover。

10.已经提供的核心视觉素材禁止重新生成或重绘，包括 Banner、Logo、贴纸、主头像、3D 功能图标。

11.已提供素材只允许裁切、缩放、定位和合理布局，不允许改颜色、改比例、改文字内容。

缺失素材处理规则：

1.如果某个核心素材不存在，不要中断开发，不要联网找图。

2.请优先用当前素材库中的相似素材替代。

3.如果没有相似素材，再用图标库 icon 或 CSS 样式临时替代。

4.替代内容要尽量接近参考图视觉。

5.完成后必须明确列出“缺失素材”和“替代方案”。

Codex App $imagegen 图片生成补充规则：

1.当前使用的是 Codex App，如果当前 thread 支持图片生成 / 图片编辑能力，可以调用 $imagegen 生成辅助性内容素材。

2.$imagegen 只能用于生成辅助内容素材，不能替代我已经提供的核心视觉素材。

3.可以生成的内容包括：

•页面卡片插图

•信息流图片

•话题封面

•内容缩略图

•消息列表中的不同用户头像

•评论用户头像

•临时占位插图

4.禁止用 $imagegen 生成以下内容：

•整页 UI

•我已经提供的 Banner

•我已经提供的 3D 功能图标

•我已经提供的 Logo

•我已经提供的贴纸

•和参考图风格不一致的图片

5.生成的新素材必须严格匹配 CoolZone 视觉风格：

•黑色 + 荧光绿主色

•潮酷、Y2K、街头社区、年轻化

•3D / 潮玩 / 贴纸 / 玩具感

•高质感、干净、适合移动端 App

•不要偏写实商业摄影风

•不要偏二次元

•不要偏赛博朋克过重

•不要出现杂乱背景

•不要出现无关品牌文字

6.生成头像时，统一为 CoolZone 风格 3D 潮玩头像，可以有不同帽子、墨镜、发型、表情和配饰，适合用于消息列表、评论区和用户信息流。

7.生成内容插图时，可以围绕潮流穿搭、潮玩手办、街头滑板、潮酷摄影、街头艺术等主题，适合放在移动端内容卡片中。

8.生成话题封面时，使用横向卡片比例，保持黑绿配色和街头潮流氛围。

9.如果当前 Codex App thread 无法调用图片生成 / 图片编辑能力，请不要中断开发。请先用当前素材库中的相似图片循环复用，或用 CSS + 图标库做临时占位。

10.如果生成了新素材，请统一保存到：

public/assets/coolzone/generated/

11.生成素材路径也需要统一管理，不要散落硬编码。

12.完成后请单独列出：

•已使用的原始素材

•$imagegen 新生成的素材

•生成素材保存路径

•哪些素材是临时替代

•哪些素材后续还需要人工补充

视觉还原要求：

1.严格对照参考图，不要自由发挥。

2.顶部浅荧光绿渐变要接近参考图，并自然过渡到白色内容区。

3.主色为黑色 + 荧光绿。

4.整体气质为潮酷、Y2K、3D、街头社区、年轻化。

5.保留 3D 图标、贴纸、Banner 的层次感、阴影、白色描边、黑绿撞色和悬浮感。

6.保持页面留白、模块间距、卡片比例、圆角大小和底部 TabBar 位置接近参考图。

7.文案字号、字重、颜色、行高尽量接近参考图。

8.底部 TabBar 要接近参考图：黑色胶囊容器、大圆角、阴影、中间绿色发布按钮突出、active 状态清晰。

9.页面底部要预留足够 padding，避免被底部 TabBar 遮挡。

10.参考图中的装饰性视觉尽量使用拆分素材还原，不要用纯 CSS 随意替代。

样式变量建议：

请建立统一 CSS 变量，例如：

--cz-lime: #B8FF2C;

--cz-lime-light: #D8FF72;

--cz-black: #101010;

--cz-dark: #1A1A1A;

--cz-bg: #F7F8F4;

--cz-card: #FFFFFF;

--cz-text: #111111;

--cz-text-soft: #666666;

--cz-border: rgba(0, 0, 0, 0.08);

--cz-radius-sm: 12px;

--cz-radius-md: 18px;

--cz-radius-lg: 24px;

--cz-radius-xl: 32px;

交互要求：

•底部 TabBar 点击后可以切换页面。

•当前页面对应 Tab 需要有 active 状态。

•分类 Tab 可以点击切换 active。

•卡片、按钮、Tab、消息项需要有基础点击反馈。

•横向内容区域可以横向滚动。

•Banner 暂时可以静态展示，但结构要预留可扩展。

•不需要后端接口，不需要真实登录，不需要真实发布流程。

开发流程要求：

1.先阅读 references 效果图和素材目录。

2.根据参考图自动拆解每个页面的模块结构。

3.判断素材是否足够，优先使用已提供素材。

4.对卡片插图、话题封面、消息头像等辅助内容素材，如果素材不足且当前 Codex App thread 支持 $imagegen，可以生成同风格补充素材。

5.搭建公共 App 容器、状态栏、底部导航等基础结构。

6.统一管理素材路径。

7.逐页进行高保真还原。

8.最后统一检查移动端适配、资源路径、图片比例、TypeScript 报错和控制台报错。

9.完成后请说明新增了哪些页面、组件、mock 数据和样式文件。

10.完成后请单独列出：

•哪些素材正常使用

•哪些素材缺失

•哪些素材由 $imagegen 生成

•缺失素材分别用了什么图标库、CSS 或相似素材替代

验收标准：

•npm run dev 可以正常运行。

•页面可以通过路由正常访问。

•底部 TabBar 可以正常切换页面。

•页面视觉高度接近 references 中的效果图。

•没有 TypeScript 报错。

•没有控制台图片路径报错。

•没有横向滚动。

•图片素材没有拉伸变形。

•底部导航不遮挡内容。

•PC 浏览器预览时 App 居中显示。

•代码结构清晰，可以继续扩展成真实 C 端 App。

1、根据这张图生成样机，有个卡通3D建模手持手机，要求背景高级质感，符合图片的潮酷风格

2、根据这张图生成样机，有个卡通3D建模手持手机，背对镜头，重点聚焦手机，要求背景高级质感，符合图片的潮酷风格

3、根据这张图生成样机，要求背景高级质感，符合图片的潮酷风格

4、根据这张图生成样机，有个卡通3D建模手持手机，周围有气泡弹窗，要求背景高级质感，符合图片的潮酷风格