Skill: ysredcity/tv-launcher-prototype (version 1.0.1)

--- 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）必须有极其明显的视觉反馈，让用户一眼看到"我现在选的是哪个"。以下三个效果缺一不可，且适用于页面中**每一个**可聚焦元素——按钮、卡片、列表项、导航标签、图标，无一例外： 1. **缩放动画（scale）**：焦点元素放大 5-10%，从周围元素中"跳出来" 2. **白色高光投影**：发光效果的 box-shadow，像聚光灯打在上面 3. **白色边框**：确保在任何背景上都能看清焦点位置 不要用文字颜色变化、下划线、背景色变化等方式来代替上述焦点效果。这些可以作为辅助，但缩放 + 白色投影 + 白色边框是底线，缺任何一个都不行。原因是电视用户坐在 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 框架，原生代码足够 - 不需要构建工具，确保用户直接用浏览器打开就能运行


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)