Portfolio Detail

portfolio-detail — 中式工作室 / 隶书作品集（带二级详情页）

一句话特征

横排文字行 + hover 浮现右侧大图 + 阿里妈妈刀隶体艺术大字 + 黑白纯色 + light/dark + hash 路由详情页 + 列表/画册双视图。

与其他作品集 skill 的差别

如果用户的项目是「书 / 字体 / 展览 / 静物 / 中草药 / 茶 / 陶 / 木 / 纸 / 香」这一类需要克制典雅气质的——用这一份。

何时触发

用户说：

• "做个中式 / 东方 / 古典风格的作品集"
• "做个隶书风格的网站 / 工作室主页"
• "做个白屋风格的作品集" / "做个像 Gurgel D'Alfonso 那样的横排列表网站"
• "lishu-portfolio-gen ..."

并提供：

• 工作室描述（必需）：名字、主理人、城市、学科、几件作品的标题与故事
• 作品图片（可选）：URL / 上传 / 路径。没有也能跑（用 picsum 占位）

如果用户完全没给作品标题 → 必须问一次至少有哪几件作品要展示。 如果用户只给了标题没给详情 → 自己写：每件作品都生成 1 句 lead + 3 段 prose + 6-8 行 specs + 3-6 张 picsum 图 + 几条 credits。语气与作品类型匹配（书 → 装帧 / 字 → 字体 / 物 → 静物 / 展 → 展览视觉）。

两种运行模式

模式 A · Claude Code / 本地（有文件系统）

• 用 Bash 列文件夹、sips 探每张图宽高
• 输出位置：~/Desktop/{slug}-portfolio.html（单文件，所有图片走 URL）
• 如果用户给了本地图片：拷到 ~/Desktop/{slug}-portfolio-images/ 并改 src 为相对路径

模式 B · GLM / 在线对话（无文件系统）

• 用户拖入 zip 解压后能看到 4 份文件
• 只输出一份完整 HTML 字符串，包在 ```html 代码块里
• 用户上传图片但没给 URL → 全用 https://picsum.photos/id/{id}/{w}/{h} 占位（用已知存在的 ID）
• 不要尝试访问本地文件、不要建议命令行操作

判断：如果你无法 Read 看到本地图片 → 默认走 B。

文件分工

核心规则：所有改动基于 template.html；从 reference.html 学怎么写（语气、字数、tag 用词），但不要复制具体内容。

工作步骤

1. 读两份 HTML

• 先读 reference.html 体会"完整后长什么样"（特别是 works-data JSON 的字段密度和 prose 语气）
• 再读 template.html 找 20 个 SWAP 位置

不要改 JS / 不要改 CSS / 不要改详情页路由系统 / 不要改字体引入。 SWAP 都在 HTML 文本和 JSON 数据里。

2. 解析用户输入抽信息

抽取：

• ATELIER_NAME_ZH — 工作室中文名（2-4 字最佳，例如「白屋」「素园」「墨记」「青庐」「拙轩」）
• PINYIN — 拼音（5-6 个英文字母，全大写：BAIWU / SUYUAN / MOJI）
• CHAR — Logo 用的单字（通常是工作室名首字：白 / 素 / 墨 / 青 / 拙）
• CITY — 城市
• DIRECTOR_ZH / DIRECTOR_EN — 主理人姓名 + 拼音
• DISCIPLINE — 3 个学科词（"装帧 · 字体 · 静物"）
• TAGLINE — 一句话定位（20-40 字，楷体气质）
• YEAR_FOUNDED — 成立年份（可用干支：乙未冬 / 甲辰春）

每件作品抽：

• slug — URL ID，小写英文连字符（kong-shan-ji / wu-ming-shu）
• title_zh — 中文标题（2-5 字最佳，越精炼越有调性）
• title_en — 英文副题（书名号风格：An Anthology of Empty Mountains）
• year — 年份或干支年（甲辰 / 2024 / 2025 / 乙巳 / 2025）
• tag — 顶部分类，方括号包，如 [ 诗集 · 装帧设计 ] / [ 字体设计 · 中草药图谱 ]
• cover — 详情页大图 URL
• list 行 location — 城市，年份 · 工艺/规格（hover 时浮现）
• meta — 4 个键值对（详情页 4 列摘要）
• lead — 30-70 字开篇大字，可用 <em>关键词</em> 强调一处
• prose — 3-4 段散文，每段 80-150 字
• specs — 6-10 行规格表（开本/纸张/装订/字体/印量/印刷/工艺/定价等）
• gallery — 3-6 张图，layout 三选一：g-wide / g-half / g-third
• credits — 4-7 对职位/名字

如果用户只给一句话/没给故事 → 自己编：根据作品标题和类型，写出符合作品调性的 lead 和 prose。语气参考 reference.html — 不要 marketing 语言，要有「博物馆 wall-text + 工作室札记」的感觉（克制、具体、缓慢、有手工痕迹）。

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

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

得到每张图的 (filename, w, h, aspect)。优先选竖图作 list 缩略图（4:3 容器，竖图更上相）。

4. 替换 20 个 SWAP

5. 写 works-data JSON（最关键的一步）

每件作品都要在 JSON 数组里有一条，slug 必须和 list/gallery 卡片 href 里的 #work/SLUG 完全一致。

JSON 字段：

{
  "slug": "kong-shan-ji",
  "title_zh": "空山集",
  "title_en": "An Anthology of Empty Mountains",
  "year": "甲辰 / 2024",
  "tag": "[ 诗集 · 装帧设计 ]",
  "cover": "https://picsum.photos/id/143/1800/1100",
  "meta": [
    {"label": "Type / 类型", "value": "诗集装帧"},
    {"label": "Year / 年份", "value": "2024"},
    {"label": "Edition / 印量", "value": "首印 320 本"},
    {"label": "Format / 开本", "value": "130 × 195 毫米"}
  ],
  "lead": "三十六首关于山的诗。我们想做一本——读者翻开后，先听见<em>风声</em>，再读见字的书。",
  "prose": [
    "段落一：诗稿来源 / 设计语境。80—150 字。",
    "段落二：制作中的关键决定 — 字体、纸张、装订选择。",
    "段落三：最后呈现 / 留给读者的感受。"
  ],
  "specs": [
    ["开本 / Format", "130 × 195 毫米"],
    ["页数 / Pages", "144 页"],
    ["纸张 / Paper", "本色棉纸 90gsm"],
    ["装订 / Binding", "线装四目"],
    ["字体 / Typeface", "老宋（标题）· 楷体（正文）"],
    ["印刷 / Printing", "单色凸印"],
    ["印量 / Edition", "首印 320 本"],
    ["定价 / Price", "¥ 388"]
  ],
  "gallery": [
    {"src": "...", "layout": "g-wide", "caption": "封面"},
    {"src": "...", "layout": "g-half"},
    {"src": "...", "layout": "g-half"},
    {"src": "...", "layout": "g-third"},
    {"src": "...", "layout": "g-third"},
    {"src": "...", "layout": "g-third"}
  ],
  "credits": [
    ["设计 / Design", "周墨白"],
    ["手工装订 / Binding", "陈漱石（杭州·订书坊）"]
  ]
}

JSON 易错 ⚠️：

• 中文 prose 里要用引号 → 必须用全角的 「...」 或 "..."（U+201C / U+201D），不能用 ASCII "（会破 JSON）
• 不要在 JSON 字符串里写真换行；要换段落就在 prose 数组里多写一项
• <em>词</em> 在 lead 里直接写 HTML 标签——渲染时按 innerHTML 出
• gallery layout 必须三选一：g-wide（占满）/ g-half（占一半）/ g-third（占 1/3）

6. 图片源选择

• picsum 占位：用 id/X 形式而非 seed/X（更稳定）。已知好用的 ID：0, 20, 40, 51, 64, 76, 88, 91, 96, 119, 121, 130, 143, 145, 158, 164, 165, 175, 177, 180, 187, 195, 200
• 同一作品的 cover / gallery 用相邻的几个 ID，能制造一致的色调
• 不要用 ?grayscale 参数（用户希望图片是彩色的）

7. 中文工作室命名灵感（如果用户没给）

若用户让你"自己起一个" → 选 2 字 + 古朴：

• 物名类：白屋 / 素园 / 墨记 / 青庐 / 拙轩 / 听雨 / 一勺 / 半亩
• 字行类：素白 / 子衿 / 砚池 / 半山 / 寻常 / 浮云
• 避免 "工作室 / 设计 / Studio" 这种功能词，让名字本身就是诗

8. 视频支持

如果作品 cover 是 .mp4 / .webm / .mov，详情页会自动用 <video autoplay muted loop> 替代 <img>。模型只要在 cover URL 里给视频路径就行。

9. 报告

模式 A：一句话报告。

已生成 ~/Desktop/baiwu-portfolio.html — 6 件作品，hover 行查看缩略图，点击进入详情页。Light/Dark 在左下，列表/画册在顶部居中。

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

把上面这段保存成 index.html 双击打开。鼠标移到任意作品名上看右侧浮现的缩略图，点击跳详情页。要换图把 picsum URL 换成你的图片地址。

强制保留（不能改）

• 字体引入：@font-face 加载阿里妈妈刀隶体的 woff2 url（不要换字体源）
• CSS 变量系统：light/dark 双主题
• 全部 JS：theme toggle、view mode toggle、hover-row 交互、rotating credit、详情页 hash 路由 applyRoute()、renderDetail()
• <script id="works-data"> 节点必须保留
• <main id="detail-root"> 必须保留（详情页挂载点）
• body[data-view="home/detail"] 和 body[data-mode="list/gallery"] 状态系统
• #logo / #main-menu / .theme-toggle / #project-view / #svp-credit 五个固定定位元素

易错速查

• slug 不匹配：list 项 #work/kong-shan-ji ↔ gallery 项 #work/kong-shan-ji ↔ JSON "slug": "kong-shan-ji" —— 三处必须完全一致
• JSON 引号：中文内容里的引号一定用全角「」或 "..."，不是 ASCII "
• gallery 太多：每件作品最多 6 张图，超了排版会乱
• prose 过长：每段 80-150 字，超过 200 字阅读体验下降
• list / gallery 不同步：必须包含同样的作品集（一一对应）
• picsum seed：用 id/X 不要用 seed/X，避免随机 ID 命中已删除的图
• 作品 < 3 件：可以，最少 2 件就能跑
• 作品 > 8 件：建议分两批，太多 list 行会让页面变长
• 首字下沉：详情页的 .detail__prose p:first-of-type::first-letter 用刀隶体 — 第一段必须是中文开头（不要以 <em> 或英文开头）
• 删了 picsum 的彩色：图片应保持彩色，不要在 CSS 加 filter: grayscale()