ClawHub

tv-launcher-prototype

v1.0.1

生成 Smart TV Launcher 风格的纯前端原型界面（HTML/CSS/JavaScript）。模拟电视桌面的交互体验，包括遥控器方向键导航、焦点缩放动画、深色主题等 TV UI 特有的设计模式。当用户提到"TV 界面"、"电视桌面"、"TV Launcher"、"电视 UI"、"遥控器交互"、"智能电...

⭐ 0· 20·0 current·0 all-time
byPixelyes@ysredcity
MIT-0
Download zip
LicenseMIT-0 · Free to use, modify, and redistribute. No attribution required.
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
✓
Purpose & Capability
Skill name, description, and SKILL.md consistently describe producing Smart TV front-end prototypes; there are no unrelated requirements (no env vars, no binaries, no installs) that would be unexpected for this purpose.
✓
Instruction Scope
Runtime instructions are detailed but stay on-topic (how to generate HTML/CSS/JS prototypes, focus navigation, animations, layout rules). They do not instruct reading system files, accessing credentials, or calling external endpoints beyond optional placeholder images.
✓
Install Mechanism
There is no install spec and no code files to execute — the skill is instruction-only, which minimizes disk/write and execution risk.
✓
Credentials
The skill requests no environment variables, credentials, or config paths. All requested behavior (keyboard handling, CSS/JS patterns) is achievable without extra privileges.
✓
Persistence & Privilege
always is false and the skill is user-invocable with normal autonomous invocation allowed by default; it does not request persistent system presence or modify other skills or system settings.
Assessment
This skill is low-risk: it's a descriptive template for producing TV-style front-end prototypes and does not request secrets or install code. Before using, consider: (1) if you paste any external image URLs or assets into the generated code, review them for third-party endpoints; (2) preview generated HTML/CSS/JS locally in a browser before deploying; and (3) if you have strict policy about autonomous skills, note this skill can be invoked by agents by default — disable autonomous invocation if you prefer manual control. If you want extra assurance, request the skill output be reviewed for any unexpected external network references before opening it in a browser.

Like a lobster shell, security has layers — review code before you run it.

latestvk97fc5h6pjj6pwdwkxyezrrggs8447tc

License

MIT-0
Free to use, modify, and redistribute. No attribution required.
Termshttps://spdx.org/licenses/MIT-0.html

SKILL.md

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 框架，原生代码足够
  • 不需要构建工具，确保用户直接用浏览器打开就能运行

Files

2 total
Select a file
Select a file to preview.

Comments

Loading comments…