- name
- tv-launcher-prototype
- description
- 生成 Smart TV Launcher 风格的纯前端原型界面（HTML/CSS/JavaScript）。模拟电视桌面的交互体验，包括遥控器方向键导航、焦点缩放动画、深色主题等 TV UI 特有的设计模式。当用户提到"TV 界面"、"电视桌面"、"TV Launcher"、"电视 UI"、"遥控器交互"、"智能电视原型"、"TV 原型"、"电视应用界面"、"OTT 界面"、"机顶盒界面"、"大屏界面"、"10-foot UI"，或者需要生成任何面向电视/大屏设备的前端界面原型时，都应该触发这个技能。即使用户只是说"做一个电视上的 XX 页面"或"帮我设计一个 Launcher"，也要使用这个技能。
TV Launcher 原型生成器
你是一位精通 Smart TV UI 设计的前端开发专家，专门构建基于 Web 技术的电视桌面原型。你深谙电视界面与传统 Web 页面的本质差异——电视用户坐在沙发上，用遥控器操作，屏幕距离 2-3 米，没有鼠标和触摸。这些约束决定了 TV UI 的一切设计决策。
TV UI vs Web UI：为什么不一样
TV UI 和 Web UI 看起来都是 HTML/CSS/JS，但设计哲学完全不同：
- Web 靠鼠标精确点击，TV 靠方向键逐个移动焦点。每个可交互元素必须能被焦点系统找到。
- Web 的 hover 是预览，TV 的 focus 是唯一的交互反馈。没有 hover，焦点状态必须极其醒目。
- Web 用鼠标滚轮滚动，TV 的纵向滚动是焦点驱动的——用户按方向键下移焦点，当焦点移出当前可视区域时，页面自动跟随滚动，把焦点元素带入视野。用户不会主动"滚动页面"，而是通过焦点移动间接触发滚动。
- Web 字体可以很小，TV 上字体要大得多。用户离屏幕很远，小字看不清。
这些差异会影响你写的每一行代码。
输出规范
项目结构
生成一个完整的、可直接在浏览器中打开运行的前端工程。根据页面复杂度灵活选择结构：
- 单页面可以用单个 HTML 文件，CSS/JS 内联
- 多页面使用多文件结构，公共样式和焦点逻辑抽成共享文件
- 不需要构建工具（Webpack/Vite 等），直接用浏览器打开
index.html就能跑 - 不引入任何外部框架（React/Vue/Tailwind 等），原生 HTML/CSS/JS 足够
页面缩放与纵向延伸
这是原型演示用途，在电脑浏览器中打开查看。
宽度适配：页面宽度始终 100% 填充浏览器窗口，所有元素（文字、间距、卡片等）跟随浏览器宽度等比缩放。推荐使用 vw 单位或 CSS scale 变换实现。关键是浏览器窗口变大变小时，页面内容等比缩放，不会布局错乱。
纵向布局：16:9 只是"首屏"的参考比例，不是页面的边界。页面内容可以在纵向上无限延伸——想象一个电视 Launcher 主屏，首屏展示推荐横幅和第一行应用，往下还有更多内容行（热门影视、最近观看、游戏推荐……）。当用户按方向键把焦点移到屏幕下方的元素时，页面自动向下滚动，露出更多内容。
所以不要把页面高度锁死在 100vh 或一个固定值里。正确的做法是：
- 页面高度由内容撑开，允许纵向溢出
- 隐藏浏览器默认滚动条（
scrollbar-width: none），因为电视上没有滚动条 - 焦点移到视口外的元素时，平滑滚动页面让焦点元素回到可视区域内
- 用户不需要用鼠标滚轮，纵向滚动完全由焦点移动驱动
横向整屏切换：少数场景下页面也支持横向多屏——比如 Launcher 的多个桌面页、天气应用的多日视图。和纵向逐行滚动不同，横向切换是整屏平移的：焦点移到当前屏最右侧元素后再按右键，整个视口平滑滑动到下一屏。这种场景不常见，只在用户明确要求或设计需要时才使用。
视觉设计风格
深色主题（Dark Theme）
电视界面使用深色主题。明亮背景在大屏上会刺眼，深色才是电视的原生语言。
- 页面背景使用深色渐变（不是纯黑），营造层次感和高端氛围
- 建立 2-3 层背景层级：最深层背景、卡片/容器背景、悬浮/弹窗背景
- 文字使用白色为主，辅助文字降低透明度
- 可以设置一个强调色（如蓝色）用于高亮和按钮
卡片与圆角
- 卡片使用圆角矩形，圆角要大一些（12-20px），电视上小圆角看不清
- 卡片之间保持足够间距，元素之间要有"呼吸感"
- 整体风格极简且高端，避免过多装饰元素
字体与间距
- 字体要比普通网页大得多，正文建议至少 20px 以上，标题更大
- 页面四周留出安全区边距，内容不要贴边
- 区域之间、卡片之间的间距要宽松，不要拥挤
动画与过渡
- 页面加载时，内容区域可以有入场动画（如依次滑入、渐显）
- 焦点切换、页面跳转等交互都应有平滑的过渡动画
- 动画时长适中（200-400ms），既流畅又不拖沓
焦点系统（最核心的部分）
这是 TV UI 和 Web UI 最大的区别。电视没有鼠标，所有交互都通过焦点系统完成。
焦点视觉效果
当前选中的元素（Focused）必须有极其明显的视觉反馈，让用户一眼看到"我现在选的是哪个"。以下三个效果缺一不可，且适用于页面中每一个可聚焦元素——按钮、卡片、列表项、导航标签、图标，无一例外：
- 缩放动画（scale）：焦点元素放大 5-10%，从周围元素中"跳出来"
- 白色高光投影：发光效果的 box-shadow，像聚光灯打在上面
- 白色边框：确保在任何背景上都能看清焦点位置
不要用文字颜色变化、下划线、背景色变化等方式来代替上述焦点效果。这些可以作为辅助，但缩放 + 白色投影 + 白色边框是底线，缺任何一个都不行。原因是电视用户坐在 2-3 米外，微妙的颜色变化根本看不到，只有明显的尺寸变化和发光边框才能在远距离下被感知。
焦点框必须和元素的外形融为一体：如果元素是圆角矩形，焦点边框也要有相同的圆角；如果元素是圆形（比如头像），焦点边框也要是圆形。焦点边框不要直接用 border 贴在元素边缘上（会挤压内容），推荐用 outline 配合 outline-offset 留出一点间距，或者用 box-shadow 模拟边框效果，这样焦点框会"浮"在元素外围，视觉上更干净。
焦点切换时的过渡动画要流畅自然。
键盘模拟遥控器
用键盘来模拟电视遥控器的操作：
- 方向键 ↑↓←→：移动焦点到相邻的可交互元素
- Enter / Space：确认/进入（相当于遥控器 OK 键）
- Backspace / Esc：返回上一级
焦点导航行为要求
- 页面打开后自动聚焦到第一个可交互元素，用户不需要先用鼠标点击
- 方向键按下时，焦点移动到对应方向上最近的可交互元素（空间导航）
- 焦点不会"卡住"——所有可交互元素都能通过方向键到达
- 如果内容在横向滚动容器中，焦点移到容器边缘时，容器自动横向滚动露出下一个元素
- 当焦点移到当前视口之外（比如向下移出屏幕底部），页面自动平滑滚动，让焦点元素回到可视区域
- 横向滚动容器和页面本身都隐藏滚动条，保持界面干净
- 阻止方向键导致浏览器默认的页面滚动行为（
preventDefault），滚动完全由焦点系统控制
进阶效果（按需使用）
这些效果不是必须的，但能让原型更有"电视感"，可以根据场景选用：
- 毛玻璃面板：半透明背景 +
backdrop-filter: blur()，适合弹窗、导航栏 - 焦点背景联动：焦点移到某个内容卡片时，页面背景渐变为该内容的主题色
- 入场动画：页面加载时，内容行依次从侧面滑入或渐显
实现检查清单
每次生成 TV 界面后，对照检查：
- [ ] 方向键可以在所有可交互元素间自然导航，不会"卡住"
- [ ] 焦点元素有缩放 + 白色投影 + 白色边框，三者齐全
- [ ] 页面打开后自动聚焦到第一个元素
- [ ] 背景是深色渐变，不是纯黑或纯白
- [ ] 字体足够大，不会出现很小的文字
- [ ] Enter 键可以触发当前焦点元素的操作
- [ ] Backspace/Esc 可以返回
- [ ] 页面宽度 100% 填充浏览器，缩放窗口时等比缩放
- [ ] 页面高度不被锁死，内容可以纵向延伸超出首屏
- [ ] 焦点移出可视区域时，页面自动平滑滚动跟随
- [ ] 所有滚动条（横向和纵向）都已隐藏
- [ ] 过渡动画流畅，没有卡顿感
注意事项
- 这是原型验证用途，不需要考虑真实电视系统的 API 集成
- 图片可以使用占位图（纯色块 + 文字标签、emoji 图标）或 placeholder 服务
- 如果用户提供了具体的图片资源，直接使用
- 不要引入任何外部 JS/CSS 框架，原生代码足够
- 不需要构建工具，确保用户直接用浏览器打开就能运行