Menu

Individual skill

hud-interface

0upvotes

游戏 HUD 式界面：黑白纸墨加一个薄荷强调色，斜切黑标签、空心巨型数字、粗黑汉字标题、环形转动文字、歪着摆的纸卡片、黑色底栏大斜体计数和条形表，背后是流动的液体大理石着色器；可选用 HTML-in-Canvas 把真实 DOM 面板画进 WebGL 再做玻璃折射和色散（Chrome 实验开关，不支持时自动退回普通 DOM）。带噪音档位 quiet / normal / loud，默认 quiet。适合拆解台、零件清单、机器人或任务控制台这类要有「仪表感」的页面。当用户说「游戏 HUD 风格」「做成仪表板那种酷炫界面」「HTML-in-Canvas」「把 DOM 画进 WebGL」「液体大理石背景」「斜切标签 / 巨型数字 / 环形文字」时使用。只在明确请求时触发，忽略顺带提及。

skills/hud-interface/SKILL.md

Read pinned source

Source commit 238e07625aeca5bcf0d6f7cb3e2d07f94c717194

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Local scripts
Last checked
Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
290
Repository last updated
Nov 4, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# HUD 式界面

把一个页面做成游戏 HUD 的样子。分三层，前两层任何浏览器都能用，第三层是可选增强：

| 层 | 内容 | 依赖 |
|---|---|---|
| 版式 | 斜切标签、巨型数字、导航反白块、环形文字、歪卡片、清单表、黑底栏、刻度尺、条形码、等宽小字 | `hud.css`，纯 CSS 和 SVG |
| 背景 | 液体大理石：域扭曲 fbm，纸底、墨线、边缘积一点强调色 | WebGL2；没有时用 CSS 渐变 |
| 玻璃 | 把一个 DOM 面板画进 WebGL 贴图，边缘折射、色散，指针下有放大镜 | HTML-in-Canvas（Chrome 实验开关）；没有时面板保持普通 DOM |

## 文件

- `assets/hud.css`：颜色变量（`--hud-paper` `--hud-ink` `--hud-tint` `--hud-signal`）、字体变量和全部组件类。
- `assets/hud.js`：`window.Hud`，包括 `backdrop(canvas)`、`glass(panel)`、`glassSupported()`、`ring(el, text, {size, font})`、`barcode(el, seed)`、`level()`。没有依赖。
Back to top