01Product Intent
不是把三个平台硬放在一起,而是把“下载这件事”统一成同一种体验。
这个项目真正要解决的问题,不是支持的平台数量本身,而是用户面对不同平台时常常要重新找工具、重新适应交互。于是我把 Twitter (X)、Bilibili、YouTube 的视频下载需求抽象成同一种输入动作,让页面只保留最核心的操作入口。
- 统一链接粘贴入口,减少不同平台之间的心智切换。
- 把界面重心集中在输入和下载,不用额外说明用户也能快速上手。
- 通过标题、副标题和输入提示直接解释产品能力边界。

01 / THE CONTEXT
这个项目聚焦一个很明确的使用场景: 用户拿到 Twitter (X)、Bilibili、YouTube 的视频链接后,希望尽快完成解析和下载,而不是在不同站点、不同工具之间来回切换。我把它做成一个统一入口的小工具,重点放在清晰的输入反馈、轻量直接的操作链路和成品感表达上。
我的角色
独立开发 / 产品整理 / 前端交互实现
交付范围
技术与工具
Next.js / React / TypeScript / TailwindCSS / Vibe Coding
3 平台
统一下载入口单链接
降低操作路径轻量交互
突出直达下载02 / INSIDE THE PROJECT
01Product Intent
这个项目真正要解决的问题,不是支持的平台数量本身,而是用户面对不同平台时常常要重新找工具、重新适应交互。于是我把 Twitter (X)、Bilibili、YouTube 的视频下载需求抽象成同一种输入动作,让页面只保留最核心的操作入口。
02Interface Thinking
这类页面元素并不多,但越是轻量,就越要求信息层级准确。标题要让人立刻理解用途,输入框要表达支持的平台范围,主按钮要足够明确,整体视觉要让用户觉得这是一个可以直接使用的工具,而不是半成品 Demo。
03 / THE OUTCOME
把多平台视频下载需求收敛成一个更直接的输入与触发界面。
减少用户在不同解析站和下载工具之间反复切换的操作成本。
用较短开发链路完成一个具备明确场景价值的 Vibe Coding 作品展示。
04 / THE JOURNEY
先明确工具只解决一件事: 让用户把常见视频平台链接粘贴进来后,快速进入下载流程,而不堆叠多余功能。
围绕输入框、主按钮、状态反馈和品牌标题做页面组织,让界面一眼就能理解用途和操作方式。
在轻量页面结构之上补足色彩、层次和产品化文案,让它既能作为可用工具,也能作为作品集中的完整项目展示。