portfolio-detail — 中式工作室 / 隶书作品集（带二级详情页）
一句话特征
横排文字行 + hover 浮现右侧大图 + 阿里妈妈刀隶体艺术大字 + 黑白纯色 + light/dark + hash 路由详情页 + 列表/画册双视图。
与其他作品集 skill 的差别
| skill | 核心模式 | 适合谁 |
|---|---|---|
portfolio-gen | 无限拖拽画布 + tile 平铺 | 摄影师 / 平面设计师挂样品 |
portfolio-museum-gen | 英雄轮播 + 大卡 + 瀑布流 + 详情页（影像策展感） | 视频/影像/装置艺术家 |
industrial-archive-gen | 黑框翻页封面 + 侧栏档案 + 北欧工业 | 实物产品 / 器物 / 硬件 |
lishu-portfolio-gen | 横排文字行 + hover 显示右侧缩略图 + 隶书大字 + 中式克制 | 装帧 / 字体 / 工艺 / 中式工作室 |
如果用户的项目是「书 / 字体 / 展览 / 静物 / 中草药 / 茶 / 陶 / 木 / 纸 / 香」这一类需要克制典雅气质的——用这一份。
何时触发
用户说：
- "做个中式 / 东方 / 古典风格的作品集"
- "做个隶书风格的网站 / 工作室主页"
- "做个白屋风格的作品集" / "做个像 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。
文件分工
| 文件 | 角色 | 怎么用 |
|---|---|---|
reference.html | 完整成品参考 — 白屋 BAIWU 6 件作品 | 看：list 项的措辞、prose 语气、specs 词汇、JSON 字段密度 |
template.html | 空骨架 — 同样的 CSS/JS/路由系统，2 件示例 + 20 个 SWAP 标记 | 在它的基础上改，输出最终 HTML |
README.md | 用户视角的使用说明 | 模型不用看 |
SKILL.md | 给模型看的工作流（本文件） | 必读 |
核心规则：所有改动基于 template.html；从 reference.html 学怎么写（语气、字数、tag 用词），但不要复制具体内容。
工作步骤
1. 读两份 HTML
- 先读
reference.html体会"完整后长什么样"（特别是works-dataJSON 的字段密度和 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
| SWAP | 位置 | 内容 |
|---|---|---|
| 1 | <title> | {ATELIER_NAME} {PINYIN} — {DIRECTOR}作品集 / Studio |
| 2 | meta description | 一句网站简介 |
| 3 | curtain 单字 | 工作室名首字（如「白」） |
| 4 | logo SVG 内单字 | 同 SWAP-3 |
| 5 | logo SVG 内拼音 | {PINYIN} 大写 |
| 6 | 主导航 li | 通常 3 项：作品 / 关于 / 联系 |
| 7 | brand-block 中文名 | {ATELIER_NAME} 拆字加空格（如 白 屋） |
| 8 | brand-block 英文 | {PINYIN} Studio · {CITY} |
| 9 | tagline | 楷体一句话定位，20-40 字，可用 <br> 换行 |
| 10 | list 项 N 件 | 每件 <a class="item" href="#work/{slug}"> 包含 num/project-name/en-name/location/photo-thumb |
| 11 | gallery 项 N 件 | 同样的 N 件作品，更紧凑的网格 — slug 必须和 list 一致 |
| 12 | 关于标题 | 关 于 {name}<span class="en">About</span> |
| 13 | 关于段落 | 1-3 段楷体（成立背景 / 主理人 / 设计观），每段 60-120 字 |
| 14 | 关于事实表 | 4-6 项 li (Founded/Location/Discipline/Director/Hours) |
| 15 | 联系标题 | 来 信<span class="en">Get in Touch</span> |
| 16 | 联系段落 | 1-2 段邀请来信 + 回信周期承诺 |
| 17 | 联系事实表 | 4-6 项 (E-mail/Phone/Address/Instagram/公众号) |
| 18 | rotating credit | Site by {WHO}（通常是工作室名） |
| 19 | footer 三块 | © / ICP / 社交链接 |
| 20 | works-data JSON | N 件作品的完整详情数据（关键！） |
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()