照片变网页相册

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

电子相册本地运行,隐私安全,视觉酷炫,自动整理相片。把本地照片文件夹整理成自包含网页相册(HTML)。当用户想把一堆散乱的照片生成一个可按拍摄日期浏览、带缩略图网格、灯箱大图、搜索、幻灯片的本地相册时使用。触发词:电子相册、照片整理成网页相册、本地相册、整理照片、photo album、organize photos into gallery。支持按文件名真实日期精确归类,或按连拍顺序均分到指定的事件窗口;原图不动,只额外生成缩略图与预览图。

一句话选型结论

按资料字段整理

照片变网页相册是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_5a4d0694/zhaopianbianwangye
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_5a4d0694仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791722249
正文体量7.0 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
照片变网页相册当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

7.0 KB
模型实际读到的说明书原文,来自技能仓库

照片整理成网页相册(photo-album-builder)

Overview

把任意本地照片文件夹(相机直出 JPG/PNG 等)整理成一个自包含、可离线浏览的网页相册:
- 原图保持原位不改动,只额外生成 720px 网格缩略图与 1600px 灯箱预览图;
- 按拍摄日期分组(侧边栏导航),支持瀑布流懒加载、灯箱大图(←/→ 翻页、空格幻灯片、Esc 关闭)、文件名搜索、回到顶部;
- 双击 index.html 即可打开,整文件夹拷走也能在别的电脑上看(无需服务器、无外部 CDN)。

核心脚本 scripts/build_album.py 会从本 skill 的 assets/ 自动复制前端模板,因此调用者无需手动准备网页文件。

何时使用

  • 用户说「把这些照片整理成电子相册 / 网页相册 / 本地相册」;
  • 用户有一个堆满照片的文件夹,希望「按时间浏览」「查阅方便、视觉效果强」;
  • 任何「把照片变成可滑动观看的画廊」类需求。

不适用:需要上传到云端、需要多人协作编辑、或需要 AI 自动识别人脸/场景打标签的复杂图库系统(本 skill 只做本地静态相册)。

工作流程

1. 澄清关键决策(务必先问,避免返工)

开工前用 AskUserQuestion 确认三点,给出推荐项:
1. 整理方式:按拍摄日期分组(推荐)/ 单一网格不分组 / 用户指定规则;
2. 生成位置:照片文件夹内建 相册\(推荐,自包含)/ 当前工作区(引用绝对路径);
3. 原图处理:原图保持原位只生成缩略图(推荐,安全)/ 按日期移动原文件(慢且有风险)。

> 分组依据必须先和用户对齐。相机时钟常常是错误的(见下方「关键坑」),不要盲信 EXIF 年份。

2. 准备 Python 环境与依赖

PY="<managed python 3.x>"
"$PY" -m venv <venv>
"$PY" -m pip install Pillow

(runtime 隔离规则:venv 建在隔离目录,Pillow 装进 venv,不要用全局 pip。)

3. 扫描与日期解析

build_album.py 会扫描源目录全部图片,对每张照片确定日期:
- 优先从文件名恢复真实日期:微信图片_YYYYMMDDHHMMSS、IMG_YYYYMMDD_HHMMSS、mmexport/wx_camera_<13位毫秒时间戳>;
- 都解析不到的(主要是相机 DSC 连拍、按人名命名的照片、IMG_ 短序号)视为无日期,后续处理。

4. 生成缩略图 / 预览图(多进程)

  • 720px 缩略图 → 相册/thumbnails/;1600px 预览 → 相册/preview/;
  • 自动按 EXIF Orientation 转正;已存在的图自动跳过(幂等可重跑);
  • 用 ProcessPoolExecutor + as_completed 并行加速(注意不是 imap)。

5. 分组与导出数据

  • 有真实日期的照片:归入其真实日(超出事件窗口则夹紧到边界);
  • 无日期的照片:按连拍序号(DSC 编号 / 文件顺序)排序后均分到事件窗口的若干天,保留时间先后;
  • 导出 相册/data/photos.js(window.PHOTOS = {...},含分组、封面、每张的 thumb/preview/src 路径与尺寸)。

事件窗口由 --event-start YYYY-MM-DD 与 --event-days N 控制(默认 2026-07-12 / 7)。例如用户确认全部照片拍在 7/12–7/18,就传 --event-start 2026-07-12 --event-days 7。

6. 复制前端模板

build_album.py 自动把本 skill assets/ 下的 index.html、style.css、app.js 复制到相册目录,无需手工准备。

7. 验证

python scripts/verify_album.py <相册目录> [<源照片目录>]

确认:缩略图/预览图数量与 photos.js 展开数一致、无重复收录、文件均存在。(若提供源目录还会对比原图数。)

8. 预览交付

python -m http.server 8765 --directory <相册目录>
# 浏览器打开 http://localhost:8765/

或直接告知用户双击 相册/index.html。

关键坑(实战教训,务必规避)

  1. 相机时钟不可信:EXIF DateTimeOriginal 可能是旧年份(如 2022),绝不能直接按 EXIF 年份分组。分组前先和用户确认真实拍摄窗口,再决定均分策略。
  2. 分组逻辑重复 bug:在 build_groups 中,undated 列表是 meta 中对象的引用,若先修改其 date 再遍历 meta 追加,会导致同一张照片被收录两次(总数翻倍)。修复方式:把「有真实日期」与「无日期」拆成 dated / undated 两个互斥列表,分别处理。
  3. 文件名日期格式要全:iPhone 导出是 IMG_YYYYMMDD_HHMMSS(含真实日期),不要只认「微信图片_」前缀,否则这批照片会被误判无日期而归错天。
  4. 排序优先级:均分来的无日期照片会被填占位时间 00:00:00,若直接按时间字符串排序会排到真实时间戳照片前面。用 real_dt 标志让真实时间戳照片排前、占位照片排后。
  5. 免读原图重排:只改分组策略想快速重跑时,用 --skip-resize,脚本从已生成的预览图读尺寸(宽高比与原图一致),免去重读几十 GB 原图,几秒完成。

命令参考

# 常规构建(输出到 <源目录>/相册)
python scripts/build_album.py <源照片目录>

# 指定输出目录
python scripts/build_album.py <源照片目录> --out /别处/相册

# 仅重排分组(已生成过缩略图,免读原图,秒级)
python scripts/build_album.py <源照片目录> --skip-resize

# 指定真实事件窗口(无日期照片按连拍均分到该区间)
python scripts/build_album.py <源照片目录> --event-start 2026-07-12 --event-days 7

# 强制重新生成所有缩放图
python scripts/build_album.py <源照片目录> --force

# 调试:只处理前 N 张
python scripts/build_album.py <源照片目录> --limit 20

资源

  • scripts/build_album.py — 主构建脚本(扫描、生成缩放图、分组、导出数据、复制前端)。
  • scripts/verify_album.py — 完整性验证(数量一致、无重复、文件存在)。
  • assets/index.html、assets/style.css、assets/app.js — 网页相册前端模板,由 build_album.py 自动复制到输出目录。

常见问题

5 问
答案由本站依据条目字段整理
照片变网页相册怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_5a4d0694/zhaopianbianwangye。安装方式为未标注。装完刷新技能列表或重开客户端。

照片变网页相册支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

照片变网页相册权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

照片变网页相册收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

照片变网页相册用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。