portfolio-detail

name	portfolio-detail
description	Generate a single-file Chinese atelier-style portfolio website (horizontal-row list + hover-reveal thumb interaction, art lishu typography "Alimama DaoLiTi" via CDN, light/dark theme, hash-routed detail pages). Takes a natural-language description of the studio (name, director, discipline, works) and outputs ONE working .html file. Runs in BOTH Claude Code (writes to ~/Desktop) and GLM / online chat (outputs HTML inline). Trigger phrases include "做个中式工作室作品集", "做个隶书作品集", "lishu-portfolio-gen ...", "做个白屋风格的作品集", or when user drags this skill folder into chat asking for an atelier-style site.
visibility	public
mode	template
carrier	web-page
scenario	portfolio
pattern_source	reference.html
source_priority	skill-first
triggers	["做个中式工作室作品集","做个隶书作品集","做个白屋风格的作品集","横排作品集","刀隶体作品集"]
related_patterns	vr-canvas, digital-eguide
legacy_gen	true

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