用设计，把一个粤语音乐模型
变成人人想玩的 App

AI 已经能 vibe code 界面了，设计师还要设计什么？

一句 prompt，AI 就能做出能用的界面。“能用”不再稀缺，稀缺的是用户主动打开、反复回来。

新品牌：一间深夜的像素 band 房

电子复古、人人都能玩、属于你自己的 studio —— 把用户带回小时候那种 好玩、好奇、大胆 的创作状态，而不是又一个“AI 工具”。

Logo · Wordmark

MUDIO

A late-night room. Your instrument.
A whole city tuning in.

电子复古Everyone plays你自己的 studio

Color · 一束聚光灯

Stage#0B0A12

Sheet#1D1A2D

Acid#E8FF00

Action#9D86FF

Pad#E0218A

Pad#22E0D6

DisplayJam Tonight

Pixelify Sans · 歌名、标题、品牌时刻

Body寫歌 Aa

Manrope + 思源黑体 · 界面与正文

每屏只亮一处Acid 黄只给当下最该按的那一个动作

街机按键手感硬阴影 0 4px 0，按下去会“咔”一声
Start Jamming →

粤语优先的语气“諗唔到寫乜？同我傾兩句就得” —— 像朋友，不像客服

打开 3 秒，就知道这是谁、要干什么

123

Splash · 启动页

品牌即场景

1. 1像素 band 房插画：鼓、合成器、音箱和一只猫 —— 品牌不是 logo，是一个房间
2. 2一句话定位 AI CANTONESE MUSIC · EVERYONE PLAYS
3. 3全屏唯一的亮黄按钮：Start Jamming，不是“注册”

123

Login · 登录

世界观延续到每一步

1. 1卡带游戏机插画，顶上插着一排彩色卡带
2. 2文案 “Slot in the cartridge, the screen glows” —— 登录也是剧情的一部分
3. 3Apple / Google 一键登录，少一步就少流失一个人

两种写歌方式：有词就填，没词就聊

不要求用户先成为作词人或 prompt 工程师 —— 顶部一个切换，下方音乐描述两种方式共用。

1234

填詞作歌 有词

给已经有想法的人

1. 1占位文案直接承诺结果：“Mudio 幫你唱成心動嘅歌”
2. 2AI 潤色 —— 词写得不好也敢写
3. 3语言、音色、曲风、心情 全部点选，不用写 prompt
4. 4按钮下预告 “三個版本 · 約 12–20 秒”，等待有预期

1234

對話作歌 没词

给只有一点感觉的人

1. 1Mudio 先开口：“諗唔到寫乜？同我傾兩句就得”
2. 2虚线灵感卡片，一点就是一个题目
3. 3输入框支持 图片 + 语音，说一句、丢一张图都行
4. 4生成按钮是整屏唯一的 acid 黄

一张照片，也可以是一首歌

把黑箱等待，变成看得见的进度

Published / My Studio / Likes —— 三个像素物件就是 Tab

放大 · 列表行

90%生成中

顺时针进度环直接包住封面，不用另开页面等

100%完成

环变绿、胶囊变 ✓ Ready，一眼知道能听了

E-1042失败

红描边 + 错误码，Regenerate 成为唯一的聚光灯

发布即上台：你的歌，出现在大家的首页

设计输出，依然是能直接上线的代码

Figma 组件库里的颜色、字体和按钮，直接变成落地页与可点击 Demo —— 和 HKMeeting 同一条流水线。

mudio-landing · index.html

Git 仓库 · 研发 clone 即用

mudio-landing/
├─ index.html     落地页 · EN / 繁
├─ img/           splash · toast · studio
├─ vercel.json
└─ README.md      交接说明
mudio-demo-v3/
└─ index.html     20 屏可点击原型

代码包里有什么

• 响应式，桌面到手机单文件搞定
• EN / 繁中一键切换，不中英混排
• 滚动揭示、toast 弹出等微动效
• 零依赖 HTML / CSS / JS
• Demo 热区直接取自 Figma 原型连线