mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-11 13:42:06 +00:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 688d1760ed | |||
| a701be873b | |||
| 1df5e4974d | |||
| 2677e730b9 | |||
| 080f2eff48 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "0.6.1"
|
||||
"version": "0.8.0"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
---
|
||||
name: release-skills
|
||||
description: Release workflow for baoyu-skills plugin. This skill should be used when the user wants to create a new release version. It analyzes changes since the last version tag, updates changelogs (EN/CN), bumps the version in marketplace.json, commits changes, and creates a version tag. Supports dry-run mode and breaking change detection.
|
||||
---
|
||||
|
||||
# Release Skills
|
||||
|
||||
Automate the release process for baoyu-skills plugin: analyze changes, update changelogs, bump version, commit, and tag.
|
||||
|
||||
## When to Use
|
||||
|
||||
Trigger this skill when user requests:
|
||||
- "release", "发布", "create release", "new version"
|
||||
- "bump version", "update version"
|
||||
- "prepare release"
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Changes Since Last Tag
|
||||
|
||||
```bash
|
||||
# Get the latest version tag
|
||||
LAST_TAG=$(git tag --sort=-v:refname | head -1)
|
||||
|
||||
# Show changes since last tag
|
||||
git log ${LAST_TAG}..HEAD --oneline
|
||||
git diff ${LAST_TAG}..HEAD --stat
|
||||
```
|
||||
|
||||
Categorize changes by type based on commit messages and file changes:
|
||||
|
||||
| Type | Prefix | Description |
|
||||
|------|--------|-------------|
|
||||
| feat | `feat:` | New features, new skills |
|
||||
| fix | `fix:` | Bug fixes |
|
||||
| docs | `docs:` | Documentation only |
|
||||
| refactor | `refactor:` | Code refactoring |
|
||||
| style | `style:` | Formatting, styling |
|
||||
| chore | `chore:` | Build, tooling, maintenance |
|
||||
|
||||
**Breaking Change Detection**: If changes include:
|
||||
- Removed skills or scripts
|
||||
- Changed API/interfaces
|
||||
- Renamed public functions/options
|
||||
|
||||
Warn user: "Breaking changes detected. Consider major version bump (--major flag)."
|
||||
|
||||
### Step 2: Determine Version Bump
|
||||
|
||||
Current version location: `.claude-plugin/marketplace.json` → `metadata.version`
|
||||
|
||||
Version rules:
|
||||
- **Patch** (0.6.1 → 0.6.2): Bug fixes, docs updates, minor improvements
|
||||
- **Minor** (0.6.x → 0.7.0): New features, new skills, significant enhancements
|
||||
- **Major** (0.x → 1.0): Breaking changes, only when user explicitly requests with `--major`
|
||||
|
||||
Default behavior:
|
||||
- If changes include `feat:` or new skills → Minor bump
|
||||
- Otherwise → Patch bump
|
||||
|
||||
### Step 3: Check and Update README
|
||||
|
||||
Before updating changelogs, check if README files need updates based on changes:
|
||||
|
||||
**When to update README**:
|
||||
- New skills added → Add to skill list
|
||||
- Skills removed → Remove from skill list
|
||||
- Skill renamed → Update references
|
||||
- New features affecting usage → Update usage section
|
||||
- Breaking changes → Update migration notes
|
||||
|
||||
**Files to sync**:
|
||||
- `README.md` (English)
|
||||
- `README.zh.md` (Chinese)
|
||||
|
||||
If changes include new skills or significant feature changes, update both README files to reflect the new capabilities. Keep both files in sync with the same structure and information.
|
||||
|
||||
### Step 4: Update Changelogs
|
||||
|
||||
Files to update:
|
||||
- `CHANGELOG.md` (English)
|
||||
- `CHANGELOG.zh.md` (Chinese)
|
||||
|
||||
Format (insert after header, before previous version):
|
||||
|
||||
```markdown
|
||||
## {NEW_VERSION} - {YYYY-MM-DD}
|
||||
|
||||
### Features
|
||||
- `skill-name`: description of new feature
|
||||
|
||||
### Fixes
|
||||
- `skill-name`: description of fix
|
||||
|
||||
### Documentation
|
||||
- description of docs changes
|
||||
|
||||
### Other
|
||||
- description of other changes
|
||||
```
|
||||
|
||||
Only include sections that have changes. Omit empty sections.
|
||||
|
||||
For Chinese changelog, translate the content maintaining the same structure.
|
||||
|
||||
### Step 5: Update marketplace.json
|
||||
|
||||
Update `.claude-plugin/marketplace.json`:
|
||||
```json
|
||||
{
|
||||
"metadata": {
|
||||
"version": "{NEW_VERSION}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Step 6: Commit Changes
|
||||
|
||||
```bash
|
||||
git add README.md README.zh.md CHANGELOG.md CHANGELOG.zh.md .claude-plugin/marketplace.json
|
||||
git commit -m "chore: release v{NEW_VERSION}"
|
||||
```
|
||||
|
||||
### Step 7: Create Version Tag
|
||||
|
||||
```bash
|
||||
git tag v{NEW_VERSION}
|
||||
```
|
||||
|
||||
**Important**: Do NOT push to remote. User will push manually when ready.
|
||||
|
||||
## Options
|
||||
|
||||
| Flag | Description |
|
||||
|------|-------------|
|
||||
| `--dry-run` | Preview changes without executing. Show what would be updated. |
|
||||
| `--major` | Force major version bump (0.x → 1.0 or 1.x → 2.0) |
|
||||
| `--minor` | Force minor version bump |
|
||||
| `--patch` | Force patch version bump |
|
||||
| `--pre <tag>` | (Reserved) Create pre-release version, e.g., `--pre beta` → `0.7.0-beta.1` |
|
||||
|
||||
## Dry-Run Mode
|
||||
|
||||
When `--dry-run` is specified:
|
||||
1. Show all changes since last tag
|
||||
2. Show proposed version bump (current → new)
|
||||
3. Show draft changelog entries (EN and CN)
|
||||
4. Show files that would be modified
|
||||
5. Do NOT make any actual changes
|
||||
|
||||
Output format:
|
||||
```
|
||||
=== DRY RUN MODE ===
|
||||
|
||||
Last tag: v0.6.1
|
||||
Proposed version: v0.7.0
|
||||
|
||||
Changes detected:
|
||||
- feat: new skill baoyu-foo added
|
||||
- fix: baoyu-bar timeout issue
|
||||
- docs: updated README
|
||||
|
||||
Changelog preview (EN):
|
||||
## 0.7.0 - 2026-01-17
|
||||
### Features
|
||||
- `baoyu-foo`: new skill for ...
|
||||
### Fixes
|
||||
- `baoyu-bar`: fixed timeout issue
|
||||
|
||||
README updates needed: Yes/No
|
||||
(If yes, show proposed changes)
|
||||
|
||||
Files to modify:
|
||||
- README.md (if updates needed)
|
||||
- README.zh.md (if updates needed)
|
||||
- CHANGELOG.md
|
||||
- CHANGELOG.zh.md
|
||||
- .claude-plugin/marketplace.json
|
||||
|
||||
No changes made. Run without --dry-run to execute.
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
```
|
||||
/release-skills # Auto-detect version bump
|
||||
/release-skills --dry-run # Preview only
|
||||
/release-skills --minor # Force minor bump
|
||||
/release-skills --major # Force major bump (with confirmation)
|
||||
```
|
||||
|
||||
## Post-Release Reminder
|
||||
|
||||
After successful release, remind user:
|
||||
```
|
||||
Release v{NEW_VERSION} created locally.
|
||||
|
||||
To publish:
|
||||
git push origin main
|
||||
git push origin v{NEW_VERSION}
|
||||
```
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
# Changelog
|
||||
|
||||
English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 0.8.0 - 2026-01-17
|
||||
|
||||
### Features
|
||||
- `baoyu-xhs-images`: adds content analysis framework (`analysis-framework.md`, `outline-template.md`) for structured content breakdown and outline generation.
|
||||
|
||||
### Documentation
|
||||
- `CLAUDE.md`: adds Output Path Convention (directory structure, backup rules) and Image Naming Convention (format, slug rules) to standardize image generation outputs.
|
||||
- Multiple skills: updates file management conventions to use unified directory structure (`[source-name-no-ext]/<skill-suffix>/`).
|
||||
- `baoyu-article-illustrator`, `baoyu-comic`, `baoyu-cover-image`, `baoyu-slide-deck`, `baoyu-xhs-images`
|
||||
|
||||
## 0.7.0 - 2026-01-17
|
||||
|
||||
### Features
|
||||
- `baoyu-comic`: adds `--aspect` (3:4, 4:3, 16:9) and `--lang` options; introduces multi-variant storyboard workflow (chronological, thematic, character-centric) with user selection.
|
||||
|
||||
### Enhancements
|
||||
- `baoyu-comic`: adds `analysis-framework.md` and `storyboard-template.md` for structured content analysis and variant generation.
|
||||
- `baoyu-slide-deck`: adds `analysis-framework.md`, `content-rules.md`, `modification-guide.md`, and `outline-template.md` references for improved outline quality.
|
||||
- `baoyu-article-illustrator`, `baoyu-cover-image`, `baoyu-xhs-images`: enhanced SKILL.md documentation with clearer workflows.
|
||||
|
||||
### Documentation
|
||||
- Multiple skills: restructured SKILL.md files—moved detailed content to `references/` directory for maintainability.
|
||||
- `baoyu-slide-deck`: simplified SKILL.md, consolidated style descriptions.
|
||||
|
||||
## 0.6.1 - 2026-01-17
|
||||
|
||||
- `baoyu-slide-deck`: adds `scripts/merge-to-pdf.ts` to export generated slides into a single PDF; docs updated with pptx/pdf outputs.
|
||||
- `baoyu-comic`: adds `scripts/merge-to-pdf.ts` to merge cover/pages into a PDF; docs clarify character reference handling (image vs text).
|
||||
- Docs conventions: adds a “Script Directory” template to `CLAUDE.md`; aligns `baoyu-gemini-web` / `baoyu-slide-deck` / `baoyu-comic` docs to use `${SKILL_DIR}` in commands so agents can run scripts from any install location.
|
||||
|
||||
## 0.6.0 - 2026-01-17
|
||||
|
||||
- `baoyu-slide-deck`: adds `scripts/merge-to-pptx.ts` to merge slide images into a PPTX and attach `prompts/` content as speaker notes.
|
||||
- `baoyu-slide-deck`: reshapes/expands the style library (adds `blueprint` / `bold-editorial` / `sketch-notes` / `vector-illustration`, and adjusts/replaces some older styles).
|
||||
- `baoyu-comic`: adds a `realistic` style reference.
|
||||
- Docs: refreshes `README.md` / `README.zh.md`.
|
||||
|
||||
## 0.5.3 - 2026-01-17
|
||||
|
||||
- `baoyu-post-to-x` (X Articles): makes image placeholder replacement more reliable (selection retry + verification; deletes via Backspace and verifies deletion before pasting), reducing mis-insertions/failures.
|
||||
|
||||
## 0.5.2 - 2026-01-16
|
||||
|
||||
- `baoyu-gemini-web`: adds `--sessionId` (local persisted sessions, plus `--list-sessions`) for multi-turn conversations and consistent multi-image generation.
|
||||
- `baoyu-gemini-web`: adds `--reference/--ref` for reference images (vision input), plus stronger timeout handling and cookie refresh recovery.
|
||||
- Docs: `baoyu-xhs-images` / `baoyu-slide-deck` / `baoyu-comic` document session usage (reuse one `sessionId` per set) to improve visual consistency.
|
||||
|
||||
## 0.5.1 - 2026-01-16
|
||||
|
||||
- `baoyu-comic`: adds creation templates/references (character template, Ohmsha guide, outline template) to speed up “characters → storyboard → generation”.
|
||||
|
||||
## 0.5.0 - 2026-01-16
|
||||
|
||||
- Adds `baoyu-comic`: a knowledge-comic generator with `style × layout` and a full set of style/layout references for more stable output.
|
||||
- `baoyu-xhs-images`: moves style/layout details into `references/styles/*` and `references/layouts/*`, and migrates the base prompt into `references/base-prompt.md` for easier maintenance/reuse.
|
||||
- `baoyu-slide-deck` / `baoyu-cover-image`: similarly split base prompt and style references into `references/`, reducing SKILL.md complexity and making style expansion easier.
|
||||
- Docs: updates `README.md` / `README.zh.md` skill list and examples.
|
||||
|
||||
## 0.4.2 - 2026-01-15
|
||||
|
||||
- `baoyu-gemini-web`: updates description to clarify it as the image-generation backend for other skills (e.g. `cover-image`, `xhs-images`, `article-illustrator`).
|
||||
|
||||
## 0.4.1 - 2026-01-15
|
||||
|
||||
- `baoyu-post-to-x` / `baoyu-post-to-wechat`: adds `scripts/paste-from-clipboard.ts` to send a “real paste” keystroke (Cmd/Ctrl+V), avoiding sites ignoring CDP synthetic events.
|
||||
- `baoyu-post-to-x`: adds docs for X Articles/regular posts, and switches image upload to prefer real paste (with a CDP fallback).
|
||||
- `baoyu-post-to-wechat`: docs add script-location guidance and `${SKILL_DIR}` path usage for reliable agent execution.
|
||||
- Docs: adds `screenshots/update-plugins.png` for the marketplace update flow.
|
||||
|
||||
## 0.4.0 - 2026-01-15
|
||||
|
||||
- Adds `baoyu-` prefix to skill directories and updates marketplace paths/docs accordingly to reduce naming collisions.
|
||||
|
||||
## 0.3.1 - 2026-01-15
|
||||
|
||||
- `xhs-images`: upgrades docs to a Style × Layout system (adds `--layout`, auto layout selection, and a `notion` style), with more complete usage examples.
|
||||
- `article-illustrator` / `cover-image`: docs no longer hard-code `gemini-web`; instead they instruct the agent to pick an available image-generation skill.
|
||||
- `slide-deck`: docs add the `notion` style and update auto-style mapping.
|
||||
- Tooling/docs: adds `.DS_Store` to `.gitignore`; refreshes `README.md` / `README.zh.md`.
|
||||
|
||||
## 0.3.0 - 2026-01-14
|
||||
|
||||
- Adds `post-to-wechat`: Chrome CDP automation for WeChat Official Account posting (image-text + full article), including Markdown → WeChat HTML conversion and multiple themes.
|
||||
- Adds `CLAUDE.md`: repository structure, running conventions, and “add new skill” guidelines.
|
||||
- Docs: updates `README.md` / `README.zh.md` install/update/usage instructions.
|
||||
|
||||
## 0.2.0 - 2026-01-13
|
||||
|
||||
- Adds new skills: `post-to-x` (real Chrome/CDP automation for posts and X Articles), `article-illustrator`, `cover-image`, and `slide-deck`.
|
||||
- `xhs-images`: adds multi-style support (`--style`) with auto style selection and updates the base prompt (e.g. language follows input, hand-drawn infographic constraints).
|
||||
- Docs: adds `README.zh.md` and improves `README.md` and `.gitignore`.
|
||||
|
||||
## 0.1.1 - 2026-01-13
|
||||
|
||||
- Marketplace refactor: introduces `metadata` (including `version`), renames the plugin entry to `content-skills` and explicitly lists installable skills; removes legacy `.claude-plugin/plugin.json`.
|
||||
- Adds `xhs-images`: Xiaohongshu infographic series generator (outline + per-image prompts).
|
||||
- `gemini-web`: adds `--promptfiles` to build prompts from multiple files (system/content separation).
|
||||
- Docs: adds `README.md`.
|
||||
|
||||
## 0.1.0 - 2026-01-13
|
||||
|
||||
- Initial release: `.claude-plugin/marketplace.json` plus `gemini-web` (text/image generation, browser login + cookie cache).
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
# Changelog
|
||||
|
||||
[English](./CHANGELOG.md) | 中文
|
||||
|
||||
## 0.8.0 - 2026-01-17
|
||||
|
||||
### 新功能
|
||||
- `baoyu-xhs-images`:新增内容分析框架(`analysis-framework.md`、`outline-template.md`),提供结构化内容拆解与大纲生成方案。
|
||||
|
||||
### 文档
|
||||
- `CLAUDE.md`:新增 Output Path Convention(目录结构、备份规则)和 Image Naming Convention(文件命名格式、slug 规则),统一图片生成输出规范。
|
||||
- 多个技能:更新文件管理规范,采用统一目录结构(`[source-name-no-ext]/<skill-suffix>/`)。
|
||||
- `baoyu-article-illustrator`、`baoyu-comic`、`baoyu-cover-image`、`baoyu-slide-deck`、`baoyu-xhs-images`
|
||||
|
||||
## 0.7.0 - 2026-01-17
|
||||
|
||||
### 新功能
|
||||
- `baoyu-comic`:新增 `--aspect`(3:4、4:3、16:9)和 `--lang` 选项;引入多变体分镜工作流(时间线、主题、人物视角),支持用户选择最佳方案。
|
||||
|
||||
### 增强
|
||||
- `baoyu-comic`:新增 `analysis-framework.md` 和 `storyboard-template.md`,提供结构化内容分析与变体生成框架。
|
||||
- `baoyu-slide-deck`:新增 `analysis-framework.md`、`content-rules.md`、`modification-guide.md`、`outline-template.md` 参考文档,提升大纲质量。
|
||||
- `baoyu-article-illustrator`、`baoyu-cover-image`、`baoyu-xhs-images`:SKILL.md 文档增强,工作流程更清晰。
|
||||
|
||||
### 文档
|
||||
- 多个技能:重构 SKILL.md 结构,将详细内容移至 `references/` 目录,便于维护。
|
||||
- `baoyu-slide-deck`:精简 SKILL.md,整合风格描述。
|
||||
|
||||
## 0.6.1 - 2026-01-17
|
||||
|
||||
- `baoyu-slide-deck`:新增 `scripts/merge-to-pdf.ts`,可将生成的 slide 图片一键合并为 PDF;文档补充导出步骤与产物命名(pptx/pdf)。
|
||||
- `baoyu-comic`:新增 `scripts/merge-to-pdf.ts`,将封面/分页图片合并为 PDF;补充角色参考(图片/文本)处理说明。
|
||||
- 文档规范:在 `CLAUDE.md` 中补充“Script Directory”模板;`baoyu-gemini-web` / `baoyu-slide-deck` / `baoyu-comic` 文档统一用 `${SKILL_DIR}` 引用脚本路径,方便 agent 在任意安装目录运行。
|
||||
|
||||
## 0.6.0 - 2026-01-17
|
||||
|
||||
- `baoyu-slide-deck`:新增 `scripts/merge-to-pptx.ts`,将生成的 slide 图片合并为 PPTX,并可把 `prompts/` 写入 speaker notes。
|
||||
- `baoyu-slide-deck`:风格库重组与扩充(新增 `blueprint` / `bold-editorial` / `sketch-notes` / `vector-illustration`,并调整/替换部分旧风格定义)。
|
||||
- `baoyu-comic`:新增 `realistic` 风格参考文件。
|
||||
- 文档:README / README.zh 同步更新技能说明与用法示例。
|
||||
|
||||
## 0.5.3 - 2026-01-17
|
||||
|
||||
- `baoyu-post-to-x`(X Articles):插图占位符替换更稳定——选中占位符增加重试与校验,改用 Backspace 删除并确认删除后再粘贴图片,降低插图错位/替换失败概率。
|
||||
|
||||
## 0.5.2 - 2026-01-16
|
||||
|
||||
- `baoyu-gemini-web`:新增 `--sessionId`(本地持久化会话,支持 `--list-sessions`),用于多轮对话/多图生成保持上下文一致。
|
||||
- `baoyu-gemini-web`:新增 `--reference/--ref` 传入参考图片(vision 输入),并增强超时与 cookie 失效自动恢复逻辑。
|
||||
- `baoyu-xhs-images` / `baoyu-slide-deck` / `baoyu-comic`:文档补充 session 约定(整套图使用同一 `sessionId`,增强风格一致性)。
|
||||
|
||||
## 0.5.1 - 2026-01-16
|
||||
|
||||
- `baoyu-comic`:补齐创作模板与参考(角色模板、Ohmsha 教学漫画指南、大纲模板),更适合从“设定 → 分镜 → 生成”快速落地。
|
||||
|
||||
## 0.5.0 - 2026-01-16
|
||||
|
||||
- 新增 `baoyu-comic`:知识漫画生成器,支持 `style × layout` 组合,并提供风格/布局参考文件用于稳定出图。
|
||||
- `baoyu-xhs-images`:将 Style/Layout 的细节从 SKILL.md 拆分到 `references/styles/*` 与 `references/layouts/*`,并将基础提示词迁移到 `references/base-prompt.md`,便于维护和复用。
|
||||
- `baoyu-slide-deck` / `baoyu-cover-image`:同样将基础提示词与风格拆分到 `references/`,降低 SKILL.md 复杂度,便于扩展更多风格。
|
||||
- 文档:README / README.zh 更新技能清单与用法示例。
|
||||
|
||||
## 0.4.2 - 2026-01-15
|
||||
|
||||
- `baoyu-gemini-web`:描述信息更新,明确其作为 `cover-image` / `xhs-images` / `article-illustrator` 等技能的图片生成后端。
|
||||
|
||||
## 0.4.1 - 2026-01-15
|
||||
|
||||
- `baoyu-post-to-x` / `baoyu-post-to-wechat`:新增 `scripts/paste-from-clipboard.ts`,通过系统级 Cmd/Ctrl+V 发送“真实粘贴”按键,规避 CDP 合成事件在站点侧被忽略的问题。
|
||||
- `baoyu-post-to-x`:补充 X Articles/普通推文的操作文档(`references/articles.md`、`references/regular-posts.md`),并将发图流程改为优先使用“真实粘贴”(保留 CDP 兜底)。
|
||||
- `baoyu-post-to-wechat`:文档补充脚本目录说明与 `${SKILL_DIR}` 路径写法,便于 agent 可靠定位脚本。
|
||||
- 文档:新增插件更新流程截图 `screenshots/update-plugins.png`。
|
||||
|
||||
## 0.4.0 - 2026-01-15
|
||||
|
||||
- 技能命名统一加 `baoyu-` 前缀:目录结构、marketplace 清单与文档示例命令同步更新,减少与其它插件技能的命名冲突。
|
||||
|
||||
## 0.3.1 - 2026-01-15
|
||||
|
||||
- `xhs-images`:升级为 Style × Layout 二维系统(新增 `--layout`、自动布局选择与 Notion 风格),文档示例更完整。
|
||||
- `article-illustrator` / `slide-deck` / `cover-image`:文档改为“选择可用的图片生成技能”而非强绑定 `gemini-web`,并补充 Notion 风格相关说明。
|
||||
- 工程化:`.gitignore` 增加 `.DS_Store` 忽略;README / README.zh 同步调整。
|
||||
|
||||
## 0.3.0 - 2026-01-14
|
||||
|
||||
- 新增 `post-to-wechat`:基于 Chrome CDP 自动化发布公众号图文/文章,包含 Markdown → 微信 HTML 转换与多主题样式支持。
|
||||
- 新增 `CLAUDE.md`:补充仓库结构、运行方式与添加新技能的约定,方便协作与二次开发。
|
||||
- 文档:README / README.zh 更新安装、更新与使用说明。
|
||||
|
||||
## 0.2.0 - 2026-01-13
|
||||
|
||||
- 新增技能:`post-to-x`(真实 Chrome/CDP 自动化发布推文与 X Articles)、`article-illustrator`(文章智能插图规划)、`cover-image`(文章封面图生成)、`slide-deck`(幻灯片大纲与图片生成)。
|
||||
- `xhs-images`:新增 `--style` 多风格与自动风格选择,并更新基础提示词(例如语言随内容、强调手绘信息图等)。
|
||||
- 文档:新增 `README.zh.md`,并完善 README 与 `.gitignore`。
|
||||
|
||||
## 0.1.1 - 2026-01-13
|
||||
|
||||
- marketplace 结构重构:引入 `metadata`(含 `version`),插件名调整为 `content-skills` 并显式列出可安装 skills;移除旧 `.claude-plugin/plugin.json`。
|
||||
- 新增 `xhs-images`:小红书信息图系列生成技能(拆解内容、生成 outline 与提示词)。
|
||||
- `gemini-web`:新增 `--promptfiles`,支持从多个文件拼接 prompt(便于 system/content 分离)。
|
||||
- 文档:新增 `README.md`。
|
||||
|
||||
## 0.1.0 - 2026-01-13
|
||||
|
||||
- 初始发布:提供 `.claude-plugin/marketplace.json` 与 `gemini-web`(文本/图片生成、cookie 登录与缓存流程)。
|
||||
@@ -102,3 +102,89 @@ When referencing scripts in workflow sections, use `${SKILL_DIR}/scripts/<name>.
|
||||
- Async/await patterns
|
||||
- Short variable names
|
||||
- Type-safe interfaces
|
||||
|
||||
## Image Generation Guidelines
|
||||
|
||||
Skills that require image generation MUST delegate to available image generation skills rather than implementing their own.
|
||||
|
||||
### Image Generation Skill Selection
|
||||
|
||||
1. Check available image generation skills in `skills/` directory
|
||||
2. Read each skill's SKILL.md to understand parameters and capabilities
|
||||
3. If multiple image generation skills available, ask user to choose preferred skill
|
||||
|
||||
### Generation Flow Template
|
||||
|
||||
Use this template when implementing image generation in skills:
|
||||
|
||||
```markdown
|
||||
### Step N: Generate Images
|
||||
|
||||
**Skill Selection**:
|
||||
1. Check available image generation skills (e.g., `baoyu-gemini-web`)
|
||||
2. Read selected skill's SKILL.md for parameter reference
|
||||
3. If multiple skills available, ask user to choose
|
||||
|
||||
**Generation Flow**:
|
||||
1. Call selected image generation skill with:
|
||||
- Prompt file path (or inline prompt)
|
||||
- Output image path
|
||||
- Any skill-specific parameters (refer to skill's SKILL.md)
|
||||
2. Generate images sequentially (one at a time)
|
||||
3. After each image, output progress: "Generated X/N"
|
||||
4. On failure, auto-retry once before reporting error
|
||||
```
|
||||
|
||||
### Output Path Convention
|
||||
|
||||
Generated images from the same skill and source file MUST be grouped together:
|
||||
|
||||
**With source file** (e.g., `/path/to/project/content/my-article.md`):
|
||||
```
|
||||
/path/to/project/content/my-article/<skill-suffix>/
|
||||
```
|
||||
- Remove file extension from source filename
|
||||
- Use skill name suffix (e.g., `xhs-images`, `cover-image`, `slide-deck`)
|
||||
- Example: source `/tests-data/anthropic-economic-index.md` + skill `baoyu-xhs-images` → `/tests-data/anthropic-economic-index/xhs-images/`
|
||||
|
||||
**Without source file**:
|
||||
```
|
||||
./<skill-suffix>/<source-slug>/
|
||||
```
|
||||
- Place under current project directory
|
||||
- Use descriptive slug for the content
|
||||
|
||||
**Directory Backup**:
|
||||
- If output directory already exists, rename existing directory with timestamp
|
||||
- Format: `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
- Example: `xhs-images` → `xhs-images-backup-20260117-143052`
|
||||
|
||||
### Image Naming Convention
|
||||
|
||||
Image filenames MUST include meaningful slugs for readability:
|
||||
|
||||
**Format**: `NN-{type}-[slug].png`
|
||||
- `NN`: Two-digit sequence number (01, 02, ...)
|
||||
- `{type}`: Image type (cover, content, page, slide, illustration, etc.)
|
||||
- `[slug]`: Descriptive kebab-case slug derived from content
|
||||
|
||||
**Examples**:
|
||||
```
|
||||
01-cover-ai-future.png
|
||||
02-content-key-benefits.png
|
||||
03-page-enigma-machine.png
|
||||
04-slide-architecture-overview.png
|
||||
```
|
||||
|
||||
**Slug Rules**:
|
||||
- Derived from image purpose or content (kebab-case)
|
||||
- Must be unique within the output directory
|
||||
- 2-5 words, concise but descriptive
|
||||
- When content changes significantly, update slug accordingly
|
||||
|
||||
### Best Practices
|
||||
|
||||
- Always read the image generation skill's SKILL.md before calling
|
||||
- Pass parameters exactly as documented in the skill
|
||||
- Handle failures gracefully with retry logic
|
||||
- Provide clear progress feedback to user
|
||||
|
||||
@@ -178,14 +178,28 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
|
||||
/baoyu-comic posts/turing-story/source.md --style dramatic
|
||||
/baoyu-comic posts/turing-story/source.md --style ohmsha
|
||||
|
||||
# Specify layout
|
||||
# Custom style (natural language)
|
||||
/baoyu-comic posts/turing-story/source.md --style "watercolor with soft edges"
|
||||
|
||||
# Specify layout and aspect ratio
|
||||
/baoyu-comic posts/turing-story/source.md --layout cinematic
|
||||
/baoyu-comic posts/turing-story/source.md --layout webtoon
|
||||
/baoyu-comic posts/turing-story/source.md --aspect 16:9
|
||||
|
||||
# Specify language
|
||||
/baoyu-comic posts/turing-story/source.md --lang zh
|
||||
|
||||
# Direct content input
|
||||
/baoyu-comic "The story of Alan Turing and the birth of computer science"
|
||||
```
|
||||
|
||||
**Options**:
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--style` | `classic` (default), `dramatic`, `warm`, `tech`, `sepia`, `vibrant`, `ohmsha`, `realistic`, or custom description |
|
||||
| `--layout` | `standard` (default), `cinematic`, `dense`, `splash`, `mixed`, `webtoon` |
|
||||
| `--aspect` | `3:4` (default, portrait), `4:3` (landscape), `16:9` (widescreen) |
|
||||
| `--lang` | `auto` (default), `zh`, `en`, `ja`, etc. |
|
||||
|
||||
**Styles** (visual aesthetics):
|
||||
|
||||
| Style | Description | Best For |
|
||||
|
||||
+16
-2
@@ -178,14 +178,28 @@ npx add-skill jimliu/baoyu-skills
|
||||
/baoyu-comic posts/turing-story/source.md --style dramatic
|
||||
/baoyu-comic posts/turing-story/source.md --style ohmsha
|
||||
|
||||
# 指定布局
|
||||
# 自定义风格(自然语言描述)
|
||||
/baoyu-comic posts/turing-story/source.md --style "水彩风格,边缘柔和"
|
||||
|
||||
# 指定布局和比例
|
||||
/baoyu-comic posts/turing-story/source.md --layout cinematic
|
||||
/baoyu-comic posts/turing-story/source.md --layout webtoon
|
||||
/baoyu-comic posts/turing-story/source.md --aspect 16:9
|
||||
|
||||
# 指定语言
|
||||
/baoyu-comic posts/turing-story/source.md --lang zh
|
||||
|
||||
# 直接输入内容
|
||||
/baoyu-comic "图灵的故事与计算机科学的诞生"
|
||||
```
|
||||
|
||||
**选项**:
|
||||
| 选项 | 取值 |
|
||||
|------|------|
|
||||
| `--style` | `classic`(默认)、`dramatic`、`warm`、`tech`、`sepia`、`vibrant`、`ohmsha`、`realistic`,或自然语言描述 |
|
||||
| `--layout` | `standard`(默认)、`cinematic`、`dense`、`splash`、`mixed`、`webtoon` |
|
||||
| `--aspect` | `3:4`(默认,竖版)、`4:3`(横版)、`16:9`(宽屏) |
|
||||
| `--lang` | `auto`(默认)、`zh`、`en`、`ja` 等 |
|
||||
|
||||
**风格**(视觉美学):
|
||||
|
||||
| 风格 | 描述 | 适用场景 |
|
||||
|
||||
@@ -102,22 +102,44 @@ When no `--style` is specified, analyze content to select the best style:
|
||||
|
||||
## File Management
|
||||
|
||||
Save illustrations to `imgs/` subdirectory in the same folder as the article:
|
||||
### With Article Path
|
||||
|
||||
Save illustrations to `[source-name-no-ext]/illustrations/` subdirectory in the same folder as the article:
|
||||
|
||||
```
|
||||
path/to/
|
||||
├── article.md
|
||||
└── imgs/
|
||||
└── article/
|
||||
└── illustrations/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── illustration-concept-a.md
|
||||
│ ├── illustration-concept-b.md
|
||||
│ └── ...
|
||||
├── illustration-concept-a.png
|
||||
├── illustration-concept-b.png
|
||||
└── ...
|
||||
```
|
||||
|
||||
Example: `/posts/ai-future.md` → `/posts/ai-future/illustrations/`
|
||||
|
||||
### Without Article Path (Pasted Content)
|
||||
|
||||
Save to `./illustrations/[topic-slug]/`:
|
||||
|
||||
```
|
||||
illustrations/
|
||||
└── ai-future/
|
||||
├── source.md
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── illustration-concept-a.md
|
||||
│ ├── illustration-concept-b.md
|
||||
│ └── ...
|
||||
├── illustration-concept-a.png
|
||||
├── illustration-concept-b.png
|
||||
└── ...
|
||||
└── *.png
|
||||
```
|
||||
|
||||
### Directory Backup
|
||||
|
||||
If target directory exists, rename existing to `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content & Select Style
|
||||
@@ -125,7 +147,11 @@ path/to/
|
||||
1. Read article content
|
||||
2. If `--style` specified, use that style
|
||||
3. Otherwise, scan for style signals and auto-select
|
||||
4. Extract key information:
|
||||
4. **Language detection**:
|
||||
- Detect **source language** from article content
|
||||
- Detect **user language** from conversation context
|
||||
- Note if source_language ≠ user_language (will ask in Step 4)
|
||||
5. Extract key information:
|
||||
- Main topic and themes
|
||||
- Core messages per section
|
||||
- Abstract concepts needing visualization
|
||||
@@ -173,10 +199,55 @@ path/to/
|
||||
...
|
||||
```
|
||||
|
||||
### Step 4: Create Prompt Files
|
||||
### Step 4: Review & Confirm
|
||||
|
||||
**Purpose**: Let user confirm all options in a single step before image generation.
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
|
||||
|
||||
1. **Generate 3 style variants**:
|
||||
- Analyze content to select 3 most suitable styles
|
||||
- Generate complete illustration plan for each style variant
|
||||
- Save as `outline-{style}.md` (e.g., `outline-notion.md`, `outline-tech.md`, `outline-warm.md`)
|
||||
|
||||
2. **Determine which questions to ask**:
|
||||
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Style variant | Always (required) |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
|
||||
3. **Present options** (use AskUserQuestion with all applicable questions):
|
||||
|
||||
**Question 1 (Style)** - always:
|
||||
- Style A (recommended): [style name] - [brief description]
|
||||
- Style B: [style name] - [brief description]
|
||||
- Style C: [style name] - [brief description]
|
||||
- Custom: Provide custom style reference
|
||||
|
||||
**Question 2 (Language)** - only if source ≠ user language:
|
||||
- [Source language] (matches article language)
|
||||
- [User language] (your preference)
|
||||
|
||||
**Language handling**:
|
||||
- If source language = user language: Just inform user (e.g., "Prompts will be in Chinese")
|
||||
- If different: Ask which language to use for prompts
|
||||
|
||||
4. **Apply selection**:
|
||||
- Copy selected `outline-{style}.md` to `outline.md`
|
||||
- If custom style provided, generate new plan with that style
|
||||
- If different language selected, regenerate outline in that language
|
||||
- User may edit `outline.md` directly for fine-tuning
|
||||
- If modified, reload plan before proceeding
|
||||
|
||||
5. **Proceed only after explicit user confirmation**
|
||||
|
||||
### Step 5: Create Prompt Files
|
||||
|
||||
Save prompts to `prompts/` directory with style-specific details.
|
||||
|
||||
**All prompts are written in the user's confirmed language preference.**
|
||||
|
||||
**Prompt Format**:
|
||||
|
||||
```markdown
|
||||
@@ -199,7 +270,7 @@ Text content (if any):
|
||||
Style notes: [specific style characteristics]
|
||||
```
|
||||
|
||||
### Step 5: Generate Images
|
||||
### Step 6: Generate Images
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
1. Check available image generation skills
|
||||
@@ -212,12 +283,12 @@ Style notes: [specific style characteristics]
|
||||
4. On failure, auto-retry once
|
||||
5. If retry fails, log reason, continue to next
|
||||
|
||||
### Step 6: Update Article
|
||||
### Step 7: Update Article
|
||||
|
||||
Insert generated images at corresponding positions:
|
||||
|
||||
```markdown
|
||||

|
||||

|
||||
```
|
||||
|
||||
**Insertion Rules**:
|
||||
@@ -225,7 +296,7 @@ Insert generated images at corresponding positions:
|
||||
- Leave one blank line before and after image
|
||||
- Alt text uses concise description in article's language
|
||||
|
||||
### Step 7: Output Summary
|
||||
### Step 8: Output Summary
|
||||
|
||||
```
|
||||
Article Illustration Complete!
|
||||
@@ -244,6 +315,57 @@ Failed:
|
||||
- illustration-zzz.png: [failure reason]
|
||||
```
|
||||
|
||||
## Illustration Modification
|
||||
|
||||
Support for modifying individual illustrations after initial generation.
|
||||
|
||||
### Edit Single Illustration
|
||||
|
||||
Regenerate a specific illustration with modified prompt:
|
||||
|
||||
1. Identify illustration to edit (e.g., `illustration-concept-overview.png`)
|
||||
2. Update prompt in `prompts/illustration-concept-overview.md` if needed
|
||||
3. If content changes significantly, update slug in filename
|
||||
4. Regenerate image
|
||||
5. Update article if image reference changed
|
||||
|
||||
### Add New Illustration
|
||||
|
||||
Add a new illustration to the article:
|
||||
|
||||
1. Identify insertion position in article
|
||||
2. Create new prompt with appropriate slug (e.g., `illustration-new-concept.md`)
|
||||
3. Generate new illustration image
|
||||
4. Update `outline.md` with new illustration entry
|
||||
5. Insert image reference in article at the specified position
|
||||
|
||||
### Delete Illustration
|
||||
|
||||
Remove an illustration from the article:
|
||||
|
||||
1. Identify illustration to delete (e.g., `illustration-concept-overview.png`)
|
||||
2. Remove image file and prompt file
|
||||
3. Remove image reference from article
|
||||
4. Update `outline.md` to remove illustration entry
|
||||
|
||||
### File Naming Convention
|
||||
|
||||
Files use meaningful slugs for better readability:
|
||||
```
|
||||
illustration-[slug].png
|
||||
illustration-[slug].md (in prompts/)
|
||||
```
|
||||
|
||||
Examples:
|
||||
- `illustration-concept-overview.png`
|
||||
- `illustration-workflow-diagram.png`
|
||||
- `illustration-key-benefits.png`
|
||||
|
||||
**Slug rules**:
|
||||
- Derived from illustration purpose/content (kebab-case)
|
||||
- Must be unique within the article
|
||||
- When content changes significantly, update slug accordingly
|
||||
|
||||
## Style Reference Details
|
||||
|
||||
### elegant
|
||||
@@ -325,4 +447,5 @@ Typography: Clean hand-drawn lettering, simple sans-serif labels
|
||||
- Maintain selected style consistency across all illustrations in one article
|
||||
- Image generation typically takes 10-30 seconds per image
|
||||
- Sensitive figures should use cartoon alternatives
|
||||
- Prompt and illustration text language should match article language
|
||||
- Prompts written in user's confirmed language preference
|
||||
- Illustration text (labels, captions) should match article language
|
||||
|
||||
+272
-54
@@ -11,7 +11,6 @@ Create original knowledge comics with multiple visual styles.
|
||||
|
||||
```bash
|
||||
/baoyu-comic posts/turing-story/source.md
|
||||
/baoyu-comic posts/turing-story/source.md --style dramatic --layout cinematic
|
||||
/baoyu-comic # then paste content
|
||||
```
|
||||
|
||||
@@ -19,10 +18,14 @@ Create original knowledge comics with multiple visual styles.
|
||||
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--style` | classic (default), dramatic, warm, tech, sepia, vibrant, ohmsha, realistic |
|
||||
| `--style` | classic (default), dramatic, warm, tech, sepia, vibrant, ohmsha, realistic, or custom description |
|
||||
| `--layout` | standard (default), cinematic, dense, splash, mixed, webtoon |
|
||||
| `--aspect` | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) |
|
||||
| `--lang` | auto (default), zh, en, ja, etc. |
|
||||
|
||||
Style × Layout can be freely combined.
|
||||
Style × Layout × Aspect can be freely combined. Custom styles can be described in natural language.
|
||||
|
||||
**Aspect ratio is consistent across all pages in a comic.**
|
||||
|
||||
## Auto Selection
|
||||
|
||||
@@ -54,109 +57,323 @@ Style × Layout can be freely combined.
|
||||
|
||||
```
|
||||
[target]/
|
||||
├── outline.md
|
||||
├── characters/
|
||||
│ ├── characters.md # Character definitions
|
||||
│ └── characters.png # Character reference sheet
|
||||
├── source.md # Source content (if pasted, not file)
|
||||
├── analysis.md # Deep analysis results (YAML+MD)
|
||||
├── storyboard-chronological.md # Variant A (preserved)
|
||||
├── storyboard-thematic.md # Variant B (preserved)
|
||||
├── storyboard-character.md # Variant C (preserved)
|
||||
├── characters-chronological/ # Variant A chars (preserved)
|
||||
│ ├── characters.md
|
||||
│ └── characters.png
|
||||
├── characters-thematic/ # Variant B chars (preserved)
|
||||
│ ├── characters.md
|
||||
│ └── characters.png
|
||||
├── characters-character/ # Variant C chars (preserved)
|
||||
│ ├── characters.md
|
||||
│ └── characters.png
|
||||
├── storyboard.md # Final selected
|
||||
├── characters/ # Final selected
|
||||
│ ├── characters.md
|
||||
│ └── characters.png
|
||||
├── prompts/
|
||||
│ ├── 00-cover.md
|
||||
│ └── XX-page.md
|
||||
├── 00-cover.png
|
||||
├── XX-page.png
|
||||
│ ├── 00-cover-[slug].md
|
||||
│ └── NN-page-[slug].md
|
||||
├── 00-cover-[slug].png
|
||||
├── NN-page-[slug].png
|
||||
└── {topic-slug}.pdf
|
||||
```
|
||||
|
||||
**Target directory**:
|
||||
- With source path: `[source-dir]/comic/`
|
||||
- Without source: `comic-outputs/YYYY-MM-DD/[topic-slug]/`
|
||||
- With source path: `[source-dir]/[source-name-no-ext]/comic/`
|
||||
- Example: `/posts/turing-story.md` → `/posts/turing-story/comic/`
|
||||
- Without source: `./comic/[topic-slug]/`
|
||||
|
||||
**Directory backup**:
|
||||
- If target directory exists, rename existing to `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
|
||||
1. Read source content
|
||||
2. Select style (from `--style` or auto-detect)
|
||||
3. Select layout (from `--layout` or auto-detect per page)
|
||||
4. Determine page count:
|
||||
Read source content, save it if needed, and perform deep analysis.
|
||||
|
||||
**Actions**:
|
||||
1. **Save source content** (if not already a file):
|
||||
- If user provides a file path: use as-is
|
||||
- If user pastes content: save to `source.md` in target directory
|
||||
2. Read source content
|
||||
3. **Deep analysis** following `references/analysis-framework.md`:
|
||||
- Target audience identification
|
||||
- Value proposition for readers
|
||||
- Core themes and narrative potential
|
||||
- Key figures and their story arcs
|
||||
4. Detect source language
|
||||
5. Determine recommended page count:
|
||||
- Short story: 5-8 pages
|
||||
- Medium complexity: 9-15 pages
|
||||
- Full biography: 16-25 pages
|
||||
6. Analyze content signals for style/layout recommendations
|
||||
7. **Save to `analysis.md`**
|
||||
|
||||
### Step 2: Define Characters
|
||||
**analysis.md Format**:
|
||||
|
||||
**Purpose**: Establish visual consistency across all pages.
|
||||
```yaml
|
||||
---
|
||||
title: "Alan Turing: Father of Computing"
|
||||
topic: Biography
|
||||
time_span: 1912-1954
|
||||
source_language: en
|
||||
user_language: zh
|
||||
aspect_ratio: "3:4"
|
||||
recommended_page_count: 12
|
||||
---
|
||||
|
||||
1. Extract all characters from content (protagonist, supporting, antagonist, narrator)
|
||||
2. Create `characters/characters.md` with visual specs for each character
|
||||
3. Generate `characters/characters.png` (character reference sheet)
|
||||
## Target Audience
|
||||
|
||||
**Reference**: `references/character-template.md` for detailed format and examples.
|
||||
- **Primary**: Tech enthusiasts curious about computing history
|
||||
- **Secondary**: Students learning about scientific breakthroughs
|
||||
- **Tertiary**: General readers interested in biographical stories
|
||||
|
||||
### Step 3: Generate Outline
|
||||
## Value Proposition
|
||||
|
||||
Create `outline.md` with:
|
||||
- Metadata (title, style, layout, page count, character reference path)
|
||||
- Cover design
|
||||
- Each page: layout, panel breakdown, visual prompts
|
||||
What readers will gain:
|
||||
1. Understanding of how modern computing was born
|
||||
2. Emotional connection to a brilliant but tragic figure
|
||||
3. Appreciation for the human cost of innovation
|
||||
|
||||
**Reference**: `references/outline-template.md` for detailed format.
|
||||
## Core Themes
|
||||
|
||||
| Theme | Narrative Potential | Visual Opportunity |
|
||||
|-------|--------------------|--------------------|
|
||||
| Genius vs. Society | High conflict, dramatic arcs | Contrast scenes |
|
||||
| Code-breaking | Mystery, tension | Technical diagrams as art |
|
||||
| Personal tragedy | Emotional depth | Intimate, somber panels |
|
||||
|
||||
## Key Figures & Story Arcs
|
||||
|
||||
### Alan Turing (Protagonist)
|
||||
- **Arc**: Misunderstood genius → War hero → Tragic end
|
||||
- **Visual identity**: Disheveled academic, intense eyes
|
||||
- **Key moments**: Enigma breakthrough, arrest, final days
|
||||
|
||||
### Christopher Morcom (Catalyst)
|
||||
- **Role**: Early friend whose death shaped Turing
|
||||
- **Visual identity**: Youthful, bright
|
||||
- **Key moments**: School friendship, sudden death
|
||||
|
||||
## Content Signals
|
||||
|
||||
- "biography" → classic + mixed
|
||||
- "computing history" → tech + dense
|
||||
- "personal tragedy" → dramatic + splash
|
||||
|
||||
## Recommended Approaches
|
||||
|
||||
1. **Chronological** - follow life timeline (recommended for biography)
|
||||
2. **Thematic** - organize by contributions (good for educational focus)
|
||||
3. **Character-focused** - relationships drive narrative (good for emotional impact)
|
||||
```
|
||||
|
||||
### Step 2: Generate 3 Storyboard Variants
|
||||
|
||||
Create three distinct variants, each combining a narrative approach with a recommended style.
|
||||
|
||||
| Variant | Narrative Approach | Recommended Style | Layout |
|
||||
|---------|-------------------|-------------------|--------|
|
||||
| A | Chronological | sepia | cinematic |
|
||||
| B | Thematic | tech | dense |
|
||||
| C | Character-focused | warm | standard |
|
||||
|
||||
**For each variant**:
|
||||
|
||||
1. **Generate storyboard** (`storyboard-{approach}.md`):
|
||||
- YAML front matter with narrative_approach, recommended_style, recommended_layout, aspect_ratio
|
||||
- Cover design
|
||||
- Each page: layout, panel breakdown, visual prompts
|
||||
- **Written in user's preferred language**
|
||||
- Reference: `references/storyboard-template.md`
|
||||
|
||||
2. **Generate matching characters** (`characters-{approach}/`):
|
||||
- `characters.md` - visual specs matching the recommended style (in user's preferred language)
|
||||
- `characters.png` - character reference sheet
|
||||
- Reference: `references/character-template.md`
|
||||
|
||||
**All variants are preserved after selection for reference.**
|
||||
|
||||
### Step 3: User Confirms All Options
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
|
||||
|
||||
**Determine which questions to ask**:
|
||||
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Storyboard variant | Always (required) |
|
||||
| Visual style | Always (required) |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
| Aspect ratio | Only if user might prefer non-default (e.g., landscape content) |
|
||||
|
||||
**Language handling**:
|
||||
- If source language = user language: Just inform user (e.g., "Comic will be in Chinese")
|
||||
- If different: Ask which language to use
|
||||
|
||||
**All storyboards and prompts are generated in the user's selected/preferred language.**
|
||||
|
||||
**Aspect ratio handling**:
|
||||
- Default: 3:4 (portrait) - standard comic format
|
||||
- Offer 4:3 (landscape) if content suits it (e.g., panoramic scenes, technical diagrams)
|
||||
- Offer 16:9 (widescreen) for cinematic content
|
||||
|
||||
**AskUserQuestion format** (example with all questions):
|
||||
|
||||
```
|
||||
Question 1 (Storyboard): Which storyboard variant?
|
||||
- A: Chronological + sepia (Recommended)
|
||||
- B: Thematic + tech
|
||||
- C: Character-focused + warm
|
||||
- Custom
|
||||
|
||||
Question 2 (Style): Which visual style?
|
||||
- sepia (Recommended from variant)
|
||||
- classic / dramatic / warm / tech / vibrant / ohmsha / realistic
|
||||
- Custom description
|
||||
|
||||
Question 3 (Language) - only if mismatch:
|
||||
- Chinese (source material language)
|
||||
- English (your preference)
|
||||
|
||||
Question 4 (Aspect) - only if relevant:
|
||||
- 3:4 Portrait (Recommended)
|
||||
- 4:3 Landscape
|
||||
- 16:9 Widescreen
|
||||
```
|
||||
|
||||
**After confirmation**:
|
||||
1. Copy selected storyboard → `storyboard.md`
|
||||
2. Copy selected characters → `characters/`
|
||||
3. Update YAML front matter with confirmed style, language, aspect_ratio
|
||||
4. If style differs from variant's recommended: regenerate `characters/characters.png`
|
||||
5. User may edit files directly for fine-tuning
|
||||
|
||||
### Step 4: Generate Images
|
||||
|
||||
For each page (cover + pages):
|
||||
With confirmed storyboard + style + aspect ratio:
|
||||
|
||||
1. Save prompt to `prompts/XX-page.md`
|
||||
2. Call image generation skill with:
|
||||
- Base prompt: `references/base-prompt.md`
|
||||
- Character reference (text or image, depending on skill capability)
|
||||
- Page prompt
|
||||
- Output path
|
||||
**For each page (cover + pages)**:
|
||||
1. Save prompt to `prompts/NN-{cover|page}-[slug].md` (in user's preferred language)
|
||||
2. Generate image using confirmed style and aspect ratio
|
||||
3. Report progress after each generation
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
- Check available image generation skills in the environment
|
||||
- Check available image generation skills
|
||||
- If multiple skills available, ask user preference
|
||||
|
||||
**Character Reference Handling**:
|
||||
- If skill supports reference image: pass `characters/characters.png` as reference image
|
||||
- If skill does NOT support reference image: include `characters/characters.md` content in the prompt
|
||||
- This ensures character visual consistency across all pages
|
||||
- If skill supports reference image: pass `characters/characters.png`
|
||||
- If skill does NOT support reference image: include `characters/characters.md` content in prompt
|
||||
|
||||
**Session Management**:
|
||||
If the image generation skill supports `--sessionId`:
|
||||
1. Generate a unique session ID at the start (e.g., `comic-{topic-slug}-{timestamp}`)
|
||||
2. Use the same session ID for character sheet and all pages
|
||||
3. This ensures visual consistency (character appearance, style) across all generated images
|
||||
|
||||
3. Report progress after each generation
|
||||
If image generation skill supports `--sessionId`:
|
||||
1. Generate unique session ID: `comic-{topic-slug}-{timestamp}`
|
||||
2. Use same session ID for all pages
|
||||
3. Ensures visual consistency across generated images
|
||||
|
||||
### Step 5: Merge to PDF
|
||||
|
||||
After all images are generated, merge them into a PDF file:
|
||||
After all images generated:
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <comic-dir>
|
||||
```
|
||||
|
||||
This creates `{topic-slug}.pdf` in the comic directory with all pages as full-page images.
|
||||
Creates `{topic-slug}.pdf` with all pages as full-page images.
|
||||
|
||||
### Step 6: Completion Report
|
||||
|
||||
```
|
||||
Comic Complete!
|
||||
Title: [title] | Style: [style] | Pages: [count]
|
||||
Title: [title] | Style: [style] | Pages: [count] | Aspect: [ratio] | Language: [lang]
|
||||
Location: [path]
|
||||
✓ analysis.md
|
||||
✓ characters.png
|
||||
✓ 00-cover.png ... XX-page.png
|
||||
✓ 00-cover-[slug].png ... NN-page-[slug].png
|
||||
✓ {topic-slug}.pdf
|
||||
```
|
||||
|
||||
## Page Modification
|
||||
|
||||
Support for modifying individual pages after initial generation.
|
||||
|
||||
### Edit Single Page
|
||||
|
||||
Regenerate a specific page with modified prompt:
|
||||
|
||||
1. Identify page to edit (e.g., `03-page-enigma-machine.png`)
|
||||
2. Update prompt in `prompts/03-page-enigma-machine.md` if needed
|
||||
3. If content changes significantly, update slug in filename
|
||||
4. Regenerate image using same session ID and aspect ratio
|
||||
5. Regenerate PDF
|
||||
|
||||
### Add New Page
|
||||
|
||||
Insert a new page at specified position:
|
||||
|
||||
1. Specify insertion position (e.g., after page 3)
|
||||
2. Create new prompt with appropriate slug (e.g., `04-page-bletchley-park.md`)
|
||||
3. Generate new page image (same aspect ratio)
|
||||
4. **Renumber files**: All subsequent pages increment NN by 1
|
||||
- `04-page-tragedy.png` → `05-page-tragedy.png`
|
||||
- Slugs remain unchanged
|
||||
5. Update `storyboard.md` with new page entry
|
||||
6. Regenerate PDF
|
||||
|
||||
### Delete Page
|
||||
|
||||
Remove a page and renumber:
|
||||
|
||||
1. Identify page to delete (e.g., `03-page-enigma-machine.png`)
|
||||
2. Remove image file and prompt file
|
||||
3. **Renumber files**: All subsequent pages decrement NN by 1
|
||||
- `04-page-tragedy.png` → `03-page-tragedy.png`
|
||||
- Slugs remain unchanged
|
||||
4. Update `storyboard.md` to remove page entry
|
||||
5. Regenerate PDF
|
||||
|
||||
### File Naming Convention
|
||||
|
||||
Files use meaningful slugs for better readability:
|
||||
```
|
||||
NN-cover-[slug].png / NN-page-[slug].png
|
||||
NN-cover-[slug].md / NN-page-[slug].md (in prompts/)
|
||||
```
|
||||
|
||||
Examples:
|
||||
- `00-cover-turing-story.png`
|
||||
- `01-page-early-life.png`
|
||||
- `02-page-cambridge-years.png`
|
||||
- `03-page-enigma-machine.png`
|
||||
|
||||
**Slug rules**:
|
||||
- Derived from page title/content (kebab-case)
|
||||
- Must be unique within the comic
|
||||
- When page content changes significantly, update slug accordingly
|
||||
|
||||
**Renumbering**:
|
||||
- After add/delete, update NN prefix for affected pages
|
||||
- Slug remains unchanged unless content changes
|
||||
- Maintain sequential numbering with no gaps
|
||||
|
||||
## Style-Specific Guidelines
|
||||
|
||||
### Ohmsha Style (`--style ohmsha`)
|
||||
|
||||
Additional requirements for educational manga:
|
||||
- Default characters: Student (大雄), Mentor (哆啦A梦), Antagonist (胖虎)
|
||||
- Custom: `--characters "Student:小明,Mentor:教授"`
|
||||
- **Default: Use Doraemon characters directly** - No need to create new characters
|
||||
- 大雄 (Nobita): Student role, curious learner
|
||||
- 哆啦A梦 (Doraemon): Mentor role, explains concepts with gadgets
|
||||
- 胖虎 (Gian): Antagonist/challenge role, represents obstacles or misconceptions
|
||||
- 静香 (Shizuka): Supporting role, asks clarifying questions
|
||||
- Custom characters only if explicitly requested: `--characters "Student:小明,Mentor:教授"`
|
||||
- Must use visual metaphors (gadgets, action scenes) - NO talking heads
|
||||
- Page titles: narrative style, not "Page X: Topic"
|
||||
|
||||
@@ -165,8 +382,9 @@ Additional requirements for educational manga:
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
- `analysis-framework.md` - Deep content analysis for comic adaptation
|
||||
- `character-template.md` - Character definition format and examples
|
||||
- `outline-template.md` - Outline structure and panel breakdown
|
||||
- `storyboard-template.md` - Storyboard structure and panel breakdown
|
||||
- `ohmsha-guide.md` - Ohmsha manga style specifics
|
||||
- `styles/` - Detailed style definitions
|
||||
- `layouts/` - Detailed layout definitions
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
# Comic Content Analysis Framework
|
||||
|
||||
Deep analysis framework for transforming source content into effective visual storytelling.
|
||||
|
||||
## Purpose
|
||||
|
||||
Before creating a comic, thoroughly analyze the source material to:
|
||||
- Identify the target audience and their needs
|
||||
- Determine what value the comic will deliver
|
||||
- Extract narrative potential for visual storytelling
|
||||
- Plan character arcs and key moments
|
||||
|
||||
## Analysis Dimensions
|
||||
|
||||
### 1. Core Content (Understanding "What")
|
||||
|
||||
**Central Message**
|
||||
- What is the single most important idea readers should take away?
|
||||
- Can you express it in one sentence?
|
||||
|
||||
**Key Concepts**
|
||||
- What are the essential concepts readers must understand?
|
||||
- How should these concepts be visualized?
|
||||
- Which concepts need simplified explanations?
|
||||
|
||||
**Content Structure**
|
||||
- How is the source material organized?
|
||||
- What is the natural narrative arc?
|
||||
- Where are the climax and turning points?
|
||||
|
||||
**Evidence & Examples**
|
||||
- What concrete examples, data, or stories support the main ideas?
|
||||
- Which examples translate well to visual panels?
|
||||
- What can be shown rather than told?
|
||||
|
||||
### 2. Context & Background (Understanding "Why")
|
||||
|
||||
**Source Origin**
|
||||
- Who created this content? What is their perspective?
|
||||
- What was the original purpose?
|
||||
- Is there bias to be aware of?
|
||||
|
||||
**Historical/Cultural Context**
|
||||
- When and where does the story take place?
|
||||
- What background knowledge do readers need?
|
||||
- What period-specific visual elements are required?
|
||||
|
||||
**Underlying Assumptions**
|
||||
- What does the source assume readers already know?
|
||||
- What implicit beliefs or values are present?
|
||||
- Should the comic challenge or reinforce these?
|
||||
|
||||
### 3. Audience Analysis
|
||||
|
||||
**Primary Audience**
|
||||
- Who will read this comic?
|
||||
- What is their existing knowledge level?
|
||||
- What are their interests and motivations?
|
||||
|
||||
**Secondary Audiences**
|
||||
- Who else might benefit from this comic?
|
||||
- How might their needs differ?
|
||||
|
||||
**Reader Questions**
|
||||
- What questions will readers have?
|
||||
- What misconceptions might they bring?
|
||||
- What "aha moments" can we create?
|
||||
|
||||
### 4. Value Proposition
|
||||
|
||||
**Knowledge Value**
|
||||
- What will readers learn?
|
||||
- What new perspectives will they gain?
|
||||
- How will this change their understanding?
|
||||
|
||||
**Emotional Value**
|
||||
- What emotions should readers feel?
|
||||
- What connections will they make with characters?
|
||||
- What will make this memorable?
|
||||
|
||||
**Practical Value**
|
||||
- Can readers apply what they learn?
|
||||
- What actions might this inspire?
|
||||
- What conversations might it spark?
|
||||
|
||||
### 5. Narrative Potential
|
||||
|
||||
**Story Arc Candidates**
|
||||
- What natural narratives exist in the content?
|
||||
- Where is the conflict or tension?
|
||||
- What transformations occur?
|
||||
|
||||
**Character Potential**
|
||||
- Who are the key figures?
|
||||
- What are their motivations and obstacles?
|
||||
- How do they change throughout?
|
||||
|
||||
**Visual Opportunities**
|
||||
- What scenes have strong visual potential?
|
||||
- Where can abstract concepts become concrete images?
|
||||
- What metaphors can be visualized?
|
||||
|
||||
**Dramatic Moments**
|
||||
- What are the breakthrough/revelation moments?
|
||||
- Where are the emotional peaks?
|
||||
- What creates tension and release?
|
||||
|
||||
### 6. Adaptation Considerations
|
||||
|
||||
**What to Keep**
|
||||
- Essential facts and ideas
|
||||
- Key quotes or moments
|
||||
- Core emotional beats
|
||||
|
||||
**What to Simplify**
|
||||
- Complex explanations
|
||||
- Dense technical details
|
||||
- Lengthy descriptions
|
||||
|
||||
**What to Expand**
|
||||
- Brief mentions that deserve more attention
|
||||
- Implied emotions or relationships
|
||||
- Visual details not in source
|
||||
|
||||
**What to Omit**
|
||||
- Tangential information
|
||||
- Redundant examples
|
||||
- Content that doesn't serve the narrative
|
||||
|
||||
## Output Format
|
||||
|
||||
Analysis results should be saved to `analysis.md` with:
|
||||
|
||||
1. **YAML Front Matter**: Metadata (title, topic, time_span, languages, aspect_ratio, page_count)
|
||||
2. **Target Audience**: Primary, secondary, tertiary audiences with their needs
|
||||
3. **Value Proposition**: What readers will gain (knowledge, emotional, practical)
|
||||
4. **Core Themes**: Table with theme, narrative potential, visual opportunity
|
||||
5. **Key Figures & Story Arcs**: Character profiles with arcs, visual identity, key moments
|
||||
6. **Content Signals**: Style and layout recommendations based on content type
|
||||
7. **Recommended Approaches**: Narrative approaches ranked by suitability
|
||||
|
||||
## Analysis Checklist
|
||||
|
||||
Before proceeding to storyboard:
|
||||
|
||||
- [ ] Can I state the core message in one sentence?
|
||||
- [ ] Do I know exactly who will read this comic?
|
||||
- [ ] Have I identified at least 3 ways this comic provides value?
|
||||
- [ ] Are there clear protagonists with compelling arcs?
|
||||
- [ ] Have I found at least 5 visually powerful moments?
|
||||
- [ ] Do I understand what to keep, simplify, expand, and omit?
|
||||
- [ ] Have I identified the emotional peaks and valleys?
|
||||
+18
-11
@@ -1,23 +1,30 @@
|
||||
# Outline Template
|
||||
# Storyboard Template
|
||||
|
||||
## Outline Document Format
|
||||
## Storyboard Document Format
|
||||
|
||||
```markdown
|
||||
# [Comic Title] - Knowledge Comic Outline
|
||||
---
|
||||
title: "[Comic Title]"
|
||||
topic: "[topic description]"
|
||||
time_span: "[e.g., 1912-1954]"
|
||||
narrative_approach: "[chronological/thematic/character-focused]"
|
||||
recommended_style: "[style name]"
|
||||
recommended_layout: "[layout name or varies]"
|
||||
aspect_ratio: "3:4" # 3:4 (portrait), 4:3 (landscape), 16:9 (widescreen)
|
||||
language: "[zh/en/ja/etc.]"
|
||||
page_count: [N]
|
||||
generated: "YYYY-MM-DD HH:mm"
|
||||
---
|
||||
|
||||
# [Comic Title] - Knowledge Comic Storyboard
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Time Span**: [e.g., 1912-1954]
|
||||
**Style**: [selected style]
|
||||
**Default Layout**: [selected layout or "varies"]
|
||||
**Page Count**: Cover + N pages
|
||||
**Character Reference**: characters/characters.png
|
||||
**Generated**: YYYY-MM-DD HH:mm
|
||||
|
||||
---
|
||||
|
||||
## Cover
|
||||
|
||||
**Filename**: 00-cover.png
|
||||
**Filename**: 00-cover-[slug].png
|
||||
**Core Message**: [one-liner]
|
||||
|
||||
**Visual Design**:
|
||||
@@ -33,7 +40,7 @@
|
||||
|
||||
## Page 1 / N
|
||||
|
||||
**Filename**: 01-page.png
|
||||
**Filename**: 01-page-[slug].png
|
||||
**Layout**: [standard/cinematic/dense/splash/mixed]
|
||||
**Narrative Layer**: [Main narrative / Narrator layer / Mixed]
|
||||
**Core Message**: [What this page conveys]
|
||||
@@ -37,7 +37,7 @@ function findComicPages(dir: string): PageInfo[] {
|
||||
}
|
||||
|
||||
const files = readdirSync(dir);
|
||||
const pagePattern = /^(\d+)-(cover|page)\.(png|jpg|jpeg)$/i;
|
||||
const pagePattern = /^(\d+)-(cover|page)(-[\w-]+)?\.(png|jpg|jpeg)$/i;
|
||||
const promptsDir = join(dir, "prompts");
|
||||
const hasPrompts = existsSync(promptsDir);
|
||||
|
||||
@@ -59,7 +59,7 @@ function findComicPages(dir: string): PageInfo[] {
|
||||
|
||||
if (pages.length === 0) {
|
||||
console.error(`No comic pages found in: ${dir}`);
|
||||
console.error("Expected format: 00-cover.png, 01-page.png, etc.");
|
||||
console.error("Expected format: 00-cover-slug.png, 01-page-slug.png, etc.");
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
|
||||
@@ -38,6 +38,8 @@ Generate hand-drawn style cover images for articles with multiple style options.
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Specify cover style (see Style Gallery below) |
|
||||
| `--aspect <ratio>` | Aspect ratio: 2.35:1 (cinematic, default), 16:9 (widescreen), 1:1 (social) |
|
||||
| `--lang <code>` | Output language for title text (en, zh, ja, etc.) |
|
||||
| `--no-title` | Generate cover without title text (visual only) |
|
||||
|
||||
## Style Gallery
|
||||
@@ -74,45 +76,103 @@ When no `--style` is specified, the system analyzes content to select the best s
|
||||
|
||||
### With Article Path
|
||||
|
||||
Save to `imgs/` subdirectory in the same folder as the article:
|
||||
Save to `[source-name-no-ext]/cover-image/` subdirectory in the same folder as the article:
|
||||
|
||||
```
|
||||
path/to/
|
||||
├── article.md
|
||||
└── imgs/
|
||||
└── article/
|
||||
└── cover-image/
|
||||
├── prompts/
|
||||
│ └── cover.md
|
||||
└── cover.png
|
||||
```
|
||||
|
||||
Example: `/posts/ai-future.md` → `/posts/ai-future/cover-image/`
|
||||
|
||||
### Without Article Path (Pasted Content)
|
||||
|
||||
Save to `./cover-image/[topic-slug]/`:
|
||||
|
||||
```
|
||||
cover-image/
|
||||
└── ai-future/
|
||||
├── source.md # Saved pasted content
|
||||
├── prompts/
|
||||
│ └── cover.md
|
||||
└── cover.png
|
||||
```
|
||||
|
||||
### Without Article Path
|
||||
### Directory Backup
|
||||
|
||||
Save to current working directory:
|
||||
|
||||
```
|
||||
./
|
||||
├── cover-prompt.md
|
||||
└── cover.png
|
||||
```
|
||||
If target directory exists, rename existing to `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content
|
||||
|
||||
Extract key information:
|
||||
- **Main topic**: What is the article about?
|
||||
- **Core message**: What's the key takeaway?
|
||||
- **Tone**: Serious, playful, inspiring, educational?
|
||||
- **Keywords**: Identify style-signaling words
|
||||
1. **Save source content** (if not already a file):
|
||||
- If user provides a file path: use as-is
|
||||
- If user pastes content: save to `source.md` in target directory
|
||||
|
||||
### Step 2: Select Style
|
||||
2. **Extract key information**:
|
||||
- **Main topic**: What is the article about?
|
||||
- **Core message**: What's the key takeaway?
|
||||
- **Tone**: Serious, playful, inspiring, educational?
|
||||
- **Keywords**: Identify style-signaling words
|
||||
|
||||
If `--style` specified, use that style. Otherwise:
|
||||
1. Scan content for style signals (see Auto Style Selection table)
|
||||
2. Match signals to most appropriate style
|
||||
3. Default to `elegant` if no clear signals
|
||||
3. **Language detection**:
|
||||
- Detect **source language** from content
|
||||
- Detect **user language** from conversation context
|
||||
- Note if source_language ≠ user_language (will ask in Step 3)
|
||||
|
||||
### Step 3: Generate Cover Concept
|
||||
### Step 2: Determine Options
|
||||
|
||||
1. **Style selection**:
|
||||
- If `--style` specified, use that style
|
||||
- Otherwise, scan content for style signals and auto-select 3 candidates
|
||||
- Default to `elegant` if no clear signals
|
||||
|
||||
2. **Aspect ratio**:
|
||||
- If `--aspect` specified, use that ratio
|
||||
- Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)
|
||||
|
||||
### Step 3: Confirm Options
|
||||
|
||||
**Purpose**: Let user confirm all options in a single step before generation.
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
|
||||
|
||||
**Determine which questions to ask**:
|
||||
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Style | Always (required) |
|
||||
| Aspect ratio | Always (offer common options) |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
|
||||
**Present options** (use AskUserQuestion with all applicable questions):
|
||||
|
||||
**Question 1 (Style)** - always:
|
||||
- Style A (recommended): [style name] - [brief description]
|
||||
- Style B: [style name] - [brief description]
|
||||
- Style C: [style name] - [brief description]
|
||||
- Custom: Provide custom style reference
|
||||
|
||||
**Question 2 (Aspect)** - always:
|
||||
- 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic
|
||||
- 16:9 Widescreen - standard video/presentation
|
||||
- 1:1 Square - social media optimized
|
||||
|
||||
**Question 3 (Language)** - only if source ≠ user language:
|
||||
- [Source language] (matches content)
|
||||
- [User language] (your preference)
|
||||
|
||||
**Language handling**:
|
||||
- If source language = user language: Just inform user (e.g., "Title will be in Chinese")
|
||||
- If different: Ask which language to use for title text
|
||||
|
||||
### Step 4: Generate Cover Concept
|
||||
|
||||
Create a cover image concept based on selected style:
|
||||
|
||||
@@ -126,21 +186,26 @@ Create a cover image concept based on selected style:
|
||||
- 1-2 symbolic elements representing the topic
|
||||
- Metaphors or analogies that fit the style
|
||||
|
||||
### Step 4: Create Prompt File
|
||||
### Step 5: Create Prompt File
|
||||
|
||||
Save prompt to `prompts/cover.md` with confirmed options.
|
||||
|
||||
**All prompts are written in the user's confirmed language preference.**
|
||||
|
||||
**Prompt Format**:
|
||||
|
||||
```markdown
|
||||
Cover theme: [topic in 2-3 words]
|
||||
Style: [selected style name]
|
||||
Aspect ratio: [confirmed aspect ratio]
|
||||
|
||||
[If title included:]
|
||||
Title text: [8 characters or less, in content language]
|
||||
Subtitle: [optional, in content language]
|
||||
Title text: [8 characters or less, in confirmed language]
|
||||
Subtitle: [optional, in confirmed language]
|
||||
|
||||
Visual composition:
|
||||
- Main visual: [description matching style]
|
||||
- Layout: [positioning based on title inclusion]
|
||||
- Layout: [positioning based on title inclusion and aspect ratio]
|
||||
- Decorative elements: [style-appropriate elements]
|
||||
|
||||
Color scheme:
|
||||
@@ -154,23 +219,25 @@ Style notes: [specific style characteristics to emphasize]
|
||||
Note: No title text, pure visual illustration only.
|
||||
```
|
||||
|
||||
### Step 5: Generate Image
|
||||
### Step 6: Generate Image
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
1. Check available image generation skills
|
||||
2. If multiple skills available, ask user to choose
|
||||
|
||||
**Generation**:
|
||||
Call selected image generation skill with prompt file and output path.
|
||||
Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.
|
||||
|
||||
### Step 6: Output Summary
|
||||
### Step 7: Output Summary
|
||||
|
||||
```
|
||||
Cover Image Generated!
|
||||
|
||||
Topic: [topic]
|
||||
Style: [style name]
|
||||
Aspect: [aspect ratio]
|
||||
Title: [cover title] (or "No title - visual only")
|
||||
Language: [confirmed language]
|
||||
Location: [output path]
|
||||
|
||||
Preview the image to verify it matches your expectations.
|
||||
@@ -183,4 +250,5 @@ Preview the image to verify it matches your expectations.
|
||||
- Visual metaphors work better than literal representations
|
||||
- Maintain style consistency throughout the cover
|
||||
- Image generation typically takes 10-30 seconds
|
||||
- Title text language should match content language
|
||||
- Title text uses user's confirmed language preference
|
||||
- Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media
|
||||
|
||||
@@ -10,31 +10,13 @@ Transform content into professional slide deck images with flexible style option
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Auto-select style based on content
|
||||
/baoyu-slide-deck path/to/content.md
|
||||
|
||||
# Specify a style
|
||||
/baoyu-slide-deck path/to/content.md --style sketch-notes
|
||||
/baoyu-slide-deck path/to/content.md --style minimal
|
||||
|
||||
# Target specific audience
|
||||
/baoyu-slide-deck path/to/content.md --audience executives
|
||||
|
||||
# Set output language
|
||||
/baoyu-slide-deck path/to/content.md --lang zh
|
||||
|
||||
# Limit slide count
|
||||
/baoyu-slide-deck path/to/content.md --slides 10
|
||||
|
||||
# Generate outline only (skip image generation)
|
||||
/baoyu-slide-deck path/to/content.md --outline-only
|
||||
|
||||
# Direct content input
|
||||
/baoyu-slide-deck
|
||||
[paste content]
|
||||
|
||||
# Combine options
|
||||
/baoyu-slide-deck path/to/content.md --style storytelling --audience experts --slides 15
|
||||
/baoyu-slide-deck # Then paste content
|
||||
```
|
||||
|
||||
## Script Directory
|
||||
@@ -58,7 +40,7 @@ Transform content into professional slide deck images with flexible style option
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Visual style (see Style Gallery) |
|
||||
| `--audience <type>` | Target audience: beginners, intermediate, experts, executives, general |
|
||||
| `--lang <code>` | Output language for prompts and slides (en, zh, ja, etc.) |
|
||||
| `--lang <code>` | Output language (en, zh, ja, etc.) |
|
||||
| `--slides <number>` | Target slide count |
|
||||
| `--outline-only` | Generate outline only, skip image generation |
|
||||
|
||||
@@ -66,33 +48,31 @@ Transform content into professional slide deck images with flexible style option
|
||||
|
||||
| Style | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
| `sketch-notes` | Hand-drawn sketch notes, warm & friendly | Educational, tutorials, knowledge sharing |
|
||||
| `blueprint` | Technical blueprint, precise & analytical | Architecture, system design, data analysis |
|
||||
| `bold-editorial` | Magazine editorial, high-impact & dynamic | Product launches, marketing, keynotes |
|
||||
| `vector-illustration` | Flat vector with black outlines, retro & cute | Creative proposals, children's content, brand showcases |
|
||||
| `minimal` | Ultra-clean, maximum whitespace | Executive briefings, keynotes, premium brands |
|
||||
| `storytelling` | Cinematic, full-bleed visuals | Narratives, case studies, emotional impact |
|
||||
| `warm` | Soft gradients, wellness aesthetic | Lifestyle, wellness, personal development |
|
||||
| `notion` (Default) | SaaS dashboard, clean data focus | Product demos, SaaS, productivity tools |
|
||||
| `corporate` | Navy/gold, professional business | Investor decks, client proposals, quarterly reports |
|
||||
| `playful` | Vibrant colors, dynamic rounded shapes | Workshops, training, creative pitches |
|
||||
|
||||
Detailed style definitions: `references/styles/<style>.md`
|
||||
| `sketch-notes` | Hand-drawn, warm & friendly | Educational, tutorials |
|
||||
| `blueprint` | Technical, precise & analytical | Architecture, system design |
|
||||
| `bold-editorial` | Magazine, high-impact & dynamic | Product launches, keynotes |
|
||||
| `vector-illustration` | Flat vector, retro & cute | Creative, children's content |
|
||||
| `minimal` | Ultra-clean, maximum whitespace | Executive briefings, premium |
|
||||
| `storytelling` | Cinematic, full-bleed visuals | Narratives, case studies |
|
||||
| `warm` | Soft gradients, wellness aesthetic | Lifestyle, personal development |
|
||||
| `notion` (Default) | SaaS dashboard, clean data focus | Product demos, productivity |
|
||||
| `corporate` | Navy/gold, professional | Investor decks, proposals |
|
||||
| `playful` | Vibrant, dynamic shapes | Workshops, training |
|
||||
|
||||
## Auto Style Selection
|
||||
|
||||
| Content Signals | Selected Style |
|
||||
|-----------------|----------------|
|
||||
| tutorial, learn, education, guide, intro, beginner | `sketch-notes` |
|
||||
| architecture, system, data, analysis, technical, engineering | `blueprint` |
|
||||
| launch, marketing, brand, keynote, impact, showcase | `bold-editorial` |
|
||||
| creative, children, kids, cute, illustration, retro | `vector-illustration` |
|
||||
| architecture, system, data, analysis, technical | `blueprint` |
|
||||
| launch, marketing, brand, keynote, impact | `bold-editorial` |
|
||||
| creative, children, kids, cute, illustration | `vector-illustration` |
|
||||
| executive, minimal, clean, simple, elegant | `minimal` |
|
||||
| story, journey, case study, narrative, emotional | `storytelling` |
|
||||
| wellness, lifestyle, personal, growth, mindfulness | `warm` |
|
||||
| saas, product, dashboard, metrics, productivity | `notion` |
|
||||
| investor, quarterly, business, corporate, proposal, client | `corporate` |
|
||||
| workshop, training, fun, playful, energetic, team | `playful` |
|
||||
| investor, quarterly, business, corporate, proposal | `corporate` |
|
||||
| workshop, training, fun, playful, energetic | `playful` |
|
||||
| Default | `notion` |
|
||||
|
||||
## Design Philosophy
|
||||
@@ -106,214 +86,89 @@ This deck is designed for **reading and sharing**, not live presentation:
|
||||
## File Management
|
||||
|
||||
### With Content Path
|
||||
|
||||
Save to `slide-deck/` subdirectory in the same folder as the content:
|
||||
|
||||
```
|
||||
content-dir/
|
||||
├── source-content.md
|
||||
└── slide-deck/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── 01-slide-cover.md
|
||||
│ ├── 02-slide-{slug}.md
|
||||
│ └── ...
|
||||
├── 01-slide-cover.png
|
||||
├── 02-slide-{slug}.png
|
||||
├── ...
|
||||
├── {topic-slug}.pptx
|
||||
└── {topic-slug}.pdf
|
||||
```
|
||||
|
||||
### Without Content Path
|
||||
|
||||
Save to `slide-outputs/YYYY-MM-DD/[topic-slug]/`:
|
||||
|
||||
```
|
||||
slide-outputs/
|
||||
└── 2026-01-17/
|
||||
└── ai-future-trends/
|
||||
└── source-content/
|
||||
└── slide-deck/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── 01-slide-cover.md
|
||||
│ └── ...
|
||||
├── 01-slide-cover.png
|
||||
├── ...
|
||||
├── ai-future-trends.pptx
|
||||
└── ai-future-trends.pdf
|
||||
│ └── 01-slide-cover.md, 02-slide-{slug}.md, ...
|
||||
├── 01-slide-cover.png, 02-slide-{slug}.png, ...
|
||||
├── {topic-slug}.pptx
|
||||
└── {topic-slug}.pdf
|
||||
```
|
||||
|
||||
Example: `/posts/ai-intro.md` → `/posts/ai-intro/slide-deck/`
|
||||
|
||||
### Without Content Path (Pasted Content)
|
||||
```
|
||||
slide-deck/{topic-slug}/
|
||||
├── source.md
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
├── *.png
|
||||
├── {topic-slug}.pptx
|
||||
└── {topic-slug}.pdf
|
||||
```
|
||||
|
||||
### Directory Backup
|
||||
|
||||
If target directory exists, rename existing to `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content & Determine Settings
|
||||
### Step 1: Analyze Content
|
||||
|
||||
1. Read source material
|
||||
2. **Style selection**:
|
||||
- If `--style` specified, use that style
|
||||
- Otherwise, scan for style signals and auto-select
|
||||
3. **Language detection**:
|
||||
- If `--lang` specified, use that language for all prompts and slide text
|
||||
- Otherwise, detect language from source material
|
||||
- If uncertain (mixed languages or unclear), ask user to confirm
|
||||
4. **Slide count**:
|
||||
- If `--slides` specified, use that count
|
||||
- Otherwise, dynamic based on content structure
|
||||
1. Save source content (if pasted, save as `source.md`)
|
||||
2. Follow `references/analysis-framework.md` for deep content analysis
|
||||
3. Determine style (use `--style` or auto-select from signals)
|
||||
4. Detect languages (source vs. user preference)
|
||||
5. Plan slide count (`--slides` or dynamic)
|
||||
|
||||
### Step 2: Generate Outline with Style Instructions
|
||||
### Step 2: Generate Outline Variants
|
||||
|
||||
Create outline with structured STYLE_INSTRUCTIONS block:
|
||||
1. Generate 3 style variant outlines based on content analysis
|
||||
2. Follow `references/outline-template.md` for structure
|
||||
3. Save as `outline-{style}.md` for each variant
|
||||
|
||||
```markdown
|
||||
# Slide Deck Outline
|
||||
### Step 3: User Confirmation
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Style**: [selected style]
|
||||
**Audience**: [target audience]
|
||||
**Language**: [output language]
|
||||
**Slide Count**: N slides
|
||||
**Generated**: YYYY-MM-DD HH:mm
|
||||
**Single AskUserQuestion with all applicable options:**
|
||||
|
||||
---
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Style variant | Always (3 options + custom) |
|
||||
| Language | Only if source ≠ user language |
|
||||
|
||||
<STYLE_INSTRUCTIONS>
|
||||
Design Aesthetic: [2-3 sentence description from style file]
|
||||
After selection:
|
||||
- Copy selected `outline-{style}.md` to `outline.md`
|
||||
- Regenerate in different language if requested
|
||||
- User may edit `outline.md` for fine-tuning
|
||||
|
||||
Background:
|
||||
Color: [Name] ([Hex])
|
||||
Texture: [description]
|
||||
|
||||
Typography:
|
||||
Primary Font: [detailed description for image generation]
|
||||
Secondary Font: [detailed description for image generation]
|
||||
|
||||
Color Palette:
|
||||
Primary Text: [Name] ([Hex]) - [usage]
|
||||
Background: [Name] ([Hex]) - [usage]
|
||||
Accent 1: [Name] ([Hex]) - [usage]
|
||||
Accent 2: [Name] ([Hex]) - [usage]
|
||||
|
||||
Visual Elements:
|
||||
- [element 1 with rendering guidance]
|
||||
- [element 2 with rendering guidance]
|
||||
- ...
|
||||
|
||||
Style Rules:
|
||||
Do: [guidelines from style file]
|
||||
Don't: [anti-patterns from style file]
|
||||
</STYLE_INSTRUCTIONS>
|
||||
|
||||
---
|
||||
|
||||
## Slide 1 of N
|
||||
|
||||
**Type**: Cover
|
||||
**Filename**: 01-slide-cover.png
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[What this slide achieves in the story arc]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [main title]
|
||||
Sub-headline: [supporting tagline]
|
||||
|
||||
// VISUAL
|
||||
[Detailed visual description - specific elements, composition, mood]
|
||||
|
||||
// LAYOUT
|
||||
[Composition, hierarchy, spatial arrangement]
|
||||
|
||||
---
|
||||
|
||||
## Slide 2 of N
|
||||
|
||||
**Type**: Content
|
||||
**Filename**: 02-slide-{slug}.png
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[What this slide achieves in the story arc]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [main message - narrative, not label]
|
||||
Sub-headline: [supporting context]
|
||||
Body:
|
||||
- [point 1 with specific detail]
|
||||
- [point 2 with specific detail]
|
||||
- [point 3 with specific detail]
|
||||
|
||||
// VISUAL
|
||||
[Detailed visual description]
|
||||
|
||||
// LAYOUT
|
||||
[Composition, hierarchy, spatial arrangement]
|
||||
|
||||
---
|
||||
...
|
||||
|
||||
## Slide N of N
|
||||
|
||||
**Type**: Back Cover
|
||||
**Filename**: {NN}-slide-back-cover.png
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[Meaningful closing - not just "thank you"]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [memorable closing statement or call-to-action]
|
||||
Body: [optional summary points or next steps]
|
||||
|
||||
// VISUAL
|
||||
[Visual that reinforces the core message]
|
||||
|
||||
// LAYOUT
|
||||
[Clean, impactful composition]
|
||||
```
|
||||
|
||||
### Step 3: Save Outline
|
||||
|
||||
Save outline as `outline.md` in the output directory.
|
||||
|
||||
If `--outline-only` is specified, stop here.
|
||||
If `--outline-only`, stop here.
|
||||
|
||||
### Step 4: Generate Prompts
|
||||
|
||||
Create prompt file per slide in `prompts/` directory:
|
||||
|
||||
1. Read `references/base-prompt.md`
|
||||
2. Combine with style-specific instructions from outline
|
||||
3. Add slide-specific content from outline
|
||||
4. Save as `01-slide-cover.md`, `02-slide-{slug}.md`, etc.
|
||||
2. Combine with style instructions from outline
|
||||
3. Add slide-specific content
|
||||
4. Save to `prompts/` directory
|
||||
|
||||
### Step 5: Generate Images
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
1. Check available image generation skills
|
||||
2. If multiple skills available, ask user to choose
|
||||
|
||||
**Session Management**:
|
||||
If the image generation skill supports `--sessionId`:
|
||||
1. Generate a unique session ID at the start (e.g., `slides-{topic-slug}-{timestamp}`)
|
||||
2. Use the same session ID for all slides in the series
|
||||
3. This ensures style consistency across all generated slides
|
||||
|
||||
**Generation Flow**:
|
||||
1. Call selected image generation skill with prompt file, output path, and session ID
|
||||
2. Confirm generation success
|
||||
3. Report progress: "Generated X/N"
|
||||
4. Continue to next
|
||||
1. Select available image generation skill
|
||||
2. Generate session ID: `slides-{topic-slug}-{timestamp}`
|
||||
3. Generate each slide with same session ID
|
||||
4. Report progress: "Generated X/N"
|
||||
|
||||
### Step 6: Merge to PPTX and PDF
|
||||
|
||||
After all images are generated, merge them into PowerPoint and PDF files:
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/merge-to-pptx.ts <slide-deck-dir>
|
||||
npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <slide-deck-dir>
|
||||
```
|
||||
|
||||
This creates:
|
||||
- `{topic-slug}.pptx` - PowerPoint with all images as full-bleed 16:9 slides and prompt content as speaker notes
|
||||
- `{topic-slug}.pdf` - PDF with all images as full-page slides
|
||||
|
||||
### Step 7: Output Summary
|
||||
|
||||
```
|
||||
@@ -321,13 +176,11 @@ Slide Deck Complete!
|
||||
|
||||
Topic: [topic]
|
||||
Style: [style name]
|
||||
Audience: [audience type]
|
||||
Location: [directory path]
|
||||
Slides: N total
|
||||
|
||||
- 01-slide-cover.png ✓ Cover
|
||||
- 02-slide-intro.png ✓ Content
|
||||
- 03-slide-main-point.png ✓ Content
|
||||
- ...
|
||||
- {NN}-slide-back-cover.png ✓ Back Cover
|
||||
|
||||
@@ -336,62 +189,28 @@ PPTX: {topic-slug}.pptx
|
||||
PDF: {topic-slug}.pdf
|
||||
```
|
||||
|
||||
## Content Rules
|
||||
## Slide Modification
|
||||
|
||||
1. **Respect reader attention** -
|
||||
2. **Data traceability** - All statistics must include source attribution
|
||||
3. **Self-contained prompts** - Every detail in the image prompt, no external references
|
||||
4. **No placeholders** - Every element must be fully specified
|
||||
See `references/modification-guide.md` for:
|
||||
- Edit single slide workflow
|
||||
- Add new slide (with renumbering)
|
||||
- Delete slide (with renumbering)
|
||||
- File naming conventions
|
||||
|
||||
## Style Rules
|
||||
## References
|
||||
|
||||
1. **Narrative headlines** - Headlines tell the story, not label the content
|
||||
- Bad: "Key Statistics"
|
||||
- Good: "Usage doubled in 6 months"
|
||||
|
||||
2. **Avoid AI clichés** - No "dive into", "explore", "journey", "let's"
|
||||
|
||||
3. **Meaningful back cover** - Not just "Thank you"
|
||||
- Include call-to-action, key takeaway, or memorable closing
|
||||
|
||||
4. **Consistent visual language** - Same icons, colors, layouts throughout
|
||||
|
||||
## Slide Structure
|
||||
|
||||
1. **Cover (Slide 1)**: Title, visual hook, topic introduction
|
||||
2. **Content (Middle)**: Key points, data, explanations - dynamic count based on content
|
||||
3. **Back Cover (Final)**: Summary, call-to-action, or memorable closing
|
||||
|
||||
## Key Specifications
|
||||
|
||||
- **Aspect Ratio**: 16:9 (landscape)
|
||||
- **Slide Count**: Dynamic based on content
|
||||
- **Required Slides**: Cover + Back Cover minimum
|
||||
- **No slide numbers, footers, or logos**
|
||||
- **Language**: Priority order: `--lang` option → source material language → ask user if uncertain
|
||||
- **Tone**: Direct, confident language (avoid AI-sounding phrases)
|
||||
|
||||
## Style Reference Details
|
||||
|
||||
| Style | Description |
|
||||
|-------|-------------|
|
||||
| `sketch-notes` | Hand-drawn feel, soft brush strokes, warm off-white background, conceptual icons |
|
||||
| `blueprint` | Technical schematics, grid texture, precise lines, engineering blue tones |
|
||||
| `bold-editorial` | High contrast, bold typography, dark backgrounds, magazine-level impact |
|
||||
| `vector-illustration` | Flat vector, black outlines, retro colors, toy model aesthetic |
|
||||
| `minimal` | Maximum whitespace, single accent color, clean sans-serif, zen-like |
|
||||
| `storytelling` | Full-bleed imagery, cinematic compositions, emotional photography |
|
||||
| `warm` | Soft gradients, rounded shapes, wellness palette, approachable |
|
||||
| `notion` | Dashboard aesthetic, clean data viz, SaaS-inspired, productivity focus |
|
||||
| `corporate` | Navy/gold palette, structured layouts, professional iconography, business polish |
|
||||
| `playful` | Vibrant coral/teal/yellow, rounded shapes, dynamic layouts, energetic |
|
||||
|
||||
Full style specifications: `references/styles/<style>.md`
|
||||
| File | Content |
|
||||
|------|---------|
|
||||
| `references/analysis-framework.md` | Deep content analysis for presentations |
|
||||
| `references/outline-template.md` | Outline structure and STYLE_INSTRUCTIONS format |
|
||||
| `references/modification-guide.md` | Edit, add, delete slide workflows |
|
||||
| `references/content-rules.md` | Content and style guidelines |
|
||||
| `references/base-prompt.md` | Base prompt for image generation |
|
||||
| `references/styles/<style>.md` | Full style specifications |
|
||||
|
||||
## Notes
|
||||
|
||||
- Image generation typically takes 10-30 seconds per slide
|
||||
- Image generation: 10-30 seconds per slide
|
||||
- Auto-retry once on generation failure
|
||||
- Use stylized alternatives for sensitive public figures
|
||||
- Output language matches input content language (or `--lang`)
|
||||
- Maintain style consistency across all slides in deck
|
||||
- Maintain style consistency via session ID
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Presentation Analysis Framework
|
||||
|
||||
Deep content analysis for effective slide deck creation.
|
||||
|
||||
## 1. Message Hierarchy
|
||||
|
||||
Identify the core message structure before designing slides.
|
||||
|
||||
### Core Message (One Sentence)
|
||||
- What is the single most important takeaway?
|
||||
- If the audience remembers only one thing, what should it be?
|
||||
- Can you state it in ≤15 words?
|
||||
|
||||
### Supporting Points (3-5 Maximum)
|
||||
- What evidence supports the core message?
|
||||
- What sub-topics must be covered?
|
||||
- Prioritize by audience relevance, not source order
|
||||
|
||||
### Call-to-Action
|
||||
- What should the audience DO after viewing?
|
||||
- Is it clear, specific, and achievable?
|
||||
- Where does it appear (slide position)?
|
||||
|
||||
## 2. Audience Decision Matrix
|
||||
|
||||
| Question | Analysis |
|
||||
|----------|----------|
|
||||
| Who is the primary audience? | [Role, expertise level, relationship to topic] |
|
||||
| What do they currently believe? | [Existing knowledge, assumptions, biases] |
|
||||
| What decision do we want them to make? | [Specific action or conclusion] |
|
||||
| What barriers exist? | [Objections, concerns, missing information] |
|
||||
| What evidence will convince them? | [Data types, credibility sources, emotional hooks] |
|
||||
|
||||
### Audience Adaptation
|
||||
|
||||
| Audience Type | Content Focus | Visual Treatment |
|
||||
|---------------|---------------|------------------|
|
||||
| Executives | Outcomes, ROI, strategic impact | High-level, clean, data highlights |
|
||||
| Technical | Architecture, implementation, specs | Detailed diagrams, code, schematics |
|
||||
| General | Benefits, stories, relatability | Visual metaphors, simple charts |
|
||||
| Investors | Market size, traction, team | Growth charts, milestones, comparisons |
|
||||
| Learners | Step-by-step, examples, practice | Progressive reveals, exercises |
|
||||
|
||||
## 3. Visual Opportunity Map
|
||||
|
||||
Identify which content benefits from visualization.
|
||||
|
||||
### Content-to-Visual Mapping
|
||||
|
||||
| Content Type | Visual Treatment | Example |
|
||||
|--------------|------------------|---------|
|
||||
| Comparisons | Side-by-side, before/after | Feature comparison table |
|
||||
| Processes | Flow diagrams, numbered steps | Workflow illustration |
|
||||
| Hierarchies | Org charts, pyramids, trees | Organizational structure |
|
||||
| Timelines | Horizontal/vertical timelines | Project milestones |
|
||||
| Statistics | Charts, highlighted numbers | Key metrics with context |
|
||||
| Concepts | Icons, metaphors, illustrations | Abstract idea visualization |
|
||||
| Relationships | Venn diagrams, networks | Ecosystem or dependencies |
|
||||
| Lists | Structured grids, icon rows | Feature bullets with icons |
|
||||
|
||||
### Visual Priority
|
||||
|
||||
Rate each piece of content:
|
||||
- **Must Visualize**: Complex data, key differentiators, memorable moments
|
||||
- **Should Visualize**: Supporting evidence, secondary points
|
||||
- **Text Only**: Simple statements, transitions, minor details
|
||||
|
||||
## 4. Presentation Flow
|
||||
|
||||
Structure for impact and retention.
|
||||
|
||||
### Opening (First 2-3 Slides)
|
||||
|
||||
| Element | Purpose |
|
||||
|---------|---------|
|
||||
| Hook | Capture attention (surprising stat, question, story) |
|
||||
| Context | Why this matters now |
|
||||
| Preview | What audience will learn/gain |
|
||||
|
||||
### Middle (Content Slides)
|
||||
|
||||
| Pattern | When to Use |
|
||||
|---------|-------------|
|
||||
| Problem → Solution | Introducing new products/ideas |
|
||||
| Situation → Complication → Resolution | Complex business cases |
|
||||
| What → Why → How | Educational content |
|
||||
| Past → Present → Future | Transformation stories |
|
||||
| Claim → Evidence → Implication | Data-driven arguments |
|
||||
|
||||
### Closing (Final 2-3 Slides)
|
||||
|
||||
| Element | Purpose |
|
||||
|---------|---------|
|
||||
| Synthesis | Tie back to core message |
|
||||
| Call-to-Action | Clear next steps |
|
||||
| Memorable Close | Resonant quote, image, or statement |
|
||||
|
||||
### Transitions
|
||||
|
||||
- Each slide should answer: "What comes next?"
|
||||
- Use narrative connectors between sections
|
||||
- Build logical progression, not topic jumps
|
||||
|
||||
## 5. Content Adaptation
|
||||
|
||||
Decide what to keep, transform, or omit.
|
||||
|
||||
### Keep (High Value)
|
||||
- Core arguments and evidence
|
||||
- Unique insights or data
|
||||
- Audience-relevant examples
|
||||
- Memorable quotes or statistics
|
||||
|
||||
### Simplify (Medium Value)
|
||||
- Technical details → Visual summaries
|
||||
- Long explanations → Bullet hierarchies
|
||||
- Multiple examples → Best 1-2 examples
|
||||
- Background context → Brief framing
|
||||
|
||||
### Visualize (Transform)
|
||||
- Data tables → Charts or highlighted numbers
|
||||
- Process descriptions → Flow diagrams
|
||||
- Comparisons in text → Side-by-side visuals
|
||||
- Abstract concepts → Concrete metaphors
|
||||
|
||||
### Omit (Low Value)
|
||||
- Tangential information
|
||||
- Redundant examples
|
||||
- Excessive caveats
|
||||
- Background the audience already knows
|
||||
|
||||
## 6. Analysis Checklist
|
||||
|
||||
Before outline creation, confirm:
|
||||
|
||||
### Message Clarity
|
||||
- [ ] Core message stated in one sentence
|
||||
- [ ] 3-5 supporting points identified
|
||||
- [ ] Call-to-action defined
|
||||
|
||||
### Audience Fit
|
||||
- [ ] Primary audience identified
|
||||
- [ ] Existing beliefs mapped
|
||||
- [ ] Desired decision clear
|
||||
- [ ] Evidence matches audience needs
|
||||
|
||||
### Visual Planning
|
||||
- [ ] Key visualizations identified
|
||||
- [ ] Chart/diagram types selected
|
||||
- [ ] Visual priority assigned
|
||||
|
||||
### Flow Design
|
||||
- [ ] Opening hook defined
|
||||
- [ ] Middle pattern selected
|
||||
- [ ] Closing approach planned
|
||||
- [ ] Transitions considered
|
||||
|
||||
### Content Decisions
|
||||
- [ ] Keep/simplify/visualize/omit applied
|
||||
- [ ] Source material fully processed
|
||||
- [ ] No important content overlooked
|
||||
@@ -0,0 +1,95 @@
|
||||
# Content & Style Rules
|
||||
|
||||
Guidelines for slide deck content quality and style consistency.
|
||||
|
||||
## Content Rules
|
||||
|
||||
### 1. Respect Reader Attention
|
||||
- Each slide should communicate ONE main idea
|
||||
- Remove redundant information
|
||||
- Prioritize clarity over comprehensiveness
|
||||
|
||||
### 2. Data Traceability
|
||||
- All statistics must include source attribution
|
||||
- Cite sources directly on slides with data
|
||||
- Use specific numbers over vague claims
|
||||
|
||||
### 3. Self-Contained Prompts
|
||||
- Every detail must be in the image prompt
|
||||
- No external references (e.g., "like slide 2")
|
||||
- Include all colors, layouts, and content explicitly
|
||||
|
||||
### 4. No Placeholders
|
||||
- Every element must be fully specified
|
||||
- No "[insert data here]" or "TBD"
|
||||
- All text content finalized before generation
|
||||
|
||||
## Style Rules
|
||||
|
||||
### 1. Narrative Headlines
|
||||
Headlines tell the story, not label the content.
|
||||
|
||||
| Bad | Good |
|
||||
|-----|------|
|
||||
| "Key Statistics" | "Usage doubled in 6 months" |
|
||||
| "Our Solution" | "One platform replaces five tools" |
|
||||
| "Benefits" | "Teams save 10 hours weekly" |
|
||||
|
||||
### 2. Avoid AI Clichés
|
||||
Remove these patterns:
|
||||
- "Dive into", "explore", "journey"
|
||||
- "Let's look at", "let me show you"
|
||||
- "Exciting", "amazing", "revolutionary"
|
||||
- "In conclusion", "to summarize"
|
||||
|
||||
### 3. Meaningful Back Cover
|
||||
Not just "Thank you" or "Questions?"
|
||||
|
||||
Include one of:
|
||||
- Clear call-to-action
|
||||
- Memorable key takeaway
|
||||
- Thought-provoking closing statement
|
||||
- Contact information with purpose
|
||||
|
||||
### 4. Consistent Visual Language
|
||||
Throughout the deck:
|
||||
- Same icon style
|
||||
- Same color usage patterns
|
||||
- Same layout grid system
|
||||
- Same typography hierarchy
|
||||
|
||||
## Slide Structure
|
||||
|
||||
| Position | Type | Purpose |
|
||||
|----------|------|---------|
|
||||
| 1 | Cover | Title, visual hook, topic introduction |
|
||||
| 2 to N-1 | Content | Key points, data, explanations |
|
||||
| N | Back Cover | Summary, call-to-action, memorable close |
|
||||
|
||||
## Key Specifications
|
||||
|
||||
| Specification | Value |
|
||||
|---------------|-------|
|
||||
| Aspect Ratio | 16:9 (landscape) |
|
||||
| Slide Count | Dynamic based on content |
|
||||
| Required Slides | Cover + Back Cover minimum |
|
||||
| Footers | None (no slide numbers, logos) |
|
||||
| Language Priority | `--lang` → source language → ask user |
|
||||
| Tone | Direct, confident (avoid AI phrases) |
|
||||
|
||||
## Style Quick Reference
|
||||
|
||||
| Style | Visual Summary |
|
||||
|-------|----------------|
|
||||
| `sketch-notes` | Hand-drawn, warm off-white, conceptual icons |
|
||||
| `blueprint` | Technical schematics, grid texture, blue tones |
|
||||
| `bold-editorial` | High contrast, dark backgrounds, magazine impact |
|
||||
| `vector-illustration` | Flat vector, black outlines, retro colors |
|
||||
| `minimal` | Maximum whitespace, single accent, zen-like |
|
||||
| `storytelling` | Full-bleed imagery, cinematic, emotional |
|
||||
| `warm` | Soft gradients, rounded shapes, wellness palette |
|
||||
| `notion` | Dashboard aesthetic, clean data viz, SaaS-inspired |
|
||||
| `corporate` | Navy/gold, structured layouts, business polish |
|
||||
| `playful` | Vibrant coral/teal/yellow, dynamic, energetic |
|
||||
|
||||
Full style specifications: `references/styles/<style>.md`
|
||||
@@ -0,0 +1,85 @@
|
||||
# Slide Modification Guide
|
||||
|
||||
Workflows for modifying individual slides after initial generation.
|
||||
|
||||
## Edit Single Slide
|
||||
|
||||
Regenerate a specific slide with modified content:
|
||||
|
||||
1. Identify slide to edit (e.g., `03-slide-key-findings.png`)
|
||||
2. Update prompt in `prompts/03-slide-key-findings.md`
|
||||
3. If content changes significantly, update slug in filename
|
||||
4. Regenerate image using same session ID
|
||||
5. Regenerate PPTX and PDF
|
||||
|
||||
## Add New Slide
|
||||
|
||||
Insert a new slide at specified position:
|
||||
|
||||
1. Specify insertion position (e.g., after slide 3)
|
||||
2. Create new prompt with appropriate slug (e.g., `04-slide-new-section.md`)
|
||||
3. Generate new slide image
|
||||
4. **Renumber files**: All subsequent slides increment NN by 1
|
||||
- `04-slide-conclusion.png` → `05-slide-conclusion.png`
|
||||
- Slugs remain unchanged
|
||||
5. Update `outline.md` with new slide entry
|
||||
6. Regenerate PPTX and PDF
|
||||
|
||||
## Delete Slide
|
||||
|
||||
Remove a slide and renumber:
|
||||
|
||||
1. Identify slide to delete (e.g., `03-slide-key-findings.png`)
|
||||
2. Remove image file and prompt file
|
||||
3. **Renumber files**: All subsequent slides decrement NN by 1
|
||||
- `04-slide-conclusion.png` → `03-slide-conclusion.png`
|
||||
- Slugs remain unchanged
|
||||
4. Update `outline.md` to remove slide entry
|
||||
5. Regenerate PPTX and PDF
|
||||
|
||||
## File Naming Convention
|
||||
|
||||
Files use meaningful slugs for better readability:
|
||||
|
||||
```
|
||||
NN-slide-[slug].png
|
||||
NN-slide-[slug].md (in prompts/)
|
||||
```
|
||||
|
||||
Examples:
|
||||
- `01-slide-cover.png`
|
||||
- `02-slide-problem-statement.png`
|
||||
- `03-slide-key-findings.png`
|
||||
- `04-slide-back-cover.png`
|
||||
|
||||
## Slug Rules
|
||||
|
||||
| Rule | Description |
|
||||
|------|-------------|
|
||||
| Format | Kebab-case (lowercase, hyphens) |
|
||||
| Source | Derived from slide title/content |
|
||||
| Uniqueness | Must be unique within the deck |
|
||||
| Updates | Change slug when content changes significantly |
|
||||
|
||||
## Renumbering Rules
|
||||
|
||||
| Scenario | Action |
|
||||
|----------|--------|
|
||||
| Add slide | Increment NN for all subsequent slides |
|
||||
| Delete slide | Decrement NN for all subsequent slides |
|
||||
| Reorder slides | Update NN to match new positions |
|
||||
| Edit slide | NN unchanged, update slug if needed |
|
||||
|
||||
**Important**: Slugs remain unchanged during renumbering. Only the NN prefix changes.
|
||||
|
||||
## Post-Modification Checklist
|
||||
|
||||
After any modification:
|
||||
|
||||
- [ ] Image file renamed/created correctly
|
||||
- [ ] Prompt file renamed/created correctly
|
||||
- [ ] Subsequent files renumbered (if add/delete)
|
||||
- [ ] `outline.md` updated to reflect changes
|
||||
- [ ] PPTX regenerated
|
||||
- [ ] PDF regenerated
|
||||
- [ ] Slide count in outline header updated
|
||||
@@ -0,0 +1,164 @@
|
||||
# Outline Template
|
||||
|
||||
Standard structure for slide deck outlines with style instructions.
|
||||
|
||||
## Outline Format
|
||||
|
||||
```markdown
|
||||
# Slide Deck Outline
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Style**: [selected style]
|
||||
**Audience**: [target audience]
|
||||
**Language**: [output language]
|
||||
**Slide Count**: N slides
|
||||
**Generated**: YYYY-MM-DD HH:mm
|
||||
|
||||
---
|
||||
|
||||
<STYLE_INSTRUCTIONS>
|
||||
Design Aesthetic: [2-3 sentence description from style file]
|
||||
|
||||
Background:
|
||||
Color: [Name] ([Hex])
|
||||
Texture: [description]
|
||||
|
||||
Typography:
|
||||
Primary Font: [detailed description for image generation]
|
||||
Secondary Font: [detailed description for image generation]
|
||||
|
||||
Color Palette:
|
||||
Primary Text: [Name] ([Hex]) - [usage]
|
||||
Background: [Name] ([Hex]) - [usage]
|
||||
Accent 1: [Name] ([Hex]) - [usage]
|
||||
Accent 2: [Name] ([Hex]) - [usage]
|
||||
|
||||
Visual Elements:
|
||||
- [element 1 with rendering guidance]
|
||||
- [element 2 with rendering guidance]
|
||||
- ...
|
||||
|
||||
Style Rules:
|
||||
Do: [guidelines from style file]
|
||||
Don't: [anti-patterns from style file]
|
||||
</STYLE_INSTRUCTIONS>
|
||||
|
||||
---
|
||||
|
||||
[Slide entries follow...]
|
||||
```
|
||||
|
||||
## Cover Slide Template
|
||||
|
||||
```markdown
|
||||
## Slide 1 of N
|
||||
|
||||
**Type**: Cover
|
||||
**Filename**: 01-slide-cover.png
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[What this slide achieves in the story arc]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [main title]
|
||||
Sub-headline: [supporting tagline]
|
||||
|
||||
// VISUAL
|
||||
[Detailed visual description - specific elements, composition, mood]
|
||||
|
||||
// LAYOUT
|
||||
[Composition, hierarchy, spatial arrangement]
|
||||
```
|
||||
|
||||
## Content Slide Template
|
||||
|
||||
```markdown
|
||||
## Slide X of N
|
||||
|
||||
**Type**: Content
|
||||
**Filename**: {NN}-slide-{slug}.png
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[What this slide achieves in the story arc]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [main message - narrative, not label]
|
||||
Sub-headline: [supporting context]
|
||||
Body:
|
||||
- [point 1 with specific detail]
|
||||
- [point 2 with specific detail]
|
||||
- [point 3 with specific detail]
|
||||
|
||||
// VISUAL
|
||||
[Detailed visual description]
|
||||
|
||||
// LAYOUT
|
||||
[Composition, hierarchy, spatial arrangement]
|
||||
```
|
||||
|
||||
## Back Cover Slide Template
|
||||
|
||||
```markdown
|
||||
## Slide N of N
|
||||
|
||||
**Type**: Back Cover
|
||||
**Filename**: {NN}-slide-back-cover.png
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[Meaningful closing - not just "thank you"]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [memorable closing statement or call-to-action]
|
||||
Body: [optional summary points or next steps]
|
||||
|
||||
// VISUAL
|
||||
[Visual that reinforces the core message]
|
||||
|
||||
// LAYOUT
|
||||
[Clean, impactful composition]
|
||||
```
|
||||
|
||||
## STYLE_INSTRUCTIONS Block
|
||||
|
||||
The `<STYLE_INSTRUCTIONS>` block contains all style-specific guidance for image generation:
|
||||
|
||||
| Section | Content |
|
||||
|---------|---------|
|
||||
| Design Aesthetic | Overall visual direction from style file |
|
||||
| Background | Base color and texture details |
|
||||
| Typography | Font descriptions for Gemini (no font names, describe appearance) |
|
||||
| Color Palette | Named colors with hex codes and usage guidance |
|
||||
| Visual Elements | Specific graphic elements with rendering instructions |
|
||||
| Style Rules | Do/Don't guidelines from style file |
|
||||
|
||||
**Important**: Typography descriptions must describe the visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names.
|
||||
|
||||
## Section Dividers
|
||||
|
||||
Use `---` (horizontal rule) between:
|
||||
- Header metadata and STYLE_INSTRUCTIONS
|
||||
- STYLE_INSTRUCTIONS and first slide
|
||||
- Each slide entry
|
||||
|
||||
## Slide Numbering
|
||||
|
||||
- Cover is always Slide 1
|
||||
- Content slides use sequential numbers
|
||||
- Back Cover is always final slide (N)
|
||||
- Filename prefix matches slide position: `01-`, `02-`, etc.
|
||||
|
||||
## Filename Slugs
|
||||
|
||||
Generate meaningful slugs from slide content:
|
||||
|
||||
| Slide Type | Slug Pattern | Example |
|
||||
|------------|--------------|---------|
|
||||
| Cover | `cover` | `01-slide-cover.png` |
|
||||
| Content | `{topic-slug}` | `02-slide-problem-statement.png` |
|
||||
| Back Cover | `back-cover` | `10-slide-back-cover.png` |
|
||||
|
||||
Slug rules:
|
||||
- Kebab-case (lowercase, hyphens)
|
||||
- Derived from headline or main topic
|
||||
- Maximum 30 characters
|
||||
- Unique within deck
|
||||
+153
-173
@@ -76,202 +76,148 @@ Detailed style definitions: `references/styles/<style>.md`
|
||||
|
||||
Detailed layout definitions: `references/layouts/<layout>.md`
|
||||
|
||||
## Auto Style Selection
|
||||
## Auto Selection
|
||||
|
||||
When no `--style` is specified, analyze content to select:
|
||||
| Content Signals | Style | Layout |
|
||||
|-----------------|-------|--------|
|
||||
| Beauty, fashion, cute, girl, pink | `cute` | sparse/balanced |
|
||||
| Health, nature, clean, fresh, organic | `fresh` | balanced/flow |
|
||||
| Tech, AI, code, digital, app, tool | `tech` | dense/list |
|
||||
| Life, story, emotion, feeling, warm | `warm` | balanced |
|
||||
| Warning, important, must, critical | `bold` | list/comparison |
|
||||
| Professional, business, elegant, simple | `minimal` | sparse/balanced |
|
||||
| Classic, vintage, old, traditional | `retro` | balanced |
|
||||
| Fun, exciting, wow, amazing | `pop` | sparse/list |
|
||||
| Knowledge, concept, productivity, SaaS | `notion` | dense/list |
|
||||
|
||||
| Content Signals | Selected Style |
|
||||
|----------------|----------------|
|
||||
| Beauty, fashion, cute, girl, pink | `cute` |
|
||||
| Health, nature, clean, fresh, organic | `fresh` |
|
||||
| Tech, AI, code, digital, app, tool | `tech` |
|
||||
| Life, story, emotion, feeling, warm | `warm` |
|
||||
| Warning, important, must, critical | `bold` |
|
||||
| Professional, business, elegant, simple | `minimal` |
|
||||
| Classic, vintage, old, traditional | `retro` |
|
||||
| Fun, exciting, wow, amazing | `pop` |
|
||||
| Knowledge, concept, productivity, SaaS, notion | `notion` |
|
||||
|
||||
## Auto Layout Selection
|
||||
|
||||
When no `--layout` is specified, analyze content structure to select:
|
||||
|
||||
| Content Signals | Selected Layout |
|
||||
|----------------|-----------------|
|
||||
| Single quote, one key point, cover | `sparse` |
|
||||
| 3-4 points, explanation, tutorial | `balanced` |
|
||||
| 5+ points, summary, cheat sheet, 干货 | `dense` |
|
||||
| Numbered items, top N, checklist, steps | `list` |
|
||||
| vs, compare, before/after, pros/cons | `comparison` |
|
||||
| Process, flow, timeline, steps with order | `flow` |
|
||||
|
||||
**Layout by Position**:
|
||||
| Position | Recommended Layout |
|
||||
|----------|-------------------|
|
||||
| Cover | `sparse` |
|
||||
| Content | `balanced` or content-appropriate |
|
||||
| Ending | `sparse` or `balanced` |
|
||||
|
||||
## File Management
|
||||
|
||||
### With Article Path
|
||||
|
||||
Save to `xhs-images/` subdirectory in the same folder as the article:
|
||||
## File Structure
|
||||
|
||||
```
|
||||
posts/ai-future/
|
||||
├── article.md
|
||||
└── xhs-images/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── 01-cover.md
|
||||
│ ├── 02-content-1.md
|
||||
│ └── ...
|
||||
├── 01-cover.png
|
||||
├── 02-content-1.png
|
||||
└── 03-ending.png
|
||||
[target]/
|
||||
├── source.md # Source content (if pasted)
|
||||
├── analysis.md # Deep analysis results
|
||||
├── outline-style-[slug].md # Variant A (e.g., outline-style-tech.md)
|
||||
├── outline-style-[slug].md # Variant B (e.g., outline-style-notion.md)
|
||||
├── outline-style-[slug].md # Variant C (e.g., outline-style-minimal.md)
|
||||
├── outline.md # Final selected
|
||||
├── prompts/
|
||||
│ ├── 01-cover-[slug].md
|
||||
│ ├── 02-content-[slug].md
|
||||
│ └── ...
|
||||
├── 01-cover-[slug].png
|
||||
├── 02-content-[slug].png
|
||||
└── NN-ending-[slug].png
|
||||
```
|
||||
|
||||
### Without Article Path
|
||||
**Target directory**:
|
||||
- With source path: `[source-dir]/[source-name-no-ext]/xhs-images/`
|
||||
- Example: `/tests-data/article.md` → `/tests-data/article/xhs-images/`
|
||||
- Without source: `./xhs-images/[topic-slug]/`
|
||||
|
||||
Save to `xhs-outputs/YYYY-MM-DD/[topic-slug]/`:
|
||||
|
||||
```
|
||||
xhs-outputs/
|
||||
└── 2026-01-13/
|
||||
└── ai-agent-guide/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── 01-cover.md
|
||||
│ └── ...
|
||||
├── 01-cover.png
|
||||
└── 02-ending.png
|
||||
```
|
||||
**Directory backup**:
|
||||
- If target directory exists, rename existing to `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content & Select Style/Layout
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
|
||||
1. Read content
|
||||
2. If `--style` specified, use that style; otherwise auto-select
|
||||
3. If `--layout` specified, use that layout; otherwise auto-select per image
|
||||
4. Determine image count based on content complexity:
|
||||
Read source content, save it if needed, and perform deep analysis.
|
||||
|
||||
| Content Type | Image Count |
|
||||
|-------------|-------------|
|
||||
| Simple opinion / single topic | 2-3 |
|
||||
| Medium complexity / tutorial | 4-6 |
|
||||
| Deep dive / multi-dimensional | 7-10 |
|
||||
**Actions**:
|
||||
1. **Save source content** (if not already a file):
|
||||
- If user provides a file path: use as-is
|
||||
- If user pastes content: save to `source.md` in target directory
|
||||
2. Read source content
|
||||
3. **Deep analysis** following `references/analysis-framework.md`:
|
||||
- Content type classification (种草/干货/测评/教程/避坑...)
|
||||
- Hook analysis (爆款标题潜力)
|
||||
- Target audience identification
|
||||
- Engagement potential (收藏/分享/评论)
|
||||
- Visual opportunity mapping
|
||||
- Swipe flow design
|
||||
4. Detect source language
|
||||
5. Determine recommended image count (2-10)
|
||||
6. Select 3 style+layout combinations
|
||||
7. **Save to `analysis.md`**
|
||||
|
||||
**Note**: Layout can vary per image in a series. Cover typically uses `sparse`, content pages use `balanced`/`dense`/`list` as appropriate.
|
||||
### Step 2: Generate 3 Outline Variants
|
||||
|
||||
### Step 2: Generate Outline
|
||||
Based on analysis, create three distinct style variants.
|
||||
|
||||
Plan for each image with style and layout specifications:
|
||||
**For each variant**:
|
||||
1. **Generate outline** (`outline-style-[slug].md`):
|
||||
- YAML front matter with style, layout, image_count
|
||||
- Cover design with hook
|
||||
- Each image: layout, core message, text content, visual concept
|
||||
- **Written in user's preferred language**
|
||||
- Reference: `references/outline-template.md`
|
||||
|
||||
```markdown
|
||||
# Xiaohongshu Infographic Series Outline
|
||||
| Variant | Selection Logic | Example Filename |
|
||||
|---------|-----------------|------------------|
|
||||
| A | Primary recommendation | `outline-style-tech.md` |
|
||||
| B | Alternative style | `outline-style-notion.md` |
|
||||
| C | Different audience/mood | `outline-style-minimal.md` |
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Style**: [selected style]
|
||||
**Default Layout**: [selected layout or "varies"]
|
||||
**Image Count**: N
|
||||
**Generated**: YYYY-MM-DD HH:mm
|
||||
**All variants are preserved after selection for reference.**
|
||||
|
||||
---
|
||||
### Step 3: User Confirms All Options
|
||||
|
||||
## Image 1 of N
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
|
||||
|
||||
**Position**: Cover
|
||||
**Layout**: sparse
|
||||
**Core Message**: [one-liner]
|
||||
**Filename**: 01-cover.png
|
||||
**Determine which questions to ask**:
|
||||
|
||||
**Text Content**:
|
||||
- Title: xxx
|
||||
- Subtitle: xxx
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Style variant | Always (required) |
|
||||
| Default layout | Only if user might want to override |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
|
||||
**Visual Concept**: [style + layout appropriate description]
|
||||
**Language handling**:
|
||||
- If source language = user language: Just inform user (e.g., "Images will be in Chinese")
|
||||
- If different: Ask which language to use
|
||||
|
||||
---
|
||||
**AskUserQuestion format**:
|
||||
|
||||
## Image 2 of N
|
||||
```
|
||||
Question 1 (Style): Which style variant?
|
||||
- A: tech + dense (Recommended) - 专业科技感,适合干货
|
||||
- B: notion + list - 清爽知识卡片
|
||||
- C: minimal + balanced - 简约高端风格
|
||||
- Custom: 自定义风格描述
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: [balanced/dense/list/comparison/flow]
|
||||
**Core Message**: [one-liner]
|
||||
**Filename**: 02-xxx.png
|
||||
Question 2 (Layout) - only if relevant:
|
||||
- Keep variant default (Recommended)
|
||||
- sparse / balanced / dense / list / comparison / flow
|
||||
|
||||
**Text Content**:
|
||||
- Title: xxx
|
||||
- Points: [list based on layout density]
|
||||
|
||||
**Visual Concept**: [description matching style + layout]
|
||||
|
||||
---
|
||||
...
|
||||
Question 3 (Language) - only if mismatch:
|
||||
- 中文 (匹配原文)
|
||||
- English (your preference)
|
||||
```
|
||||
|
||||
### Step 3: Save Outline
|
||||
**After confirmation**:
|
||||
1. Copy selected `outline-style-[slug].md` → `outline.md`
|
||||
2. Update YAML front matter with confirmed options
|
||||
3. If custom style: regenerate outline with that style
|
||||
4. User may edit `outline.md` directly for fine-tuning
|
||||
|
||||
Save outline as `outline.md`.
|
||||
### Step 4: Generate Images
|
||||
|
||||
### Step 4: Generate Images One by One
|
||||
With confirmed outline + style + layout:
|
||||
|
||||
For each image, create a prompt file with style and layout specifications.
|
||||
|
||||
**Prompt Format**:
|
||||
|
||||
```markdown
|
||||
Infographic theme: [topic]
|
||||
Style: [style name]
|
||||
Layout: [layout name]
|
||||
Position: [cover/content/ending]
|
||||
|
||||
Visual composition:
|
||||
- Main visual: [style-appropriate description]
|
||||
- Arrangement: [layout-specific structure]
|
||||
- Decorative elements: [style-specific decorations]
|
||||
|
||||
Color scheme:
|
||||
- Primary: [style primary color]
|
||||
- Background: [style background color]
|
||||
- Accent: [style accent color]
|
||||
|
||||
Text content:
|
||||
- Title: 「xxx」(large, prominent)
|
||||
- Key points: [based on layout density]
|
||||
|
||||
Layout instructions: [layout-specific guidance]
|
||||
Style notes: [style-specific characteristics]
|
||||
```
|
||||
|
||||
**Layout-Specific Instructions**:
|
||||
|
||||
| Layout | Arrangement Instructions |
|
||||
|--------|-------------------------|
|
||||
| `sparse` | Single focal point centered, 1-2 text elements, maximum breathing room |
|
||||
| `balanced` | Title at top, 3-4 points in clear sections, moderate spacing |
|
||||
| `dense` | Grid or multi-section layout, 5-8 points, compact but organized |
|
||||
| `list` | Vertical numbered/bulleted list, consistent item spacing, clear hierarchy |
|
||||
| `comparison` | Two-column split, clear divider, mirrored structure left/right |
|
||||
| `flow` | Horizontal or vertical flow with arrows, connected nodes/steps |
|
||||
**For each image (cover + content + ending)**:
|
||||
1. Save prompt to `prompts/NN-{type}-[slug].md` (in user's preferred language)
|
||||
2. Generate image using confirmed style and layout
|
||||
3. Report progress after each generation
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
1. Check available image generation skills
|
||||
2. If multiple skills available, ask user to choose
|
||||
- Check available image generation skills
|
||||
- If multiple skills available, ask user preference
|
||||
|
||||
**Session Management**:
|
||||
If the image generation skill supports `--sessionId`:
|
||||
1. Generate a unique session ID at the start (e.g., `xhs-{topic-slug}-{timestamp}`)
|
||||
2. Use the same session ID for all images in the series
|
||||
3. This ensures style consistency across all generated images
|
||||
|
||||
**Generation Flow**:
|
||||
1. Call selected image generation skill with prompt file, output path, and session ID
|
||||
2. Confirm generation success
|
||||
3. Report progress: "Generated X/N"
|
||||
4. Continue to next
|
||||
If image generation skill supports `--sessionId`:
|
||||
1. Generate unique session ID: `xhs-{topic-slug}-{timestamp}`
|
||||
2. Use same session ID for all images
|
||||
3. Ensures visual consistency across generated images
|
||||
|
||||
### Step 5: Completion Report
|
||||
|
||||
@@ -284,21 +230,48 @@ Layout: [layout name or "varies"]
|
||||
Location: [directory path]
|
||||
Images: N total
|
||||
|
||||
- 01-cover.png ✓ Cover (sparse)
|
||||
- 02-content-1.png ✓ Content (balanced)
|
||||
- 03-content-2.png ✓ Content (dense)
|
||||
- 04-ending.png ✓ Ending (sparse)
|
||||
✓ analysis.md
|
||||
✓ outline-style-tech.md
|
||||
✓ outline-style-notion.md
|
||||
✓ outline-style-minimal.md
|
||||
✓ outline.md (selected: tech + dense)
|
||||
|
||||
Outline: outline.md
|
||||
Files:
|
||||
- 01-cover-[slug].png ✓ Cover (sparse)
|
||||
- 02-content-[slug].png ✓ Content (balanced)
|
||||
- 03-content-[slug].png ✓ Content (dense)
|
||||
- 04-ending-[slug].png ✓ Ending (sparse)
|
||||
```
|
||||
|
||||
## Image Modification
|
||||
|
||||
### Edit Single Image
|
||||
|
||||
1. Identify image to edit (e.g., `03-content-chatgpt.png`)
|
||||
2. Update prompt in `prompts/03-content-chatgpt.md` if needed
|
||||
3. Regenerate image using same session ID
|
||||
|
||||
### Add New Image
|
||||
|
||||
1. Specify insertion position (e.g., after image 3)
|
||||
2. Create new prompt with appropriate slug
|
||||
3. Generate new image
|
||||
4. **Renumber files**: All subsequent images increment NN by 1
|
||||
5. Update `outline.md` with new image entry
|
||||
|
||||
### Delete Image
|
||||
|
||||
1. Remove image file and prompt file
|
||||
2. **Renumber files**: All subsequent images decrement NN by 1
|
||||
3. Update `outline.md` to remove image entry
|
||||
|
||||
## Content Breakdown Principles
|
||||
|
||||
1. **Cover (Image 1)**: Strong visual impact, core title, attention hook → `sparse` layout
|
||||
2. **Content (Middle)**: Core points per image, density varies by content → `balanced`/`dense`/`list`/`comparison`/`flow`
|
||||
3. **Ending (Last)**: Summary / call-to-action / memorable quote → `sparse` or `balanced`
|
||||
1. **Cover (Image 1)**: Hook + visual impact → `sparse` layout
|
||||
2. **Content (Middle)**: Core value per image → `balanced`/`dense`/`list`/`comparison`/`flow`
|
||||
3. **Ending (Last)**: CTA / summary → `sparse` or `balanced`
|
||||
|
||||
**Style × Layout Matrix** (recommended combinations):
|
||||
**Style × Layout Matrix** (✓✓ = highly recommended, ✓ = works well):
|
||||
|
||||
| | sparse | balanced | dense | list | comparison | flow |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
@@ -312,12 +285,19 @@ Outline: outline.md
|
||||
| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
|
||||
|
||||
✓✓ = highly recommended, ✓ = works well
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
- `analysis-framework.md` - XHS-specific content analysis
|
||||
- `outline-template.md` - Outline format and examples
|
||||
- `styles/<style>.md` - Detailed style definitions
|
||||
- `layouts/<layout>.md` - Detailed layout definitions
|
||||
- `base-prompt.md` - Base prompt template
|
||||
|
||||
## Notes
|
||||
|
||||
- Image generation typically takes 10-30 seconds per image
|
||||
- Auto-retry once on generation failure
|
||||
- Use cartoon alternatives for sensitive public figures
|
||||
- Output language matches input content language
|
||||
- Maintain selected style consistency across all images in series
|
||||
- All prompts and text use confirmed language preference
|
||||
- Maintain style consistency across all images in series
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
# Xiaohongshu Content Analysis Framework
|
||||
|
||||
Deep analysis framework tailored for Xiaohongshu's unique engagement patterns.
|
||||
|
||||
## Purpose
|
||||
|
||||
Before creating infographics, thoroughly analyze the source material to:
|
||||
- Maximize hook power and swipe motivation
|
||||
- Identify save-worthy and share-worthy elements
|
||||
- Plan the visual narrative arc
|
||||
- Match content to optimal style/layout
|
||||
|
||||
## Platform Characteristics
|
||||
|
||||
Unlike other platforms, Xiaohongshu content must prioritize:
|
||||
- **Hook Power**: First image decides 90% of engagement
|
||||
- **Swipe Motivation**: Each image must compel users to continue
|
||||
- **Save Value**: Content worth bookmarking for later
|
||||
- **Share Triggers**: Emotional resonance that drives sharing
|
||||
|
||||
## Analysis Dimensions
|
||||
|
||||
### 1. Content Type Classification
|
||||
|
||||
| Type | Characteristics | Best Style | Best Layout |
|
||||
|------|----------------|------------|-------------|
|
||||
| 种草/安利 | Product recommendation, benefits focus | cute/fresh | balanced/list |
|
||||
| 干货分享 | Knowledge, tips, how-to | notion/tech | dense/list |
|
||||
| 个人故事 | Personal experience, emotional | warm | balanced |
|
||||
| 测评对比 | Review, comparison, pros/cons | tech/bold | comparison |
|
||||
| 教程步骤 | Step-by-step guide | fresh/notion | flow/list |
|
||||
| 避坑指南 | Warnings, mistakes to avoid | bold | list/comparison |
|
||||
| 清单合集 | Collections, recommendations | cute/minimal | list/dense |
|
||||
|
||||
### 2. Hook Analysis (爆款标题潜力)
|
||||
|
||||
Evaluate title/hook potential using these patterns:
|
||||
|
||||
**Hook Types**:
|
||||
- **数字钩子**: "5个方法", "3分钟学会", "99%的人不知道"
|
||||
- **痛点钩子**: "踩过的坑", "后悔没早知道", "别再..."
|
||||
- **好奇钩子**: "原来...", "竟然...", "没想到..."
|
||||
- **利益钩子**: "省钱", "变美", "效率翻倍"
|
||||
- **身份钩子**: "打工人必看", "学生党", "新手妈妈"
|
||||
|
||||
**Rating Scale**:
|
||||
- ⭐⭐⭐⭐⭐ (5/5): Multiple strong hooks combined
|
||||
- ⭐⭐⭐⭐ (4/5): Clear hook with room for enhancement
|
||||
- ⭐⭐⭐ (3/5): Basic hook, needs strengthening
|
||||
- ⭐⭐ (2/5): Weak hook, requires significant improvement
|
||||
- ⭐ (1/5): No clear hook
|
||||
|
||||
### 3. Target Audience (用户画像)
|
||||
|
||||
| Audience | Interests | Preferred Style | Content Focus |
|
||||
|----------|-----------|-----------------|---------------|
|
||||
| 学生党 | 省钱、学习、校园 | cute/fresh | 平价、教程、学习方法 |
|
||||
| 打工人 | 效率、职场、减压 | minimal/tech | 工具、技巧、摸鱼 |
|
||||
| 宝妈 | 育儿、家居、省心 | warm/fresh | 实用、安全、经验 |
|
||||
| 精致女孩 | 美妆、穿搭、仪式感 | cute/retro | 好看、氛围、品质 |
|
||||
| 技术宅 | 工具、效率、极客 | tech/notion | 深度、专业、新奇 |
|
||||
| 美食爱好者 | 探店、食谱、测评 | warm/pop | 好吃、简单、颜值 |
|
||||
| 旅行达人 | 攻略、打卡、小众 | fresh/retro | 省钱、避坑、拍照 |
|
||||
|
||||
### 4. Engagement Potential
|
||||
|
||||
**Save Value (收藏价值)**:
|
||||
- Is it reference material? ✓ High save potential
|
||||
- Is it a checklist or list? ✓ High save potential
|
||||
- Is it a tutorial? ✓ High save potential
|
||||
- Is it time-sensitive news? ✗ Low save potential
|
||||
|
||||
**Share Triggers (分享冲动)**:
|
||||
- "我朋友也需要看这个" → High share potential
|
||||
- "这说的就是我" → Identity resonance
|
||||
- "太有用了必须分享" → Utility sharing
|
||||
- "笑死,给朋友看看" → Entertainment sharing
|
||||
|
||||
**Comment Inducement (评论诱导)**:
|
||||
- Open-ended questions: "你是哪种类型?"
|
||||
- Experience sharing: "评论区说说你的经历"
|
||||
- Debate triggers: "你觉得呢?"
|
||||
- Help requests: "有更好的推荐吗?"
|
||||
|
||||
**Interaction Design (互动设计)**:
|
||||
- Polls: "A还是B?"
|
||||
- Challenges: "你能做到几个?"
|
||||
- Tags: "@你那个需要的朋友"
|
||||
|
||||
### 5. Visual Opportunity Map
|
||||
|
||||
| Content Element | Visual Treatment | Example |
|
||||
|-----------------|------------------|---------|
|
||||
| 数据/统计 | Highlighted numbers, simple charts | "节省80%时间" 大字突出 |
|
||||
| 对比 | Before/after, side-by-side | 左右分屏对比图 |
|
||||
| 步骤 | Numbered flow, arrows | 1→2→3 流程图 |
|
||||
| 清单 | Checklist with icons | ✓/✗ 列表配图标 |
|
||||
| 情感 | Character expressions, scenes | 卡通人物表情包 |
|
||||
| 产品 | Product showcase, lifestyle | 产品实拍+使用场景 |
|
||||
| 引用 | Quote cards, speech bubbles | 金句卡片设计 |
|
||||
|
||||
### 6. Swipe Flow Design
|
||||
|
||||
Plan the narrative arc across images:
|
||||
|
||||
| Position | Purpose | Hook Strategy |
|
||||
|----------|---------|---------------|
|
||||
| **Cover (封面)** | Stop scrolling | 最强视觉冲击 + 核心标题 |
|
||||
| **Setup (铺垫)** | Build context | 痛点共鸣 / 好奇心 |
|
||||
| **Core (核心)** | Deliver value | 干货内容,每页1-2个要点 |
|
||||
| **Payoff (收获)** | Practical takeaway | 可执行的行动建议 |
|
||||
| **Ending (结尾)** | Drive action | CTA + 互动引导 |
|
||||
|
||||
**Swipe Motivation Between Images**:
|
||||
- End each image with a hook for the next
|
||||
- Use "下一页更精彩" type transitions
|
||||
- Create information gaps that require swiping
|
||||
- Build anticipation through numbering ("第3个最重要")
|
||||
|
||||
## Output Format
|
||||
|
||||
Analysis results should be saved to `analysis.md` with:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "5个让你效率翻倍的AI工具"
|
||||
topic: 干货分享
|
||||
content_type: 工具推荐
|
||||
source_language: zh
|
||||
user_language: zh
|
||||
recommended_image_count: 6
|
||||
---
|
||||
|
||||
## Target Audience
|
||||
|
||||
- **Primary**: 打工人、自由职业者 - 追求效率提升
|
||||
- **Secondary**: 学生党 - 写论文、做作业需要
|
||||
- **Tertiary**: 内容创作者 - 需要AI辅助
|
||||
|
||||
## Hook Analysis
|
||||
|
||||
**标题钩子评分**: ⭐⭐⭐⭐ (4/5)
|
||||
- ✓ 数字钩子: "5个"
|
||||
- ✓ 利益钩子: "效率翻倍"
|
||||
- △ 可增强: 加入身份标签 "打工人必看"
|
||||
|
||||
**建议优化**:
|
||||
- 原标题: "5个让你效率翻倍的AI工具"
|
||||
- 优化: "打工人必看!5个让我效率翻倍的AI神器"
|
||||
|
||||
## Value Proposition
|
||||
|
||||
**为什么用户要看?**
|
||||
1. **实用价值**: 直接可用的工具推荐
|
||||
2. **省时省力**: 不用自己筛选,直接抄作业
|
||||
3. **FOMO**: 别人都在用,我不能落后
|
||||
|
||||
**收藏理由**: 工具清单,需要时可以回来查
|
||||
|
||||
## Engagement Design
|
||||
|
||||
- **互动点**: 结尾问"你最常用哪个?"
|
||||
- **评论诱导**: "还有什么好用的工具评论区分享"
|
||||
- **分享触发**: 打工人会转发给同事
|
||||
|
||||
## Content Signals
|
||||
|
||||
- "AI工具" → tech + dense
|
||||
- "效率" → notion + list
|
||||
- "干货" → minimal + dense
|
||||
|
||||
## Swipe Flow
|
||||
|
||||
| Image | Position | Purpose | Hook |
|
||||
|-------|----------|---------|------|
|
||||
| 1 | Cover | 吸引停留 | 标题+视觉冲击 |
|
||||
| 2 | Setup | 建立共鸣 | 为什么需要AI工具 |
|
||||
| 3-5 | Core | 核心价值 | 每页1-2个工具详解 |
|
||||
| 6 | Ending | 行动引导 | 总结+互动引导 |
|
||||
|
||||
## Recommended Approaches
|
||||
|
||||
1. **Tech + Dense** - 专业科技感,适合干货分享 (recommended)
|
||||
2. **Notion + List** - 清爽知识卡片风格
|
||||
3. **Minimal + Balanced** - 简约高端,适合职场人群
|
||||
```
|
||||
|
||||
## Analysis Checklist
|
||||
|
||||
Before proceeding to outline generation:
|
||||
|
||||
- [ ] Can I identify the content type?
|
||||
- [ ] Is the hook strong enough? (≥3 stars)
|
||||
- [ ] Do I know the primary audience?
|
||||
- [ ] Have I identified save/share triggers?
|
||||
- [ ] Are there clear visual opportunities?
|
||||
- [ ] Is the swipe flow planned?
|
||||
- [ ] Have I selected 3 style+layout combinations?
|
||||
@@ -0,0 +1,228 @@
|
||||
# Xiaohongshu Outline Template
|
||||
|
||||
Template for generating infographic series outlines.
|
||||
|
||||
## File Naming
|
||||
|
||||
Outline files use style slug in the name:
|
||||
- `outline-style-tech.md` - Tech style variant
|
||||
- `outline-style-notion.md` - Notion style variant
|
||||
- `outline-style-minimal.md` - Minimal style variant
|
||||
- `outline.md` - Final selected (copied from chosen variant)
|
||||
|
||||
## Image File Naming
|
||||
|
||||
Images use meaningful slugs for readability:
|
||||
```
|
||||
NN-{type}-[slug].png
|
||||
NN-{type}-[slug].md (in prompts/)
|
||||
```
|
||||
|
||||
| Type | Usage |
|
||||
|------|-------|
|
||||
| `cover` | First image (cover) |
|
||||
| `content` | Middle content images |
|
||||
| `ending` | Last image |
|
||||
|
||||
**Examples**:
|
||||
- `01-cover-ai-tools.png`
|
||||
- `02-content-why-ai.png`
|
||||
- `03-content-chatgpt.png`
|
||||
- `04-content-midjourney.png`
|
||||
- `05-content-notion-ai.png`
|
||||
- `06-ending-summary.png`
|
||||
|
||||
**Slug rules**:
|
||||
- Derived from image content (kebab-case)
|
||||
- Must be unique within the series
|
||||
- Keep short but descriptive (2-4 words)
|
||||
|
||||
## Outline Format
|
||||
|
||||
```markdown
|
||||
# Xiaohongshu Infographic Series Outline
|
||||
|
||||
---
|
||||
style: tech
|
||||
default_layout: dense
|
||||
image_count: 6
|
||||
generated: YYYY-MM-DD HH:mm
|
||||
---
|
||||
|
||||
## Image 1 of 6
|
||||
|
||||
**Position**: Cover
|
||||
**Layout**: sparse
|
||||
**Hook**: 打工人必看!
|
||||
**Slug**: ai-tools
|
||||
**Filename**: 01-cover-ai-tools.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「5个AI神器让你效率翻倍」
|
||||
- Subtitle: 亲测好用,建议收藏
|
||||
|
||||
**Visual Concept**:
|
||||
科技感背景,多个AI工具图标环绕,中心大标题,
|
||||
霓虹蓝+深色背景,未来感十足
|
||||
|
||||
**Swipe Hook**: 第一个就很强大👇
|
||||
|
||||
---
|
||||
|
||||
## Image 2 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: balanced
|
||||
**Core Message**: 为什么你需要AI工具
|
||||
**Slug**: why-ai
|
||||
**Filename**: 02-content-why-ai.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「为什么要用AI?」
|
||||
- Points:
|
||||
- 重复工作自动化
|
||||
- 创意辅助不卡壳
|
||||
- 效率提升10倍
|
||||
|
||||
**Visual Concept**:
|
||||
对比图:左边疲惫打工人,右边轻松使用AI的人
|
||||
科技线条装饰,简洁有力
|
||||
|
||||
**Swipe Hook**: 接下来是具体工具推荐👇
|
||||
|
||||
---
|
||||
|
||||
## Image 3 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: dense
|
||||
**Core Message**: ChatGPT使用技巧
|
||||
**Slug**: chatgpt
|
||||
**Filename**: 03-content-chatgpt.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「ChatGPT」
|
||||
- Subtitle: 最强AI助手
|
||||
- Points:
|
||||
- 写文案:给出框架,秒出初稿
|
||||
- 改文章:润色、翻译、总结
|
||||
- 编程:写代码、找bug
|
||||
- 学习:解释概念、出题练习
|
||||
|
||||
**Visual Concept**:
|
||||
ChatGPT logo居中,四周放射状展示功能点
|
||||
深色科技背景,霓虹绿点缀
|
||||
|
||||
**Swipe Hook**: 下一个更适合创意工作者👇
|
||||
|
||||
---
|
||||
|
||||
## Image 4 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: dense
|
||||
**Core Message**: Midjourney绘图
|
||||
**Slug**: midjourney
|
||||
**Filename**: 04-content-midjourney.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「Midjourney」
|
||||
- Subtitle: AI绘画神器
|
||||
- Points:
|
||||
- 输入描述,秒出图片
|
||||
- 风格多样:写实/插画/3D
|
||||
- 做封面、做头像、做素材
|
||||
- 不会画画也能当设计师
|
||||
|
||||
**Visual Concept**:
|
||||
展示几张MJ生成的不同风格图片
|
||||
画框/画布元素装饰
|
||||
|
||||
**Swipe Hook**: 还有一个效率神器👇
|
||||
|
||||
---
|
||||
|
||||
## Image 5 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: balanced
|
||||
**Core Message**: Notion AI笔记
|
||||
**Slug**: notion-ai
|
||||
**Filename**: 05-content-notion-ai.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「Notion AI」
|
||||
- Subtitle: 智能笔记助手
|
||||
- Points:
|
||||
- 自动总结长文
|
||||
- 头脑风暴出点子
|
||||
- 整理会议记录
|
||||
|
||||
**Visual Concept**:
|
||||
Notion界面风格,简洁黑白配色
|
||||
展示笔记整理前后对比
|
||||
|
||||
**Swipe Hook**: 最后总结一下👇
|
||||
|
||||
---
|
||||
|
||||
## Image 6 of 6
|
||||
|
||||
**Position**: Ending
|
||||
**Layout**: sparse
|
||||
**Core Message**: 总结与互动
|
||||
**Slug**: summary
|
||||
**Filename**: 06-ending-summary.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「工具只是工具」
|
||||
- Subtitle: 关键是用起来!
|
||||
- CTA: 收藏备用 | 转发给需要的朋友
|
||||
- Interaction: 你最常用哪个?评论区见👇
|
||||
|
||||
**Visual Concept**:
|
||||
简洁背景,大字标题
|
||||
底部互动引导文字
|
||||
收藏/分享图标
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
## Layout Guidelines by Position
|
||||
|
||||
| Position | Recommended Layout | Why |
|
||||
|----------|-------------------|-----|
|
||||
| Cover | `sparse` | Maximum visual impact, clear title |
|
||||
| Setup | `balanced` | Context without overwhelming |
|
||||
| Core | `balanced`/`dense`/`list` | Based on content density |
|
||||
| Payoff | `balanced`/`list` | Clear takeaways |
|
||||
| Ending | `sparse` | Clean CTA, memorable close |
|
||||
|
||||
## Swipe Hook Strategies
|
||||
|
||||
Each image should end with a hook for the next:
|
||||
|
||||
| Strategy | Example |
|
||||
|----------|---------|
|
||||
| Teaser | "第一个就很强大👇" |
|
||||
| Numbering | "接下来是第2个👇" |
|
||||
| Superlative | "下一个更厉害👇" |
|
||||
| Question | "猜猜下一个是什么?👇" |
|
||||
| Promise | "最后一个最实用👇" |
|
||||
| Urgency | "最重要的来了👇" |
|
||||
|
||||
## Variant Differentiation
|
||||
|
||||
Three variants should differ meaningfully:
|
||||
|
||||
| Aspect | Variant A | Variant B | Variant C |
|
||||
|--------|-----------|-----------|-----------|
|
||||
| Style | Primary match | Alternative | Different mood |
|
||||
| Layout | Content-optimized | Different density | Different structure |
|
||||
| Tone | Professional | Casual | Playful |
|
||||
| Audience | Primary target | Secondary target | Broader appeal |
|
||||
|
||||
**Example for "AI工具推荐"**:
|
||||
- `outline-style-tech.md`: Tech + Dense - 专业极客风
|
||||
- `outline-style-notion.md`: Notion + List - 清爽知识卡片
|
||||
- `outline-style-cute.md`: Cute + Balanced - 可爱易读风
|
||||
Reference in New Issue
Block a user