| 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. |
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 改成「自由独立 · 工作地点 城市」
