Rap Song 架构拆解：为什么 Hotel Lobby 格式做出来像真棚拍

每家 AI 工具都在说"一键出片"，但真要改点细节时，背后却是六坨搅在一起的逻辑。Rap Song——AI Hotel Lobby Song Generator——用一条简单的架构原则把这个问题解决：层与层独立解耦。

拥有"内容形状"的层（Hotel Lobby AI filter 视觉、Migos AI song 写词、Beat 结构、营销文案），绝不拥有渲染用的"基础原语"。基础原语挺过一次又一次改版，内容层随时重写。

内容层是可替换的

Rap Song 的"内容形状"全部放在可热插拔的几个层里，每一层只负责一件事，只向基础原语喂数据，从不反过来改原语：

• 翻译表：所有营销文案、FAQ、定价档位标签、博客标题、Onboarding 文字都在扁平 JSON 里。产品介绍要改？改 JSON，不改组件。
• 棚内风格预设：三套 Hotel Lobby AI filter 外观（Marble Lobby / Neon Duo / Champagne Toast）本质是小配置包——主光色温、轮廓光来源、大理石材质强度、每 4 bar 切镜密度、Beat BPM + 808 曲线。改预设不用碰代码。
• 主题模板：7 套可直接粘贴的 Migos AI song Playbook、Example prompts、Track concept 建议，全是纯数据，写词模型照单消费。
• 页面 Block：Hero、Features、Pricing、FAQ、Studio 视频面板这些都是装配块，读翻译 + 读风格预设，再把一切交给耐用的 UI 原语。明天品牌要换方向？换 blocks / JSON / 预设，基础原语一个都不用动。

基础原语是耐用的

基础原语放在 src/components/ 里，从不读翻译、不读棚内风格配置。例如：

• PricingTable：只收档位、功能点、CTA 文案作为 props，完全不知道自己是 Rap Song 里的 Free Trial / Pro / Ultimate，还是别的什么业务。
• SiteHeader / SiteFooter：只收导航和 Logo 作为 props，完全不知道应用是说唱生成器还是订座平台。
• mdx-components / data-table / form-field：通用渲染原语，同时服务 Rap Song 博客、法务页和后台用户表。

正因为有这层隔离，之前把 Rap Song 从"通用 AI 视频"的定位改成"专做 Hotel Lobby Song 的 AI Hotel Lobby Song Generator"，不用重写一大坨基础组件，只要换内容层和装配逻辑。

为什么这个切分对说唱产品特别关键

Hotel Lobby Song 成不成，全看那些小的联动细节：

1. Migos AI song 的 punchline 落拍点，必须跟 Hotel Lobby AI filter 的近景切镜是同一帧。
2. 8 bar / 16 bar 的换边唱必须是真的在 bar 边界切，不是渲染时间随便猜一个。
3. 用户看到的按钮文案（"Marble Lobby"、"Neon Duo"）必须真的对应最后出来的画面。

如果写词器、Beat 引擎、棚内合成器、UI 文案全搅在一大坨代码里，那么想调高 Migos AI song 的三连音密度，就可能把棚内切镜 timing 搞崩（反过来也一样）。分层之后各调各的：写词层调三连音密度、棚内预设层调切镜速度、基础组件代码一行不碰。

想看这个分层架构的实际输出？去 Rap Song 首页 渲染一条棚内片段，再调一下 Track concept 渲第二遍，你会发现基础 UI 纹丝不动，内容层根据你的输入适配得很聪明。想继续深挖 Hotel Lobby AI filter 的质感调节和 Migos AI song 的 Flow 密度参数？去 Rap Song 博客 看更多深度文，有问题直接发 support@rapsong.co。