vr-canvas

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