Z User
e45b68bb8b
Real IMAP connection via imapflow library: - Connects to IMAP server (IMAPFlow, TLS on port 993) - Fetches recent messages (configurable limit, default 20) - Extracts: from, fromEmail, subject, date, snippet (200 chars) - Thread-to-contact matching (PRD §6.1): 1. Match sender email against persons table 2. If no person match, extract domain and match against company.website 3. Returns matchedCompany + matchedPerson for each email - Audit-logged (action: crm.mailsync:imap) - Zod validated (host, port, user, password, folder, limit) - 502 on IMAP connection failure with detail - 400 on validation failure Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
195 lines
11 KiB
Markdown
Executable File
195 lines
11 KiB
Markdown
Executable File
---
|
||
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 模式）列作品 + 探尺寸
|
||
```bash
|
||
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. 风格变体（可选）
|
||
|
||
默认配色（深色「材料 / 工作室」氛围）：
|
||
```css
|
||
--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 改成「自由独立 · 工作地点 城市」
|