docs: update README for Live Photo support
This commit is contained in:
郭浩 committed
1 parent
65720aa63e
commit
6069b30130
3 files changed
+57
-19
No files matched your search
@@ -17,6 +17,7 @@ outputs/
|
||||
|
||||
# Node + macOS
|
||||
node_modules/
|
||||
py-libs/
|
||||
.DS_Store
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
+33
-13
@@ -4,12 +4,13 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[中文 README](./README.md)
|
||||
|
||||
An agent skill for Claude Code, Codex, and similar coding-agent environments. It generates **Xiaohongshu / Rednote carousel images** and **WeChat 21:9 + 1:1 cover pairs** from articles, copy, screenshots, product notes, subtitles, or photos.
|
||||
An agent skill for Claude Code, Codex, and similar coding-agent environments. It generates **Xiaohongshu / Rednote carousel images**, **Live Photo motion cards**, and **WeChat 21:9 + 1:1 cover pairs** from articles, copy, screenshots, product notes, subtitles, photos, or user-supplied videos.
|
||||
|
||||
Two visual systems share one workflow:
|
||||
|
||||
@@ -51,17 +52,20 @@ Make me a 3:4 Xiaohongshu set from this product review, with editorial-style tit
|
||||
Turn this article into a WeChat cover pair: 21:9 hero + 1:1 share card, visually consistent.
|
||||
I have 3 camping photos — make me an image-led Xiaohongshu carousel.
|
||||
Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallhaven.
|
||||
I have a coffee video — make it a 5-second Xiaohongshu Live Photo card with text in a quiet zone.
|
||||
Turn these three game clips into a triple Live Photo collage with Swiss-style guide copy.
|
||||
```
|
||||
|
||||
## What you get
|
||||
|
||||
- 🖋 **Two visual systems**: Editorial for atmosphere and narrative, Swiss for facts and structure, sharing one workflow
|
||||
- 📐 **3 canvas sizes**: `.poster.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×1080 (WeChat 1:1)
|
||||
- 🎬 **Live Photo motion cards**: single video, two-grid, three-grid, four-grid, triple collage, and low-cost long-video diagnosis; `5s` for Xiaohongshu, `3s` for WeChat Official Account articles
|
||||
- 🧩 **28 layout skeletons**: 16 Editorial (`M01-M16`, including Image-Led Cover, Pipeline, Before/After) + 12 Swiss (`S01-S12`, including KPI Tower, H-Bar Chart, Matrix + Hero)
|
||||
- 🎨 **10 theme presets**: 6 Editorial (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, **Midnight Ink** dark) + 4 Swiss anchor colors (IKB Klein Blue, Lemon, Lemon Green, Safety Orange)
|
||||
- 🖼 **Image sourcing workflow**: user images first; otherwise waterfall through Unsplash → Pexels → Flickr CC → Wallhaven → direct search, downloaded locally with auto-generated `SOURCES.md`
|
||||
- 🌫 **WebGL ink-flow background**: editorial hero pages can ship a live ink animation; can be disabled for low-power devices or screenshot mode
|
||||
- 🪧 **Image overlay + face safety**: full-bleed images must carry a mask; text drop zones must avoid the subject. Hard rules in `references/image-overlay.md`
|
||||
- 🪧 **Text-on-image + subject safety**: full-bleed images require quiet-zone and subject mapping first; add only localized tint when needed, not a default full-canvas mask
|
||||
- 🧰 **Screenshot beautification assets**: 9 real-texture WebP backgrounds (5 Editorial / 4 Swiss), paired with `.frame-shot` / `.device-browser` / `.device-phone` utilities
|
||||
- 🗺 **Map component**: MapLibre + OSM real tiles, multi-pin + connectors, made for travel guides
|
||||
- ✅ **Validator**: `validate-social-deck.mjs` auto-detects overflow, type cap violations, 4-band density gaps, and footer collisions
|
||||
@@ -69,9 +73,9 @@ Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallha
|
||||
|
||||
## Fits / Doesn't fit
|
||||
|
||||
**✅ Fits**: Xiaohongshu carousels / WeChat cover pairs / Moments covers / Channels covers / article visuals / tutorial pages / data recaps / travel guides / product reviews / screenshot explainers
|
||||
**✅ Fits**: Xiaohongshu carousels / Live Photo motion cards / WeChat cover pairs / Moments covers / Channels covers / article visuals / tutorial pages / data recaps / travel guides / product reviews / screenshot explainers
|
||||
|
||||
**❌ Doesn't fit**: Horizontal swipe decks (use [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / long-form video generation / pure photo retouching / plain-text editing without layout
|
||||
**❌ Doesn't fit**: Horizontal swipe decks (use [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / long-form video editing / pure photo retouching / plain-text editing without layout
|
||||
|
||||
## 11 Xiaohongshu categories
|
||||
|
||||
@@ -99,6 +103,7 @@ Tiered by "circle of competence" — see [`references/category-cookbook.md`](./r
|
||||
| WeChat cover pair | Render the same content twice: `.poster.wide` 21:9 + `.poster.square` 1:1, visually consistent |
|
||||
| Screenshot tutorial / tool walkthrough | `.frame-shot` + `.device-browser`, prefer Swiss grid base |
|
||||
| Game guide / film recap | Editorial + Midnight Ink, pull game art from Wallhaven for full-bleed hero |
|
||||
| User video → Live Photo | Judge the `3s/5s` information budget first, then choose single video / puzzle / triple collage / long-video diagnosis |
|
||||
| Data recap / year in review | Swiss + Lemon or Safety Orange, matrix + ledger combo |
|
||||
|
||||
## Why single-file HTML to PNG
|
||||
@@ -108,6 +113,7 @@ Tiered by "circle of competence" — see [`references/category-cookbook.md`](./r
|
||||
- **Open image sourcing**: hook into Unsplash / Pexels / Wallhaven / Mapbox / OSM / any web resource
|
||||
- **Verifiable quality**: `validate-social-deck.mjs` runs Playwright DOM measurement, not guesswork
|
||||
- **Simple delivery**: `output/*.png` ships directly — no deploys, no export tools
|
||||
- **Practical motion-card delivery**: the Live Photo branch exports `JPG + MOV + .pvt`, with Xiaohongshu / WeChat duration limits and mobile publishing paths documented
|
||||
|
||||
## Platform support
|
||||
|
||||
@@ -153,6 +159,8 @@ Once installed, Claude Code auto-detects the skill. Trigger phrases:
|
||||
- "Generate social cards / magazine-style social cards"
|
||||
- "Turn this article into a tutorial carousel"
|
||||
- "Make a Swiss-style Xiaohongshu review / IKB-style cards"
|
||||
- "Turn this video into a Xiaohongshu Live Photo / triple Live Photo collage"
|
||||
- "Make a 3-second Live Photo for a WeChat Official Account article"
|
||||
|
||||
## Workflow
|
||||
|
||||
@@ -166,6 +174,8 @@ The skill is a structured workflow. The agent walks through 7 steps:
|
||||
6. **Deliver & Review** — show PNGs first, ask "look at them yourself, or want me to run the validator?" — does not auto-validate
|
||||
7. **Iterate** — apply user feedback, tweak inline styles or swap layouts / images, re-render
|
||||
|
||||
Live Photo requests branch inside Step 5: judge the `3s/5s` information budget, inspect the first frame or a sparse contact sheet for crop safety, then export `JPG + MOV + .pvt`. Delivery notes include platform limits and publishing paths: `5s` for Xiaohongshu, `3s` for WeChat Official Account articles, usually transferred to iPhone and published from the matching mobile app.
|
||||
|
||||
Full spec in [`SKILL.md`](./SKILL.md). Deep details in the matching `references/*.md`.
|
||||
|
||||
## Validator
|
||||
@@ -174,14 +184,17 @@ Full spec in [`SKILL.md`](./SKILL.md). Deep details in the matching `references/
|
||||
node validate-social-deck.mjs path/to/task-dir
|
||||
```
|
||||
|
||||
6 rules, based on Playwright real-render measurement, not static scanning:
|
||||
9 rules, based on Playwright real-render measurement, not static scanning:
|
||||
|
||||
- **R1** Overflow — any section overflowing `.poster` fails immediately
|
||||
- **R2** Type Caps — `.h-xl` / `.h-display` size + weight combinations exceeding seed definitions
|
||||
- **R3** Footer Collision — content pressing into the bottom footer / page-number
|
||||
- **R4** 4-Band Density — 1440-tall canvas split into 4 horizontal bands; each must hold content or have a stated reason for whitespace
|
||||
- **R5** Frame Overflow — `.frame-img` / `.frame-shot` children overflowing the frame
|
||||
- **R6** Swiss Identity — Swiss templates with inline `font-weight >= 700` warn (violates "bigger means thinner")
|
||||
- **R1** Overflow — any section overflowing `.poster` fails immediately and reports a pixel-based fix tier
|
||||
- **R2** Footer Collision — content pressing into the bottom footer / page-number
|
||||
- **R3** Swiss Bold Display — Swiss large titles violating "bigger means thinner"
|
||||
- **R4** Min Readable Font — body, captions, labels, and metadata below mobile-readable floors
|
||||
- **R5** 4-Band Density — 1440-tall canvas split into 4 horizontal bands; each must hold content or have a stated whitespace reason
|
||||
- **R6** H-XL Line Cap — `.h-xl` / `.h-display` / `.h-statement` line counts exceeding board budgets
|
||||
- **R7** Figure Margin Drift — default browser `<figure>` margins causing layout drift
|
||||
- **R8** Visual Bounds — true visible top/bottom bounds, visual overflow, and bottom whitespace
|
||||
- **R9** Title Gap — display title too close to the next content block
|
||||
|
||||
`SKILL.md` Step 7 explicitly states **the validator does not auto-run** — wait for the user to look at the images first, saving tens of seconds per round.
|
||||
|
||||
@@ -221,6 +234,7 @@ guizang-social-card-skill/
|
||||
├── HANDOFF.md ← Handoff doc: facts + version history
|
||||
├── PRODUCT.md ← Product doc: thinking + decisions + roadmap
|
||||
├── validate-social-deck.mjs ← Playwright layout validator
|
||||
├── scripts/ ← Live Photo packaging / contact sheet / doc-test scripts
|
||||
├── assets/
|
||||
│ ├── template-editorial-card.html ← Editorial seed (6 themes / 3 canvases)
|
||||
│ ├── template-swiss-card.html ← Swiss seed (4 accents / 3 canvases)
|
||||
@@ -238,11 +252,12 @@ guizang-social-card-skill/
|
||||
├── portrait-fill.md ← Whitespace strategy for the 3:4 board
|
||||
├── content-planning.md ← Hooks / page splits / copy compression
|
||||
├── category-cookbook.md ← 11 Xiaohongshu category routing table
|
||||
├── image-overlay.md ← Full-bleed image mask + face safety rules
|
||||
├── image-overlay.md ← Text-on-image + subject safety rules
|
||||
├── screenshot-treatment.md ← `.frame-shot` utilities + screenshot beautification
|
||||
├── map-component.md ← `.map-block` MapLibre map
|
||||
├── title-shortener.md ← Short-title strategy for the 1:1 cover
|
||||
├── production-workflow.md ← Playwright render pipeline
|
||||
├── live-photo-production.md ← Live Photo production / puzzle / long-video / publishing rules
|
||||
└── qa-checklist.md ← Quality checklist
|
||||
```
|
||||
|
||||
@@ -252,11 +267,12 @@ guizang-social-card-skill/
|
||||
2. **Structure over decoration** — type / contrast / grid carries the hierarchy, not shadows or cards
|
||||
3. **Layouts over freedom** — pick first, adapt later; do not invent pages outside the 28 skeletons
|
||||
4. **User images first** — at intake, present A/B/C once; do not re-pitch shooting their own
|
||||
5. **Mask + avoid** — full-bleed images always carry a mask; text drop zones must clear the subject (faces / products / text-dense regions)
|
||||
5. **Select and avoid first** — full-bleed images need a quiet zone; text drop zones must clear the subject (faces / products / text-dense regions); add localized tint only when needed
|
||||
6. **Bigger means thinner** — Swiss `.h-xl` size goes up → weight must come down. Editorial follows the same rule
|
||||
7. **No auto-validation** — let the user look first, then ask before validating; saves tens of seconds per round
|
||||
8. **A skill is a product, not a prompt** — has PRODUCT.md, version numbers, CHANGELOG, capability boundaries
|
||||
9. **Local tests stay out of git** — all demos / smoke tests live under `local-tests/`, gitignored
|
||||
10. **Treat video as a card first** — a Live Photo first frame must work as a good social card; visible copy should describe the real scene, not production terminology
|
||||
|
||||
## Visual references
|
||||
|
||||
@@ -272,6 +288,7 @@ guizang-social-card-skill/
|
||||
- More Swiss data layouts (additional chart skeletons)
|
||||
- Post-image-generation: actively ask whether to do local fixes / regenerate the whole image
|
||||
- More category-specific recommended layout packs (currently 7 of 11 are end-to-end strong)
|
||||
- Expand the Live Photo example library: single video, puzzles, game guides, lifestyle, product updates
|
||||
- Marketplace-ready WorkBuddy version
|
||||
|
||||
## FAQ
|
||||
@@ -285,6 +302,9 @@ Same reason as the PPT skill — the skill's core value is stable output. Free c
|
||||
**Can I use other models for image generation?**
|
||||
Yes. Image generation itself is out of scope. SKILL.md Step 4 spells out the sourcing protocol: user images → AI-generated → web sources. AI generation depends on whichever model your agent connects to.
|
||||
|
||||
**Does it support Live Photo?**
|
||||
Yes. Plan for `5s` on Xiaohongshu and `3s` inside WeChat Official Account articles. It supports single video, two-grid, three-grid, four-grid, triple collage, and sparse long-video diagnosis. Publishing usually requires the mobile path; desktop upload flows generally cannot recognize `.pvt` as a publishable Live Photo.
|
||||
|
||||
**Codex output drifts off-spec — what do I do?**
|
||||
Since v0.12 the rule "seed templates and components.md table stay in sync" is a hard constraint. If a violation slips through, it's almost always seed-template defaults diverging from `references/style-system.md` — open an issue.
|
||||
|
||||
|
||||
@@ -4,12 +4,13 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[English README](./README.en.md)
|
||||
|
||||
一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能,用于从文章、文案、截图、产品笔记、字幕或照片生成**小红书 / Rednote 图文组图**与**公众号 21:9 + 1:1 封面对**。
|
||||
一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能,用于从文章、文案、截图、产品笔记、字幕、照片或用户视频生成**小红书 / Rednote 图文组图**、**Live Photo 动态卡**与**公众号 21:9 + 1:1 封面对**。
|
||||
|
||||
内置两套视觉系统,共用一份图文工作流:
|
||||
|
||||
@@ -51,17 +52,20 @@ npx skills add https://github.com/op7418/guizang-social-card-skill --skill guiza
|
||||
帮我把这篇文章做成公众号封面对:21:9 头图 + 1:1 分享卡,视觉保持一致。
|
||||
我有 3 张露营照片,帮我做一套全图风格的小红书图文。
|
||||
把这段游戏攻略文案做成一套小红书图文,需要从 wallhaven 拿点游戏原画。
|
||||
我有一段咖啡视频,帮我做成小红书 5 秒 Live Photo 卡片,文字压在安静区域。
|
||||
把这三个游戏片段做成三连 Live Photo 拼图,用 Swiss 风介绍攻略要点。
|
||||
```
|
||||
|
||||
## 效果
|
||||
|
||||
- 🖋 **双视觉系统**:电子杂志风做氛围与叙事,瑞士风做事实与结构,两套共用同一份工作流
|
||||
- 📐 **3 个画板尺寸**:`.poster.xhs` 1080×1440(小红书 3:4)、`.poster.wide` 2100×900(公众号 21:9)、`.poster.square` 1080×1080(公众号 1:1)
|
||||
- 🎬 **Live Photo 动态卡**:支持单视频、二宫格、三宫格、四宫格、三连拼图、长视频低成本诊断;小红书按 `5s`,微信公众号文章内按 `3s`
|
||||
- 🧩 **28 个版式骨架**:Editorial 16 个(`M01-M16`,含 Image-Led Cover、Pipeline、Before/After 等)+ Swiss 12 个(`S01-S12`,含 KPI Tower、H-Bar Chart、Matrix + Hero 等)
|
||||
- 🎨 **10 套主题预设**:Editorial 6 套(墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、**Midnight Ink** 暗色)+ Swiss 4 套锚点色(IKB Klein Blue、柠檬黄、柠檬绿、安全橙)
|
||||
- 🖼 **图源工作流**:用户图优先;无图时按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索的优先级取图,落本地 + 自动写 `SOURCES.md`
|
||||
- 🌫 **WebGL 墨流背景**:杂志风 hero 页可挂动态墨流;低性能或截图时可禁用
|
||||
- 🪧 **图片底图遮罩 + 人脸避让**:满铺图必须叠遮罩,文字落点要避开主体,`references/image-overlay.md` 给硬规则
|
||||
- 🪧 **文字压图 + 主体避让**:满铺图先做 quiet-zone 与主体映射,文字避开人脸、产品和关键动作;需要时只加局部 tint,不默认全图遮罩
|
||||
- 🧰 **截图美化资产**:9 张 WebP 真实材质背景(Editorial 5 / Swiss 4),配套 `.frame-shot` / `.device-browser` / `.device-phone` 工具类
|
||||
- 🗺 **地图组件**:MapLibre + OSM 真实瓦片,支持多 pin + 连线,适合旅行攻略
|
||||
- ✅ **校验脚本**:`validate-social-deck.mjs` 自动检测溢出、字号上限、4 横带密度、footer 碰撞
|
||||
@@ -69,9 +73,9 @@ npx skills add https://github.com/op7418/guizang-social-card-skill --skill guiza
|
||||
|
||||
## 适合 / 不适合
|
||||
|
||||
**✅ 合适**:小红书图文组图 / 公众号封面对 / 微信朋友圈封面 / 视频号封面 / 文章配图 / 教程拆页 / 数据回顾 / 旅行攻略 / 产品测评 / 截图说明
|
||||
**✅ 合适**:小红书图文组图 / Live Photo 动态卡 / 公众号封面对 / 微信朋友圈封面 / 视频号封面 / 文章配图 / 教程拆页 / 数据回顾 / 旅行攻略 / 产品测评 / 截图说明
|
||||
|
||||
**❌ 不合适**:横向翻页 PPT(用 [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill))/ 长视频生成 / 纯图片修图 / 无版式诉求的纯文字编辑
|
||||
**❌ 不合适**:横向翻页 PPT(用 [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill))/ 长视频正片剪辑 / 纯图片修图 / 无版式诉求的纯文字编辑
|
||||
|
||||
## 11 个小红书品类适配
|
||||
|
||||
@@ -99,6 +103,7 @@ npx skills add https://github.com/op7418/guizang-social-card-skill --skill guiza
|
||||
| 公众号封面对 | 同一份内容渲两块:`.poster.wide` 21:9 + `.poster.square` 1:1,视觉一致 |
|
||||
| 截图教程 / 工具说明 | `.frame-shot` + `.device-browser` 包壳,优先 Swiss 网格底 |
|
||||
| 游戏攻略 / 影视回顾 | Editorial + Midnight Ink,从 Wallhaven 取游戏原画做满铺 |
|
||||
| 用户视频 → Live Photo | 先判断 `3s/5s` 信息量,再选单视频 / 拼图 / 三连 / 长视频诊断 |
|
||||
| 数据回顾 / 年终总结 | Swiss + Lemon 或 Safety Orange,矩阵 + ledger 组合 |
|
||||
|
||||
## 为什么是单文件 HTML 渲 PNG
|
||||
@@ -108,6 +113,7 @@ npx skills add https://github.com/op7418/guizang-social-card-skill --skill guiza
|
||||
- **图源开放**:可以接 Unsplash / Pexels / Wallhaven / Mapbox / OSM 等任意网络资源
|
||||
- **质量可校验**:`validate-social-deck.mjs` 用 Playwright 跑真实 DOM 测量,不是猜
|
||||
- **交付简单**:`output/*.png` 直接发,不需要部署、不需要导出工具
|
||||
- **动态卡可落地**:Live Photo 分支输出 `JPG + MOV + .pvt`,并记录小红书 / 微信的时长限制和手机端发布路径
|
||||
|
||||
## 平台支持
|
||||
|
||||
@@ -153,6 +159,8 @@ git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skil
|
||||
- "生成一套 social cards / 杂志风社交卡片"
|
||||
- "把这篇文章做成轮播图文 / 教程拆页"
|
||||
- "做一套瑞士风的小红书测评 / IKB 风格图文"
|
||||
- "把这段视频做成小红书 Live Photo / 三连实况拼图"
|
||||
- "做一个微信公众号文章内 3 秒 Live Photo"
|
||||
|
||||
## 使用流程
|
||||
|
||||
@@ -166,6 +174,8 @@ Skill 本身是结构化工作流,Agent 会按 7 步走:
|
||||
6. **Deliver & Review** — 先把 PNG 给用户看,询问"你自己看还是我先帮你跑 validator",默认不自动核查
|
||||
7. **Iterate** — 用户提反馈,改 inline 样式或 swap 版式 / 替图,重渲
|
||||
|
||||
Live Photo 请求会在第 5 步进入动态分支:先判断 `3s/5s` 内能承载的信息量,抽首帧或稀疏 contact sheet 检查裁切,再输出 `JPG + MOV + .pvt`。交付时会提醒平台限制和发布路径:小红书 `5s`,微信公众号文章内 `3s`,通常需要把 `.pvt` 传到 iPhone 后从对应 App 发布。
|
||||
|
||||
详细说明见 [`SKILL.md`](./SKILL.md)。深度细节去看对应 `references/*.md`。
|
||||
|
||||
## 校验脚本
|
||||
@@ -223,6 +233,7 @@ guizang-social-card-skill/
|
||||
├── HANDOFF.md ← 交接文档:事实 + 版本历史
|
||||
├── PRODUCT.md ← 产品文档:思考 + 决策 + roadmap
|
||||
├── validate-social-deck.mjs ← Playwright 版式校验脚本
|
||||
├── scripts/ ← Live Photo 打包 / 抽帧 / 文档测试脚本
|
||||
├── assets/
|
||||
│ ├── template-editorial-card.html ← Editorial 种子(6 主题 / 3 画板)
|
||||
│ ├── template-swiss-card.html ← Swiss 种子(4 accent / 3 画板)
|
||||
@@ -240,11 +251,12 @@ guizang-social-card-skill/
|
||||
├── portrait-fill.md ← 3:4 板的留白对策
|
||||
├── content-planning.md ← 钩子 / 拆页 / 文案压缩
|
||||
├── category-cookbook.md ← 11 个小红书品类路由表
|
||||
├── image-overlay.md ← 满铺图遮罩 + 人脸避让规则
|
||||
├── image-overlay.md ← 文字压图 + 主体避让规则
|
||||
├── screenshot-treatment.md ← `.frame-shot` 工具类 + 截图美化
|
||||
├── map-component.md ← `.map-block` MapLibre 地图
|
||||
├── title-shortener.md ← 1:1 封面的短标题策略
|
||||
├── production-workflow.md ← Playwright 渲染管线
|
||||
├── live-photo-production.md ← Live Photo 生产 / 拼图 / 长视频 / 发布规范
|
||||
└── qa-checklist.md ← 质量检查清单
|
||||
```
|
||||
|
||||
@@ -254,11 +266,12 @@ guizang-social-card-skill/
|
||||
2. **结构优于装饰** — 字号 + 字体对比 + 网格留白撑起信息层级,不靠阴影和卡片
|
||||
3. **版式优于自由** — 28 个版式骨架先选后改,不要发明不存在的页面
|
||||
4. **图片优先用户的** — Intake 时一次性给 A/B/C,不二次劝导用户拍图
|
||||
5. **遮罩与避让** — 满铺图必加遮罩,文字落点必须避开主体(人脸 / 产品 / 文字密集区)
|
||||
5. **选图与避让优先** — 满铺图先确认 quiet zone,文字避开主体(人脸 / 产品 / 文字密集区),必要时才加局部 tint
|
||||
6. **越大越细** — Swiss `.h-xl` 字号上去 → 字重必须下来。Editorial 同此原则
|
||||
7. **默认不自动核查** — 把"先看图、再决定要不要 validate"做成工作流,省每轮几十秒
|
||||
8. **Skill 是产品不是 Prompt** — 有 PRODUCT.md、有版本号、有 CHANGELOG、有能力边界
|
||||
9. **本地测试不进 git** — 所有 demo / 冒烟测试归 `local-tests/`,被 gitignore
|
||||
10. **视频先当卡片** — Live Photo 第一帧必须先像一张好社交卡,可见文案描述真实场景,不要把制作术语写上画面
|
||||
|
||||
## 视觉参考
|
||||
|
||||
@@ -274,6 +287,7 @@ guizang-social-card-skill/
|
||||
- 扩展 Swiss 数据类版式(更多图表骨架)
|
||||
- AI 出图后处理:渲染后主动询问是否做局部修复 / 整张重出
|
||||
- 增加更多小红书品类的官方推荐版式包(目前 11 个里 7 个端到端可用)
|
||||
- 扩充 Live Photo 示例库:单视频、拼图、游戏攻略、生活方式、产品更新
|
||||
- 整理 WorkBuddy 等平台上架版本
|
||||
|
||||
## FAQ
|
||||
@@ -287,6 +301,9 @@ guizang-social-card-skill/
|
||||
**能用其他模型生图吗?**
|
||||
可以。生图本身不在 Skill 范围内,但 SKILL.md Step 4 写清了取图协议:用户图 → AI 生图 → 网络取图。AI 生图能力依赖你当前 Agent 接的模型。
|
||||
|
||||
**支持 Live Photo 吗?**
|
||||
支持。小红书按 `5s` 规划,微信公众号文章内按 `3s` 规划。可以做单视频、二宫格、三宫格、四宫格、三连拼图,也能对长视频先做稀疏抽帧诊断。发布通常需要手机端路径,桌面端一般不能直接识别 `.pvt` 为可发布 Live Photo。
|
||||
|
||||
**Codex 写出来不合规怎么办?**
|
||||
v0.12 起把"种子模板与 components.md 表格保持一致"做成了硬规则。如果还是出现违规,大概率是 seed template 默认值与 `references/style-system.md` 不一致——开 Issue 给我们。
|
||||
|
||||
|
||||
Reference in new issue
Block a user