Compare commits

..

49 Commits

Author SHA1 Message Date
Jim Liu 宝玉 089e0b5ba9 chore: release v1.4.2 2026-01-19 00:05:39 -06:00
Jim Liu 宝玉 4bc0d05f66 docs: add proxy config and browser support for gemini-web
- Add supported browsers list (Chrome, Chromium, Edge)
- Add proxy configuration section with examples
- Update both English and Chinese READMEs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 00:05:02 -06:00
Jim Liu 宝玉 90f3e2ff24 chore: release v1.4.1 2026-01-18 23:51:31 -06:00
Jim Liu 宝玉 575ed29391 Merge pull request #4 from ianchenx/fix/x-article-multilingual-selectors
fix(x-article): support multi-language UI selectors
2026-01-18 23:50:20 -06:00
Jim Liu 宝玉 7a193481d4 chore: release v1.4.0 2026-01-18 23:46:07 -06:00
Jim Liu 宝玉 aea27950ad chore: release v1.3.0 2026-01-18 22:16:24 -06:00
Jim Liu 宝玉 76ddcf134e chore: release v1.2.0 2026-01-18 20:42:40 -06:00
Jim Liu 宝玉 5a0feba96e docs: update installation instructions and add available plugins section 2026-01-18 20:28:36 -06:00
Jim Liu 宝玉 97bc68efd8 chore: release v1.1.0 2026-01-18 20:11:49 -06:00
Jim Liu 宝玉 464edf0656 chore: release v1.0.1 2026-01-18 19:15:34 -06:00
Jim Liu 宝玉 43c2589a38 Refactor code structure for improved readability and maintainability 2026-01-18 18:18:54 -06:00
Jim Liu 宝玉 4c82884722 chore: release v1.0.0
- Add baoyu-danger-x-to-markdown skill to marketplace
- Update README files with new skill documentation
- Bump version to 1.0.0

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-18 18:00:58 -06:00
Jim Liu 宝玉 56d0485412 chore: rename baoyu-gemini-web to baoyu-danger-gemini-web 2026-01-18 17:58:12 -06:00
Jim Liu 宝玉 4998eaf8c2 feat: add baoyu-danger-x-to-markdown skill
Ignore generated x-to-markdown output directory.
2026-01-18 17:42:25 -06:00
Jim Liu 宝玉 5993b6969d chore: release v0.11.0 2026-01-18 09:53:48 -06:00
ianchenx 5d4ff2e9c2 fix(x-article): support multi-language UI selectors for X Articles
Extract hardcoded UI selectors into I18N_SELECTORS constant.
Now supports English, Chinese, Japanese, and Korean X interfaces.

Selectors added:
- titleInput: Add a title / 添加标题 / タイトルを追加 / 제목 추가
- addPhotosButton: Add photos or video / 添加照片或视频 / 写真や動画を追加 / 사진 또는 동영상 추가
- previewButton: preview / 预览 / プレビュー / 미리보기
- publishButton: publish / 发布 / 公開 / 게시

To add more languages, simply append to the I18N_SELECTORS arrays.
2026-01-18 22:12:52 +08:00
Jim Liu 宝玉 dc0201b63f chore: release v0.10.0 2026-01-18 00:01:06 -06:00
Jim Liu 宝玉 3811512750 docs: add Customization section to README files 2026-01-17 22:12:01 -06:00
Jim Liu 宝玉 9a9f6a42cd chore: release v0.9.0 2026-01-17 22:02:40 -06:00
Jim Liu 宝玉 3b13b25f1a chore: release v0.8.2 2026-01-17 19:00:27 -06:00
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
Jim Liu 宝玉 bb4f0dc52c feat: add PDF export for slide-deck and comic skills 2026-01-17 12:08:08 -06:00
Jim Liu 宝玉 c731faea8f feat: update slide deck 2026-01-17 04:28:16 -06:00
Jim Liu 宝玉 fa155da15d fix: update version to 0.5.3 and enhance placeholder selection logic in publishArticle function 2026-01-17 01:29:10 -06:00
Jim Liu 宝玉 6194f71378 bump version 2026-01-16 21:44:14 -06:00
Jim Liu 宝玉 8e88cf4a8b feat: implement session management for image generation skills and add session handling functions 2026-01-16 20:20:07 -06:00
Jim Liu 宝玉 259baff413 update gemeni-web to support add image as reference 2026-01-16 19:06:14 -06:00
Jim Liu 宝玉 a42137ff13 feat: update version to 0.5.1 and enhance baoyu-comic documentation with character and outline templates 2026-01-16 01:43:37 -06:00
Jim Liu 宝玉 c6d96d4134 add new skill baoyu-comic 2026-01-16 01:12:21 -06:00
Jim Liu 宝玉 e174d642df feat: add quick install instructions to README files 2026-01-15 22:06:38 -06:00
Jim Liu 宝玉 db7eaa2847 feat: update version number to 0.4.2 and enhance description for baoyu-gemini-web skill 2026-01-15 17:05:58 -06:00
Jim Liu 宝玉 e3d2f5d03f Add clipboard paste functionality and documentation for X Articles and regular posts
- Implemented `paste-from-clipboard.ts` script to send real paste keystrokes across macOS, Linux, and Windows.
- Created detailed guides for publishing articles to X Articles and posting regular content, including usage examples and troubleshooting tips.
- Added support for Markdown formatting and image handling in X Articles.
- Documented manual workflows for image pasting and browser interactions using Playwright MCP.
2026-01-15 15:38:03 -06:00
Jim Liu 宝玉 da920bb830 feat: add baoyu- prefix 2026-01-15 14:18:56 -06:00
Jim Liu 宝玉 f49acb9983 feat: Update version number to 0.3.1 in marketplace.json 2026-01-15 10:59:03 -06:00
Jim Liu 宝玉 3fddcc0e6a feat: Update image generation steps in article-illustrator, cover-image, and xhs-images skills for improved user guidance 2026-01-15 10:58:20 -06:00
Jim Liu 宝玉 d4070b19d5 feat: Enhance xhs-images skill with style and layout options for improved infographic generation 2026-01-14 10:42:04 -06:00
Jim Liu 宝玉 6430c67efe feat: Add 'notion' style option to article-illustrator, slide-deck, and xhs-images skills for enhanced visual presentation 2026-01-14 10:06:53 -06:00
Jim Liu 宝玉 73a5f60ad3 feat: Add WeChat posting skill and update marketplace.json 2026-01-14 02:55:39 -06:00
Jim Liu 宝玉 7a2f475417 Create CLAUDE.md 2026-01-13 21:52:39 -06:00
Jim Liu 宝玉 bb494f07ba Update slide deck skill documentation to clarify image generation and add new styles 2026-01-13 20:55:47 -06:00
Jim Liu 宝玉 ced92e2231 Update marketplace.json version to 0.2.0 for improved clarity 2026-01-13 20:24:11 -06:00
Jim Liu 宝玉 102ef092ad Update slide deck skill documentation and prompt guidelines for improved clarity and functionality 2026-01-13 20:23:53 -06:00
Jim Liu 宝玉 cc553ddbb3 Refactor infographic generation skills and add new slide deck generator
- Updated article-illustrator prompts to emphasize hand-drawn style and layout principles.
- Enhanced xhs-images skill with multiple style options and auto-selection based on content signals.
- Created README in Chinese for better accessibility.
- Introduced cover-image skill for generating hand-drawn style cover images with various styles.
- Developed slide-deck skill to generate professional slide outlines with detailed structure and style instructions.
- Added prompts for cover-image and slide-deck skills to guide content generation.
2026-01-13 19:52:10 -06:00
Jim Liu 宝玉 2f4b5fcc85 add article-illustrator skill documentation with infographic guidelines 2026-01-13 19:15:43 -06:00
Jim Liu 宝玉 227b1dcdf6 new skill: post to x 2026-01-13 18:16:12 -06:00
234 changed files with 23039 additions and 1947 deletions
+28 -4
View File
@@ -6,17 +6,41 @@
},
"metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "0.1.1"
"version": "1.4.2"
},
"plugins": [
{
"name": "content-skills",
"description": "Skills shared by Baoyu for improving daily work efficiency",
"description": "Content generation and publishing skills",
"source": "./",
"strict": false,
"skills": [
"./skills/gemini-web",
"./skills/xhs-images"
"./skills/baoyu-xhs-images",
"./skills/baoyu-post-to-x",
"./skills/baoyu-post-to-wechat",
"./skills/baoyu-article-illustrator",
"./skills/baoyu-cover-image",
"./skills/baoyu-slide-deck",
"./skills/baoyu-comic"
]
},
{
"name": "ai-generation-skills",
"description": "AI-powered generation backends",
"source": "./",
"strict": false,
"skills": [
"./skills/baoyu-danger-gemini-web"
]
},
{
"name": "utility-skills",
"description": "Utility tools for content processing",
"source": "./",
"strict": false,
"skills": [
"./skills/baoyu-danger-x-to-markdown",
"./skills/baoyu-compress-image"
]
}
]
+203
View File
@@ -0,0 +1,203 @@
---
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}"
```
**Note**: Do NOT add Co-Authored-By line. This is a release commit, not a code contribution.
### 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}
```
+7
View File
@@ -137,3 +137,10 @@ dist
# Vite logs files
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
tests-data/
.DS_Store
# Skill extensions (user customization)
.baoyu-skills/
x-to-markdown/
+207
View File
@@ -0,0 +1,207 @@
# Changelog
English | [中文](./CHANGELOG.zh.md)
## 1.4.2 - 2026-01-19
### Documentation
- `baoyu-danger-gemini-web`: adds supported browsers list (Chrome, Chromium, Edge) and proxy configuration guide.
## 1.4.1 - 2026-01-18
### Fixes
- `baoyu-post-to-x`: supports multi-language UI selectors for X Articles (contributed by [@ianchenx](https://github.com/ianchenx)).
## 1.4.0 - 2026-01-18
### Features
- `baoyu-cover-image`: expands style library from 8 to 19 styles with 12 new additions—`blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `intuition-machine`, `notion`, `pixel-art`, `sketch-notes`, `vector-illustration`, `vintage`, `watercolor`.
- `baoyu-slide-deck`: adds `chalkboard` style—black chalkboard background with colorful chalk drawings for education and tutorials.
### Breaking Changes
- `baoyu-cover-image`: removes `tech` style (use `blueprint` or `editorial-infographic` for technical content).
### Documentation
- `README.md`, `README.zh.md`: updates style preview screenshots for cover-image and slide-deck.
## 1.3.0 - 2026-01-18
### Features
- `baoyu-comic`: adds `wuxia` style—Hong Kong martial arts comic style with ink brush strokes, dynamic combat poses, and qi energy effects. Best for wuxia/xianxia and Chinese historical fiction.
- `baoyu-comic`: adds style and layout preview screenshots for all 8 styles and 6 layouts in README.
### Refactor
- `baoyu-comic`: removes `tech` style (replaced by `ohmsha` for technical content).
## 1.2.0 - 2026-01-18
### Features
- Session-independent output directories: each generation session creates a new directory (`<skill-suffix>/<topic-slug>/`), even for the same source file. Conflicts resolved by appending timestamp.
- Multi-source file support: source files now saved as `source-{slug}.{ext}`, supporting multiple inputs (text, images, files from conversation).
### Documentation
- `CLAUDE.md`: updates Output Path Convention with new session-independent directory structure and multi-source file naming.
- Multiple skills: updates file management sections to reflect new directory and source file conventions.
- `baoyu-slide-deck`, `baoyu-article-illustrator`, `baoyu-cover-image`, `baoyu-xhs-images`, `baoyu-comic`
## 1.1.0 - 2026-01-18
### Features
- `baoyu-compress-image`: new utility skill for cross-platform image compression. Converts to WebP by default with PNG-to-PNG support. Uses system tools (sips, cwebp, ImageMagick) with Sharp fallback.
### Refactor
- Marketplace structure: reorganizes plugins into three categories—`content-skills`, `ai-generation-skills`, and `utility-skills`—for better organization.
### Documentation
- `CLAUDE.md`, `README.md`, `README.zh.md`: updates skill architecture documentation to reflect the new three-category structure.
## 1.0.1 - 2026-01-18
### Refactor
- Code structure improvements for better readability and maintainability.
- `baoyu-slide-deck`: unified style reference file formats.
### Other
- Screenshots: converted from PNG to WebP format for smaller file sizes; added screenshots for new styles.
## 1.0.0 - 2026-01-18
### Features
- `baoyu-danger-x-to-markdown`: new skill to convert X/Twitter posts and threads to Markdown format.
### Breaking Changes
- `baoyu-gemini-web` renamed to `baoyu-danger-gemini-web` to indicate potential risks of using reverse-engineered APIs.
## 0.11.0 - 2026-01-18
### Features
- `baoyu-danger-gemini-web`: adds disclaimer consent check flow—requires user acceptance before first use, with persistent consent storage per platform.
## 0.10.0 - 2026-01-18
### Features
- `baoyu-slide-deck`: expands style library from 10 to 15 styles with 8 new additions—`dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `intuition-machine`, `pixel-art`, `scientific`, `vintage`, `watercolor`.
### Breaking Changes
- `baoyu-slide-deck`: removes 3 styles (`playful`, `storytelling`, `warm`); changes default style from `notion` to `blueprint`.
## 0.9.0 - 2026-01-17
### Features
- Extension support: all skills now support customization via `EXTEND.md` files. Check `.baoyu-skills/<skill-name>/EXTEND.md` (project) or `~/.baoyu-skills/<skill-name>/EXTEND.md` (user) for custom styles and configurations.
### Other
- `.gitignore`: adds `.baoyu-skills/` directory for user extension files.
## 0.8.2 - 2026-01-17
### Refactor
- `baoyu-danger-gemini-web`: reorganizes script architecture—moves modular files into `gemini-webapi/` subdirectory and updates SKILL.md with `${SKILL_DIR}` path references.
## 0.8.1 - 2026-01-17
### Refactor
- `baoyu-danger-gemini-web`: refactors script architecture—consolidates 10 separate files into a structured `gemini-webapi/` module (TypeScript port of gemini_webapi Python library).
## 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-danger-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-danger-gemini-web`: adds `--sessionId` (local persisted sessions, plus `--list-sessions`) for multi-turn conversations and consistent multi-image generation.
- `baoyu-danger-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-danger-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).
+206
View File
@@ -0,0 +1,206 @@
# Changelog
[English](./CHANGELOG.md) | 中文
## 1.4.2 - 2026-01-19
### 文档
- `baoyu-danger-gemini-web`:添加支持的浏览器列表(Chrome、Chromium、Edge)和代理配置指南。
## 1.4.1 - 2026-01-18
### 修复
- `baoyu-post-to-x`:支持 X Articles 多语言 UI 选择器(感谢 [@ianchenx](https://github.com/ianchenx) 贡献)。
## 1.4.0 - 2026-01-18
### 新功能
- `baoyu-cover-image`:风格库从 8 个扩展至 19 个,新增 12 种风格——`blueprint`(蓝图)、`bold-editorial`(大胆编辑)、`chalkboard`(黑板)、`dark-atmospheric`(暗黑氛围)、`editorial-infographic`(杂志信息图)、`fantasy-animation`(奇幻动画)、`intuition-machine`(技术简报)、`notion`Notion 风格)、`pixel-art`(像素艺术)、`sketch-notes`(手绘笔记)、`vector-illustration`(矢量插画)、`vintage`(复古文献)、`watercolor`(水彩)。
- `baoyu-slide-deck`:新增 `chalkboard`(黑板)风格——黑色黑板背景配彩色粉笔绘画,适合教育和教程内容。
### 破坏性变更
- `baoyu-cover-image`:移除 `tech` 风格(技术内容改用 `blueprint``editorial-infographic` 风格)。
### 文档
- `README.md``README.zh.md`:更新 cover-image 和 slide-deck 风格预览截图。
## 1.3.0 - 2026-01-18
### 新功能
- `baoyu-comic`:新增 `wuxia` 武侠风格——港漫武侠风格,水墨笔触、动态打斗、气功特效。适用于武侠、仙侠、中国历史小说。
- `baoyu-comic`:README 新增风格和布局预览截图(8 种风格 + 6 种布局)。
### 重构
- `baoyu-comic`:移除 `tech` 风格(技术内容改用 `ohmsha` 风格)。
## 1.2.0 - 2026-01-18
### 新功能
- Session 独立输出目录:每次生成创建独立目录(`<skill-suffix>/<topic-slug>/`),即使是同一源文件也会新建目录。目录冲突时追加时间戳。
- 多源文件支持:源文件现以 `source-{slug}.{ext}` 命名,支持多个输入(文本、图片、会话中的文件)。
### 文档
- `CLAUDE.md`:更新 Output Path Convention,采用新的 session 独立目录结构和多源文件命名规范。
- 多个技能:更新文件管理部分,反映新的目录和源文件规范。
- `baoyu-slide-deck``baoyu-article-illustrator``baoyu-cover-image``baoyu-xhs-images``baoyu-comic`
## 1.1.0 - 2026-01-18
### 新功能
- `baoyu-compress-image`:新增跨平台图片压缩技能。默认转换为 WebP 格式,支持 PNG 转 PNG。自动选择系统工具(sips、cwebp、ImageMagick),Sharp 作为兜底方案。
### 重构
- Marketplace 结构重组:将插件分为三大类——`content-skills`(内容技能)、`ai-generation-skills`AI 生成技能)和 `utility-skills`(工具技能),便于管理和发现。
### 文档
- `CLAUDE.md``README.md``README.zh.md`:更新技能架构文档,反映新的三类分组结构。
## 1.0.1 - 2026-01-18
### 重构
- 代码结构优化,提升可读性和可维护性。
- `baoyu-slide-deck`:统一风格参考文件格式。
### 其他
- 截图:从 PNG 转换为 WebP 格式,减小文件体积;新增新风格的截图。
## 1.0.0 - 2026-01-18
### 新功能
- `baoyu-danger-x-to-markdown`:新增技能,将 X/Twitter 帖子和线程转换为 Markdown 格式。
### 破坏性变更
- `baoyu-gemini-web` 重命名为 `baoyu-danger-gemini-web`,以提示使用逆向工程 API 的潜在风险。
## 0.11.0 - 2026-01-18
### 新功能
- `baoyu-danger-gemini-web`:新增 Disclaimer 同意检查流程——首次使用前需用户确认接受,同意状态按平台持久化存储。
## 0.10.0 - 2026-01-18
### 新功能
- `baoyu-slide-deck`:风格库从 10 个扩展至 15 个,新增 8 种风格——`dark-atmospheric`(暗黑氛围)、`editorial-infographic`(杂志信息图)、`fantasy-animation`(奇幻动画)、`intuition-machine`(技术简报)、`pixel-art`(像素艺术)、`scientific`(科学图解)、`vintage`(复古文献)、`watercolor`(水彩手绘)。
### 破坏性变更
- `baoyu-slide-deck`:移除 3 种风格(`playful``storytelling``warm`);默认风格从 `notion` 改为 `blueprint`
## 0.9.0 - 2026-01-17
### 新功能
- 扩展支持:所有技能现支持通过 `EXTEND.md` 文件自定义。检查 `.baoyu-skills/<skill-name>/EXTEND.md`(项目级)或 `~/.baoyu-skills/<skill-name>/EXTEND.md`(用户级)配置自定义样式与设置。
### 其他
- `.gitignore`:添加 `.baoyu-skills/` 目录忽略,存放用户扩展文件。
## 0.8.2 - 2026-01-17
### 重构
- `baoyu-danger-gemini-web`:重组脚本架构——将模块文件移至 `gemini-webapi/` 子目录,并更新 SKILL.md 使用 `${SKILL_DIR}` 路径引用。
## 0.8.1 - 2026-01-17
### 重构
- `baoyu-danger-gemini-web`:重构脚本架构——将 10 个分散的脚本文件整合为结构化的 `gemini-webapi/` 模块(gemini_webapi Python 库的 TypeScript 移植版)。
## 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-danger-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-danger-gemini-web`:新增 `--sessionId`(本地持久化会话,支持 `--list-sessions`),用于多轮对话/多图生成保持上下文一致。
- `baoyu-danger-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-danger-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 登录与缓存流程)。
+250
View File
@@ -0,0 +1,250 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
Claude Code marketplace plugin providing AI-powered content generation skills. Skills use Gemini Web API (reverse-engineered) for text/image generation and Chrome CDP for browser automation.
## Architecture
Skills are organized into three plugin categories in `marketplace.json`:
```
skills/
├── [content-skills] # Content generation and publishing
│ ├── baoyu-xhs-images/ # Xiaohongshu infographic series (1-10 images)
│ ├── baoyu-cover-image/ # Article cover images (2.35:1 aspect)
│ ├── baoyu-slide-deck/ # Presentation slides with outlines
│ ├── baoyu-article-illustrator/ # Smart illustration placement
│ ├── baoyu-comic/ # Knowledge comics (Logicomix/Ohmsha style)
│ ├── baoyu-post-to-x/ # X/Twitter posting automation
│ └── baoyu-post-to-wechat/ # WeChat Official Account posting
├── [ai-generation-skills] # AI-powered generation backends
│ └── baoyu-danger-gemini-web/ # Gemini API wrapper (text + image gen)
└── [utility-skills] # Utility tools for content processing
├── baoyu-danger-x-to-markdown/ # X/Twitter content to markdown
└── baoyu-compress-image/ # Image compression
```
**Plugin Categories**:
| Category | Description |
|----------|-------------|
| `content-skills` | Skills that generate or publish content (images, slides, comics, posts) |
| `ai-generation-skills` | Backend skills providing AI generation capabilities |
| `utility-skills` | Helper tools for content processing (conversion, compression) |
Each skill contains:
- `SKILL.md` - YAML front matter (name, description) + documentation
- `scripts/` - TypeScript implementations
- `prompts/system.md` - AI generation guidelines (optional)
## Running Skills
All scripts run via Bun (no build step):
```bash
npx -y bun skills/<skill>/scripts/main.ts [options]
```
Examples:
```bash
# Text generation
npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts "Hello"
# Image generation
npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --prompt "A cat" --image cat.png
# From prompt files
npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png
```
## Key Dependencies
- **Bun**: TypeScript runtime (via `npx -y bun`)
- **Chrome**: Required for `baoyu-danger-gemini-web` auth and `baoyu-post-to-x` automation
- **No npm packages**: Self-contained TypeScript, no external dependencies
## Authentication
`baoyu-danger-gemini-web` uses browser cookies for Google auth:
- First run opens Chrome for login
- Cookies cached in data directory
- Force refresh: `--login` flag
## Plugin Configuration
`.claude-plugin/marketplace.json` defines plugin metadata and skill paths. Version follows semver.
## Adding New Skills
**IMPORTANT**: All skills MUST use `baoyu-` prefix to avoid conflicts when users import this plugin.
1. Create `skills/baoyu-<name>/SKILL.md` with YAML front matter
- Directory name: `baoyu-<name>`
- SKILL.md `name` field: `baoyu-<name>`
2. Add TypeScript in `skills/baoyu-<name>/scripts/`
3. Add prompt templates in `skills/baoyu-<name>/prompts/` if needed
4. **Choose the appropriate category** and register in `marketplace.json`:
- `content-skills`: For content generation/publishing (images, slides, posts)
- `ai-generation-skills`: For AI backend capabilities
- `utility-skills`: For helper tools (conversion, compression)
- If none fit, create a new category with descriptive name
5. **Add Script Directory section** to SKILL.md (see template below)
### Choosing a Category
| If your skill... | Use category |
|------------------|--------------|
| Generates visual content (images, slides, comics) | `content-skills` |
| Publishes to platforms (X, WeChat, etc.) | `content-skills` |
| Provides AI generation backend | `ai-generation-skills` |
| Converts or processes content | `utility-skills` |
| Compresses or optimizes files | `utility-skills` |
**Creating a new category**: If the skill doesn't fit existing categories, add a new plugin object to `marketplace.json` with:
- `name`: Descriptive kebab-case name (e.g., `analytics-skills`)
- `description`: Brief description of the category
- `skills`: Array with the skill path
### Script Directory Template
Every SKILL.md with scripts MUST include this section after Usage:
```markdown
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/main.ts` | Main entry point |
| `scripts/other.ts` | Other functionality |
```
When referencing scripts in workflow sections, use `${SKILL_DIR}/scripts/<name>.ts` so agents can resolve the correct path.
## Code Style
- TypeScript throughout, no comments
- 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-danger-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
Each session creates an independent directory. Even the same source file generates a new directory per session.
**Output Directory**:
```
<skill-suffix>/<topic-slug>/
```
- `<skill-suffix>`: Skill name suffix (e.g., `xhs-images`, `cover-image`, `slide-deck`, `comic`)
- `<topic-slug>`: Generated from content topic (2-4 words, kebab-case)
- Example: `xhs-images/ai-future-trends/`
**Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "Introduction to Machine Learning" → `intro-machine-learning`
**Conflict Resolution**:
If `<skill-suffix>/<topic-slug>/` already exists:
- Append timestamp: `<topic-slug>-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052`
**Source Files**:
- Copy all sources to `<skill-suffix>/<topic-slug>/` with naming: `source-{slug}.{ext}`
- Multiple sources supported: text, images, files from conversation
- Examples:
- `source-article.md` (main text content)
- `source-reference.png` (image from conversation)
- `source-data.csv` (additional file)
- Original source files remain unchanged
### 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
## Extension Support
Every SKILL.md MUST include an Extension Support section at the end:
```markdown
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/<skill-name>/EXTEND.md` (project)
2. `~/.baoyu-skills/<skill-name>/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
```
Replace `<skill-name>` with the actual skill name (e.g., `baoyu-cover-image`).
+382 -14
View File
@@ -1,5 +1,7 @@
# baoyu-skills
English | [中文](./README.zh.md)
Skills shared by Baoyu for improving daily work efficiency with Claude Code.
## Prerequisites
@@ -9,6 +11,12 @@ Skills shared by Baoyu for improving daily work efficiency with Claude Code.
## Installation
### Quick Install (Recommended)
```bash
npx add-skill jimliu/baoyu-skills
```
### Register as Plugin Marketplace
Run the following command in Claude Code:
@@ -23,59 +31,419 @@ Run the following command in Claude Code:
1. Select **Browse and install plugins**
2. Select **baoyu-skills**
3. Select **content-skills**
3. Select the plugin(s) you want to install
4. Select **Install now**
**Option 2: Direct Install**
```bash
# Install specific plugin
/plugin install content-skills@baoyu-skills
/plugin install ai-generation-skills@baoyu-skills
/plugin install utility-skills@baoyu-skills
```
**Option 3: Ask the Agent**
Simply tell Claude Code:
> Please install Skills from github.com/JimLiu/baoyu-skills
### Available Plugins
| Plugin | Description | Skills |
|--------|-------------|--------|
| **content-skills** | Content generation and publishing | [xhs-images](#baoyu-xhs-images), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
| **ai-generation-skills** | AI-powered generation backends | [danger-gemini-web](#baoyu-danger-gemini-web) |
| **utility-skills** | Utility tools for content processing | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
## Update Skills
To update skills to the latest version:
1. Run `/plugin` in Claude Code
2. Switch to **Marketplaces** tab (use arrow keys or Tab)
3. Select **baoyu-skills**
4. Choose **Update marketplace**
You can also **Enable auto-update** to get the latest versions automatically.
![Update Skills](./screenshots/update-plugins.png)
## Available Skills
### gemini-web
Skills are organized into three categories:
### Content Skills
Content generation and publishing skills.
#### baoyu-xhs-images
Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics with **Style × Layout** two-dimensional system.
```bash
# Auto-select style and layout
/baoyu-xhs-images posts/ai-future/article.md
# Specify style
/baoyu-xhs-images posts/ai-future/article.md --style notion
# Specify layout
/baoyu-xhs-images posts/ai-future/article.md --layout dense
# Combine style and layout
/baoyu-xhs-images posts/ai-future/article.md --style tech --layout list
# Direct content input
/baoyu-xhs-images 今日星座运势
```
**Styles** (visual aesthetics): `cute` (default), `fresh`, `tech`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`
**Layouts** (information density):
| Layout | Density | Best for |
|--------|---------|----------|
| `sparse` | 1-2 pts | Covers, quotes |
| `balanced` | 3-4 pts | Regular content |
| `dense` | 5-8 pts | Knowledge cards, cheat sheets |
| `list` | 4-7 items | Checklists, rankings |
| `comparison` | 2 sides | Before/after, pros/cons |
| `flow` | 3-6 steps | Processes, timelines |
#### baoyu-cover-image
Generate hand-drawn style cover images for articles with multiple style options.
```bash
# From markdown file (auto-select style)
/baoyu-cover-image path/to/article.md
# Specify a style
/baoyu-cover-image path/to/article.md --style tech
/baoyu-cover-image path/to/article.md --style warm
# Without title text
/baoyu-cover-image path/to/article.md --no-title
```
Available styles: `elegant` (default), `blueprint`, `bold`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor`
**Style Previews**:
| | | |
|:---:|:---:|:---:|
| ![elegant](./screenshots/cover-image-styles/elegant.webp) | ![blueprint](./screenshots/cover-image-styles/blueprint.webp) | ![bold](./screenshots/cover-image-styles/bold.webp) |
| elegant | blueprint | bold |
| ![bold-editorial](./screenshots/cover-image-styles/bold-editorial.webp) | ![chalkboard](./screenshots/cover-image-styles/chalkboard.webp) | ![dark-atmospheric](./screenshots/cover-image-styles/dark-atmospheric.webp) |
| bold-editorial | chalkboard | dark-atmospheric |
| ![editorial-infographic](./screenshots/cover-image-styles/editorial-infographic.webp) | ![fantasy-animation](./screenshots/cover-image-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/cover-image-styles/intuition-machine.webp) |
| editorial-infographic | fantasy-animation | intuition-machine |
| ![minimal](./screenshots/cover-image-styles/minimal.webp) | ![nature](./screenshots/cover-image-styles/nature.webp) | ![notion](./screenshots/cover-image-styles/notion.webp) |
| minimal | nature | notion |
| ![pixel-art](./screenshots/cover-image-styles/pixel-art.webp) | ![playful](./screenshots/cover-image-styles/playful.webp) | ![retro](./screenshots/cover-image-styles/retro.webp) |
| pixel-art | playful | retro |
| ![sketch-notes](./screenshots/cover-image-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/cover-image-styles/vector-illustration.webp) | ![vintage](./screenshots/cover-image-styles/vintage.webp) |
| sketch-notes | vector-illustration | vintage |
| ![warm](./screenshots/cover-image-styles/warm.webp) | ![watercolor](./screenshots/cover-image-styles/watercolor.webp) | |
| warm | watercolor | |
#### baoyu-slide-deck
Generate professional slide deck images from content. Creates comprehensive outlines with style instructions, then generates individual slide images.
```bash
# From markdown file
/baoyu-slide-deck path/to/article.md
# With style and audience
/baoyu-slide-deck path/to/article.md --style corporate
/baoyu-slide-deck path/to/article.md --audience executives
# Outline only (no image generation)
/baoyu-slide-deck path/to/article.md --outline-only
# With language
/baoyu-slide-deck path/to/article.md --lang zh
```
**Styles** (visual aesthetics):
| Style | Description | Best For |
|-------|-------------|----------|
| `blueprint` (default) | Technical schematics, grid texture, engineering precision | Architecture, system design |
| `notion` | SaaS dashboard aesthetic, card-based layouts, clean data focus | Product demos, SaaS, B2B |
| `bold-editorial` | High-impact magazine style, bold typography, dark backgrounds | Product launches, keynotes |
| `corporate` | Navy/gold palette, structured layouts, professional icons | Investor decks, proposals |
| `dark-atmospheric` | Cinematic dark mode, glowing accents, atmospheric depth | Entertainment, gaming, creative |
| `editorial-infographic` | Magazine-style explainers, flat illustrations | Tech explainers, research |
| `fantasy-animation` | Whimsical Ghibli/Disney style, hand-drawn animation | Educational, storytelling |
| `intuition-machine` | Technical briefing, bilingual labels, aged paper texture | Technical docs, bilingual |
| `minimal` | Ultra-clean, maximum whitespace, single accent color | Executive briefings, premium |
| `pixel-art` | Retro 8-bit aesthetic, chunky pixels, nostalgic gaming | Gaming, developer talks |
| `scientific` | Academic diagrams, biological pathways, precise labeling | Biology, chemistry, medical |
| `sketch-notes` | Hand-drawn feel, soft brush strokes, warm background | Educational, tutorials |
| `vector-illustration` | Flat vector, black outlines, retro soft colors | Creative proposals, explainers |
| `vintage` | Aged-paper aesthetic, historical document styling | Historical, heritage, biography |
| `watercolor` | Soft hand-painted textures, natural warmth | Lifestyle, wellness, travel |
**Style Previews**:
| | | |
|:---:|:---:|:---:|
| ![blueprint](./screenshots/slide-deck-styles/blueprint.webp) | ![chalkboard](./screenshots/slide-deck-styles/chalkboard.webp) | ![bold-editorial](./screenshots/slide-deck-styles/bold-editorial.webp) |
| blueprint | chalkboard | bold-editorial |
| ![corporate](./screenshots/slide-deck-styles/corporate.webp) | ![dark-atmospheric](./screenshots/slide-deck-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/slide-deck-styles/editorial-infographic.webp) |
| corporate | dark-atmospheric | editorial-infographic |
| ![fantasy-animation](./screenshots/slide-deck-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/slide-deck-styles/intuition-machine.webp) | ![minimal](./screenshots/slide-deck-styles/minimal.webp) |
| fantasy-animation | intuition-machine | minimal |
| ![notion](./screenshots/slide-deck-styles/notion.webp) | ![pixel-art](./screenshots/slide-deck-styles/pixel-art.webp) | ![scientific](./screenshots/slide-deck-styles/scientific.webp) |
| notion | pixel-art | scientific |
| ![sketch-notes](./screenshots/slide-deck-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/slide-deck-styles/vector-illustration.webp) | ![vintage](./screenshots/slide-deck-styles/vintage.webp) |
| sketch-notes | vector-illustration | vintage |
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | |
After generation, slides are automatically merged into a `.pptx` file for easy sharing.
#### baoyu-comic
Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation.
```bash
# From source material
/baoyu-comic posts/turing-story/source.md
# Specify style
/baoyu-comic posts/turing-story/source.md --style dramatic
/baoyu-comic posts/turing-story/source.md --style ohmsha
# 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 --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`, `sepia`, `vibrant`, `ohmsha`, `realistic`, `wuxia`, 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 |
|-------|-------------|----------|
| `classic` (default) | Traditional Ligne Claire with clean uniform outlines, flat colors, detailed backgrounds | Biographies, balanced narratives, educational content |
| `dramatic` | High contrast with heavy shadows, intense expressions, angular compositions | Pivotal discoveries, conflicts, climactic scenes |
| `warm` | Soft edges, golden tones, cozy interiors with nostalgic feel | Personal stories, childhood scenes, mentorship |
| `sepia` | Vintage illustration style with aged paper effect, period-accurate details | Pre-1950s stories, classical science, historical figures |
| `vibrant` | Energetic lines with weight variation, bright colors, dynamic poses | Science explanations, "aha" moments, young audience |
| `ohmsha` | Manga guide style with visual metaphors, gadgets, student/mentor dynamic | Technical tutorials, complex concepts (ML, physics) |
| `realistic` | Full-color realistic manga with digital painting, smooth gradients, accurate proportions | Wine, food, business, lifestyle, professional topics |
| `wuxia` | Hong Kong martial arts style with ink brush strokes, dynamic combat, qi effects | Martial arts, wuxia/xianxia, Chinese historical fiction |
**Style Previews**:
| | | |
|:---:|:---:|:---:|
| ![classic](./screenshots/comic-styles/classic.webp) | ![dramatic](./screenshots/comic-styles/dramatic.webp) | ![warm](./screenshots/comic-styles/warm.webp) |
| classic | dramatic | warm |
| ![sepia](./screenshots/comic-styles/sepia.webp) | ![vibrant](./screenshots/comic-styles/vibrant.webp) | ![ohmsha](./screenshots/comic-styles/ohmsha.webp) |
| sepia | vibrant | ohmsha |
| ![realistic](./screenshots/comic-styles/realistic.webp) | ![wuxia](./screenshots/comic-styles/wuxia.webp) | |
| realistic | wuxia | |
**Layouts** (panel arrangement):
| Layout | Panels/Page | Best for |
|--------|-------------|----------|
| `standard` | 4-6 | Dialogue, narrative flow |
| `cinematic` | 2-4 | Dramatic moments, establishing shots |
| `dense` | 6-9 | Technical explanations, timelines |
| `splash` | 1-2 large | Key moments, revelations |
| `mixed` | 3-7 varies | Complex narratives, emotional arcs |
| `webtoon` | 3-5 vertical | Ohmsha tutorials, mobile reading |
**Layout Previews**:
| | | |
|:---:|:---:|:---:|
| ![standard](./screenshots/comic-layouts/standard.webp) | ![cinematic](./screenshots/comic-layouts/cinematic.webp) | ![dense](./screenshots/comic-layouts/dense.webp) |
| standard | cinematic | dense |
| ![splash](./screenshots/comic-layouts/splash.webp) | ![mixed](./screenshots/comic-layouts/mixed.webp) | ![webtoon](./screenshots/comic-layouts/webtoon.webp) |
| splash | mixed | webtoon |
#### baoyu-article-illustrator
Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids.
```bash
/baoyu-article-illustrator path/to/article.md
```
#### baoyu-post-to-x
Post content and articles to X (Twitter). Supports regular posts with images and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation.
```bash
# Post with text
/baoyu-post-to-x "Hello from Claude Code!"
# Post with images
/baoyu-post-to-x "Check this out" --image photo.png
# Post X Article
/baoyu-post-to-x --article path/to/article.md
```
#### baoyu-post-to-wechat
Post content to WeChat Official Account (微信公众号). Two modes available:
**Image-Text (图文)** - Multiple images with short title/content:
```bash
/baoyu-post-to-wechat 图文 --markdown article.md --images ./photos/
/baoyu-post-to-wechat 图文 --markdown article.md --image img1.png --image img2.png --image img3.png
/baoyu-post-to-wechat 图文 --title "标题" --content "内容" --image img1.png --submit
```
**Article (文章)** - Full markdown/HTML with rich formatting:
```bash
/baoyu-post-to-wechat 文章 --markdown article.md
/baoyu-post-to-wechat 文章 --markdown article.md --theme grace
/baoyu-post-to-wechat 文章 --html article.html
```
Prerequisites: Google Chrome installed. First run requires QR code login (session preserved).
### AI Generation Skills
AI-powered generation backends.
#### baoyu-danger-gemini-web
Interacts with Gemini Web to generate text and images.
**Text Generation:**
```bash
/gemini-web "Hello, Gemini"
/gemini-web --prompt "Explain quantum computing"
/baoyu-danger-gemini-web "Hello, Gemini"
/baoyu-danger-gemini-web --prompt "Explain quantum computing"
```
**Image Generation:**
```bash
/gemini-web --prompt "A cute cat" --image cat.png
/gemini-web --promptfiles system.md content.md --image out.png
/baoyu-danger-gemini-web --prompt "A cute cat" --image cat.png
/baoyu-danger-gemini-web --promptfiles system.md content.md --image out.png
```
### xhs-images
### Utility Skills
Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics.
Utility tools for content processing.
#### baoyu-danger-x-to-markdown
Converts X (Twitter) content to markdown format. Supports tweet threads and X Articles.
```bash
# Specify article path
/xhs-images posts/ai-future/article.md
# Convert tweet to markdown
/baoyu-danger-x-to-markdown https://x.com/username/status/123456
# Direct content input
/xhs-images 今日星座运势
# Save to specific file
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 -o output.md
# JSON output
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 --json
```
**Supported URLs:**
- `https://x.com/<user>/status/<id>`
- `https://twitter.com/<user>/status/<id>`
- `https://x.com/i/article/<id>`
**Authentication:** Uses environment variables (`X_AUTH_TOKEN`, `X_CT0`) or Chrome login for cookie-based auth.
#### baoyu-compress-image
Compress images to reduce file size while maintaining quality.
```bash
/baoyu-compress-image path/to/image.png
/baoyu-compress-image path/to/images/ --quality 80
```
## Customization
All skills support customization via `EXTEND.md` files. Create an extension file to override default styles, add custom configurations, or define your own presets.
**Extension paths** (checked in priority order):
1. `.baoyu-skills/<skill-name>/EXTEND.md` - Project-level (for team/project-specific settings)
2. `~/.baoyu-skills/<skill-name>/EXTEND.md` - User-level (for personal preferences)
**Example**: To customize `baoyu-cover-image` with your brand colors:
```bash
mkdir -p .baoyu-skills/baoyu-cover-image
```
Then create `.baoyu-skills/baoyu-cover-image/EXTEND.md`:
```markdown
## Custom Styles
### brand
- Primary color: #1a73e8
- Secondary color: #34a853
- Font style: Modern sans-serif
- Always include company logo watermark
```
The extension content will be loaded before skill execution and override defaults.
## Disclaimer
### gemini-web
### baoyu-danger-gemini-web
This skill uses the Gemini Web API (reverse-engineered).
**Warning:** This project uses unofficial API access via browser cookies. Use at your own risk.
- First run opens Chrome to authenticate with Google
- First run opens a browser to authenticate with Google
- Cookies are cached for subsequent runs
- No guarantees on API stability or availability
**Supported browsers** (auto-detected): Google Chrome, Chrome Canary/Beta, Chromium, Microsoft Edge
**Proxy configuration**: If you need a proxy to access Google services (e.g., in China), set environment variables inline:
```bash
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 /baoyu-danger-gemini-web "Hello"
```
### baoyu-danger-x-to-markdown
This skill uses a reverse-engineered X (Twitter) API.
**Warning:** This is NOT an official API. Use at your own risk.
- May break without notice if X changes their API
- Account restrictions possible if API usage detected
- First use requires consent acknowledgment
- Authentication via environment variables or Chrome login
## License
MIT
+449
View File
@@ -0,0 +1,449 @@
# baoyu-skills
[English](./README.md) | 中文
宝玉分享的 Claude Code 技能集,提升日常工作效率。
## 前置要求
- 已安装 Node.js 环境
- 能够运行 `npx bun` 命令
## 安装
### 快速安装(推荐)
```bash
npx add-skill jimliu/baoyu-skills
```
### 注册插件市场
在 Claude Code 中运行:
```bash
/plugin marketplace add jimliu/baoyu-skills
```
### 安装技能
**方式一:通过浏览界面**
1. 选择 **Browse and install plugins**
2. 选择 **baoyu-skills**
3. 选择要安装的插件
4. 选择 **Install now**
**方式二:直接安装**
```bash
# 安装指定插件
/plugin install content-skills@baoyu-skills
/plugin install ai-generation-skills@baoyu-skills
/plugin install utility-skills@baoyu-skills
```
**方式三:告诉 Agent**
直接告诉 Claude Code
> 请帮我安装 github.com/JimLiu/baoyu-skills 中的 Skills
### 可用插件
| 插件 | 说明 | 包含技能 |
|------|------|----------|
| **content-skills** | 内容生成和发布 | [xhs-images](#baoyu-xhs-images), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
| **ai-generation-skills** | AI 生成后端 | [danger-gemini-web](#baoyu-danger-gemini-web) |
| **utility-skills** | 内容处理工具 | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
## 更新技能
更新技能到最新版本:
1. 在 Claude Code 中运行 `/plugin`
2. 切换到 **Marketplaces** 标签页(使用方向键或 Tab
3. 选择 **baoyu-skills**
4. 选择 **Update marketplace**
也可以选择 **Enable auto-update** 启用自动更新,每次启动时自动获取最新版本。
![更新技能](./screenshots/update-plugins.png)
## 可用技能
技能分为三大类:
### 内容技能 (Content Skills)
内容生成和发布技能。
#### baoyu-xhs-images
小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图,支持 **风格 × 布局** 二维系统。
```bash
# 自动选择风格和布局
/baoyu-xhs-images posts/ai-future/article.md
# 指定风格
/baoyu-xhs-images posts/ai-future/article.md --style notion
# 指定布局
/baoyu-xhs-images posts/ai-future/article.md --layout dense
# 组合风格和布局
/baoyu-xhs-images posts/ai-future/article.md --style tech --layout list
# 直接输入内容
/baoyu-xhs-images 今日星座运势
```
**风格**(视觉美学):`cute`(默认)、`fresh``tech``warm``bold``minimal``retro``pop``notion`
**布局**(信息密度):
| 布局 | 密度 | 适用场景 |
|------|------|----------|
| `sparse` | 1-2 点 | 封面、金句 |
| `balanced` | 3-4 点 | 常规内容 |
| `dense` | 5-8 点 | 知识卡片、干货总结 |
| `list` | 4-7 项 | 清单、排行 |
| `comparison` | 双栏 | 对比、优劣 |
| `flow` | 3-6 步 | 流程、时间线 |
#### baoyu-cover-image
为文章生成手绘风格封面图,支持多种风格选项。
```bash
# 从 markdown 文件生成(自动选择风格)
/baoyu-cover-image path/to/article.md
# 指定风格
/baoyu-cover-image path/to/article.md --style tech
/baoyu-cover-image path/to/article.md --style warm
# 不包含标题文字
/baoyu-cover-image path/to/article.md --no-title
```
可用风格:`elegant`(默认)、`blueprint``bold``bold-editorial``chalkboard``dark-atmospheric``editorial-infographic``fantasy-animation``intuition-machine``minimal``nature``notion``pixel-art``playful``retro``sketch-notes``vector-illustration``vintage``warm``watercolor`
**风格预览**
| | | |
|:---:|:---:|:---:|
| ![elegant](./screenshots/cover-image-styles/elegant.webp) | ![blueprint](./screenshots/cover-image-styles/blueprint.webp) | ![bold](./screenshots/cover-image-styles/bold.webp) |
| elegant | blueprint | bold |
| ![bold-editorial](./screenshots/cover-image-styles/bold-editorial.webp) | ![chalkboard](./screenshots/cover-image-styles/chalkboard.webp) | ![dark-atmospheric](./screenshots/cover-image-styles/dark-atmospheric.webp) |
| bold-editorial | chalkboard | dark-atmospheric |
| ![editorial-infographic](./screenshots/cover-image-styles/editorial-infographic.webp) | ![fantasy-animation](./screenshots/cover-image-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/cover-image-styles/intuition-machine.webp) |
| editorial-infographic | fantasy-animation | intuition-machine |
| ![minimal](./screenshots/cover-image-styles/minimal.webp) | ![nature](./screenshots/cover-image-styles/nature.webp) | ![notion](./screenshots/cover-image-styles/notion.webp) |
| minimal | nature | notion |
| ![pixel-art](./screenshots/cover-image-styles/pixel-art.webp) | ![playful](./screenshots/cover-image-styles/playful.webp) | ![retro](./screenshots/cover-image-styles/retro.webp) |
| pixel-art | playful | retro |
| ![sketch-notes](./screenshots/cover-image-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/cover-image-styles/vector-illustration.webp) | ![vintage](./screenshots/cover-image-styles/vintage.webp) |
| sketch-notes | vector-illustration | vintage |
| ![warm](./screenshots/cover-image-styles/warm.webp) | ![watercolor](./screenshots/cover-image-styles/watercolor.webp) | |
| warm | watercolor | |
#### baoyu-slide-deck
从内容生成专业的幻灯片图片。先创建包含样式说明的完整大纲,然后逐页生成幻灯片图片。
```bash
# 从 markdown 文件生成
/baoyu-slide-deck path/to/article.md
# 指定风格和受众
/baoyu-slide-deck path/to/article.md --style corporate
/baoyu-slide-deck path/to/article.md --audience executives
# 仅生成大纲(不生成图片)
/baoyu-slide-deck path/to/article.md --outline-only
# 指定语言
/baoyu-slide-deck path/to/article.md --lang zh
```
**风格**(视觉美学):
| 风格 | 描述 | 适用场景 |
|------|------|----------|
| `blueprint`(默认) | 技术蓝图风格,网格纹理,工程精度 | 架构设计、系统设计 |
| `notion` | SaaS 仪表盘美学,卡片式布局,数据清晰 | 产品演示、SaaS、B2B |
| `bold-editorial` | 杂志社论风格,粗体排版,深色背景 | 产品发布、主题演讲 |
| `corporate` | 海军蓝/金色配色,结构化布局,专业图标 | 投资者演示、客户提案 |
| `dark-atmospheric` | 电影级暗色调,发光效果,氛围感 | 娱乐、游戏、创意 |
| `editorial-infographic` | 杂志风格信息图,扁平插画 | 科技解说、研究报告 |
| `fantasy-animation` | 吉卜力/迪士尼风格,手绘动画 | 教育、故事讲述 |
| `intuition-machine` | 技术简报,双语标签,做旧纸张纹理 | 技术文档、双语内容 |
| `minimal` | 极简风格,大量留白,单一强调色 | 高管简报、高端品牌 |
| `pixel-art` | 复古 8-bit 像素风,怀旧游戏感 | 游戏、开发者分享 |
| `scientific` | 学术图表,生物通路,精确标注 | 生物、化学、医学 |
| `sketch-notes` | 手绘风格,柔和笔触,暖白色背景 | 教育、教程、知识分享 |
| `vector-illustration` | 扁平矢量风格,黑色轮廓线,复古柔和配色 | 创意提案、说明性内容 |
| `vintage` | 做旧纸张美学,历史文档风格 | 历史、传记、人文 |
| `watercolor` | 柔和手绘水彩纹理,自然温暖 | 生活方式、健康、旅行 |
**风格预览**
| | | |
|:---:|:---:|:---:|
| ![blueprint](./screenshots/slide-deck-styles/blueprint.webp) | ![chalkboard](./screenshots/slide-deck-styles/chalkboard.webp) | ![bold-editorial](./screenshots/slide-deck-styles/bold-editorial.webp) |
| blueprint | chalkboard | bold-editorial |
| ![corporate](./screenshots/slide-deck-styles/corporate.webp) | ![dark-atmospheric](./screenshots/slide-deck-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/slide-deck-styles/editorial-infographic.webp) |
| corporate | dark-atmospheric | editorial-infographic |
| ![fantasy-animation](./screenshots/slide-deck-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/slide-deck-styles/intuition-machine.webp) | ![minimal](./screenshots/slide-deck-styles/minimal.webp) |
| fantasy-animation | intuition-machine | minimal |
| ![notion](./screenshots/slide-deck-styles/notion.webp) | ![pixel-art](./screenshots/slide-deck-styles/pixel-art.webp) | ![scientific](./screenshots/slide-deck-styles/scientific.webp) |
| notion | pixel-art | scientific |
| ![sketch-notes](./screenshots/slide-deck-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/slide-deck-styles/vector-illustration.webp) | ![vintage](./screenshots/slide-deck-styles/vintage.webp) |
| sketch-notes | vector-illustration | vintage |
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | |
生成完成后,所有幻灯片会自动合并为 `.pptx` 文件,方便分享。
#### baoyu-comic
知识漫画创作器,支持多种风格(Logicomix/清线风格、欧姆社漫画教程风格)。创作带有详细分镜布局的原创教育漫画,逐页生成图片。
```bash
# 从素材文件生成
/baoyu-comic posts/turing-story/source.md
# 指定风格
/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 --aspect 16:9
# 指定语言
/baoyu-comic posts/turing-story/source.md --lang zh
# 直接输入内容
/baoyu-comic "图灵的故事与计算机科学的诞生"
```
**选项**
| 选项 | 取值 |
|------|------|
| `--style` | `classic`(默认)、`dramatic``warm``sepia``vibrant``ohmsha``realistic``wuxia`,或自然语言描述 |
| `--layout` | `standard`(默认)、`cinematic``dense``splash``mixed``webtoon` |
| `--aspect` | `3:4`(默认,竖版)、`4:3`(横版)、`16:9`(宽屏) |
| `--lang` | `auto`(默认)、`zh``en``ja` 等 |
**风格**(视觉美学):
| 风格 | 描述 | 适用场景 |
|------|------|----------|
| `classic`(默认) | 传统清线风格,统一线条、平涂色彩、精细背景 | 传记、平衡叙事、教育内容 |
| `dramatic` | 高对比度,重阴影、紧张表情、棱角分明的构图 | 重大发现、冲突、高潮场景 |
| `warm` | 柔和边缘、金色调、温馨室内、怀旧感 | 个人故事、童年场景、师生情 |
| `sepia` | 复古插画风格、做旧纸张效果、时代准确细节 | 1950 年前故事、古典科学、历史人物 |
| `vibrant` | 富有活力的线条、明亮色彩、动感姿态 | 科学解说、"顿悟"时刻、青少年读者 |
| `ohmsha` | 欧姆社漫画风格,视觉比喻、道具、学生/导师互动 | 技术教程、复杂概念(机器学习、物理) |
| `realistic` | 全彩写实日漫风格,数字绘画、平滑渐变、准确人体比例 | 红酒、美食、商业、生活方式、专业话题 |
| `wuxia` | 港漫武侠风格,水墨笔触、动态打斗、气功特效 | 武侠、仙侠、中国历史小说 |
**风格预览**
| | | |
|:---:|:---:|:---:|
| ![classic](./screenshots/comic-styles/classic.webp) | ![dramatic](./screenshots/comic-styles/dramatic.webp) | ![warm](./screenshots/comic-styles/warm.webp) |
| classic | dramatic | warm |
| ![sepia](./screenshots/comic-styles/sepia.webp) | ![vibrant](./screenshots/comic-styles/vibrant.webp) | ![ohmsha](./screenshots/comic-styles/ohmsha.webp) |
| sepia | vibrant | ohmsha |
| ![realistic](./screenshots/comic-styles/realistic.webp) | ![wuxia](./screenshots/comic-styles/wuxia.webp) | |
| realistic | wuxia | |
**布局**(分镜排列):
| 布局 | 每页分镜数 | 适用场景 |
|------|-----------|----------|
| `standard` | 4-6 | 对话、叙事推进 |
| `cinematic` | 2-4 | 戏剧性时刻、建立镜头 |
| `dense` | 6-9 | 技术说明、时间线 |
| `splash` | 1-2 大图 | 关键时刻、揭示 |
| `mixed` | 3-7 不等 | 复杂叙事、情感弧线 |
| `webtoon` | 3-5 竖向 | 欧姆社教程、手机阅读 |
**布局预览**
| | | |
|:---:|:---:|:---:|
| ![standard](./screenshots/comic-layouts/standard.webp) | ![cinematic](./screenshots/comic-layouts/cinematic.webp) | ![dense](./screenshots/comic-layouts/dense.webp) |
| standard | cinematic | dense |
| ![splash](./screenshots/comic-layouts/splash.webp) | ![mixed](./screenshots/comic-layouts/mixed.webp) | ![webtoon](./screenshots/comic-layouts/webtoon.webp) |
| splash | mixed | webtoon |
#### baoyu-article-illustrator
智能文章插图技能。分析文章内容,在需要视觉辅助的位置生成插图。
```bash
/baoyu-article-illustrator path/to/article.md
```
#### baoyu-post-to-x
发布内容和文章到 X (Twitter)。支持带图片的普通帖子和 X 文章(长篇 Markdown)。使用真实 Chrome + CDP 绕过反自动化检测。
```bash
# 发布文字
/baoyu-post-to-x "Hello from Claude Code!"
# 发布带图片
/baoyu-post-to-x "看看这个" --image photo.png
# 发布 X 文章
/baoyu-post-to-x --article path/to/article.md
```
#### baoyu-post-to-wechat
发布内容到微信公众号,支持两种模式:
**图文模式** - 多图配短标题和正文:
```bash
/baoyu-post-to-wechat 图文 --markdown article.md --images ./photos/
/baoyu-post-to-wechat 图文 --markdown article.md --image img1.png --image img2.png --image img3.png
/baoyu-post-to-wechat 图文 --title "标题" --content "内容" --image img1.png --submit
```
**文章模式** - 完整 markdown/HTML 富文本格式:
```bash
/baoyu-post-to-wechat 文章 --markdown article.md
/baoyu-post-to-wechat 文章 --markdown article.md --theme grace
/baoyu-post-to-wechat 文章 --html article.html
```
前置要求:已安装 Google Chrome,首次运行需扫码登录(登录状态会保存)
### AI 生成技能 (AI Generation Skills)
AI 驱动的生成后端。
#### baoyu-danger-gemini-web
与 Gemini Web 交互,生成文本和图片。
**文本生成:**
```bash
/baoyu-danger-gemini-web "你好,Gemini"
/baoyu-danger-gemini-web --prompt "解释量子计算"
```
**图片生成:**
```bash
/baoyu-danger-gemini-web --prompt "一只可爱的猫" --image cat.png
/baoyu-danger-gemini-web --promptfiles system.md content.md --image out.png
```
### 工具技能 (Utility Skills)
内容处理工具。
#### baoyu-danger-x-to-markdown
将 X (Twitter) 内容转换为 markdown 格式。支持推文串和 X 文章。
```bash
# 将推文转换为 markdown
/baoyu-danger-x-to-markdown https://x.com/username/status/123456
# 保存到指定文件
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 -o output.md
# JSON 输出
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 --json
```
**支持的 URL**
- `https://x.com/<user>/status/<id>`
- `https://twitter.com/<user>/status/<id>`
- `https://x.com/i/article/<id>`
**身份验证:** 使用环境变量(`X_AUTH_TOKEN``X_CT0`)或 Chrome 登录进行 cookie 认证。
#### baoyu-compress-image
压缩图片以减小文件大小,同时保持质量。
```bash
/baoyu-compress-image path/to/image.png
/baoyu-compress-image path/to/images/ --quality 80
```
## 自定义扩展
所有技能支持通过 `EXTEND.md` 文件自定义。创建扩展文件可覆盖默认样式、添加自定义配置或定义个人预设。
**扩展路径**(按优先级检查):
1. `.baoyu-skills/<skill-name>/EXTEND.md` - 项目级(团队/项目特定设置)
2. `~/.baoyu-skills/<skill-name>/EXTEND.md` - 用户级(个人偏好设置)
**示例**:为 `baoyu-cover-image` 自定义品牌配色:
```bash
mkdir -p .baoyu-skills/baoyu-cover-image
```
然后创建 `.baoyu-skills/baoyu-cover-image/EXTEND.md`
```markdown
## 自定义风格
### brand
- 主色:#1a73e8
- 辅色:#34a853
- 字体风格:现代无衬线
- 始终包含公司 logo 水印
```
扩展内容会在技能执行前加载,并覆盖默认设置。
## 免责声明
### baoyu-danger-gemini-web
此技能使用 Gemini Web API(逆向工程)。
**警告:** 本项目通过浏览器 cookies 使用非官方 API。使用风险自负。
- 首次运行会打开浏览器进行 Google 身份验证
- Cookies 会被缓存供后续使用
- 不保证 API 的稳定性或可用性
**支持的浏览器**(自动检测):Google Chrome、Chrome Canary/Beta、Chromium、Microsoft Edge
**代理配置**:如果需要通过代理访问 Google 服务(如中国大陆用户),请在命令前设置环境变量:
```bash
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 /baoyu-danger-gemini-web "你好"
```
### baoyu-danger-x-to-markdown
此技能使用逆向工程的 X (Twitter) API。
**警告:** 这不是官方 API。使用风险自负。
- 如果 X 更改其 API,可能会无预警失效
- 如检测到 API 使用,账号可能受限
- 首次使用需确认免责声明
- 通过环境变量或 Chrome 登录进行身份验证
## 许可证
MIT
Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

+460
View File
@@ -0,0 +1,460 @@
---
name: baoyu-article-illustrator
description: Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids with multiple style options. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".
---
# Smart Article Illustration Skill
Analyze article structure and content, identify positions requiring visual aids, and generate illustrations with flexible style options.
## Usage
```bash
# Auto-select style based on content
/baoyu-article-illustrator path/to/article.md
# Specify a style
/baoyu-article-illustrator path/to/article.md --style tech
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style minimal
# Combine with other options
/baoyu-article-illustrator path/to/article.md --style playful
```
## Options
| Option | Description |
|--------|-------------|
| `--style <name>` | Specify illustration style (see Style Gallery below) |
## Style Gallery
### 1. `elegant`
Refined, sophisticated, professional
- **Colors**: Soft coral, muted teal, dusty rose, cream background
- **Elements**: Delicate line work, subtle icons, balanced composition
- **Best for**: Professional articles, thought leadership, business topics
### 2. `tech`
Modern, futuristic, digital
- **Colors**: Deep blue, electric cyan, purple, dark backgrounds
- **Elements**: Geometric shapes, circuit patterns, data visualizations, tech icons
- **Best for**: AI, programming, technology, digital transformation articles
### 3. `warm`
Friendly, approachable, human-centered
- **Colors**: Warm orange, golden yellow, terracotta, cream
- **Elements**: Rounded shapes, friendly characters, sun/light motifs, hearts
- **Best for**: Personal growth, lifestyle, education, human interest stories
### 4. `bold`
High contrast, impactful, energetic
- **Colors**: Vibrant red/orange, deep black, bright yellow accents
- **Elements**: Strong shapes, dramatic contrast, dynamic compositions
- **Best for**: Opinion pieces, important warnings, call-to-action content
### 5. `minimal`
Ultra-clean, zen-like, focused
- **Colors**: Black, white, single accent color
- **Elements**: Maximum whitespace, single focal element, simple lines
- **Best for**: Philosophy, minimalism, focused explanations
### 6. `playful`
Fun, creative, whimsical
- **Colors**: Pastel rainbow, bright pops, light backgrounds
- **Elements**: Doodles, quirky characters, speech bubbles, emoji-style icons
- **Best for**: Tutorials, beginner guides, casual content, fun topics
### 7. `nature`
Organic, calm, earthy
- **Colors**: Forest green, earth brown, sky blue, sand beige
- **Elements**: Plant motifs, natural textures, flowing lines, organic shapes
- **Best for**: Sustainability, wellness, outdoor topics, slow living
### 8. `sketch`
Raw, authentic, notebook-style
- **Colors**: Pencil gray, paper white, occasional color highlights
- **Elements**: Rough lines, sketch marks, handwritten notes, arrows
- **Best for**: Ideas in progress, brainstorming, thought processes
### 9. `notion` (Default)
Minimalist hand-drawn line art, intellectual
- **Colors**: Black outlines, white background, 1-2 pastel accents
- **Elements**: Simple line doodles, geometric shapes, hand-drawn wobble, maximum whitespace
- **Best for**: Knowledge sharing, concept explanations, SaaS content, productivity articles
## Auto Style Selection
When no `--style` is specified, analyze content to select the best style:
| Content Signals | Selected Style |
|----------------|----------------|
| AI, coding, tech, digital, algorithm, data | `tech` |
| Personal story, emotion, growth, life, feeling | `warm` |
| Warning, urgent, must-read, critical, important | `bold` |
| Simple, zen, focus, essential, core | `minimal` |
| Fun, easy, beginner, tutorial, guide, how-to | `playful` |
| Nature, eco, wellness, health, organic, green | `nature` |
| Idea, thought, concept, draft, brainstorm | `sketch` |
| Business, professional, strategy, analysis | `elegant` |
| Knowledge, concept, productivity, SaaS, notion | `notion` |
## File Management
### Output Directory
Each session creates an independent directory named by content slug:
```
illustrations/{topic-slug}/
├── source-{slug}.{ext} # Source files (text, images, etc.)
├── outline.md
├── outline-{style}.md # Style variant outlines
├── prompts/
│ ├── illustration-concept-a.md
│ ├── illustration-concept-b.md
│ └── ...
├── illustration-concept-a.png
├── illustration-concept-b.png
└── ...
```
**Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "The Future of AI" → `future-of-ai`
### Conflict Resolution
If `illustrations/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052`
### Source Files
Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-photo.jpg` (image from conversation)
- `source-reference.pdf` (additional file)
Multiple sources supported: text, images, files from conversation.
## Workflow
### Step 1: Analyze Content & Select Style
1. Read article content
2. If `--style` specified, use that style
3. Otherwise, scan for style signals and auto-select
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
### Step 2: Identify Illustration Positions
**Three Purposes of Illustrations**:
1. **Information Supplement**: Help understand abstract concepts
2. **Concept Visualization**: Transform abstract ideas into concrete visuals
3. **Imagination Guidance**: Create atmosphere, enhance reading experience
**Content Suitable for Illustrations**:
- Abstract concepts needing visualization
- Processes/steps needing diagrams
- Comparisons needing visual representation
- Core arguments needing reinforcement
- Scenarios needing imagination guidance
**Illustration Count**:
- Consider at least 1 image per major section
- Prioritize core arguments and abstract concepts
- **Principle: More is better than fewer**
### Step 3: Generate Illustration Plan
```markdown
# Illustration Plan
**Article**: [article path]
**Style**: [selected style]
**Illustration Count**: N images
---
## Illustration 1
**Insert Position**: [section name] / [paragraph description]
**Purpose**: [why illustration needed here]
**Visual Content**: [what the image should show]
**Filename**: illustration-[slug].png
---
## Illustration 2
...
```
### 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
Illustration theme: [concept in 2-3 words]
Style: [style name]
Visual composition:
- Main visual: [description matching style]
- Layout: [element positioning]
- Decorative elements: [style-appropriate decorations]
Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
Text content (if any):
- [Any labels or captions in content language]
Style notes: [specific style characteristics]
```
### Step 6: Generate Images
**Image Generation Skill Selection**:
1. Check available image generation skills
2. If multiple skills available, ask user to choose
**Generation Flow**:
1. Call selected image generation skill with prompt file and output path
2. Generate images sequentially
3. After each image, output progress: "Generated X/N"
4. On failure, auto-retry once
5. If retry fails, log reason, continue to next
### Step 7: Update Article
Insert generated images at corresponding positions:
```markdown
![illustration description]([article-name]/illustrations/illustration-[slug].png)
```
**Insertion Rules**:
- Insert image after corresponding paragraph
- Leave one blank line before and after image
- Alt text uses concise description in article's language
### Step 8: Output Summary
```
Article Illustration Complete!
Article: [article path]
Style: [style name]
Generated: X/N images successful
Illustration Positions:
- illustration-xxx.png → After section "Section Name"
- illustration-yyy.png → After section "Another Section"
...
[If any failures]
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
```
Colors: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
Background: Warm cream (#F5F0E6), soft beige
Accents: Gold (#C9A962), copper
Elements: Delicate lines, refined icons, subtle gradients, balanced whitespace
```
### tech
```
Colors: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
Background: Dark gray (#1A202C), near-black (#0D1117)
Accents: Neon green (#00FF88), bright white
Elements: Circuit patterns, data nodes, geometric grids, glowing effects
```
### warm
```
Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
Background: Cream (#FFFAF0), soft peach (#FED7AA)
Accents: Deep brown (#744210), soft red
Elements: Rounded shapes, smiling faces, sun rays, hearts, cozy lighting
```
### bold
```
Colors: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
Background: Deep black (#000000), dark charcoal
Accents: White, neon highlights
Elements: Strong shapes, exclamation marks, arrows, dramatic contrast
```
### minimal
```
Colors: Pure black (#000000), white (#FFFFFF)
Background: White or off-white (#FAFAFA)
Accents: Single color (content-derived)
Elements: Single focal point, maximum negative space, thin precise lines
```
### playful
```
Colors: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
Background: Light cream (#FFFBEB), soft white
Accents: Bright pops - yellow, coral, turquoise
Elements: Doodles, stars, swirls, cute characters, speech bubbles
```
### nature
```
Colors: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
Accents: Sunset orange, water blue
Elements: Leaves, trees, mountains, organic flowing lines, natural textures
```
### sketch
```
Colors: Pencil gray (#4A5568), paper white (#FAFAFA)
Background: Off-white paper texture (#F7FAFC)
Accents: Single highlight color (blue, red, or yellow)
Elements: Rough sketch lines, arrows, handwritten labels, crossed-out marks
```
### notion
```
Colors: Black (#1A1A1A), dark gray (#4A4A4A)
Background: Pure white (#FFFFFF), off-white (#FAFAFA)
Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
Elements: Simple line doodles, hand-drawn wobble effect, geometric shapes, stick figures, maximum whitespace
Typography: Clean hand-drawn lettering, simple sans-serif labels
```
## Notes
- Illustrations serve the content: supplement information, visualize concepts
- 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
- Prompts written in user's confirmed language preference
- Illustration text (labels, captions) should match article language
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
@@ -0,0 +1,32 @@
Create a cartoon-style infographic illustration following these guidelines:
## Image Specifications
- **Type**: Infographic illustration
- **Orientation**: Landscape (horizontal)
- **Aspect Ratio**: 16:9
- **Style**: Hand-drawn illustration
## Core Principles
- Hand-drawn quality throughout - NO realistic or photographic elements
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
- Keep information concise, highlight keywords and core concepts
- Use ample whitespace for easy visual scanning
- Maintain clear visual hierarchy
## Text Style (When Text Included)
- **ALL text MUST be hand-drawn style**
- Text should be readable and complement the visual
- Font style harmonizes with illustration style
- **DO NOT use realistic or computer-generated fonts**
## Language
- Use the same language as the content provided below for any text elements
- Match punctuation style to the content language
---
Please use nano banana pro to generate the illustration based on the content provided below:
+409
View File
@@ -0,0 +1,409 @@
---
name: baoyu-comic
description: Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
---
# Knowledge Comic Creator
Create original knowledge comics with multiple visual styles.
## Usage
```bash
/baoyu-comic posts/turing-story/source.md
/baoyu-comic # then paste content
```
## Options
| Option | Values |
|--------|--------|
| `--style` | classic (default), dramatic, warm, sepia, vibrant, ohmsha, realistic, wuxia, 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 × 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
| Content Signals | Style | Layout |
|-----------------|-------|--------|
| Tutorial, how-to, beginner | ohmsha | webtoon |
| Computing, AI, programming | ohmsha | dense |
| Pre-1950, classical, ancient | sepia | cinematic |
| Personal story, mentor | warm | standard |
| Conflict, breakthrough | dramatic | splash |
| Wine, food, business, lifestyle, professional | realistic | cinematic |
| Martial arts, wuxia, xianxia, Chinese historical | wuxia | splash |
| Biography, balanced | classic | mixed |
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/merge-to-pdf.ts` | Merge comic pages into PDF |
## File Structure
Each session creates an independent directory named by content slug:
```
comic/{topic-slug}/
├── source-{slug}.{ext} # Source files (text, images, etc.)
├── 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-[slug].md
│ └── NN-page-[slug].md
├── 00-cover-[slug].png
├── NN-page-[slug].png
└── {topic-slug}.pdf
```
**Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "Alan Turing Biography" → `alan-turing-bio`
**Conflict Resolution**:
If `comic/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `turing-story` exists → `turing-story-20260118-143052`
**Source Files**:
Copy all sources with naming `source-{slug}.{ext}`:
- `source-biography.md`, `source-portrait.jpg`, `source-timeline.png`, etc.
- Multiple sources supported: text, images, files from conversation
## Workflow
### Step 1: Analyze Content → `analysis.md`
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`**
**analysis.md Format**:
```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
---
## Target Audience
- **Primary**: Tech enthusiasts curious about computing history
- **Secondary**: Students learning about scientific breakthroughs
- **Tertiary**: General readers interested in biographical stories
## Value Proposition
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
## 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" → ohmsha + 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 | ohmsha | 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 + ohmsha
- C: Character-focused + warm
- Custom
Question 2 (Style): Which visual style?
- sepia (Recommended from variant)
- classic / dramatic / warm / sepia / vibrant / ohmsha / realistic / wuxia
- 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
With confirmed storyboard + style + aspect ratio:
**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
- If multiple skills available, ask user preference
**Character Reference Handling**:
- 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 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 generated:
```bash
npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <comic-dir>
```
Creates `{topic-slug}.pdf` with all pages as full-page images.
### Step 6: Completion Report
```
Comic Complete!
Title: [title] | Style: [style] | Pages: [count] | Aspect: [ratio] | Language: [lang]
Location: [path]
✓ analysis.md
✓ characters.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: 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"
**Reference**: `references/ohmsha-guide.md` for detailed guidelines.
## 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
- `storyboard-template.md` - Storyboard structure and panel breakdown
- `ohmsha-guide.md` - Ohmsha manga style specifics
- `styles/` - Detailed style definitions
- `layouts/` - Detailed layout definitions
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-comic/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-comic/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
@@ -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?
@@ -0,0 +1,98 @@
Create a knowledge biography comic page following these guidelines:
## Image Specifications
- **Type**: Comic book page with multiple panels
- **Orientation**: Portrait (vertical)
- **Aspect Ratio**: 2:3
- **Style**: See style-specific reference for visual guidelines
## Panel Structure
### Panel Borders
- Clean black lines (1-2px) around each panel
- White gutters between panels (8-12px)
- Panels arranged for clear reading flow
- Variety in panel sizes for visual rhythm
### Panel Composition
- Clear focal points in each panel
- Proper use of foreground, midground, background
- Camera angles vary: eye level, bird's eye, low angle, close-up, wide shot
- Action flows logically between panels
- Negative space used intentionally
## Text Elements
### Speech Bubbles
- **Dialogue**: Oval/elliptical bubbles with pointed tails
- White fill with thin black outline
- Tail points clearly to speaker
- Hand-lettered style font (not computer-generated)
### Narrator Boxes
- **Fourth Wall/Narrator**: Rectangular boxes
- Often positioned at panel edges (top or bottom)
- Slightly different fill color (cream or light yellow)
- Used for commentary, time jumps, explanations
### Thought Bubbles
- Cloud-shaped with bubble trail leading to thinker
- Softer outline than speech bubbles
- For internal monologue
### Caption Bars
- Rectangular bars at panel edges
- Time and place information
- "Meanwhile...", "Three years later..." type transitions
- Darker fill with white text, or vice versa
### Typography
- Hand-drawn lettering style throughout
- Bold for emphasis and key terms
- Consistent letter sizing
- Chinese text: use full-width punctuation "",。!
- Clear hierarchy: titles > dialogue > captions
## Scientific/Concept Visualization
When depicting abstract concepts:
| Concept | Visual Metaphor |
|---------|----------------|
| Neural networks | Glowing nodes connected by clean lines |
| Data flow | Luminous particles along simple paths |
| Algorithms | Geometric patterns, building blocks |
| Logic/proof | Interlocking puzzle pieces |
| Discovery | Light breaking through darkness |
| Uncertainty | Forking paths, question marks |
| Time | Clock motifs, calendar pages |
- Integrate diagrams naturally into narrative panels
- Use inset panels or thought-bubble style for explanations
- Simplified iconography over realistic depiction
## Fourth Wall / Narrator Character
When depicting narrator characters addressing the reader:
- Character may look directly out of panel
- Can appear in "present day" framing scenes
- Distinct visual treatment from main timeline
- Often at page edges or in dedicated panels
- May comment on or question the events shown
## Historical Accuracy
- Research period-specific details: costumes, technology, architecture
- Show aging naturally for characters across time periods
- Iconic items and locations rendered recognizably
- Balance accuracy with stylization
## Language
- All text in Chinese (中文) unless source material is in another language
- Use Chinese full-width punctuation: "",。!
---
Please generate the comic page based on the content provided below:
@@ -0,0 +1,180 @@
# Character Definition Template
## Character Document Format
Create `characters/characters.md` with the following structure:
```markdown
# Character Definitions - [Comic Title]
**Style**: [selected style]
**Art Direction**: [Ligne Claire / Manga / etc.]
---
## Character 1: [Name]
**Role**: [Protagonist / Mentor / Antagonist / Narrator]
**Age**: [approximate age or age range in story]
**Appearance**:
- Face shape: [oval/square/round]
- Hair: [color, style, length]
- Eyes: [color, shape, distinctive features]
- Build: [height, body type]
- Distinguishing features: [glasses, beard, scar, etc.]
**Costume**:
- Default outfit: [detailed description]
- Color palette: [primary colors for this character]
- Accessories: [hat, bag, tools, etc.]
**Expression Range**:
- Neutral: [description]
- Happy/Excited: [description]
- Thinking/Confused: [description]
- Determined: [description]
**Visual Reference Notes**:
[Any specific artistic direction]
---
## Character 2: [Name]
...
```
## Reference Sheet Image Prompt
After character definitions, include a prompt for generating the reference sheet:
```markdown
## Reference Sheet Prompt
Character reference sheet in [style] style, clean lines, flat colors:
[ROW 1 - Character Name]:
- Front view: [detailed description]
- 3/4 view: [description]
- Expression sheet: Neutral | Happy | Focused | Worried
[ROW 2 - Character Name]:
...
COLOR PALETTE:
- [Character 1]: [colors]
- [Character 2]: [colors]
White background, clear labels under each character.
```
## Example: Turing Biography
```markdown
# Character Definitions - The Imitation Game
**Style**: classic (Ligne Claire)
**Art Direction**: Clean lines, muted colors, period-accurate details
---
## Character 1: Alan Turing
**Role**: Protagonist
**Age**: 25-40 (varies across story)
**Appearance**:
- Face shape: Oval, slightly angular
- Hair: Dark brown, wavy, slightly disheveled
- Eyes: Deep-set, intense gaze
- Build: Tall, lean, slightly awkward posture
- Distinguishing features: Prominent brow, thoughtful expression
**Costume**:
- Default outfit: Tweed jacket with elbow patches, white shirt, no tie
- Color palette: Muted browns, navy blue, cream
- Accessories: Occasionally a pipe, papers/notebooks
**Expression Range**:
- Neutral: Thoughtful, slightly distant
- Happy/Excited: Eureka moment, eyes bright, subtle smile
- Thinking/Confused: Furrowed brow, looking at abstract space
- Determined: Jaw set, focused eyes
---
## Character 2: The Bombe Machine
**Role**: Supporting (anthropomorphized)
**Appearance**:
- Large brass and wood cabinet
- Dial "eyes" that can express states
- Paper tape "mouth"
- Indicator lights for emotions
**Expression Range**:
- Processing: Spinning dials, humming
- Success: Lights up warmly
- Stuck: Smoke wisps, stuttering
---
## Reference Sheet Prompt
Character reference sheet in Ligne Claire style, clean lines, flat colors:
TOP ROW - Alan Turing:
- Front view: Young man, 30s, short dark wavy hair, thoughtful expression, wearing tweed jacket with elbow patches, white shirt
- 3/4 view: Same character, slight smile, showing profile of nose
- Expression sheet: Neutral | Excited (eureka moment) | Focused (working) | Worried
BOTTOM ROW - The Bombe Machine (anthropomorphized):
- Bombe machine as character: Large, brass and wood, dial "eyes", paper tape "mouth"
- Expressions: Processing (spinning dials) | Success (lights up) | Stuck (smoke wisps)
COLOR PALETTE:
- Turing: Muted browns (#8B7355), navy blue (#2C3E50), cream (#F5F5DC)
- Machine: Brass (#B5A642), mahogany (#4E2728), emerald indicators (#2ECC71)
White background, clear labels under each character.
```
## Handling Age Variants
For biographies spanning many years, define age variants:
```markdown
## Alan Turing - Age Variants
### Young (1920s, age 10-18)
- Boyish features, round face
- School uniform (Sherborne)
- Curious, eager expression
### Adult (1930s-40s, age 25-35)
- Angular face, defined jaw
- Tweed jacket, rumpled appearance
- Intense, focused expression
### Later (1950s, age 40+)
- Slightly weathered
- More casual dress
- Thoughtful, sometimes melancholic
```
## Best Practices
| Practice | Description |
|----------|-------------|
| Be specific | "Short dark wavy hair, parted left" not just "dark hair" |
| Use distinguishing features | Glasses, scars, accessories that identify character |
| Define color codes | Use specific color names or hex codes |
| Include age markers | Wrinkles, posture, clothing style matching era |
| Reference real people | For historical figures, note "based on 1940s photographs" |
## Why Character Reference Matters
Without unified character definition, AI generates inconsistent appearances. The reference sheet provides:
1. Visual anchors for consistent features
2. Color palettes for consistent coloring
3. Expression documentation for emotional portrayals
@@ -0,0 +1,23 @@
# cinematic
Wide panels, filmic feel
## Panel Structure
- **Panels per page**: 2-4
- **Structure**: Horizontal emphasis, wide aspect panels
- **Gutters**: Generous spacing (12-15px)
## Grid Configuration
- 1-2 columns, horizontal emphasis
- Panel sizes: Wide aspect ratios (3:1, 4:1)
- Reading flow: Horizontal sweep, filmic rhythm
## Best For
Establishing shots, dramatic moments, landscapes
## Best Style Pairings
dramatic, classic, sepia
@@ -0,0 +1,23 @@
# dense
Information-rich, educational focus
## Panel Structure
- **Panels per page**: 6-9
- **Structure**: Compact grid, smaller panels
- **Gutters**: Tight spacing (4-6px)
## Grid Configuration
- 3 columns × 3 rows
- Panel sizes: Compact, uniform
- Reading flow: Rapid progression, information-rich
## Best For
Technical explanations, complex narratives, timelines
## Best Style Pairings
ohmsha, vibrant
@@ -0,0 +1,23 @@
# mixed
Dynamic, varied rhythm
## Panel Structure
- **Panels per page**: 3-7 (varies)
- **Structure**: Intentionally varied for pacing
- **Gutters**: Dynamic spacing
## Grid Configuration
- Intentionally irregular
- Panel sizes: Varied for pacing and emphasis
- Reading flow: Guides eye through varied rhythm
## Best For
Action sequences, emotional arcs, complex stories
## Best Style Pairings
dramatic, vibrant, ohmsha
@@ -0,0 +1,23 @@
# splash
Impact-focused, key moments
## Panel Structure
- **Panels per page**: 1-2 large + 2-3 small
- **Structure**: Dominant splash with supporting panels
- **Gutters**: Varied for emphasis
## Grid Configuration
- 1 dominant panel + 2-3 supporting
- Panel sizes: 50-70% splash, remainder small
- Reading flow: Splash dominates, supporting panels accent
## Best For
Revelations, breakthroughs, chapter openings
## Best Style Pairings
dramatic, classic, vibrant
@@ -0,0 +1,23 @@
# standard
Classic comic grid, versatile
## Panel Structure
- **Panels per page**: 4-6
- **Structure**: Regular grid with occasional variation
- **Gutters**: Consistent white space (8-10px)
## Grid Configuration
- 2-3 columns × 2-3 rows
- Panel sizes: Mostly equal, occasional variation
- Reading flow: Left→right, top→bottom (Z-pattern)
## Best For
Narrative flow, dialogue scenes
## Best Style Pairings
classic, warm, sepia
@@ -0,0 +1,30 @@
# webtoon
Vertical scrolling comic (竖版条漫)
## Panel Structure
- **Panels per page**: 3-5 vertically stacked
- **Structure**: Single column, vertical flow optimized for scrolling
- **Gutters**: Generous vertical spacing (20-40px), panels often bleed horizontally
## Grid Configuration
- Single column, vertical stack
- Panel sizes: Full width, variable height (1:1 to 1:2 aspect)
- Reading flow: Top→bottom continuous scroll
## Special Features
- Panels can extend beyond frame for dramatic effect
- Generous whitespace between beats
- Character close-ups alternate with wide explanation panels
- "Float" effect - elements can exist between panels
## Best For
Ohmsha-style tutorials, mobile reading, step-by-step guides
## Best Style Pairings
ohmsha, vibrant
@@ -0,0 +1,85 @@
# Ohmsha Manga Guide Style
Guidelines for `--style ohmsha` educational manga comics.
## Character Setup
| Role | Default | Traits |
|------|---------|--------|
| Student (Role A) | 大雄 | Confused, asks basic but crucial questions, represents reader |
| Mentor (Role B) | 哆啦A梦 | Knowledgeable, patient, uses gadgets as technical metaphors |
| Antagonist (Role C, optional) | 胖虎 | Represents misunderstanding, or "noise" in the data |
Custom characters: `--characters "Student:小明,Mentor:教授,Antagonist:Bug怪"`
## Character Reference Sheet Style
For Ohmsha style, use manga/anime style with:
- Exaggerated expressions for educational clarity
- Simple, distinctive silhouettes
- Bright, saturated color palettes
- Chibi/SD (super-deformed) variants for comedic reactions
## Outline Spec Block
Every ohmsha outline must start with:
```markdown
【漫画规格单】
- Language: [Same as input content]
- Style: Ohmsha (Manga Guide), Full Color
- Layout: Vertical Scrolling Comic (竖版条漫)
- Characters: [List character names and roles]
- Character Reference: characters/characters.png
- Page Limit: ≤20 pages
```
## Visual Metaphor Rules (Critical)
**NEVER** create "talking heads" panels. Every technical concept must become:
1. **A tangible gadget/prop** - Something characters can hold, use, demonstrate
2. **An action scene** - Characters doing something that illustrates the concept
3. **A visual environment** - Stepping into a metaphorical space
### Examples
| Concept | Bad (Talking Heads) | Good (Visual Metaphor) |
|---------|---------------------|------------------------|
| Word embeddings | Characters discussing vectors | 哆啦A梦拿出"词向量压缩机",把书本压缩成彩色小球 |
| Gradient descent | Explaining math formula | 大雄在山谷地形上滚球,寻找最低点 |
| Neural network | Diagram on whiteboard | 角色走进由发光节点组成的网络迷宫 |
## Page Title Convention
Avoid AI-style "Title: Subtitle" format. Use narrative descriptions:
- ❌ "Page 3: Introduction to Neural Networks"
- ✓ "Page 3: 大雄被海量单词淹没,哆啦A梦拿出'词向量压缩机'"
## Ending Requirements
- NO generic endings ("What will you choose?", "Thanks for reading")
- End with: Technical summary moment OR character achieving a small goal
- Final panel: Sense of accomplishment, not open-ended question
### Good Endings
- Student successfully applies learned concept
- Visual callback to opening problem, now solved
- Mentor gives summary while student demonstrates understanding
### Bad Endings
- "What do you think?" open questions
- "Thanks for reading this tutorial"
- Cliffhanger without resolution
## Layout Preference
Ohmsha style typically uses:
- `webtoon` (vertical scrolling) - Primary choice
- `dense` - For information-heavy sections
- `mixed` - For varied pacing
Avoid `cinematic` and `splash` for educational content.
@@ -0,0 +1,143 @@
# Storyboard Template
## Storyboard Document Format
```markdown
---
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
**Character Reference**: characters/characters.png
---
## Cover
**Filename**: 00-cover-[slug].png
**Core Message**: [one-liner]
**Visual Design**:
- Title typography style
- Main visual composition
- Color scheme
- Subtitle / time span notation
**Visual Prompt**:
[Detailed image generation prompt]
---
## Page 1 / N
**Filename**: 01-page-[slug].png
**Layout**: [standard/cinematic/dense/splash/mixed]
**Narrative Layer**: [Main narrative / Narrator layer / Mixed]
**Core Message**: [What this page conveys]
### Panel Layout
**Panel Count**: X
**Layout Type**: [grid/irregular/splash]
#### Panel 1 (Size: 1/3 page, Position: Top)
**Scene**: [Time, location]
**Image Description**:
- Camera angle: [bird's eye / low angle / eye level / close-up / wide shot]
- Characters: [pose, expression, action]
- Environment: [scene details, period markers]
- Lighting: [atmosphere description]
- Color tone: [palette reference]
**Text Elements**:
- Dialogue bubble (oval): "Character line"
- Narrator box (rectangular): 「Narrator commentary」
- Caption bar: [Background info text]
#### Panel 2...
**Page Hook**: [Cliffhanger or transition at page end]
**Visual Prompt**:
[Full page image generation prompt]
---
## Page 2 / N
...
```
## Cover Design Principles
- Academic gravitas with visual appeal
- Title typography reflecting knowledge/science theme
- Composition hinting at core theme (character silhouette, iconic symbol, concept diagram)
- Subtitle or time span for epic scope
## Panel Composition Guidelines
| Panel Type | Recommended Count | Usage |
|-----------|-------------------|-------|
| Main narrative | 3-5 per page | Story progression |
| Concept diagram | 1-2 per page | Visualize abstractions |
| Narrator panel | 0-1 per page | Commentary, transition |
| Splash (full/half) | Occasional | Major moments |
## Panel Size Reference
- **Full page (Splash)**: Major moments, key breakthroughs
- **Half page**: Important scenes, turning points
- **1/3 page**: Standard narrative panels
- **1/4 or smaller**: Quick progression, sequential action
## Concept Visualization Techniques
Transform abstract concepts into concrete visuals:
| Abstract Concept | Visual Approach |
|-----------------|-----------------|
| Neural network | Glowing nodes with connecting lines |
| Gradient descent | Ball rolling down valley terrain |
| Data flow | Luminous particles flowing through pipes |
| Algorithm iteration | Ascending spiral staircase |
| Breakthrough moment | Shattering barrier, piercing light |
| Logical proof | Building blocks assembling |
| Uncertainty | Forking paths, fog, multiple shadows |
## Text Element Design
| Text Type | Style | Usage |
|-----------|-------|-------|
| Character dialogue | Oval speech bubble | Main narrative speech |
| Narrator commentary | Rectangular box | Explanation, commentary |
| Caption bar | Edge-mounted rectangle | Time, location info |
| Thought bubble | Cloud shape | Character inner monologue |
| Term label | Bold / special color | First appearance of technical terms |
## Prompt Structure for Consistency
Each page prompt should include character reference:
```
[CHARACTER REFERENCE]
(Key details from characters.md for characters in this page)
[PAGE CONTENT]
(Specific scene, panel layout, and visual elements)
[CONSISTENCY REMINDER]
Maintain exact character appearances as defined in character reference.
- [Character A]: [key identifying features]
- [Character B]: [key identifying features]
```
@@ -0,0 +1,54 @@
# classic
Traditional Ligne Claire, balanced and timeless
## Style Guidelines
### Line Work
- Uniform, clean outlines with consistent weight (approximately 2px)
- No hatching or cross-hatching for shading
- Sharp, precise edges on all elements
- Black ink outlines on all figures and objects
- Shadows indicated through flat color areas, not line techniques
### Character Design
- Slightly stylized/cartoonish characters with realistic proportions
- Distinctive, recognizable facial features
- Expressive faces with clear emotions
- Period-appropriate clothing with attention to detail
- Consistent character appearance across panels
### Background Treatment
- Detailed, realistic backgrounds with architectural accuracy
- Period-specific props and technology
- Clear spatial depth and perspective
- Environmental storytelling through details
- Contrast between simplified characters and detailed backgrounds
## Color Palette
- Primary: Clean blue (#3182CE), red (#E53E3E), yellow (#ECC94B)
- Skin: Warm tan (#F7CFAE)
- Background: Light cream (#FFFAF0), sky blue (#BEE3F8)
## Color Approach
- Flat colors without gradients (true to Ligne Claire tradition)
- Limited palette per page for cohesion
- Colors support narrative mood
- Consistent lighting logic within scenes
## Quality Markers
A good Ligne Claire comic page exhibits:
- ✓ Clean, uniform line weight throughout
- ✓ Flat colors without gradients
- ✓ Detailed backgrounds, stylized characters
- ✓ Clear panel borders and reading flow
- ✓ Hand-drawn text style
- ✓ Period-appropriate details
- ✓ Expressive but consistent characters
- ✓ Proper perspective in environments
## Best For
Educational content, balanced narratives, biography comics
@@ -0,0 +1,34 @@
# dramatic
High contrast, intense moments
## Style Guidelines
### Line Work
- 2-3px outlines, heavier on shadows
- Dramatic angles and perspectives
- Strong contrast between light and dark areas
### Character Design
- Intense expressions, dynamic poses
- Dramatic lighting on faces
- Sharp angular features emphasized
### Background Treatment
- High contrast, angular shadows
- Dramatic lighting effects
- Silhouettes and stark compositions
## Color Palette
- Primary: Deep navy (#1A365D), crimson (#9B2C2C), stark white
- Shadows: Heavy blacks, dramatic contrast
- Highlights: Sharp whites, limited mid-tones
## Mood
Tension, breakthrough moments, conflict
## Best For
Pivotal discoveries, conflicts, climactic scenes
@@ -0,0 +1,107 @@
# ohmsha
Ohmsha Manga Guide style - educational manga with visual metaphors
## Core Philosophy
Educational manga where every concept becomes a visual metaphor or action. NO talking heads - characters must DO things, not just explain.
## Visual Style
- **Type**: Manga-style educational comic
- **Orientation**: Portrait (vertical), optimized for scrolling
- **Colors**: Full color, bright and clean anime/manga aesthetic
- **Lines**: Clean manga lines (1.5-2px), smooth curves, expressive
## Character Design (Manga Style)
- Anime/manga proportions: slightly larger eyes, expressive faces
- **Student character**: Confused expressions, question marks (), sweat drops, represents reader
- **Mentor character**: Confident poses, explanatory gestures, produces gadgets/tools
- Clear emotional indicators using manga conventions (, , sweat drops, sparkles)
- Consistent character designs across all panels
## Background Treatment
- Simplified backgrounds during dialogue/explanation
- Detailed "imagination spaces" for concept visualization
- Technical diagrams styled as holographic displays or magical blueprints
- Screen tone effects for atmosphere
## Visual Metaphor Requirements (CRITICAL)
Every technical concept MUST be visualized as:
| Concept Type | Visualization Approach |
|-------------|----------------------|
| Algorithm | Gadget/machine that demonstrates the process |
| Data structure | Physical space characters can enter/explore |
| Mathematical formula | Transformation visible in environment |
| Abstract process | Tangible flow of particles/objects |
**Wrong approach**: Character points at blackboard explaining
**Right approach**: Character uses "Concept Visualizer" gadget, steps into metaphorical space
### Visual Metaphor Examples
| Concept | Wrong (Talking Head) | Right (Visual Metaphor) |
|---------|---------------------|------------------------|
| Attention mechanism | Character points at formula on blackboard | "Attention Flashlight" gadget illuminates key words in dark room |
| Gradient descent | "The algorithm minimizes loss" | Character rides ball rolling down mountain valley |
| Neural network | Diagram with arrows | Living network of glowing creatures passing messages |
| Overfitting | "The model memorized the data" | Character wearing clothes that fit only one specific pose |
## Panel Layout for Ohmsha
- Vertical scroll optimized (webtoon style)
- Single column, panels stack vertically
- Generous whitespace between major beats
- Panels can bleed to edges for impact
- "Float" elements between panels for emphasis
## Special Visual Elements
- **Gadget reveals**: Dramatic unveiling with sparkle effects
- **Concept spaces**: Rounded borders, glowing edges for "imagination mode"
- **Information displays**: Holographic UI style for technical details
- **Aha moments**: Radial lines, light burst effects
- **Confusion**: Spiral eyes, question marks floating above head
## Text Elements (Ohmsha)
- Hand-lettered manga style
- Sound effects integrated visually (ドキドキ, ピカーン, etc.)
- Speech bubbles: rounded for normal, spiky for excitement/shock
- Thought bubbles for internal process visualization
- Technical terms in bold with furigana-style annotations if needed
## Color Palette
- Primary: Bright blue (#4299E1), warm orange (#ED8936), soft green (#68D391)
- Skin: Anime-style warm (#FEEBC8)
- Background: Clean white, soft gradients
- Gadgets: Metallic accents (#FFD700, #C0C0C0), vibrant highlights
- Concept spaces: Pastel backgrounds, glowing accents
## Quality Markers (Ohmsha)
- ✓ Every concept is a visual metaphor, not just explained
- ✓ Characters are DOING things, not just talking
- ✓ Clear student/mentor dynamic
- ✓ Gadgets and props drive the explanation
- ✓ Expressive manga-style emotions
- ✓ Information density through visual design, not text walls
## Character Setup (Required)
Define characters before generating:
| Role | Default | Traits |
|------|---------|--------|
| Student (Role A) | 大雄 | Confused, asks basic but crucial questions, represents reader |
| Mentor (Role B) | 哆啦A梦 | Knowledgeable, patient, uses gadgets as technical metaphors |
| Antagonist (Role C, optional) | 胖虎 | Represents misunderstanding, or "noise" in the data |
## Best For
Technical tutorials, complex concepts (ML, physics, math), self-study material
@@ -0,0 +1,66 @@
# realistic
Full-color realistic manga style with digital painting techniques
## Style Guidelines
### Line Work
- Clean, precise outlines with clear contours
- Uniform line weight for character definition
- No excessive hatching - rely on color for depth
- Smooth curves and realistic anatomical lines
- Ligne Claire influence: clean but not overly simplified
### Character Design
- Realistic human proportions (7-8 head heights)
- Anatomically accurate features and expressions
- Detailed facial structure without exaggeration
- Natural poses and body language
- Consistent character appearance across all panels
- Subtle expressions rather than manga-style exaggeration
### Rendering Style
- Full-color digital painting with rich gradients
- Soft shadow transitions on skin and fabric
- Realistic material textures (glass, liquid, fabric, wood)
- Detailed hair with natural shine and volume
- Environmental lighting affects all elements
- NOT flat cel-shading - use smooth color blending
### Background Treatment
- Highly detailed, realistic environments
- Accurate perspective and spatial depth
- Atmospheric lighting (warm indoor, cool outdoor)
- Professional settings rendered with precision
- Props and objects with realistic textures
## Color Palette
- Skin: Natural warm tones (#F5D6C6, #E8C4B0)
- Hair: Rich browns and blacks with highlights
- Environment: Warm wood tones (#8B7355), cool stone (#9CA3AF)
- Accent: Wine red (#722F37), gold (#D4AF37)
- Lighting: Warm amber (#FFB347), cool blue (#B0C4DE)
## Color Approach
- Rich gradients for depth and volume
- Realistic lighting with warm/cool contrast
- Material-specific rendering (glass transparency, liquid reflection)
- Subtle color temperature shifts for atmosphere
- Professional, sophisticated palette
## Quality Markers
A good realistic manga page exhibits:
- ✓ Anatomically accurate character proportions
- ✓ Smooth color gradients (not flat fills)
- ✓ Realistic material textures
- ✓ Detailed, atmospheric backgrounds
- ✓ Natural lighting with soft shadows
- ✓ Expressive but subtle facial expressions
- ✓ Professional, sophisticated aesthetic
- ✓ Clean speech bubbles with clear typography
## Best For
Professional topics (wine, food, business), lifestyle content, adult-oriented narratives, educational guides for mature audiences, documentary-style storytelling
@@ -0,0 +1,34 @@
# sepia
Historical, archival feel
## Style Guidelines
### Line Work
- 2px, classic weight with aged texture
- Vintage illustration style
- Period-appropriate techniques
### Character Design
- Period-accurate attire, formal poses
- Historical accuracy emphasized
- Classical proportions
### Background Treatment
- Historical settings, vintage details
- Aged paper effect
- Period architecture and props
## Color Palette
- Primary: Sepia brown (#8B7355), aged paper (#F5E6D3)
- Accents: Faded teal, muted burgundy
- Background: Yellowed paper, vintage tones
## Mood
Historical distance, period authenticity
## Best For
Pre-1950s stories, classical science, historical figures
@@ -0,0 +1,34 @@
# vibrant
Energetic, engaging, educational
## Style Guidelines
### Line Work
- 2-2.5px, expressive weight variation
- Dynamic, energetic lines
- Emphasis on movement and action
### Character Design
- Expressive, animated, approachable
- Wide eyes, big reactions
- Dynamic poses
### Background Treatment
- Simplified, focus on action
- Bright, clean compositions
- Energy effects and motion lines
## Color Palette
- Primary: Bright red (#F56565), sunny yellow (#F6E05E), sky blue (#63B3ED)
- Accents: Magenta, lime green
- Background: Clean white, bright pastels
## Mood
Excitement, discovery, wonder
## Best For
Science explanations, "aha" moments, young audience
@@ -0,0 +1,34 @@
# warm
Nostalgic, personal storytelling
## Style Guidelines
### Line Work
- 1.5-2px, slightly softer edges
- Gentle curves, friendly feel
- Less rigid than classic style
### Character Design
- Friendly expressions, relaxed poses
- Warm, inviting character designs
- Approachable proportions
### Background Treatment
- Cozy interiors, warm lighting
- Nostalgic feel
- Soft focus on backgrounds
## Color Palette
- Primary: Golden (#D69E2E), orange (#DD6B20), soft brown (#8B6F47)
- Skin: Warm golden (#FEEBC8)
- Background: Warm cream (#FEF3C7), sunset tones
## Mood
Memory, personal journey, reflection
## Best For
Personal stories, childhood scenes, mentorship
@@ -0,0 +1,54 @@
# wuxia
Hong Kong martial arts comic style (港漫武侠风格)
## Style Guidelines
### Line Work
- 2-3px dynamic brush strokes with varying weight
- Ink wash effects, traditional Chinese brush feel
- Speed lines and impact effects for action scenes
- Bold, confident strokes with sharp edges
### Character Design
- Realistic human proportions (7.5-8 head heights)
- Defined musculature, dynamic warrior poses
- Flowing hair and clothing in motion
- Intense, determined facial expressions
- Traditional Chinese martial arts attire (robes, armor)
### Background Treatment
- Dramatic landscapes: mountains, waterfalls, temples
- Ink wash atmospheric effects
- Flying debris, dust clouds during combat
- Energy/qi effects with flowing lines
- High contrast silhouettes
## Color Palette
- Primary: Deep black ink, crimson red (#8B0000), gold (#D4AF37)
- Skin: Natural tan with dramatic shadows
- Background: Misty grays, earth tones, ink wash gradients
- Effects: Glowing qi energy (blue, gold, white)
## Special Effects
- **Combat impact**: Radiating lines, shockwaves, debris
- **Qi/energy**: Flowing aura, glowing effects around characters
- **Movement**: Extreme speed lines, motion blur
- **Atmosphere**: Ink wash clouds, mist, flying leaves/petals
## Quality Markers
A good wuxia comic page exhibits:
- ✓ Dynamic action poses with sense of motion
- ✓ Ink brush aesthetic in line work
- ✓ High contrast dramatic lighting
- ✓ Atmospheric backgrounds with Chinese elements
- ✓ Energy/qi effects that feel powerful
- ✓ Flowing fabric and hair movement
- ✓ Impactful combat moments
## Best For
Martial arts stories, Chinese historical fiction, action-heavy narratives, wuxia/xianxia adaptations
+116
View File
@@ -0,0 +1,116 @@
import { existsSync, readdirSync, readFileSync } from "fs";
import { join, basename } from "path";
import { PDFDocument } from "pdf-lib";
interface PageInfo {
filename: string;
path: string;
index: number;
promptPath?: string;
}
function parseArgs(): { dir: string; output?: string } {
const args = process.argv.slice(2);
let dir = "";
let output: string | undefined;
for (let i = 0; i < args.length; i++) {
if (args[i] === "--output" || args[i] === "-o") {
output = args[++i];
} else if (!args[i].startsWith("-")) {
dir = args[i];
}
}
if (!dir) {
console.error("Usage: bun merge-to-pdf.ts <comic-dir> [--output filename.pdf]");
process.exit(1);
}
return { dir, output };
}
function findComicPages(dir: string): PageInfo[] {
if (!existsSync(dir)) {
console.error(`Directory not found: ${dir}`);
process.exit(1);
}
const files = readdirSync(dir);
const pagePattern = /^(\d+)-(cover|page)(-[\w-]+)?\.(png|jpg|jpeg)$/i;
const promptsDir = join(dir, "prompts");
const hasPrompts = existsSync(promptsDir);
const pages: PageInfo[] = files
.filter((f) => pagePattern.test(f))
.map((f) => {
const match = f.match(pagePattern);
const baseName = f.replace(/\.(png|jpg|jpeg)$/i, "");
const promptPath = hasPrompts ? join(promptsDir, `${baseName}.md`) : undefined;
return {
filename: f,
path: join(dir, f),
index: parseInt(match![1], 10),
promptPath: promptPath && existsSync(promptPath) ? promptPath : undefined,
};
})
.sort((a, b) => a.index - b.index);
if (pages.length === 0) {
console.error(`No comic pages found in: ${dir}`);
console.error("Expected format: 00-cover-slug.png, 01-page-slug.png, etc.");
process.exit(1);
}
return pages;
}
async function createPdf(pages: PageInfo[], outputPath: string) {
const pdfDoc = await PDFDocument.create();
pdfDoc.setAuthor("baoyu-comic");
pdfDoc.setSubject("Generated Comic");
for (const page of pages) {
const imageData = readFileSync(page.path);
const ext = page.filename.toLowerCase();
const image = ext.endsWith(".png")
? await pdfDoc.embedPng(imageData)
: await pdfDoc.embedJpg(imageData);
const { width, height } = image;
const pdfPage = pdfDoc.addPage([width, height]);
pdfPage.drawImage(image, {
x: 0,
y: 0,
width,
height,
});
console.log(`Added: ${page.filename}${page.promptPath ? " (prompt available)" : ""}`);
}
const pdfBytes = await pdfDoc.save();
await Bun.write(outputPath, pdfBytes);
console.log(`\nCreated: ${outputPath}`);
console.log(`Total pages: ${pages.length}`);
}
async function main() {
const { dir, output } = parseArgs();
const pages = findComicPages(dir);
const dirName = basename(dir) === "comic" ? basename(join(dir, "..")) : basename(dir);
const outputPath = output || join(dir, `${dirName}.pdf`);
console.log(`Found ${pages.length} pages in: ${dir}\n`);
await createPdf(pages, outputPath);
}
main().catch((err) => {
console.error("Error:", err.message);
process.exit(1);
});
+188
View File
@@ -0,0 +1,188 @@
---
name: baoyu-compress-image
description: Cross-platform image compression skill. Converts images to WebP by default with PNG-to-PNG support. Uses system tools (sips, cwebp, ImageMagick) with Sharp fallback.
---
# Image Compressor
Cross-platform image compression with WebP default output, PNG-to-PNG support, preferring system tools with Sharp fallback.
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/main.ts` | CLI entry point for image compression |
## Quick Start
```bash
# Compress to WebP (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
# Keep original format (PNG → PNG)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --format png
# Custom quality
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75
# Process directory
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
```
## Commands
### Single File Compression
```bash
# Basic (converts to WebP, replaces original)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
# Custom output path
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -o compressed.webp
# Keep original file
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --keep
# Custom quality (0-100, default: 80)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75
# Keep original format
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png
```
### Directory Processing
```bash
# Process all images in directory
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/
# Recursive processing
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
# With custom quality
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75
```
### Output Formats
```bash
# Plain text (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
```
## Options
| Option | Short | Description | Default |
|--------|-------|-------------|---------|
| `<input>` | | Input file or directory | Required |
| `--output <path>` | `-o` | Output path | Same path, new extension |
| `--format <fmt>` | `-f` | webp, png, jpeg | webp |
| `--quality <n>` | `-q` | Quality 0-100 | 80 |
| `--keep` | `-k` | Keep original file | false |
| `--recursive` | `-r` | Process directories recursively | false |
| `--json` | | JSON output | false |
| `--help` | `-h` | Show help | |
## Compressor Selection
Priority order (auto-detected):
1. **sips** (macOS built-in, WebP support since macOS 11)
2. **cwebp** (Google's official WebP tool)
3. **ImageMagick** (`convert` command)
4. **Sharp** (npm package, auto-installed by Bun)
The skill automatically selects the best available compressor.
## Output Format
### Text Mode (default)
```
image.png → image.webp (245KB → 89KB, 64% reduction)
```
### JSON Mode
```json
{
"input": "image.png",
"output": "image.webp",
"inputSize": 250880,
"outputSize": 91136,
"ratio": 0.36,
"compressor": "sips"
}
```
### Directory JSON Mode
```json
{
"files": [...],
"summary": {
"totalFiles": 10,
"totalInputSize": 2508800,
"totalOutputSize": 911360,
"ratio": 0.36,
"compressor": "sips"
}
}
```
## Examples
### Compress single image
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png
# photo.png → photo.webp (1.2MB → 340KB, 72% reduction)
```
### Compress with custom quality
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png -q 60
# photo.png → photo.webp (1.2MB → 280KB, 77% reduction)
```
### Keep original format
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts screenshot.png -f png --keep
# screenshot.png → screenshot-compressed.png (500KB → 380KB, 24% reduction)
```
### Process entire directory
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts ./screenshots/ -r
# Processed 15 files: 12.5MB → 4.2MB (66% reduction)
```
### Get JSON for scripting
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json | jq '.ratio'
```
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-compress-image/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-compress-image/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
+315
View File
@@ -0,0 +1,315 @@
#!/usr/bin/env bun
import { existsSync, statSync, readdirSync, unlinkSync, renameSync } from "fs";
import { basename, dirname, extname, join, resolve } from "path";
import { spawn } from "child_process";
type Compressor = "sips" | "cwebp" | "imagemagick" | "sharp";
type Format = "webp" | "png" | "jpeg";
interface Options {
input: string;
output?: string;
format: Format;
quality: number;
keep: boolean;
recursive: boolean;
json: boolean;
}
interface Result {
input: string;
output: string;
inputSize: number;
outputSize: number;
ratio: number;
compressor: Compressor;
}
const SUPPORTED_EXTS = [".png", ".jpg", ".jpeg", ".webp", ".gif", ".tiff"];
async function commandExists(cmd: string): Promise<boolean> {
try {
const proc = spawn("which", [cmd], { stdio: "pipe" });
return new Promise((res) => {
proc.on("close", (code) => res(code === 0));
proc.on("error", () => res(false));
});
} catch {
return false;
}
}
async function detectCompressor(format: Format): Promise<Compressor> {
if (format === "webp") {
if (await commandExists("cwebp")) return "cwebp";
if (await commandExists("convert")) return "imagemagick";
return "sharp";
}
if (process.platform === "darwin") return "sips";
if (await commandExists("convert")) return "imagemagick";
return "sharp";
}
function runCmd(cmd: string, args: string[]): Promise<{ code: number; stderr: string }> {
return new Promise((res) => {
const proc = spawn(cmd, args, { stdio: ["ignore", "ignore", "pipe"] });
let stderr = "";
proc.stderr?.on("data", (d) => (stderr += d.toString()));
proc.on("close", (code) => res({ code: code ?? 1, stderr }));
proc.on("error", (e) => res({ code: 1, stderr: e.message }));
});
}
async function compressWithSips(input: string, output: string, format: Format, quality: number): Promise<void> {
const fmt = format === "jpeg" ? "jpeg" : format;
const args = ["-s", "format", fmt, "-s", "formatOptions", String(quality), input, "--out", output];
const { code, stderr } = await runCmd("sips", args);
if (code !== 0) throw new Error(`sips failed: ${stderr}`);
}
async function compressWithCwebp(input: string, output: string, quality: number): Promise<void> {
const args = ["-q", String(quality), input, "-o", output];
const { code, stderr } = await runCmd("cwebp", args);
if (code !== 0) throw new Error(`cwebp failed: ${stderr}`);
}
async function compressWithImagemagick(input: string, output: string, quality: number): Promise<void> {
const args = [input, "-quality", String(quality), output];
const { code, stderr } = await runCmd("convert", args);
if (code !== 0) throw new Error(`convert failed: ${stderr}`);
}
async function compressWithSharp(input: string, output: string, format: Format, quality: number): Promise<void> {
const sharp = (await import("sharp")).default;
let pipeline = sharp(input);
if (format === "webp") pipeline = pipeline.webp({ quality });
else if (format === "png") pipeline = pipeline.png({ quality });
else if (format === "jpeg") pipeline = pipeline.jpeg({ quality });
await pipeline.toFile(output);
}
async function compress(
compressor: Compressor,
input: string,
output: string,
format: Format,
quality: number
): Promise<void> {
switch (compressor) {
case "sips":
await compressWithSips(input, output, format, quality);
break;
case "cwebp":
if (format !== "webp") {
await compressWithSharp(input, output, format, quality);
} else {
await compressWithCwebp(input, output, quality);
}
break;
case "imagemagick":
await compressWithImagemagick(input, output, quality);
break;
case "sharp":
await compressWithSharp(input, output, format, quality);
break;
}
}
function getOutputPath(input: string, format: Format, keep: boolean, customOutput?: string): string {
if (customOutput) return resolve(customOutput);
const dir = dirname(input);
const base = basename(input, extname(input));
const ext = format === "jpeg" ? ".jpg" : `.${format}`;
if (keep && extname(input).toLowerCase() === ext) {
return join(dir, `${base}-compressed${ext}`);
}
return join(dir, `${base}${ext}`);
}
function formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes}B`;
if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)}KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
}
async function processFile(
compressor: Compressor,
input: string,
opts: Options
): Promise<Result> {
const absInput = resolve(input);
const inputSize = statSync(absInput).size;
const output = getOutputPath(absInput, opts.format, opts.keep, opts.output);
const tempOutput = output + ".tmp";
await compress(compressor, absInput, tempOutput, opts.format, opts.quality);
const outputSize = statSync(tempOutput).size;
if (!opts.keep && absInput !== output) {
unlinkSync(absInput);
}
renameSync(tempOutput, output);
return {
input: absInput,
output,
inputSize,
outputSize,
ratio: outputSize / inputSize,
compressor,
};
}
function collectFiles(dir: string, recursive: boolean): string[] {
const files: string[] = [];
const entries = readdirSync(dir, { withFileTypes: true });
for (const entry of entries) {
const full = join(dir, entry.name);
if (entry.isDirectory() && recursive) {
files.push(...collectFiles(full, recursive));
} else if (entry.isFile() && SUPPORTED_EXTS.includes(extname(entry.name).toLowerCase())) {
files.push(full);
}
}
return files;
}
function printHelp() {
console.log(`Usage: bun main.ts <input> [options]
Options:
-o, --output <path> Output path
-f, --format <fmt> Output format: webp, png, jpeg (default: webp)
-q, --quality <n> Quality 0-100 (default: 80)
-k, --keep Keep original file
-r, --recursive Process directories recursively
--json JSON output
-h, --help Show help`);
}
function parseArgs(args: string[]): Options | null {
const opts: Options = {
input: "",
format: "webp",
quality: 80,
keep: false,
recursive: false,
json: false,
};
for (let i = 0; i < args.length; i++) {
const arg = args[i];
if (arg === "-h" || arg === "--help") {
printHelp();
process.exit(0);
} else if (arg === "-o" || arg === "--output") {
opts.output = args[++i];
} else if (arg === "-f" || arg === "--format") {
const fmt = args[++i]?.toLowerCase();
if (fmt === "webp" || fmt === "png" || fmt === "jpeg" || fmt === "jpg") {
opts.format = fmt === "jpg" ? "jpeg" : (fmt as Format);
} else {
console.error(`Invalid format: ${fmt}`);
return null;
}
} else if (arg === "-q" || arg === "--quality") {
const q = parseInt(args[++i], 10);
if (isNaN(q) || q < 0 || q > 100) {
console.error(`Invalid quality: ${args[i]}`);
return null;
}
opts.quality = q;
} else if (arg === "-k" || arg === "--keep") {
opts.keep = true;
} else if (arg === "-r" || arg === "--recursive") {
opts.recursive = true;
} else if (arg === "--json") {
opts.json = true;
} else if (!arg.startsWith("-") && !opts.input) {
opts.input = arg;
}
}
if (!opts.input) {
console.error("Error: Input file or directory required");
printHelp();
return null;
}
return opts;
}
async function main() {
const args = process.argv.slice(2);
const opts = parseArgs(args);
if (!opts) process.exit(1);
const input = resolve(opts.input);
if (!existsSync(input)) {
console.error(`Error: ${input} not found`);
process.exit(1);
}
const compressor = await detectCompressor(opts.format);
const isDir = statSync(input).isDirectory();
if (isDir) {
const files = collectFiles(input, opts.recursive);
if (files.length === 0) {
console.error("No supported images found");
process.exit(1);
}
const results: Result[] = [];
for (const file of files) {
try {
const r = await processFile(compressor, file, { ...opts, output: undefined });
results.push(r);
if (!opts.json) {
const reduction = Math.round((1 - r.ratio) * 100);
console.log(`${r.input}${r.output} (${formatSize(r.inputSize)}${formatSize(r.outputSize)}, ${reduction}% reduction)`);
}
} catch (e) {
if (!opts.json) console.error(`Error processing ${file}: ${(e as Error).message}`);
}
}
if (opts.json) {
const totalInput = results.reduce((s, r) => s + r.inputSize, 0);
const totalOutput = results.reduce((s, r) => s + r.outputSize, 0);
console.log(
JSON.stringify({
files: results,
summary: {
totalFiles: results.length,
totalInputSize: totalInput,
totalOutputSize: totalOutput,
ratio: totalInput > 0 ? totalOutput / totalInput : 0,
compressor,
},
}, null, 2)
);
} else {
const totalInput = results.reduce((s, r) => s + r.inputSize, 0);
const totalOutput = results.reduce((s, r) => s + r.outputSize, 0);
const reduction = Math.round((1 - totalOutput / totalInput) * 100);
console.log(`\nProcessed ${results.length} files: ${formatSize(totalInput)}${formatSize(totalOutput)} (${reduction}% reduction)`);
}
} else {
try {
const r = await processFile(compressor, input, opts);
if (opts.json) {
console.log(JSON.stringify(r, null, 2));
} else {
const reduction = Math.round((1 - r.ratio) * 100);
console.log(`${r.input}${r.output} (${formatSize(r.inputSize)}${formatSize(r.outputSize)}, ${reduction}% reduction)`);
}
} catch (e) {
console.error(`Error: ${(e as Error).message}`);
process.exit(1);
}
}
}
main();
+285
View File
@@ -0,0 +1,285 @@
---
name: baoyu-cover-image
description: Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article".
---
# Cover Image Generator
Generate hand-drawn style cover images for articles with multiple style options.
## Usage
```bash
# From markdown file (auto-select style based on content)
/baoyu-cover-image path/to/article.md
# Specify a style
/baoyu-cover-image path/to/article.md --style blueprint
/baoyu-cover-image path/to/article.md --style warm
/baoyu-cover-image path/to/article.md --style dark-atmospheric
# Without title text
/baoyu-cover-image path/to/article.md --no-title
# Combine options
/baoyu-cover-image path/to/article.md --style minimal --no-title
# From direct text input
/baoyu-cover-image
[paste content or describe the topic]
# Direct input with style
/baoyu-cover-image --style playful
[paste content]
```
## 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
| Style | Description |
|-------|-------------|
| `elegant` (Default) | Refined, sophisticated, understated |
| `blueprint` | Technical schematics, engineering precision |
| `bold` | High contrast, attention-grabbing, energetic |
| `bold-editorial` | Magazine cover impact, dramatic typography |
| `chalkboard` | Black chalkboard, colorful chalk drawings |
| `dark-atmospheric` | Cinematic dark mode, glowing accents |
| `editorial-infographic` | Magazine explainer, visual storytelling |
| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm |
| `intuition-machine` | Technical briefing, bilingual labels |
| `minimal` | Ultra-clean, zen-like, focused |
| `nature` | Organic, calm, earthy |
| `notion` | Clean SaaS dashboard, productivity styling |
| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic |
| `playful` | Fun, creative, whimsical |
| `retro` | Halftone dots, vintage badges, classic |
| `sketch-notes` | Hand-drawn, educational, warm |
| `vector-illustration` | Flat vector, black outlines, retro colors |
| `vintage` | Aged paper, historical, expedition style |
| `warm` | Friendly, approachable, human-centered |
| `watercolor` | Soft hand-painted, natural warmth |
Detailed style definitions: `references/styles/<style>.md`
## Auto Style Selection
When no `--style` is specified, the system analyzes content to select the best style:
| Content Signals | Selected Style |
|----------------|----------------|
| Architecture, system design, engineering | `blueprint` |
| Product launch, keynote, marketing, brand | `bold-editorial` |
| Education, classroom, tutorial, teaching | `chalkboard` |
| Entertainment, creative, premium, cinematic | `dark-atmospheric` |
| Technology explainer, science, research | `editorial-infographic` |
| Storytelling, children, fantasy, magical | `fantasy-animation` |
| Technical docs, academic, bilingual | `intuition-machine` |
| Personal story, emotion, growth, life | `warm` |
| Controversial, urgent, must-read, warning | `bold` |
| Simple, zen, focus, essential | `minimal` |
| Fun, easy, beginner, casual | `playful` |
| Nature, eco, wellness, health, organic | `nature` |
| Pop culture, 80s/90s nostalgia, badges | `retro` |
| Product, SaaS, dashboard, productivity | `notion` |
| Gaming, retro tech, developer, 8-bit | `pixel-art` |
| Educational, tutorial, knowledge sharing | `sketch-notes` |
| Creative proposals, brand, toy-like | `vector-illustration` |
| History, exploration, heritage, biography | `vintage` |
| Lifestyle, travel, food, personal | `watercolor` |
| Business, professional, strategy, analysis | `elegant` |
## File Management
### Output Directory
Each session creates an independent directory named by content slug:
```
cover-image/{topic-slug}/
├── source-{slug}.{ext} # Source files (text, images, etc.)
├── prompts/
│ └── cover.md
└── cover.png
```
**Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "The Future of AI" → `future-of-ai`
### Conflict Resolution
If `cover-image/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052`
### Source Files
Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-logo.png` (image from conversation)
Multiple sources supported: text, images, files from conversation.
## Workflow
### Step 1: Analyze Content
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. **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
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 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:
**Title** (if included, max 8 characters):
- Distill the core message into a punchy headline
- Use hooks: numbers, questions, contrasts, pain points
- Skip if `--no-title` flag is used
**Visual Elements**:
- Style-appropriate imagery and icons
- 1-2 symbolic elements representing the topic
- Metaphors or analogies that fit the style
### 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 confirmed language]
Subtitle: [optional, in confirmed language]
Visual composition:
- Main visual: [description matching style]
- Layout: [positioning based on title inclusion and aspect ratio]
- Decorative elements: [style-appropriate elements]
Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
Style notes: [specific style characteristics to emphasize]
[If no title:]
Note: No title text, pure visual illustration only.
```
### 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, output path, and confirmed aspect ratio.
### 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.
```
## Notes
- Cover should be instantly understandable at small preview sizes
- Title (if included) must be readable and impactful
- Visual metaphors work better than literal representations
- Maintain style consistency throughout the cover
- Image generation typically takes 10-30 seconds
- 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
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-cover-image/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
@@ -0,0 +1,31 @@
Create a WeChat article cover image following these guidelines:
## Image Specifications
- **Type**: Cover image / Hero image
- **Aspect Ratio**: 2.35:1 (WeChat article cover standard)
- **Style**: Hand-drawn illustration
## Core Principles
- Hand-drawn quality throughout - NO realistic or photographic elements
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
- Ample whitespace, highlight core message, avoid cluttered layouts
- Main visual elements centered or slightly left (leave right side for title area if title included)
## Text Style (When Title Included)
- **ALL text MUST be hand-drawn style**
- Title text: Large, eye-catching, max 8 characters
- May include 1 line of subtitle or keyword tags
- Font style harmonizes with illustration style
- **DO NOT use realistic or computer-generated fonts**
## Language
- Use the same language as the content provided below for any text elements
- Match punctuation style to the content language
---
Please use nano banana pro to generate the cover image based on the content provided below:
@@ -0,0 +1,25 @@
# blueprint
Precise technical blueprint style with engineering aesthetic
## Color Palette
- Primary: Engineering Blue (#2563EB), Navy Blue (#1E3A5F)
- Background: Blueprint Off-White (#FAF8F5), subtle grid overlay
- Accents: Amber (#F59E0B), Light Blue (#BFDBFE)
## Visual Elements
- Precise lines with consistent stroke weights
- Technical schematics and clean vector graphics
- Dimension lines and measurement indicators
- Grid alignment for all elements
- Geometric precision for all shapes
## Typography
- Clean sans-serif hand lettering, technical and authoritative
## Best For
Technical architecture, system design, data analysis, engineering documentation
@@ -0,0 +1,26 @@
# bold-editorial
High-impact magazine editorial with bold visual expression
## Color Palette
- Primary: Pure White (#FFFFFF), Electric Blue (#3B82F6), Bright Orange (#FB923C)
- Background: Deep Black (#0A0A0A), Deep Blue (#0F172A)
- Accents: Magenta (#EC4899), Neon Green (#22C55E), Violet (#8B5CF6)
## Visual Elements
- Strong typography as visual element itself
- Geometric shapes and bold color blocks
- Full-bleed solid color backgrounds
- Dynamic diagonal lines and angles
- Dramatic lighting effects on text
- Minimal decoration, maximum impact
## Typography
- Bold condensed typeface, oversized headlines, all-caps, tight letter-spacing
## Best For
Product launches, marketing, keynote speeches, brand showcases, investor pitches
@@ -0,0 +1,23 @@
# bold
High contrast, attention-grabbing, energetic
## Color Palette
- Primary: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
- Background: Deep black (#000000), dark charcoal
- Accents: White, neon highlights
## Visual Elements
- Exclamation marks, lightning bolts
- Arrows, strong shapes
- Dramatic compositions
## Typography
- Bold, impactful, large hand lettering with shadows
## Best For
Opinion pieces, controversial takes, urgent topics
@@ -0,0 +1,26 @@
# chalkboard
Black chalkboard background with colorful chalk drawing style
## Color Palette
- Primary: Chalk White (#F5F5F5), Chalk Yellow (#FFE566), Chalk Pink (#FF9999)
- Background: Chalkboard Black (#1A1A1A), Dark Green-Black (#1C2B1C)
- Accents: Chalk Blue (#66B3FF), Chalk Green (#90EE90), Chalk Orange (#FFB366)
## Visual Elements
- Chalkboard texture with subtle dust and smudges
- Hand-drawn chalk illustrations with sketchy lines
- Chalk dust effects around text and drawings
- Imperfect lines with visible texture
- Doodles, arrows, underlines, stars
- Eraser marks and chalk residue
## Typography
- Hand-drawn chalk lettering, slightly uneven, with chalk texture
## Best For
Educational content, tutorials, classroom themes, back-to-school, teaching materials
@@ -0,0 +1,25 @@
# dark-atmospheric
Dark moody aesthetic with glowing accent elements
## Color Palette
- Primary: Electric Purple (#8B5CF6), Cyan Blue (#06B6D4), Magenta Pink (#EC4899)
- Background: Deep Purple-Black (#0D0D1A), Rich Navy (#1A1A2E)
- Accents: Amber (#F59E0B), Pure White (#FFFFFF)
## Visual Elements
- Glowing accent elements and borders
- Subtle gradient backgrounds
- Atmospheric fog or particle effects
- Neon-style highlights on key elements
- Silhouettes with backlit edges
## Typography
- Elegant serif or refined sans-serif in light/white with subtle glow
## Best For
Entertainment, creative industries, premium brands, cinematic storytelling
@@ -0,0 +1,26 @@
# editorial-infographic
Modern magazine-style editorial with clear visual storytelling
## Color Palette
- Primary: Near Black (#1A1A1A), Editorial Blue (#2563EB)
- Background: Pure White (#FFFFFF), Light Gray (#F8F9FA)
- Accents: Coral (#F97316), Emerald (#10B981), Amber (#F59E0B)
## Visual Elements
- Clean flat illustrations (not photos)
- Structured multi-section layouts
- Callout boxes for key insights
- Icon-based data visualization
- Visual metaphors for abstract concepts
- Pull quotes and highlight boxes
## Typography
- Bold display serif or modern sans-serif, editorial sophistication
## Best For
Technology explainers, science communication, research summaries, thought leadership
@@ -0,0 +1,23 @@
# elegant
Refined, sophisticated, understated
## Color Palette
- Primary: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
- Background: Warm cream (#F5F0E6), soft beige
- Accents: Gold (#C9A962), copper
## Visual Elements
- Delicate lines, refined icons
- Subtle gradients
- Balanced composition
## Typography
- Elegant serif-style hand lettering
## Best For
Professional content, thought leadership, business topics
@@ -0,0 +1,25 @@
# fantasy-animation
Whimsical hand-drawn animation style inspired by Ghibli and Disney
## Color Palette
- Primary: Golden Yellow (#F4D03F), Rose Pink (#E8A0BF), Deep Forest (#2D5A3D)
- Background: Soft Sky Blue (#E8F4FC), Warm Cream (#FFF8E7)
- Accents: Sage Green (#87A96B), Sky Blue (#7EC8E3), Coral (#F08080)
## Visual Elements
- Central illustrated character (friendly, expressive)
- Magical floating objects (books, orbs, sparkles)
- Storybook-style environment backgrounds
- Soft shadows and gentle highlights
- Decorative elements: stars, sparkles, flowers, leaves
## Typography
- Whimsical serif or decorative hand-lettered style, organic feel
## Best For
Educational content, storytelling, creative workshops, fantasy/gaming content
@@ -0,0 +1,26 @@
# intuition-machine
Technical briefing style with aged paper and bilingual labels
## Color Palette
- Primary: Dark Maroon (#5D3A3A), Teal (#2F7373)
- Background: Aged Cream (#F5F0E6), subtle paper texture with light creases
- Accents: Warm Brown (#8B7355), Maroon (#722F37), Deep Charcoal (#2D2D2D)
## Visual Elements
- Isometric 3D technical illustrations or flat 2D diagrams
- Bilingual callout labels (English + Chinese)
- Faded thematic background patterns
- Clean black outlines on all elements
- Split or triptych layouts
- Key quote box at bottom
## Typography
- Bold display font in dark maroon, ALL CAPS for titles, bilingual labels
## Best For
Technical explanations, academic presentations, bilingual audiences, knowledge docs
@@ -0,0 +1,23 @@
# minimal
Ultra-clean, zen-like, focused
## Color Palette
- Primary: Pure black (#000000), white (#FFFFFF)
- Background: White or off-white (#FAFAFA)
- Accents: Single color (user's choice or content-derived)
## Visual Elements
- Single focal point
- Maximum negative space
- Thin lines
## Typography
- Clean, simple hand lettering, lots of breathing room
## Best For
Philosophy, minimalism, focused concepts
@@ -0,0 +1,22 @@
# nature
Organic, calm, earthy
## Color Palette
- Primary: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
- Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
- Accents: Sunset orange, water blue
## Visual Elements
- Leaves, trees, mountains
- Sun, clouds, organic flowing lines
## Typography
- Organic, flowing hand lettering with natural textures
## Best For
Sustainability, wellness, outdoor topics, slow living
@@ -0,0 +1,25 @@
# notion
Clean SaaS dashboard aesthetic with productivity tool styling
## Color Palette
- Primary: Near Black (#1F1F1F), Notion Blue (#2383E2)
- Background: Light Gray (#F7F7F5), Pure White (#FFFFFF)
- Accents: Success Green (#0F7B6C), Alert Red (#E03E3E), Warning Yellow (#DFAB01)
## Visual Elements
- Card-based layouts with subtle borders
- Clean data visualizations
- Tag and label chips
- Icon-based navigation hints
- Progress bars and metric displays
## Typography
- System UI or Inter style, clean and functional
## Best For
Product demos, SaaS presentations, productivity content, B2B topics
@@ -0,0 +1,26 @@
# pixel-art
Retro 8-bit pixel art aesthetic with nostalgic gaming style
## Color Palette
- Primary: Dark Navy (#1A1A2E), Pixel Green (#00FF00)
- Background: Light Blue (#87CEEB), Soft Lavender (#E6E6FA)
- Accents: Pixel Red (#FF0000), Pixel Yellow (#FFFF00), Pixel Cyan (#00FFFF)
## Visual Elements
- All elements with visible pixel structure
- Simple iconography: stars, hearts, arrows
- Text bubbles with pixel borders
- Progress bars with chunky segments
- Dithering patterns for gradients
- Limited 16-32 color palette
## Typography
- Pixelated bitmap font style, chunky blocky letterforms
## Best For
Gaming content, tech tutorials, developer talks, retro-themed topics
@@ -0,0 +1,23 @@
# playful
Fun, creative, whimsical
## Color Palette
- Primary: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
- Background: Light cream (#FFFBEB), soft white
- Accents: Bright pops - yellow, coral, turquoise
## Visual Elements
- Doodles, stars, swirls
- Cute characters, emoji-style icons
- Playful compositions
## Typography
- Bouncy, irregular hand lettering, playful angles
## Best For
Casual content, tutorials, beginner guides, fun topics

Some files were not shown because too many files have changed in this diff Show More