# 喂给 claude.ai/design 的 Prompt(可直接粘贴)

> 用法:打开 claude.ai/design → 新建项目(选用已 onboard 的 **TVU Networks Design System**)→ 粘贴下面整段作为首条 prompt。建议先让它出整体框架+导航,再按"生成顺序"逐页深化。

---

我要做一个 **TVU 品牌的双端直播平台高保真可点击原型**,请直接复用我们已有的 **TVU Networks Design System**(深色模式默认,品牌主色 TVU 绿 #2fb54e,沿用其 spacing / radius / 字体 token,不要另起配色)。所有数据用占位内容,实时数据(聊天、监控指标)用动效模拟即可。界面文案**支持中英文切换**,默认中文;下面每个元素我都给了中英两版,请直接采用,不要用 lorem 占位文字。

## 整体结构

两端、共 8 个页面,顶部可在两端之间切换,右上角有「中/EN」语言切换:

- **TVU Live(观众端 /watch)**:首页/发现、直播间、主播主页
- **TVU Studio(主播控制台 /studio)**:总览 Dashboard、推流设置、直播管理、实时监控、多平台分发(Studio 左侧固定 5 项导航)

Live 端深色沉浸,Studio 端深色控制台,统一用品牌绿点缀。

## 页面与关键文案(zh / en)

### TVU Live

**① 首页/发现** — Banner 推荐位 + "正在直播"卡片网格(封面、主播名、品类、观看人数)+ 品类横滚 + 热门主播。
- 正在直播 / Live Now;为你推荐 / Recommended;浏览品类 / Browse Categories;热门主播 / Top Streamers
- 角标:直播中 / LIVE;1.2万人观看 / 12K watching;立即观看 / Watch Now
- 空态:暂无正在直播的频道 / No live channels right now

**② 直播间** — 大播放器(LIVE 角标、清晰度、全屏)+ 右侧实时聊天 + 主播信息卡 + 底部互动条。
- 直播中 / LIVE;主播正在直播 / Streaming now;直播已结束 / Stream ended
- 关注 / Follow;已关注 / Following;订阅 / Subscribe;点赞 / Like;清晰度 / Quality;全屏 / Fullscreen
- 聊天 / Chat;发条弹幕… / Say something…;发送 / Send;关于主播 / About

**③ 主播主页** — 头图 + 头像 + 简介 + 关注数 + 在线状态 + 往期回放网格。
- 粉丝 / Followers;正在直播 / Live;离线 / Offline;往期回放 / Past Streams;简介 / About;观看直播 / Watch Live

### TVU Studio

**① 总览 Dashboard** — 当前直播状态 + 4 张核心指标卡 + 快捷入口。
- 总览 / Overview;直播中 / On Air;未开播 / Offline
- 当前在线 / Current Viewers;码率 / Bitrate;连接健康 / Connection Health;已直播时长 / Uptime
- 去开播 / Go Live;查看监控 / View Monitor;推流设置 / Stream Settings

**② 推流设置** — RTMP/SRT 服务器地址 + 串流密钥(可复制/重置)+ 编码配置。
- 推流设置 / Stream Settings;推流协议 / Protocol;服务器地址 / Server URL;串流密钥 / Stream Key
- 复制 / Copy;已复制 / Copied;重置密钥 / Reset Key;分辨率 / Resolution;码率 / Bitrate;帧率 / Frame Rate;设置已保存 / Settings saved

**③ 直播管理** — 标题/封面/品类/简介编辑 + 预览窗 + 开播/下播大按钮。
- 直播管理 / Broadcast;直播标题 / Stream Title;给这场直播起个标题 / Name your stream
- 上传封面 / Upload Thumbnail;选择品类 / Select Category;直播简介 / Description
- 开始直播 / Go Live;结束直播 / End Stream;预览 / Preview

**④ 实时监控**(重点做扎实) — 码率实时曲线 + 帧率/丢帧/延迟指标 + 连接时间线 + 告警条。
- 实时监控 / Monitoring;码率 / Bitrate;帧率 / Frame Rate;丢帧 / Dropped Frames;延迟 / Latency
- 信号正常 / Signal Stable;连接不稳定 / Unstable Connection;连接中断 / Connection Lost
- 连接时间线 / Connection Timeline;检测到丢帧上升,请检查网络 / Frame drops rising — check your network

**⑤ 多平台分发** — 已绑定平台列表(YouTube/Twitch/Facebook/自定义 RTMP),每个含状态 + 启用开关 + 添加目标。
- 多平台分发 / Destinations;同时转推 / Simulcast;添加分发目标 / Add Destination
- 已连接 / Connected;已断开 / Disconnected;连接异常 / Error;启用 / Enable;停用 / Disable;自定义 RTMP / Custom RTMP
- 空态:还没有分发目标,添加一个开始转推 / No destinations yet — add one to simulcast

### 全局文案
- 加载中… / Loading…;加载失败,请重试 / Failed to load, retry;暂无内容 / Nothing here yet
- 保存 / Save;取消 / Cancel;确认 / Confirm

## 状态要求
每个数据区都要有加载(骨架屏)、空、错误(可重试)三种状态。

## 生成顺序建议
1. 先生成整体导航框架 + 两端切换 + 语言切换;
2. 再依次深化 Live 的 3 页;
3. 最后深化 Studio 的 5 页,实时监控页着重做曲线和告警。