Compare commits

...

5 Commits

Author SHA1 Message Date
Jim Liu 宝玉 688d1760ed chore: release v0.8.0
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-17 16:44:50 -06:00
Jim Liu 宝玉 a701be873b update Image Generation Guidelines 2026-01-17 16:24:23 -06:00
Jim Liu 宝玉 1df5e4974d feat: add analysis framework for Xiaohongshu content 2026-01-17 15:52:00 -06:00
Jim Liu 宝玉 2677e730b9 Update release-skills to update readme 2026-01-17 15:11:50 -06:00
Jim Liu 宝玉 080f2eff48 chore: release v0.7.0
- baoyu-comic: adds --aspect (3:4, 4:3, 16:9) and --lang options; multi-variant storyboard workflow
- baoyu-comic/baoyu-slide-deck: adds analysis-framework and template references
- Multiple skills: restructured SKILL.md, moved details to references/

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-17 15:03:43 -06:00
21 changed files with 2379 additions and 555 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
},
"metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "0.6.1"
"version": "0.8.0"
},
"plugins": [
{
+201
View File
@@ -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
View File
@@ -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
View File
@@ -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 登录与缓存流程)。
+86
View File
@@ -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
+16 -2
View File
@@ -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
View File
@@ -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` 等 |
**风格**(视觉美学):
| 风格 | 描述 | 适用场景 |
+138 -15
View File
@@ -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
![illustration description](imgs/illustration-[slug].png)
![illustration description]([article-name]/illustrations/illustration-[slug].png)
```
**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
View File
@@ -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?
@@ -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]
+2 -2
View File
@@ -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);
}
+97 -29
View File
@@ -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
+85 -266
View File
@@ -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
View File
@@ -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 - 可爱易读风