一键在 Manus 中运行任何 Skill

wave-mosaic-web-theme

星标6

分支1

更新时间2026年6月29日 07:06

当需要为网页复刻 black-yt 风格的高级前端主题时使用；覆盖 canvas wave-mosaic 动态方块背景、Pure White/Warm Yellow/Cool Blue/Dark 四种背景颜色切换、Space Grotesk 字体、CSS 变量、floating background dots、顶部圆角导航栏、论文筛选滑块、卡片/表格/按钮主题化和性能细节。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

black-yt

black-yt/skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Wave Mosaic Web Theme

设计来源

核心视觉和源头设计参考 black-yt/black-yt.github.io。
这个 skill 记录的是当前可复用的设计模式和实现骨架；源站后续可能继续演进，复刻时应保留动态方块背景、4 种背景颜色切换、Space Grotesk 字体和轻量透明卡片质感这些核心特征，再按目标页面的信息架构做适配。

文件导航

序号	文件内容概览	关键词	触发时机	文件路径
1	说明 Wave Mosaic 主题的视觉目标和约束，覆盖固定全屏 canvas 动态方块、4 种背景颜色、CSS 变量、Space Grotesk 字体、透明卡片、低噪声 hover/glow 和性能参数。	wave mosaic、canvas background、dynamic tiles、4 backgrounds、CSS variables、Space Grotesk、theme switcher、transparent cards、hover glow、performance、24fps、mosaic grid	触发本 skill 后默认读取；设计页面视觉方向前；判断是否需要 canvas 背景或 4 色切换前；调整动态方块参数、字体、透明质感或组件风格前读取	`SKILL.md`
2	提供可直接复刻的 HTML/CSS/JS 实现，包含 `<head>` 字体和 favicon、固定 canvas、主题按钮、`data-theme` 切换、CSS 变量、背景绘制脚本和页面结构骨架。	HTML、CSS、JavaScript、`<head>`、favicon、Google Fonts、`#wave-canvas`、`data-theme`、theme dots、canvas draw loop、responsive、copyable template	需要生成完整页面文件前；复刻一模一样的背景和主题切换前；迁移到 GitHub Pages 前；检查 favicon/字体/canvas/主题按钮是否缺失时必须读取	references/theme-implementation.md
3	提供源站同款顶部圆角导航栏和论文筛选滑块的可复制实现，覆盖居中横向导航、移动端横向滚动、scroll-spy 高亮、anchor 跳转、active link 自动入视、core/collab 论文切换、滑块 indicator 定位和主题变量复用。	top nav、masthead、site-nav、anchor navigation、scroll-spy、smooth scroll、nav-active、seg-control、seg-indicator、paper filter、core papers、collaboration papers、data-paper-type、offsetLeft、rounded tabs	需要复刻顶部导航栏前；需要页面内锚点跳转和当前章节高亮前；需要核心论文/合作论文筛选滑块前；调整圆角、边框、字体、滑块动画、移动端横向滚动或 active 状态时必须读取	references/navigation-and-segmented-controls.md

使用原则

用这个 skill 复刻一种低噪声、高级、学术/技术感的网页主题。
必须包含固定全屏 canvas 动态方块背景，背景位于内容下方且不拦截点击。
必须包含 4 种背景颜色：white、yellow、blue、dark。
背景颜色切换使用 <html data-theme="...">；默认白色背景不设置 data-theme。
颜色必须由 CSS custom properties 驱动，不要在组件里散落硬编码主题色。
字体优先使用 Space Grotesk，中文/系统 fallback 使用 Noto Sans SC、Inter、ui-sans-serif。
页面主体保持透明，让 canvas wave-mosaic 背景可见。
组件风格使用轻微边框、低饱和渐变、细腻 hover 和主题色 glow，不使用大面积高饱和渐变。

必读实现

完整背景和主题实现见 references/theme-implementation.md。顶部导航栏和论文筛选滑块见 references/navigation-and-segmented-controls.md。

需要写页面时：

先复制参考文件中的 head 字体和 favicon 配置。
复制 4 种背景颜色的 CSS 变量。
复制 #theme-switcher 和 .theme-dot 样式。
复制 canvas wave-mosaic 背景脚本。
复制 background color switcher 脚本。
需要顶部导航、页面跳转或论文筛选滑块时，复制导航与 segmented control reference。
再按页面需求添加卡片、表格、accordion 或内容区。

动态方块背景

核心参数必须保持一致：

参数	值	作用
`TILE`	`26`	每个方块的网格尺寸
`GAP`	`1`	方块间隔，形成 mosaic grid
`FRAME_MS`	`1000 / 24`	约 24 fps，减少 CPU 占用
`t +=`	`0.007`	慢速平静波动
`z-index`	`0`	背景层
`pointer-events`	`none`	不拦截页面交互

每个 tile 的透明度来自两组交叉 sine wave：

0.6 * sin(c * 0.21 + t * 0.36) * sin(r * 0.17 + t * 0.28)
0.4 * sin(c * 0.11 - r * 0.13 + t * 0.19)
用 cubic bias：v = norm * norm * norm
透明度范围：0.004 + v * 0.186
低于 0.02 的 tile 跳过绘制，提高性能。

背景颜色对应 RGB：

Theme	RGB
`white`	`10,10,10`
`yellow`	`120,85,20`
`blue`	`38,88,155`
`dark`	`220,210,175`

4 种背景颜色系统

必须提供这些背景颜色：

white：纯白、黑灰文字、低对比浅灰边框。
yellow：暖黄纸感、棕色文字、低饱和米色组件。
blue：冷蓝技术感、蓝灰背景、深蓝文字。
dark：近黑背景、暖灰文字、暗色组件。

必须包含这些变量组：

页面：--bg、--masthead-bg、--masthead-border
卡片/表格：--paper-border、--paper-hover
组件：--c-bg-start、--c-bg-end、--c-border、--c-text
hover：--c-hover-start、--c-hover-end、--c-hover-border、--c-hover-text
segmented / active：--seg-start、--seg-end、--seg-shadow、--seg-inactive、--seg-active-text
glow：--glow-rgb

Background Color Switcher

位置：固定在右下角，bottom: 1.5em; right: 1.5em。
容器：pill 形，border-radius: 9999px。
dot：18px × 18px 圆点。
active dot：scale(1.35)，并用双层 box-shadow 表达当前背景颜色。
hover dot：scale(1.18)。
本地存储 key 推荐用项目名，例如 site-background 或 [project]-background。

组件复刻规则

内容容器用 position: relative; z-index: 1 压在 canvas 上方。
表格/卡片背景用 linear-gradient(135deg, var(--c-bg-start), var(--c-bg-end))。
边框统一用 1px 或 1.5px solid var(--c-border)。
hover 时只做轻微 translateY(-1px/-2px)、边框变深和低透明阴影。
深色背景要显式设置文本、链接、表格边框和代码块颜色。
移动端避免内容宽度溢出；固定控制器要给足 z-index。

验证清单

4 个 background dots 都可点击，刷新后保留背景颜色。
white 背景时 <html> 不带 data-theme。
canvas 背景可见，页面主体不是不透明白底。
背景在切换背景颜色后同步变化。
滚动和点击不受 canvas 影响。
切到后台时动画暂停，回到页面后恢复。
mobile resize 不因为地址栏高度变化频繁重设 canvas。
深色模式下正文、链接、表格、代码块都可读。

同仓库更多 Skills

同仓库

latex-template-migration

black-yt/skills

将 arXiv、旧会议、旧期刊或自定义 LaTeX 论文工程迁移到目标会议/期刊投稿模板；用于模板 A 到模板 B 的 LaTeX class/style/bibliography/单双栏转换、全匿名投稿检查、页数约束、图表公式排版、PDF 可视化检查、文本/图片/表格/公式守恒、模板标准文件守恒和最终压页。

2026-07-236

llm-deploy-training

black-yt/skills

当需要部署或训练 LLM/VLM 时使用；覆盖 vLLM OpenAI-compatible 服务、多模态输入限制、Qwen3.5 工具调用、thinking/reasoning 控制、CUDA Graph 策略，以及 ms-swift SFT/DPO/GRPO full training、Megatron 长序列训练、messages loss/loss_scale、数据校验、显存排错和训练检查。

2026-07-236

lab-cluster-1

black-yt/skills

当需要在 lab cluster 1 / PJLAB 上使用开发机、rlaunch worker 或 rjob 任务时使用；覆盖交互 SSH、安全边界、路径规范、代理、CPU/GPU 分区、训练/部署、服务访问和排错，并要求使用原始 rlaunch/rjob 命令。

2026-07-236

researchharness

black-yt/skills

Use when installing, configuring, running, embedding, deploying, or debugging InternScience ResearchHarness as a lightweight tool-using LLM agent runtime, including CLI runs, local frontend UI, OpenAI-compatible API server, Python API, tool selection, workspaces, traces, compaction, tests, and read-only source inspection.

2026-07-166

context-overlay

black-yt/skills

Use when configuring or debugging the context-overlay OpenAI-compatible proxy for deterministic prompt/context injection, prompt patching, rule matching, request routing, rejection rules, skill_dir retrieval, streaming forwarding, and local or tunneled proxy validation.

2026-07-136

pdf-parsing

black-yt/skills

当需要用 structai.read_pdf 将 PDF 文档解析成本地 Markdown、抽取图片资源，并处理 MinerU 解析缓存或代理重试问题时使用。

2026-07-136

name	wave-mosaic-web-theme
description	当需要为网页复刻 black-yt 风格的高级前端主题时使用；覆盖 canvas wave-mosaic 动态方块背景、Pure White/Warm Yellow/Cool Blue/Dark 四种背景颜色切换、Space Grotesk 字体、CSS 变量、floating background dots、顶部圆角导航栏、论文筛选滑块、卡片/表格/按钮主题化和性能细节。

Wave Mosaic Web Theme

设计来源

核心视觉和源头设计参考 black-yt/black-yt.github.io。
这个 skill 记录的是当前可复用的设计模式和实现骨架；源站后续可能继续演进，复刻时应保留动态方块背景、4 种背景颜色切换、Space Grotesk 字体和轻量透明卡片质感这些核心特征，再按目标页面的信息架构做适配。

文件导航

序号	文件内容概览	关键词	触发时机	文件路径
1	说明 Wave Mosaic 主题的视觉目标和约束，覆盖固定全屏 canvas 动态方块、4 种背景颜色、CSS 变量、Space Grotesk 字体、透明卡片、低噪声 hover/glow 和性能参数。	wave mosaic、canvas background、dynamic tiles、4 backgrounds、CSS variables、Space Grotesk、theme switcher、transparent cards、hover glow、performance、24fps、mosaic grid	触发本 skill 后默认读取；设计页面视觉方向前；判断是否需要 canvas 背景或 4 色切换前；调整动态方块参数、字体、透明质感或组件风格前读取	`SKILL.md`
2	提供可直接复刻的 HTML/CSS/JS 实现，包含 `<head>` 字体和 favicon、固定 canvas、主题按钮、`data-theme` 切换、CSS 变量、背景绘制脚本和页面结构骨架。	HTML、CSS、JavaScript、`<head>`、favicon、Google Fonts、`#wave-canvas`、`data-theme`、theme dots、canvas draw loop、responsive、copyable template	需要生成完整页面文件前；复刻一模一样的背景和主题切换前；迁移到 GitHub Pages 前；检查 favicon/字体/canvas/主题按钮是否缺失时必须读取	references/theme-implementation.md
3	提供源站同款顶部圆角导航栏和论文筛选滑块的可复制实现，覆盖居中横向导航、移动端横向滚动、scroll-spy 高亮、anchor 跳转、active link 自动入视、core/collab 论文切换、滑块 indicator 定位和主题变量复用。	top nav、masthead、site-nav、anchor navigation、scroll-spy、smooth scroll、nav-active、seg-control、seg-indicator、paper filter、core papers、collaboration papers、data-paper-type、offsetLeft、rounded tabs	需要复刻顶部导航栏前；需要页面内锚点跳转和当前章节高亮前；需要核心论文/合作论文筛选滑块前；调整圆角、边框、字体、滑块动画、移动端横向滚动或 active 状态时必须读取	references/navigation-and-segmented-controls.md

使用原则

用这个 skill 复刻一种低噪声、高级、学术/技术感的网页主题。
必须包含固定全屏 canvas 动态方块背景，背景位于内容下方且不拦截点击。
必须包含 4 种背景颜色：white、yellow、blue、dark。
背景颜色切换使用 <html data-theme="...">；默认白色背景不设置 data-theme。
颜色必须由 CSS custom properties 驱动，不要在组件里散落硬编码主题色。
字体优先使用 Space Grotesk，中文/系统 fallback 使用 Noto Sans SC、Inter、ui-sans-serif。
页面主体保持透明，让 canvas wave-mosaic 背景可见。
组件风格使用轻微边框、低饱和渐变、细腻 hover 和主题色 glow，不使用大面积高饱和渐变。

必读实现

完整背景和主题实现见 references/theme-implementation.md。顶部导航栏和论文筛选滑块见 references/navigation-and-segmented-controls.md。

需要写页面时：

先复制参考文件中的 head 字体和 favicon 配置。
复制 4 种背景颜色的 CSS 变量。
复制 #theme-switcher 和 .theme-dot 样式。
复制 canvas wave-mosaic 背景脚本。
复制 background color switcher 脚本。
需要顶部导航、页面跳转或论文筛选滑块时，复制导航与 segmented control reference。
再按页面需求添加卡片、表格、accordion 或内容区。

动态方块背景

核心参数必须保持一致：

参数	值	作用
`TILE`	`26`	每个方块的网格尺寸
`GAP`	`1`	方块间隔，形成 mosaic grid
`FRAME_MS`	`1000 / 24`	约 24 fps，减少 CPU 占用
`t +=`	`0.007`	慢速平静波动
`z-index`	`0`	背景层
`pointer-events`	`none`	不拦截页面交互

每个 tile 的透明度来自两组交叉 sine wave：

0.6 * sin(c * 0.21 + t * 0.36) * sin(r * 0.17 + t * 0.28)
0.4 * sin(c * 0.11 - r * 0.13 + t * 0.19)
用 cubic bias：v = norm * norm * norm
透明度范围：0.004 + v * 0.186
低于 0.02 的 tile 跳过绘制，提高性能。

背景颜色对应 RGB：

Theme	RGB
`white`	`10,10,10`
`yellow`	`120,85,20`
`blue`	`38,88,155`
`dark`	`220,210,175`

4 种背景颜色系统

必须提供这些背景颜色：

white：纯白、黑灰文字、低对比浅灰边框。
yellow：暖黄纸感、棕色文字、低饱和米色组件。
blue：冷蓝技术感、蓝灰背景、深蓝文字。
dark：近黑背景、暖灰文字、暗色组件。

必须包含这些变量组：

页面：--bg、--masthead-bg、--masthead-border
卡片/表格：--paper-border、--paper-hover
组件：--c-bg-start、--c-bg-end、--c-border、--c-text
hover：--c-hover-start、--c-hover-end、--c-hover-border、--c-hover-text
segmented / active：--seg-start、--seg-end、--seg-shadow、--seg-inactive、--seg-active-text
glow：--glow-rgb

Background Color Switcher

位置：固定在右下角，bottom: 1.5em; right: 1.5em。
容器：pill 形，border-radius: 9999px。
dot：18px × 18px 圆点。
active dot：scale(1.35)，并用双层 box-shadow 表达当前背景颜色。
hover dot：scale(1.18)。
本地存储 key 推荐用项目名，例如 site-background 或 [project]-background。

组件复刻规则

内容容器用 position: relative; z-index: 1 压在 canvas 上方。
表格/卡片背景用 linear-gradient(135deg, var(--c-bg-start), var(--c-bg-end))。
边框统一用 1px 或 1.5px solid var(--c-border)。
hover 时只做轻微 translateY(-1px/-2px)、边框变深和低透明阴影。
深色背景要显式设置文本、链接、表格边框和代码块颜色。
移动端避免内容宽度溢出；固定控制器要给足 z-index。

验证清单

4 个 background dots 都可点击，刷新后保留背景颜色。
white 背景时 <html> 不带 data-theme。
canvas 背景可见，页面主体不是不透明白底。
背景在切换背景颜色后同步变化。
滚动和点击不受 canvas 影响。
切到后台时动画暂停，回到页面后恢复。
mobile resize 不因为地址栏高度变化频繁重设 canvas。
深色模式下正文、链接、表格、代码块都可读。