00 前言
今天把「功能模块 + 风格模块」这一套路搬到「播客星球」--一个专为中文播客爱好者打造的「发现 + 剪辑 + 社群」三合一 App。 整套界面 12 张页面，全部用同一串 Prompt 搞定，100% 视觉统一，可直接交付开发。 文章末尾会把「可复制 Prompt」和「组件化 Figma 模板」一并送给大家。
01 先睹为快：12 张页面一览
（所有预览图均为 375×812，带 1 px 手机边框，可直接拖进 Figma）
- 启动屏 / Launch
- 兴趣标签选择 / Onboarding
- 首页 · 星球发现 / Discover
- 单集播放页 / Player
- AI 文字剪辑 / Editor
- 实时弹幕 / Live Chat
- 主播后台 / Creator Studio
- 社群话题 / Community
- 个人中心 / Profile
- 充值星球币 / Wallet
- 深色模式 / Dark Mode
- 空白 & 加载状态 / Skeleton
整套视觉关键词： 「分层式扁平设计 + 高对比度黑白 + 荧光青绿点缀 + 巨大圆角 + 戏剧字号」 一句话：像棉花糖一样软，像太空舱一样干净。
02 方法论回顾：功能模块 + 风格模块
Nano Banana 的精髓只有两行字：
- 把“功能”写成清单 ➜ 让 AI 知道「画什么」
- 把“风格”写成说明书 ➜ 让 AI 知道「怎么画」
只要风格说明书足够精准，后续页面只需一句「继续使用之前的风格」就能保持 100% 统一。 下面给出「播客星球」专用的两份模块，直接抄作业即可。
03 功能模块：播客星球 v1.0
## 产品名称
播客星球 (Podcast Planet)
## 核心目标
打造「中文播客最大发现引擎」，让用户 30 秒内找到下一集想听的内容；同时为播客主提供「AI 文字剪辑」工具，一键生成短视频。
## 必备页面 A：首页 / Discover
顶部导航：
- 左侧 Logo：星球 + 耳机组合图标
- 中间搜索框：占位文字 “搜索节目、单集、主播”
- 右侧消息图标：带红点未读
内容区：
- 横向分类 Chips：推荐 / 科技 / 故事 / 商业 / 文化 / 搞笑
- 纵向 Feed 卡片：
- 封面图 4:3
- 节目名称（最大字号）
- 单集标题
- 时长 + 发布时间
- 点赞 / 评论 / 转发（icon + 数字）
底部导航（5 项）：
① 发现 🔍 ② 剪辑 ✂️ ③ 星球 🪐 ④ 社群 💬 ⑤ 我的 👤
其中①默认高亮，用荧光青绿填充。
## 必备页面 B：播放页 / Player
- 顶部返回箭头 + 节目名
- 中部封面 1:1，下方单集标题
- 进度条 + 已播放 / 剩余时间
- 按钮行：15s 后退 / 播放暂停 / 15s 前进
- 底部工具栏：倍速 🐌 / 定时 ⏰ / 弹幕 💬 / 收藏 ⭐
- 背景：高斯模糊封面，透明度 30%
## 必备页面 C：AI 文字剪辑 / Editor
- 顶部：波形图（横轴可拖动选区）
- 中部：自动转写文本，支持点击文字定位播放
- 底部工具：「生成 60s 短视频」「添加字幕」「一键降噪」
- 右侧浮动按钮：导出 🚀（荧光青绿）
## 通用组件
- 卡片圆角：32 px
- 主按钮高度：56 px
- 文字规则：标题 28 px / 正文 16 px / 辅助 13 px
- 图标线性 2 px，选中状态填充 + 荧光青绿04 风格模块：分层式扁平设计 2.0
## UI 风格精准总结：分层式扁平设计 (Layered Flat Design)
核心：用 2D 阴影表达层级，绝不出现渐变或 3D 质感。
1. 平面与层级
- 所有元素纯扁平，无高光、无纹理。
- 阴影柔和、弥散，唯一用途：把卡片从背景“抬”起来。
2. 色彩
- 基底：#FFFFFF 背景 + #121212 文字，确保可读性。
- 点缀：唯一荧光青绿 #00F0A8，只用于主按钮、选中态、数据强调。
3. 布局
- 卡片化：大圆角 32 px，模块独立。
- 呼吸感：卡片间距 24 px，元素间距 16 px。
4. 字体
- 戏剧对比：标题 28 px Bold，数字 48 px ExtraBold。
- 弱化辅助：时间、标签等 13 px，颜色 #9B9B9B。
5. 形状
- 极致圆润：按钮、容器、Chips 全部圆角。
- 图标线性 2 px，端点圆头。
6. 动效（可选）
- 点击阴影扩散 120%，持续 200 ms。
- 点赞发送“能量粒子”✨，从手指位置向上漂浮 400 ms。05 实战：三步生成 12 张高保真图
Step 1 把「功能模块 + 风格模块」合并成总 Prompt，喂给 Nano Banana → 得到首页。 Step 2 新建对话，输入「继续生成播放页，继续使用之前的风格」→ 出图。 Step 3 重复 Step 2，依次生成其余 10 张页面，全程 15 分钟。
小技巧： 如果 AI 偶尔“遗忘”荧光色，可在每句 Prompt 前加一句「Remember: only #00F0A8 as accent color.」
06 从“静态图”到“可交互文件”的新脑洞
最近内测的 Reve 模型（https://app.reve.com/home）给了我新灵感： 上传一张 Nano Banana 出的 UI 图，Reve 自动把「背景 / 卡片 / 按钮」分层，输出带透明 PNG 和 JSON 坐标。
想象一下： 未来 Nano Banana 直接生成「矢量图层 + 自动命名 + 前端代码」，我们连 Figma 都省掉。 AI 不再只是“画”UI，而是“构建”可交互原型。 从像素集合 ➜ 分层文件 ➜ 代码雏形，这条链路一旦跑通，设计-研发范式将被彻底重写。
07 结语
如果你也是：
- 不会打开 Photoshop 的产品经理
- 想 10 分钟做出投资人级别 Demo 的独立开发者
- 或者单纯喜欢播客、想快速验证创意
那就把 Nano Banana 当成你的“远程设计总监”--写好 Brief，剩下的交给 AI。
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
