一、团队介绍：
-
我们是本科乐队里认识的队友，也是生活中的恋人。我是乐队队长兼主唱，他是吉他手。我们一起排练、演出，也一起分享喜欢的歌、专辑和封面。现在，我们分别即将进入软件工程和人工智能方向的研究生阶段，Hue• 是我们第一次认真地把共同的兴趣做成一件完整作品。
-
我们的队伍叫 Hue•Duo 团队，在这次项目中，我主要负责产品方向、功能设计、视觉与交互、前端实现和内容表达；他主要负责后端接口、数据处理、功能测试与问题排查。很多功能并不是一个人写完后交给另一个人验收，而是我们一起讨论体验，互相协作，再分别从前端和后端验证它是否真的成立。
-
我们都喜欢音乐，也喜欢设计和美学。听一张专辑时，除了旋律和歌词，我们还会留意封面的构图、排版、色彩，以及它与音乐共同营造出的气质。有些专辑的名字会慢慢忘记，但那片深蓝、暖橙或灰绿色，往往会比名字留得更久。
-
Hue• 就来自我们共同听歌、看封面和收藏专辑的习惯。以前，我们在舞台上用人声和吉他配合；这一次，我们把这种默契带进产品开发：我更关注作品想表达什么、用户看到和操作的感受，他更关注数据能否正确流转、功能能否稳定运行。我们想一起完成一个属于自己的音乐产品，把对音乐的喜爱、对封面美学的关注，以及对色彩的记忆，都放进同一个空间里。
二、产品简介：
-
是什么：
- Hue• 是一个以专辑封面色彩为核心索引的音乐收藏网站。
-
用户可以导入 Apple Music、QQ 音乐、网易云音乐的专辑与歌单，也可以上传本地封面或进行iTunes搜索导入。系统自动提取代表色，用户确认或重新取色后，专辑会进入个人色彩收藏墙。
-
同一份色彩数据贯穿整个产品：通过色环筛选收藏，在 HueDrift（色相漂流）、ChromaWave（波形漫游）、ColorSpin（彩胶旋转）三套空间中浏览专辑，结合评分、乐评和曲目短评生成色彩档案与 AI 洞察，再按可见性分享音乐墙或导出 PNG 海报。
Hue• 让用户用颜色寻找音乐，用文字和数字保存记忆，再把自己的音乐品味整理成可以分享的视觉作品。
-
- Hue• 是一个以专辑封面色彩为核心索引的音乐收藏网站。
-
面向谁：
- Hue• 面向会完整听一张专辑、在意封面设计、愿意记录听感与评分，也喜欢整理和分享个人收藏和乐评的音乐爱好者。
- 典型场景包括：只记得封面颜色时沿色环找回专辑；把不同平台的收藏整理到同一空间；逐张、逐曲记录听感；查看收藏呈现出的色彩与审美倾向；将音乐墙或乐评整理成海报分享。
-
完整端到端用户路径：
阶段 入口 用户操作 系统处理 结果 认识产品 游客首页 浏览示例收藏墙，切换 Drift、Wave、Spin 主题 加载示例数据与对应渲染场景；私有能力保持登录边界 用户理解"按颜色收藏和寻找专辑"的核心体验 建立身份 登录入口 使用邮箱验证码或密码登录 Supabase Auth 建立会话，服务端据此识别当前用户 用户进入自己的云端收藏空间 导入音乐 导入弹窗 粘贴单张专辑、多个链接或歌单链接 服务端解析来源，统一专辑与曲目结构；批量任务记录成功、失败和进度 获得待确认的专辑资料；失败项可单独处理 确认色彩 导入结果页/色彩敲定流程 查看自动取色结果，用色环或取色器微调 浏览器 Canvas 分析封面像素并生成代表色、HSL 与色彩分组 专辑按用户确认的颜色保存到云端收藏 浏览收藏 首页色环与主题导航 转动色环、切换彩色或灰度分组、切换三套音乐墙 按统一色彩数据筛选并重新排列封面；不同主题使用各自渲染方式 用户从视觉记忆出发找到专辑 记录听感 专辑详情页 编辑资料、评分、写专辑乐评和曲目短评 校验并保存专辑、曲目、评分和文字记录 一张专辑形成包含颜色、曲目与听感的个人档案 查看洞察 色彩档案页 查看色系、年代、评分、冷暖、时间线与 AI 解读 聚合当前用户真实收藏和乐评；AI 结果经过格式校验并提供规则兜底 用户看到当前收藏呈现出的审美轮廓及数据依据 控制分享 专辑可见性、好友页或公开主页 将专辑设为仅自己、好友可见或公开，查看好友音乐墙 服务端结合会话、可见性与好友关系返回允许访问的数据 用户按单张专辑控制分享范围 导出作品 音乐墙或乐评导出弹窗 选择色系、专辑、模板和数量后生成海报 Canvas 按模板绘制 PNG；封面失败时使用颜色渐变回退 获得可保存的音乐墙或乐评海报 -
完整功能与使用路径
从导入开始建立收藏
-
-
用色环浏览音乐首页提供三种共享同一收藏数据的主题：
- HueDrift：在色彩空间中浏览专辑，强调封面的漂浮感；
- ChromaWave：以波浪式 3D 空间呈现音乐收藏；
- ColorSpin：以黑胶唱片和封套组成可旋转的 3D 收藏墙。
用户可以通过色环切换红、橙、黄、绿、青、蓝、紫、粉等彩色色相，也可以进入黑、灰、白等灰度分组。色环变化后，封面墙会同步筛选并重新排列，让“找专辑”从文字检索扩展为基于视觉记忆的浏览，且可以搜索并定位到专辑。
-
在专辑详情页留下听感
从收藏中看见自己的审美
-
-
在可控边界内分享收藏用户通过六位邀请码发送和处理好友申请，建立好友关系后，可以进入对方的好友音乐墙，并查看对方主动设为好友可见或公开的专辑。好友动态只记录主动分享事件，不把私密收藏和普通编辑行为自动暴露给好友。
每张专辑都可以单独设置可见范围：
- 仅自己：只有收藏者本人可以访问；
- 好友可见：通过服务端校验的好友可以查看；
- 公开：在用户开启公开音乐墙后，陌生访客也可以访问。
用户还可以设置公开音乐墙的开关与展示主题，并通过个人公开页面展示允许公开的收藏。访问权限同时落实在服务端接口和数据库 RLS，而不是只依赖前端隐藏按钮。
-
把收藏导出成海报用户可以先按色系选择候选专辑，再确定数量和模板。目前提供四种 Canvas 绘制的 PNG 模板：
- 胶片留声：暖纸色、衬线字体和胶片感排版；
- 黑胶夜幕：暗色背景、主色光晕和唱片气质；
- 相纸瞬间：白边相框与轻微旋转；
- 光谱唱片：根据所选专辑颜色生成渐变背景。
当前动态网格最多支持 36 张专辑。封面加载失败时使用颜色渐变回退；用户也可以选择是否在海报中加入个人邀请码。
-
-
支持移动端访问
- 首页、专辑详情、导入、色彩档案、好友音乐墙和海报导出均采用响应式布局；色环、弹窗与三套音乐墙针对触摸操作、动态视口和安全区做了适配。当前已覆盖主要手机，平板等使用路径。
-
相比初赛 Demo 的升级：
-
初赛用单文件 HTML 验证了封面取色、色环筛选、乐评记录、色彩档案和海报导出，证明“用色彩组织音乐收藏”具备可行的体验基础。与此同时，账号、云端数据、复杂权限、可恢复任务和长期维护，也超出了原有单文件架构的承载范围。
7 月 24 日之后，复赛版本沿用产品判断与视觉经验，重新实现前端组件、状态管理、API、数据库、认证、权限、3D 场景、移动端和测试体系。下表保留了初赛验证结果与复赛工程实现之间的对应关系。
维度 初赛 Demo 复赛成品 带来的提升 开发方式 在单文件 HTML 中快速验证创意 重新选择 Next.js、React、TypeScript、Supabase 架构，从空项目建立目录、数据模型与业务模块 避免把验证性代码继续堆叠为正式产品，为后续功能和维护建立清晰边界 产品形态 单文件 HTML，重点验证视觉与交互概念 Next.js 模块化全栈 Web 产品，包含三套收藏墙和完整业务页面 从集中式原型重构为可持续迭代的产品结构 数据账号 主要使用 localStorage，收藏与设备绑定已接入 Supabase Auth、云端数据库、账户资料与登录状态 收藏绑定用户身份，可在明确的数据边界内持续积累 导入 单次导入和基础批量验证，平台差异与错误较分散 已实现统一解析结构、进度、暂停、恢复、取消、失败明细、重试和部分成功对账 用户能看见每项结果，不必因单项失败重做整个批次 色彩墙 单一收藏墙验证色环筛选与封面动效 Drift、Wave、Spin 三套主题共享收藏和筛选数据 保留统一使用路径，同时提供不同的视觉浏览感受 乐评 基础专辑乐评记录 已实现专辑评分、乐评、曲目评分、短评 听感记录从单段文字扩展为专辑与曲目层级档案 洞察 色彩分布和偏视觉表达的规则统计 已实现艺术家、流派、年代、评分、冷暖、明度、饱和度、时间线及基于真实数据的 AI 解读 洞察包含可追溯的数据维度，并保留证据不足时的生成边界 社交 主要通过导出图片分享 已实现邀请码、好友申请、好友动态、好友音乐墙、公开主页与三档可见性 用户可以按单张专辑决定仅自己、好友或公开可见 导出 四种海报模板与基础自由选图 已实现按色系筛选、动态网格、最多 36 张、封面失败回退和邀请码开关 导出选择更完整，异常封面仍可生成结果 移动端 具备基础响应式展示，触摸细节仍有限 已调整触摸交互、安全区、动态视口、响应式弹窗和 3D 场景操作 当前已覆盖主要移动端路径 安全测试 原型阶段未形成系统化验证链路 已加入服务端鉴权、RLS、Zod 校验、限流、上游域名白名单、SSRF 防护措施、类型检查、单元测试和 Playwright E2E 已验证主要鉴权、输入与回归路径
-
三、产品演示视频:
【把专辑封面的颜色，变成一座可以探索的音乐空间｜Hue•】 https://www.bilibili.com/video/BV1qquV6oE9q/?share_source=copy_web&vd_source=9e960d9f13e3021d9057274c427fe7f8
四、产品创作历程:
-
从一张记不住名字的专辑开始
- 我常常记得一张专辑的封面颜色，却想不起标题和歌手。实体唱片店里的封面会共同构成一面有色温、有节奏的墙；进入数字平台后，它们却被压缩成按名称、歌手或时间排列的缩略图。
- Hue• 最初想验证的只有一个问题：如果色彩不再只是封面装饰，它能不能成为寻找和组织音乐的方式？
-
初赛验证了方向，也暴露了边界
- 初赛用单文件 HTML 快速完成了封面导入、Canvas 取色、色环筛选、专辑墙、乐评、色彩档案和海报导出。它证明了用户可以沿着颜色浏览专辑，也证明色彩能够从索引继续延伸到收藏分析和视觉表达。
- 但这个 Demo 还不能承载长期使用：收藏只存在本地，换设备后无法延续；平台导入和批量任务缺少稳定边界；失败项目难以单独恢复；分享只有图片，没有好友关系和可见性控制；所有代码集中在一个约 8700 行的文件中，继续增加功能会让状态与数据越来越难维护。
-
复赛选择从空项目重做
- 2026 年 7 月 24 日，我没有继续修改初赛代码，而是保留已经验证的产品判断，从空项目重新开发。复赛首先解决的不是“再加几个页面”，而是让收藏真正属于用户：建立账号和云端数据，把 Apple Music、QQ 音乐、网易云音乐统一到同一数据结构，并让导入失败、重复数据和权限访问都有明确处理方式。
- 产品体验也围绕色彩重新连接。自动取色之后保留人工调整，因为算法提供的是封面的代表色，用户保存的则是自己记忆中的颜色；Drift、Wave、Spin 共享同一份专辑和色彩数据，让不同视觉场景不会割裂收藏；色彩档案只分析真实保存的颜色、评分、年代和文字，AI 也必须基于这些证据生成结果。
-
最难的不是实现，而是取舍
- 复赛过程中，我反复收紧过产品边界。Hue• 不做在线播放，不追求覆盖所有音乐平台，也不把好友关系等同于默认公开收藏。它集中完成一条核心路径：导入专辑、确认颜色、进入音乐墙、记录听感、理解收藏，再由用户决定是否分享。
- 这次从 Demo 到成品的变化，不只是增加账号、数据库、API、社交和测试，而是让“用色彩组织音乐”从一个视觉创意，变成一套可以持续积累个人收藏的产品逻辑。
五、TRAE 实践过程:
TRAE 参与了两个阶段的工作：初赛用它快速验证单文件 Demo 的创意；复赛则从 2026 年 7 月 24 日重新选型后的空项目开始，协助我从零搭建模块化全栈产品。
实际协作方式通常从用户可见的问题开始：先描述页面表现、预期路径和当前异常，再分析组件、状态、接口与数据库之间的关系，最后通过运行结果、测试或截图继续修正。初赛阶段的对话集中在取色算法、色环方向、专辑墙排列、黑胶动效和移动端行为；复赛阶段则从项目初始化、数据模型和 API 边界开始，逐步扩展到 Supabase 数据结构、RLS、可恢复导入、社交可见性、AI 洞察、外部请求边界和自动化测试。
复赛不是把初赛代码交给 TRAE 继续堆功能，而是把初赛验证出的产品方向，重新翻译成一套新的技术架构和新的代码实现。
-
附关键任务对话的 Session ID
- 以下 Session ID 对应上述开发任务，用于证明作品确由 TRAE 开发完成：
- 916372943813792:dff8fc289438bc0c1dfeec64ea79cb42_6a634323003da41a25a32579.6a634323003da41a25a3257c.6a634323003da41a25a3257a:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/24 18:49:07)
- 916372943813792:d0a7ba1950f2db47e0d028885954e834_6a634323003da41a25a32579.6a648a2a55326a9f858ca26a.6a648a2a55326a9f858ca268:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/25 18:04:26)
- 916372943813792:b3ea1a6abb97ff412fe96b8680b8dafc_6a634323003da41a25a32579.6a64ece755326a9f858cac74.6a64ece755326a9f858cac72:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/26 01:05:43)
- 916372943813792:3838b3737b83e1b71af82a5b4c8f91f5_6a634323003da41a25a32579.6a675eb1709703ce4e8ac010.6a675eb1709703ce4e8ac00e:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/27 21:35:45)
- 916372943813792:135334a67d9dce325e019d6252df5429_6a634323003da41a25a32579.6a68cc1b44af92ed1ddb7d65.6a68cc1b44af92ed1ddb7d63:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/28 23:34:51)
- 916372943813792:98ccdacffab36c73ba823aff346d2bbb_6a634323003da41a25a32579.6a6ae53b44af92ed1ddbd197.6a6ae53b44af92ed1ddbd195:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/30 13:46:35)
- 916372943813792:4686e58bcc203969c8cf2a8b4fe23386_6a634323003da41a25a32579.6a6dce78fd3d08a73fde9414.6a6dce78fd3d08a73fde9412:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/1 18:46:16)
- 以下 Session ID 对应上述开发任务，用于证明作品确由 TRAE 开发完成：
六、技术方案
-
技术栈
- 前端：Next.js App Router、React、TypeScript；
- 样式：Tailwind CSS 4、原生 CSS、响应式断点；
- 数据与认证：Supabase Auth、Supabase Database、Supabase Storage、RLS；
- 3D 与交互：Three.js、React Three Fiber、Drei、Canvas；
- 后端接口：Next.js Route Handlers，统一使用
/api/v1； - 校验与请求边界：Zod、服务端鉴权、Origin 校验、CSP、HSTS、限流、上游请求约束；
- AI：基于收藏数据和乐评文本生成结构化洞察，并提供规则兜底；
- 测试：Vitest、Playwright、TypeScript、ESLint；
- 部署：Vercel。
-
技术实现
模块 技术实现 解决的问题 验证/边界 封面取色与归类 浏览器 Canvas 采样像素，转换 RGB、HSL、HEX；区分彩色与灰度，按色相分桶，并允许人工微调 将封面视觉信息转为可筛选、统计和导出的结构化数据 已验证主要封面类型；受跨域图片、封面质量和极端配色影响时以人工确认补充 三套色彩墙 Drift 使用 DOM/CSS 空间布局，Wave 使用原生 Three.js，Spin 使用 React Three Fiber 与 Drei；共享专辑和色环状态 在不复制业务数据的前提下提供三种浏览体验 已实现桌面端与主要触摸路径；低性能设备的 WebGL 资源占用仍需持续验证 多平台导入 Next.js Route Handlers 统一 /api/v1；将 Apple Music、QQ 音乐、网易云音乐结果映射为统一专辑和曲目结构隔离平台差异，避免前端维护多套收藏逻辑 已支持当前目标链接类型；解析成功率受上游页面与接口变化影响 可恢复批量任务 前端任务状态机记录队列、进度、暂停、恢复、取消、成功和失败项；服务端批量写入与去重 避免单项失败导致整批结果丢失 已验证部分成功和失败重试；刷新后的任务恢复范围以当前持久化策略为边界 账号与云端数据 Supabase Auth 建立会话；数据库保存用户、专辑、曲目、乐评和洞察；服务端从会话取用户身份 让收藏与账号绑定，并减少对前端用户 ID 的信任 已实现主要登录和数据路径；仍需持续检查新表、新接口与 RLS 策略的一致性 可见性与社交 专辑使用 private、friends、public 三档；好友关系、好友墙和公开墙在服务端结合访问者身份判断 支持个人收藏与可控分享并存 已验证主要访问场景；当前边界由现有好友模型和公开主页规则定义 个人洞察与 AI 服务端聚合色系、评分、年代、流派、时间线和文字数据；AI 输出使用结构校验、缓存与规则兜底 把分散收藏整理为有数据依据的个人审美视图 已实现三类解读；结果属于基于现有数据的总结，不替代用户判断，证据不足时不补写经历 PNG 导出 Canvas 根据模板、封面、代表色与文字绘制动态网格；封面失败时生成颜色渐变回退 生成不依赖页面截图的可分享视觉作品 当前支持四类模板和最多 36 张专辑；高清比例、字体差异和更多排版仍在规划中 外部请求约束 服务端执行协议与域名白名单、私网地址拦截、重定向逐跳校验、超时和响应体大小限制，并对关键接口限流 降低封面代理和上游解析请求的异常与滥用风险 已实现并覆盖主要请求路径；不作绝对安全承诺，仍需结合部署环境、依赖更新和持续测试维护 质量验证 TypeScript 与 ESLint 检查静态问题，Vitest 覆盖核心逻辑，Playwright 覆盖关键端到端路径 减少跨模块修改带来的回归 已验证当前测试集覆盖的路径；浏览器、设备与外部平台组合尚不能穷尽
七、产品价值与迭代规划
-
色彩不是装饰，而是数据
- Hue• 的核心创新不是给音乐墙增加颜色，而是把每张封面的代表色转化为可保存、可修改、可计算的数据。系统从封面提取主色，记录 HSL、HEX、RGB 与色彩分组；用户也可以重新取色，决定这张专辑在自己记忆中的颜色。
- 这份颜色数据会继续驱动色环筛选、三套收藏墙、色彩统计、评分关系、AI 洞察和海报背景。色彩因此贯穿了专辑从进入收藏到再次被看见、理解和分享的全过程。
-
与现有产品的区别
对比维度 音乐平台 乐评社区 Hue• 核心任务 播放、推荐、平台内收藏 评分与公开讨论 按色彩整理和理解个人专辑收藏 组织方式 歌手、标题、歌单、时间 条目、榜单、标签 封面取色、色彩分组、色环导航 数据来源 单一平台 站内条目 Apple Music、QQ 音乐、网易云音乐与本地封面 记录粒度 收藏状态和播放记录 专辑评分与评论 专辑评分、专辑乐评、曲目评分与逐首短评 结果 继续播放音乐 参与内容交流 形成个人色彩档案、音乐墙和视觉海报 Hue• 不提供音乐播放，也不试图复制公开乐评社区。它补充的是“收藏之后”的体验：把不同来源的专辑整理到同一空间，并以色彩为主线完成浏览、记录、洞察和表达。
-
四层产品价值
- 记忆层：当用户记得封面颜色却想不起标题时，可以沿色环定位专辑，色彩成为文字搜索之外的第二种入口。
- 空间层：Drift、Wave、Spin 共用同一批专辑和色彩数据，以漂浮、波浪与黑胶墙三种方式呈现个人收藏。
- 理解层：色彩档案统计色系、冷暖、明度、饱和度、年代、评分、乐评、曲目短评和收藏时间线；AI 只基于这些真实记录生成结构化解读，文字不足时不补写经历。
- 表达层：用户可以为单张专辑设置仅自己、好友或公开，并把收藏墙或专辑记录重新排版为四种 PNG 海报，而不是简单截取页面。
-
参赛价值
- 初赛证明“按颜色组织音乐”具有可操作的交互体验；复赛进一步证明，这个创意能够支撑一套真实的全栈产品。项目从空工程重新实现了账号、云端数据、跨平台导入、可校正取色、三套可视化空间、专辑与曲目记录、色彩洞察、好友权限和两类海报导出。
- Hue• 最终验证的是一条完整产品逻辑：封面色彩可以从视觉印象转化为结构化数据，再成为音乐收藏的导航方式、空间结构、审美证据和表达素材。
-
后续规划
- 增加更多真实设备和低性能设备下的移动端验证；
- 跟进音乐平台变化，提升解析稳定性和元数据一致性；
- 让色彩洞察支持更多时间维度与收藏对比；
- 探索更多海报比例、排版和高清导出能力。
Hue• 从初赛到复赛，做了一件事：把"用色彩组织音乐收藏"从一个 8700 行的单文件 Demo，扩展成了一个可以登录、可以积累、可以选择分享边界的个人音乐空间。初赛证明了方向成立，复赛证明了它可以成为一个真正的产品。
TRAE 在这个过程中不是替我写代码，而是让我从"逐行实现"变成了"描述意图→拿到架构→验证微调"的节奏。
色彩可以是音乐的索引维度，也可以是认识自己品味的窗口。希望你看完这篇帖子，会想去转动那个色环。
