vr-canvas - SKILL.md Agent Skill

name: vr-canvas description: Generate a single-file VR-style portfolio website — works are tiled on the inside of a 3D cylinder/sphere (concave wraparound, like an immersive headset), with mouse-controlled head tilt, long-press to drag and browse the infinite canvas, click to open work detail. Includes overlays for About / CV / Contact / Filter. Takes a natural-language description of the studio and works (images + brief copy); outputs ONE working .html file. Runs in BOTH Claude Code (writes to ~/Desktop) and GLM / online chat (outputs HTML inline). Trigger phrases: "做个 VR 作品集", "做个无限画布作品集", "做个穹顶包裹的作品集", "vr-canvas-gen ...", or when user drags this skill folder into chat asking for a wraparound/immersive portfolio site. visibility: public mode: template carrier: web-page scenario: portfolio pattern_source: reference.html source_priority: skill-first triggers: - "做个 VR 作品集" - "做个无限画布作品集" - "做个穹顶包裹的作品集" - "弧幕作品集" - "包裹感作品集" related_patterns: portfolio-detail, digital-eguide legacy_gen: true

vr-canvas — VR 弧幕作品集生成器

何时触发

用户说「做个 VR 作品集」/「做个穹顶 / 弧幕 / 包裹感的作品集」/「做个无限画布作品集」/「vr-canvas-gen ...」，并提供了：

作品文件（图片，文件夹路径或多个文件路径）— GLM 模式可以是描述
自然语言描述（工作室介绍 + 每件作品的故事 — 散文也行，不必结构化）

输入解析

从用户消息抽取：

works_path（A 模式必填）：作品文件夹路径或一组文件路径
bio_text（必填）：工作室自我介绍 + 各项目背景。可能含：工作室名、城市、领域、成立年份、团队、客户类型、各作品的故事
风格变体（可选）：默认深色「材料/工作室」氛围；用户说「亮色 / 杂志感 / 赛博 / 极简」时调 :root 配色

如果用户只说「做个 VR 作品集」但没给作品 → 必须问一次作品和工作室名字。给了作品但没写描述 → 不追问，从文件名/视觉内容推断标题和分类。

运行环境（两种模式）

A. Claude Code / 本地（有文件系统）

用 Bash 列文件、sips 探尺寸、cp 拷贝图片
输出到 ~/Desktop/{slug}-vr-canvas/index.html + images/
图片用相对路径 images/work-NN.jpg
模板自带 images/p-01-color-macro.jpg ... p-18-magazine.jpg 共 18 张设计向真实摄影（≈2.2MB），用户没传图片时直接 open template.html 就能看到完整 VR 球面效果

B. GLM / 在线对话（无文件系统）

你只输出一份完整的 HTML 字符串（包在 ```html 代码块里）
用户上传图片但没给 URL → 用 https://picsum.photos/seed/{描述-序号}/1080/1080 做占位
用户给了 URL → 直接 <img src="https://...">
不要尝试访问本地文件、不要建议命令行操作（除了「把这段保存成 index.html」）

判断：不能用 Read 看到本地图片 → 默认走 B。

文件分工

文件	角色	怎么用
`reference.html`	完整成品（虚白工作室 20 件作品 + 完整 about/cv/contact/filter 文案）	看：tile 文案语气、tag 词汇、desc 长度、about/cv 信息密度、整体氛围
`template.html`	空骨架（同样的 CSS/JS，2 件示例 + 全部 SWAP 标注）	在它的基础上改，输出最终 HTML

核心规则：所有改动基于 template.html；从 reference.html 学怎么写得像，但不要复制它的具体内容（虚白、京都驻地、青木茶寮 …… 这些都是别人的）。

工作步骤

1. 读两份 HTML

先读 template.html，定位 SWAP 标记（共 12 处）
再扫一眼 reference.html，体会作品文案、about/cv 的密度与节奏

不要改 JS、不要改 .work / .frame / .sphere / .viewport / .overlay 的 CSS、不要改任何 #sphere / #viewport / .splash 的逻辑。

2.（仅 A 模式）列作品 + 探尺寸

ls -la "{works_path}"
sips -g pixelWidth -g pixelHeight "{works_path}/{file}" 2>/dev/null

每件作品按文件名 + 视觉判断 (Read 看代表性几张) → (title, brand, year, tags, desc)。

3. 解析 bio_text 抽信息

工作室级（每个值都至少有默认 fallback）：

STUDIO_NAME_CN / STUDIO_NAME_EN（如「虚白 / Xubai」「明川 / Mingchuan」）
STUDIO_TYPE（如「设计工作室」「影像工作室」「建筑事务所」「独立设计师」）
TAGLINE（两行：长句 + 短结论，参考 虚白是一家以材料与场景为方法的中文设计工作室，致力于在品牌、视觉与空间之间寻找静止的位置）
LOCATION_PRIMARY / SECONDARY（如「中国 · 上海」「日本 · 京都」；只有一个城市就把第二行去掉）
TIMEZONE_PRIMARY / SECONDARY（如「北京时间 UTC+8」、第二个城市的 JST/EST 等）
YEAR_FOUNDED（如 2017）
CTA_TEXT（默认「我们来聊聊吧。」，可改成「Let's Talk」「联系合作」等）
TAB_LABELS（默认 作品 / 关于 / 履历，可改）
CAPABILITIES（4—5 项能力，写进 about overlay）
TEAM（3—5 名成员，写进 about overlay；个人作品集就只写自己一行）
CV_YEARS（按年份分组的项目时间线）
AWARDS（3—8 条展览/奖项）
CONTACT_EMAILS（new project / press / hiring 三类邮箱）
OFFICE_ADDRESSES（1—2 个办公室地址）
SOCIAL（IG / 微信 / Twitter / Behance 等）
FILTER_CATEGORIES / YEARS（用于 filter overlay 的复选框，自动从 WORKS 派生）

每件作品：

id（'01'—'NN' 字符串两位）
brand（客户名或「个人项目」「独立创作」）
title（4—12 字简洁标题）
year（YYYY 数字）
tags（数组，1—3 个英文一词，如 Identity / Editorial / Web / Installation / Poster / Sound / Motion / Print / Type / Packaging / Exhibition / Light）
img（封面图，1080×1080 正方形）
hero（详情页头图，1600×1000 横版）
g1, g2（详情页两张配图，800×600）
desc（一句话 ~20—50 字，会显示在二级详情页副标题）
long（详情页正文，2—3 段，每段 60—120 字）
spec（4 行键值对：[['Client','xxx'],['Year','xxx'],['Scope','xxx'],['Duration / Pages / Edition','xxx']]）

如果 bio_text 只有零散描述没有具体故事 → 编简短叙述呼应整体氛围，但不要瞎编客户名（写 'Personal' / '独立创作' / 工作室自发）。

4. WORKS 数量

至少 8 件（屏幕上才不空），少于 8 件就重复填充：让 workFor() 自动用 mod 循环就行
上限 30 件（再多没必要，球面会重复）
推荐 15—25 件

5. 替换 12 个 SWAP

SWAP	位置	内容
1	`<title>`	`{STUDIO_NAME_CN} — {STUDIO_TYPE} · Index {YEAR}`
2	`.brand-block`（顶栏左 logo + 文字）	自定义 SVG logo 或换图标 + 「声音 [关闭]」可改可保留
3	`.tagline`（顶栏中部两行字）	`{TAGLINE}` 长句 + `<br>` + 短结论
4	`.col-meta`（顶栏右上 location）	1—2 个 `<div class="row"><span class="loc-dot live"></span>{LOCATION}</div>`
5	`.col-times`（顶栏右上时区）	`北京时间 UTC+8` / `<div id="time1">` 留空让 JS 填 / 第二行 `<div id="time2">` 也留空
6	`.cta` 按钮	`{CTA_TEXT}`
7	`.bottombar .tabs`	三个 `<button class="tab">` 文字（默认 `作品 / 关于 / 履历`）
8	`#overlay-about`	完整 about 内容：eyebrow + 标题 + 正文 + 能力领域 + 团队成员
9	`#overlay-cv`	按年份分组的项目时间线 + 展览/奖项
10	`#overlay-contact`	邮箱 / 地址 / 社交 / 招聘 6 个 contact-cell
11	`#overlay-filter`	类别 / 年份 / 客户类型三组 checkbox（按你最终的 WORKS 派生）
12	`const WORKS = [...]`	完整 WORKS 数组

6. 风格变体（可选）

默认配色（深色「材料 / 工作室」氛围）：

--bg: #0d0c0b;
--ink: #f0e9df;
--ink-soft: #8a8278;
--accent: #c89a5a;

如果用户说：

亮色 / 杂志感 → bg #f4f1ec、ink #1a1714、accent #8a4a1a
极简白 → bg #ffffff、ink #0a0a0a、accent #666666
赛博紫 → bg #0a0612、ink #e8d8ff、accent #9b6dff
暖棕复古 → bg #1f1610、ink #e8d4b6、accent #c8895a

只改 :root 四个变量；不改 layout / JS。

7. 写出文件 / 输出 HTML

模式 A（Claude Code）：

~/Desktop/{slug}-vr-canvas/
├── index.html
└── images/
    ├── work-01.jpg ... work-NN.jpg
    └── (hero / g1 / g2 同名 -hero / -g1 / -g2)

slug 用工作室名拼音连字符（xubai / mingchuan / li-ming）。

模式 B（GLM）：直接在回答里输出一份完整的 HTML，包在 ```html 代码块里。所有 <img src> 用 picsum 占位或用户给的 URL。

回答末尾说一句：

把上面这段保存成 index.html 双击打开。要换图，把 WORKS 数组里的 img / hero / g1 / g2 换成你的图片地址。

8. 报告

模式 A：一句话报告路径 + 件数 + 风格。

已生成 ~/Desktop/xubai-vr-canvas/index.html — 18 件作品，深色「材料」配色。双击打开，鼠标在屏幕里走会有 VR 头部转动感，长按拖拽翻阅其他作品，点击查看详情。

模式 B：直接给 HTML 代码块 + 一行使用说明。

强制保留（绝对不能改）

全部 JS（球面投影 / 拖拽惯性 / 滚轮缩放 / hash 路由 / splash / time tick / mouse tilt）
.work / .frame / .cell-head / .cell-foot / .num / .brand / .proj 的 CSS
.viewport / .sphere 的 CSS 和 DOM 结构
SPHERE_R = 1700 / STEP_DEG = 11 / ROW_HALF = 6（这些是球面投影的核心参数；要更强 VR 感才改 R）
.overlay / .overlay-close / .info-pane / .info-section 的结构（only 改文字，不改 class）
mix-blend-mode: difference 在 topbar 上（这是设计语言核心）

易错速查

图片：必须 1080×1080 正方形作为 img（球面 cell 是正方形）；详情页 hero 用 1600×1000 横版
WORKS 数量太少：至少 8 件；不够就在 bio 里编几个「独立创作 / 实验项目」
不要给所有作品写超长 long（300 字+）— 留白节奏比信息密度重要
不要改 font-family: "Noto Serif SC" 之类的中文衬线字体（这是工作室质感的来源）
about / cv / contact 三个 overlay 都必须有：用户即使没给信息，也要根据 bio 编出合理内容；不要留空 overlay
filter overlay 的 checkbox 是装饰性的（没接 JS），但要根据实际 WORKS 派生类别和年份
个人作品集（不是工作室）：team 写一个人就行；office addresses 改成「自由独立 · 工作地点城市」