feat: 初始化 Figma 模板库 56 套展示站

- 56 套模板元数据(35 Figma 原生 + 21 非 Figma)
- 静态展示站 (HTML/CSS/JS 无框架):格式筛选、lightbox、搜索
- 35 个 .fig 已真上传 Figma Drafts 云端
- iframe 实时投射(登录态可看私有 Drafts)
- 部署:nginx:alpine + basic-auth (kang)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kang
2026-04-22 15:31:45 +08:00
commit ee719d07cc
289 changed files with 4016 additions and 0 deletions

91
.memory/status.md Normal file
View File

@@ -0,0 +1,91 @@
# Figma 模板库 - 状态
> 2026-04-22 立项,从桌面搬迁 11GB "Figma模板网页官网首页PC电脑Web端UI界面Sketch Xd设计素材200套" 整理并展示
## 核心事实
- **"200 套" 名不副实**:实际 **56 个源包** + 202 张 A 预览索引缩略图
- 格式分布51×zip + 3×7z + 2×rar展开后
- **含 `.fig`**35 套Figma 原生)
-`.sketch`8 套
-`.xd`7 套
-`.psd`2 套
- 混合无 fig4 套
## 目录结构
```
~/Projects/research/20260422-figma模板库/
├── source/ 11G · 原始压缩包 + A 预览/ 202 张索引图
├── extracted/ 全 56 套已解压nested zip 也全递归解压了W27/W39/W20 等)
├── manifest.json 56 条元数据name/格式/文件列表/大小)
├── scripts/
│ └── import-to-figma.sh slim/full 模式批量 open -a Figma
├── web/ 展示站
│ ├── index.html
│ ├── styles.css
│ ├── app.js
│ ├── data.json 56 条含 cover/gallery/figma_key 字段key 暂空)
│ ├── thumbs/ 56 张 cover900px/jpg826.1M
│ └── previews/ 全部 galleries1600px/jpg8252M
└── .memory/
```
## 已写入 Figma Draftsslim 模式 43 个)
- W1 测试 1 个(手动 open+ 42 个 slim 批量
- **W37 Daily UI**30 天的 kit 只入了第 1 天("Day 03 - Videos Website Landing"),其他 29 天本地 `extracted/W37/` 保留
- W5 Wiloa 全 4 变体Hotel/Plant/Restaurant/Travel
- W56 Orabel 全 6 页Home/About/Portfolio/Blog/Contact/Open Menu
- 其他 32 个 template 各 1 个 fig
## 非 Figma 原生的 21 套(已搁置)
只 SketchW11, W12, W18, W20, W30, W446
只 XDW8, W19, W22, W23, W39, W496
只 PSDW17含 68 psd + 2 xd, W4211 psd
混合无 figW4, W9, W15, W21, W27, W36, W507
后续如需:
- Sketch → Figma 桌面 File→Import 可批量(多选)
- XD → 第三方转换器convertxd 之类)或搁置
- PSD → 非 Figma 生态
## 展示站
- 端口 **4010**(端口注册中心分的 4010-4019 块)
- 启动:`cd web && python3 -m http.server 4010`
- 功能:卡片网格 · 格式筛选fig/sketch/xd/psd/imported· 名称搜索 · lightbox modal · 本地源包路径复制 · Figma Drafts 跳转
- 暗色调 / CSS variables / 无框架 / 静态
## 活·iframe 投射 ✅ 已完成
**重大踩坑**`open -a Figma file.fig` 只在桌面版本地打开Untitled tab**不上传云端**。Drafts 云端 API 看不到。
**真·上传路径**Figma 网页版 Drafts 页 → "+" → Import → "Import from computer"(接受 .fig。Playwright `browser_file_upload` 可一次喂 42 个Figma 串行处理 ~50s/个 → 约 60 分钟全部上云。
**fileKey 抓取(绕了好几圈)**
1. ❌ Figma REST API无 "list drafts" 接口
2. ❌ Figma Desktop `settings.json`:不实时更新
3. ❌ AppleScript 读 Figma 桌面窗口:被系统拒
4. ❌ Figma Plugin API要已知 fileKey 才能进
5. ❌ Chromium CookiemacOS Keychain 加密
6.**Figma 内部 API**:登录后调 `/api/folders/{drafts_folder_id}/paginated_files?...` 拿全 listdrafts_folder_id 从 `/api/user/state` 拿不到,但触发 Drafts UI 后从 network 抓到 `194902307`
7. 模糊匹配名称回填 → `scripts/match-and-update.py`35/35 score 1.0
**最终架构**
- 静态卡片缩略图(本地 56 张,离线可看)
- 点开 modal → `<iframe src="https://embed.figma.com/design/{key}/?embed-host=kang&footer=false">` 实时渲染你 Figma Drafts 里的真实文件
- "在 Figma 打开 →" 按钮跳转编辑模式
- 35/35 fig 模板全部支持
iframe 嵌入只在你登录 Figma 的浏览器里能看drafts 私有),符合个人用途。
## 部署(未做)
若要上 VPS`styles.kang-kang.com` 那样):
- Coolify dockerfile nginx:alpine 模式
- DNS`*.kang-kang.com` 泛解析已指 76.13.31.179
- 建议域名:`figma-templates.kang-kang.com``figma.kang-kang.com`
- 本地静态文件体积web/ 合计 ~60MB可接受
- 加 basic-auth类似 styles 站)