name: industrial-archive
description: Generate a single-file industrial-archive product landing page (Nordic museum aesthetic, hash-routed detail pages). Takes a natural-language description of one or more "exhibit-style" products (objects, tools, hardware, watches, kitchenware, lighting, audio, instruments, anything with a designed/forged/restrained quality); outputs ONE working .html file. Visitors see a black-framed cover that flips between exhibits, sidebar index, side meta column (material/origin/year/dimension), and click any exhibit → full detail page (giant italic title, spec table, hero image, lead + 3 prose paragraphs, gallery, prev/next). Runs in BOTH Claude Code (writes to ~/Desktop) and GLM / online chat (outputs HTML inline). Trigger: "做个工业风产品落地页", "做克制之物风格的展品页", "industrial-archive-gen ...", or when user drags this skill folder into chat asking for a product page in the Nordic-industrial archive style.
visibility: public
mode: template
carrier: web-page
scenario: brand-landing
pattern_source: reference.html
source_priority: skill-first
triggers:
- "做个工业风产品落地页"
- "做克制之物风格的展品页"
- "北欧博物馆藏品风"
- "industrial archive"
- "策展感产品页"
related_patterns: portfolio-detail
legacy_gen: true
industrial-archive — 工业风展品 / 产品落地页生成器
把"一段自然语言描述"变成一份单文件 HTML，效果是北欧工业典藏 / 博物馆策展感的产品落地页：
- 黑色画框中的产品大图，左右点击翻转切换
- 左侧带索引指示条的展品目录
- 右侧 4 个 meta 块（材料 / 产地 / 年代 / 尺寸）
- 顶栏跑马灯
- 点击画框或底部 CTA → 进入展品详情页（巨大斜体标题、规格表、主图、开篇大字 + 3 段散文、6 图画廊、上一件/下一件）
- 进入页有引言 splash
何时触发
用户说"做个工业风的产品落地页 / 克制之物风格的展品 / industrial-archive-gen ..."，并提供：
- 产品描述（必需）：一段散文，描述 1—N 件展品的名字、年代、产地、材料、来历
- 图片 URL（可选）：每件展品至少 1 张主图、最好 3—6 张细节图。没有也能跑（用 picsum 占位灰图）
- 风格（可选）：默认是冷调钢蓝灰，可换成 styles.md 里的预设
如果用户完全没给展品名/故事 → 必须问一次至少有哪几件展品要展示，以及大致是什么品类（容器 / 灯具 / 椅具 / 仪器 / 工具 / ...）。
如果用户只给了名字没给故事 → 自己编：每件展品都生成 1 句 lead + 3 段 prose + 4-6 行 spec。语气参考 reference.html：博物馆 wall-text 感 — 克制、具体、缓慢，不要 marketing 语言。
两种运行模式
模式 A · Claude Code / 本地（有文件系统）
- 输出：
~/Desktop/{slug}-archive.html（单文件，所有图走 URL）
- 如果用户给了本地图，建议告知用户改用 URL 或自己拷到同目录后写相对路径
模式 B · GLM / 在线对话（无文件系统）
- 直接给一份完整 HTML 字符串，包在
```html 代码块里
- 用户没给图 URL → 全用
https://picsum.photos/seed/{slug}-{nn}/{w}/{h}?grayscale 占位
- 不要尝试访问本地文件
判断：如果你无法 Read 看到本地图片 → 默认走 B。
文件分工
| 文件 | 角色 | 怎么用 |
|---|
reference.html | 完整成品参考 — "克制之物" 4 件北欧工业藏品 | 看：lead 怎么写、prose 语气、spec 用词、tagline 格式、maker 命名 |
template.html | 空骨架 — 同样的 CSS/JS/路由，2 件示例 + 17 个 SWAP 标记 | 在它的基础上改，输出最终 HTML |
styles.md | 风格预设库 | 用户指定风格时查这份 |
README.md | 用户视角的使用说明 | 模型不用看 |
SKILL.md | 给模型看的工作流（本文件） | 必读 |
核心规则：所有改动基于 template.html；从 reference.html 学怎么写（语气、字数、词汇），但不要复制具体内容。
关键差别 — reference 用 SVG，template 用 <img>
reference.html 的 4 件展品是手绘 SVG（铸铁壶 / 轴承灯 / 桦木椅 / 测距仪），那是定制内容template.html 已经把 SVG 系统替换成 <img src="cover URL">，用户给 URL 就用 URL，没给就用 picsum- 你不需要写 SVG。如果用户特别要求"画出来"，再考虑写一个 SVG 函数塞进
coverHTML()
工作步骤
1. 读两份 HTML
- 先读
reference.html 体会"完整后长什么样"，特别是 exhibits-data JSON 的字段密度和 prose 语气（克制、具体、有时代背景）
- 再读
template.html 找 17 个 SWAP 标记（搜 SWAP-）
不要改 JS / 不要改 CSS / 不要改详情页路由系统。
SWAP 都在 HTML 文本和 JSON 数据里。
2. 解析用户输入抽信息
全站层级（17 个 SWAP 中的 1-15、17）
- COLLECTION_TITLE / COLLECTION_SUB — 系列大标题 + 副标。如"克制之物 / 北欧工业典藏 1948—1988"。SWAP-1
- INTRO_VOLUME_TAG — 进入页顶部的 tag，如"北欧工业典藏 · Vol.01"。SWAP-2
- INTRO_TITLE_HTML — splash 页大标题，2-4 字 + 中间一个
<span class="accent">·</span> 分隔符。如 克制<span class="accent">·</span>之物。SWAP-3
- INTRO_TITLE_EN — splash 页英文副标，全大写 + em-dash，如
Restrained Objects — A Nordic Industrial Archive 1948 — 1988。SWAP-4
- INTRO_QUOTE — 一句策展引言，60—100 字，散文感。SWAP-5
- INTRO_ATTRIBUTION — 引言出处，如
— 策展前言 / Curatorial Note。SWAP-6
- HEAD_GLYPH — 左上 logo 字符。1-2 个 serif 字符，建议带特殊感的字母如
Æ Ø 沉 匠 ʘ。SWAP-7
- HEAD_GLYPH_SUB — logo 下一行说明，如
克制之物 / 编号 N°01—04。SWAP-8
- HEAD_CENTER_CN / HEAD_CENTER_EN — 顶部中央两行小字。SWAP-9, 10
- HEAD_RIGHT_TOP / HEAD_RIGHT_BOTTOM — 顶右两行：日期/城市 + 坐标/编号。SWAP-11, 12
- CURATOR_NAME / CURATOR_EMAIL — 策展方名称 + 邮箱。SWAP-13, 14
- CRUMB_ROOT / CRUMB_VOLUME — 详情页面包屑两个固定项。SWAP-15
- TICKER_TAIL — 跑马灯尾巴的总标语。SWAP-17
每件展品的字段（SWAP-16，最关键）
{
"slug": "iron-kettle",
"num": "N°01",
"title": "铸铁壶",
"en": "IRON KETTLE",
"year": "1958",
"place": "丹麦 · 哥本哈根",
"maker": "Carl Hansen Værksted / 卡尔·汉森工坊",
"material": "灰口铸铁 · 山毛榉木柄<br/>黑釉烧结涂层",
"origin": "丹麦 · 哥本哈根<br/>Carl Hansen Værksted",
"dim": "高 18 cm · 容 1.2 L<br/>底径 14 cm",
"tagline": "FORGED ESSENTIAL / 锻造的必需品",
"lead": "一只为<em>沉默与水的低温</em>而设计的容器——壶身的厚度，是为了让热停留得久一点，而不是更快地变热。",
"spec": [
["编号", "1958 · K-04"],
["材料", "灰口铸铁 + 山毛榉"],
["工艺", "砂模铸造 / 黑釉烧结"],
["重量", "1.86 kg"],
["产量", "限量 240 件 · 现存 31"]
],
"prose": [
"段一 80—160 字。来源/语境/年份/工坊背景。",
"段二 80—160 字。工艺/手工细节/关键决定。",
"段三 80—160 字。今天的状态/影响/仍在用的事实。"
],
"cover": "https://example.com/kettle-cover.jpg 或 picsum URL",
"gallery": [
{"src": "...", "layout": "f-3", "caption": "壶身正立面"},
{"src": "...", "layout": "f-2", "caption": "山毛榉木柄"},
{"src": "...", "layout": "f-2", "caption": "壶嘴细部"},
{"src": "...", "layout": "f-2", "caption": "底部砂模印"},
{"src": "...", "layout": "f-4", "caption": "工坊蓝图"},
{"src": "...", "layout": "f-6", "caption": "陈列剖面"}
]
}
3. 替换 SWAP
把 template.html 里 17 个 {{...}} 占位符全部换成你抽出来的内容。
注意：{{INTRO_TITLE_HTML}} 是 HTML 不是纯文本，里面要带 <span class="accent">·</span>。
4. 写 exhibits-data JSON（最关键的一步）
把 <script id="exhibits-data" type="application/json"> 里那 2 个示例对象整个替换成 N 个真展品对象。
件数建议
- 最少 1 件（单品落地页也行 — JS 已处理 N=1 时不自动轮播）
- 最佳 3—6 件
- 超过 8 件展品索引会拥挤，建议拆分
标题字数建议
title 中文 2-4 字最好看（"铸铁壶"、"轴承灯"、"测距仪"）。如果产品名长，用副标，如 "title": "测距仪"、tagline: "MARITIME RANGEFINDER / 海事测距仪"en 全大写英文，2 词为佳
tagline 格式
固定：英文短语 + 空格/空格 + 中文短语，例：
FORGED ESSENTIAL / 锻造的必需品PIVOT & LIGHT / 旋转与光FOUR LEGS, NO MORE / 四只脚，仅此而已MEASURED HORIZON / 被丈量的地平线
lead 写法
30—80 字。必须在某一两个关键词上加 <em>...</em>——CSS 会给这些字下面加一根钢蓝色细线。
反例：这是一只很好的水壶。 ← 没有 em，没有具体细节
正例：一只为<em>沉默与水的低温</em>而设计的容器——壶身的厚度，是为了让热停留得久一点。
prose 写法
3 段，每段 80—160 字。语气：博物馆 wall-text — 克制、具体、有时代背景，不要 marketing 语言。
- 段一：来源 / 语境（产地、年份、工坊、那个时代）
- 段二：工艺 / 决定（关键设计、工艺细节、为什么要这么做）
- 段三：呈现 / 影响（今天的现存数量、是否仍在用、对后来的影响）
spec 写法
4-6 行，每行一个键值对。
- 第一行通常是
["编号", "{年份} · {型号}"]
- 最后一行通常是产量/现存：
["产量", "限量 240 件 · 现存 31"]（JS 会把最后一行的值显示在详情页的"现存 / EXTANT"块）
gallery layout 必须四选一
f-3 — 横图，16:10，占 1/2 宽（占 6 列中的 3 列）f-2 — 竖图，4:5，占 1/3 宽f-4 — 横图，16:9，占 2/3 宽f-6 — 全宽，21:8
节奏建议：1 张 f-3 + 3 张 f-2 + 1 张 f-4 + 1 张 f-6 = 6 张，刚好两行半。
图片 URL
模式 A 用户给 URL → 用 URL；
模式 B 没给 → 用 picsum：https://picsum.photos/seed/{slug}-{编号}/{w}/{h}?grayscale
- cover 推荐
1600/1000
- f-3 推荐
900/600
- f-2 推荐
600/750
- f-4 推荐
1200/675
- f-6 推荐
1600/610
- 加
?grayscale 让占位图也保持工业灰调
5. 风格变体（可选）
如果用户指定风格，照 styles.md 改 :root 那 8 个 CSS 变量。默认是冷调钢蓝灰，最贴合"克制之物"原版。
6. 报告
模式 A：一句话报告。
已生成 ~/Desktop/{slug}-archive.html — N 件展品，默认冷调钢蓝。双击打开，点击画框或底部 CTA 进入详情页。要换图把 cover/gallery 里的 picsum URL 换成你的图片地址。
模式 B：直接给完整 HTML 代码块 + 一行说明。
把上面这段保存成 index.html 双击打开。点画框看详情，键盘 ← → 切换展品。要换图把所有 picsum URL 换成你的图片地址。
强制保留（不能改）
- 全部 JS：translate / flip 翻转、
coverHTML() 函数、renderSidebar()、applyMeta()、renderDetail()、键盘 / 自动轮播 / cursor
- 全部 CSS（除非走风格变体改
:root）
<script id="exhibits-data" type="application/json"> 节点必须保留<div id="proj-list" class="proj-list"> 节点必须保留（但不要手写 li，让 renderSidebar() 生成）<div id="cover-stage"> 内的 flipper 双面结构<main class="stage"> 9 宫格
JSON 易错速查
- 中文引号：prose / lead 里如果要打"引号"，必须用全角
"..." (U+201C / U+201D)，不能用 ASCII "（会破 JSON）
- 真换行：JSON 字符串里不要写真换行（直接按回车），也不要写
\n。要分段就用多个 prose 数组项；要换行就用 <br/>
<em> 标签：在 lead 里直接写 HTML 标签 <em>...</em>——会按 innerHTML 渲染，CSS 会给它加钢蓝下划线- slug 唯一：每件展品的 slug 必须唯一，且小写英文连字符（
iron-kettle 不是 IronKettle 也不是 iron_kettle）
- gallery layout 拼写：必须是
f-3 f-2 f-4 f-6 之一，写错就不显示
- picsum seed 唯一：每张图给一个唯一 seed，否则不同图位会变成同一张
- num 格式：
N°01 这个 N 加 ° 是必须的（°是 U+00B0），别打成 No.01 或 N01
- maker 必须有"/"：
"英文工坊名 / 中文工坊名"，JS 会按 / 切左半边显示在右下角
字数 / 件数边界
- title ≤ 4 字，超过用 tagline 容纳更长副题
- lead ≤ 80 字（一行半）
- prose 每段 80—160 字（150 是甜区）
- spec 4-6 行
- gallery 3-6 图（少于 3 太空，多于 6 排版乱）
- 总展品数 1—8 件（最佳 3—6）
- ticker 不用手填件数 — JS 会自动遍历 DATA 拼
风格触发词速查
用户说→你照哪个风格：
- 没说 / "克制" / "北欧" / "工业" → 默认冷调钢蓝（已是 template 默认）
- "暖" / "复古" / "棕调" / "皮革" → styles.md
warm-leather
- "暗" / "深色" / "夜色" → styles.md
night-iron
- "纸张" / "印刷" / "report" → styles.md
paper-press
- "纯色" / "海军蓝" → styles.md
navy-blueprint
