mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-12 22:09:48 +08:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jim Liu 宝玉
|
b15a95e73d | ||
|
Jim Liu 宝玉
|
07af3c4c21 | ||
|
Jim Liu 宝玉
|
7842e4d188 | ||
|
Jim Liu 宝玉
|
fcd49cd5ea | ||
|
Jim Liu 宝玉
|
f454257b5c | ||
|
Jim Liu 宝玉
|
b1cbd1d527 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "1.17.0"
|
||||
"version": "1.19.0"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -149,3 +149,6 @@ xhs-images/
|
||||
url-to-markdown/
|
||||
cover-image/
|
||||
slide-deck/
|
||||
infographic/
|
||||
illustrations/
|
||||
comic/
|
||||
|
||||
@@ -2,6 +2,64 @@
|
||||
|
||||
English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 1.19.0 - 2026-01-24
|
||||
|
||||
### Features
|
||||
- `baoyu-comic`: adds partial workflow options—`--storyboard-only`, `--prompts-only`, `--images-only`, and `--regenerate N` for flexible workflow control.
|
||||
- `baoyu-image-gen`: adds `--imageSize` parameter for Google providers (1K/2K/4K), changes default quality to 2k.
|
||||
- `baoyu-image-gen`: adds `GEMINI_API_KEY` as alias for `GOOGLE_API_KEY`.
|
||||
|
||||
### Refactor
|
||||
- `baoyu-comic`: extracts detailed workflow to `references/workflow.md`, reduces SKILL.md by ~400 lines while preserving functionality.
|
||||
- `baoyu-comic`: extracts content signal analysis to `references/auto-selection.md` and partial workflow docs to `references/partial-workflows.md`.
|
||||
- `baoyu-image-gen`: modularizes code—extracts types to `types.ts`, provider implementations to `providers/google.ts` and `providers/openai.ts`.
|
||||
|
||||
### Documentation
|
||||
- `baoyu-comic`: improves ohmsha preset documentation with explicit default Doraemon character definitions and visual descriptions.
|
||||
|
||||
## 1.18.3 - 2026-01-23
|
||||
|
||||
### Documentation
|
||||
- `baoyu-comic`: improves character reference handling with explicit Strategy A/B selection—Strategy A uses `--ref` parameter for skills that support it, Strategy B embeds character descriptions in prompts for skills that don't. Includes concrete code examples for both approaches.
|
||||
|
||||
### Fixes
|
||||
- `baoyu-image-gen`: removes unsupported Gemini models (`gemini-2.0-flash-exp-image-generation`, `gemini-2.5-flash-preview-native-audio-dialog`) from multimodal model list.
|
||||
|
||||
## 1.18.2 - 2026-01-23
|
||||
|
||||
### Refactor
|
||||
- Streamline SKILL.md documentation across 7 skills (`baoyu-compress-image`, `baoyu-danger-gemini-web`, `baoyu-danger-x-to-markdown`, `baoyu-image-gen`, `baoyu-post-to-wechat`, `baoyu-post-to-x`, `baoyu-url-to-markdown`) following official best practices—reduces total documentation by ~300 lines while preserving all functionality.
|
||||
|
||||
### Documentation
|
||||
- `CLAUDE.md`: adds official skill authoring best practices link, skill loading rules, description writing guidelines, and progressive disclosure patterns.
|
||||
|
||||
## 1.18.1 - 2026-01-23
|
||||
|
||||
### Documentation
|
||||
- `baoyu-slide-deck`: adds detailed sub-steps (1.1-1.3) to progress checklist, marks Step 1.3 as required with explicit Bash check command for existing directory detection.
|
||||
|
||||
## 1.18.0 - 2026-01-23
|
||||
|
||||
### Features
|
||||
- `baoyu-slide-deck`: introduces dimension-based style system—replaces monolithic style definitions with modular 4-dimension architecture: **Texture** (clean, grid, organic, pixel, paper), **Mood** (professional, warm, cool, vibrant, dark, neutral), **Typography** (geometric, humanist, handwritten, editorial, technical), and **Density** (minimal, balanced, dense). 16 presets map to specific dimension combinations, with "Custom dimensions" option for full flexibility.
|
||||
- `baoyu-slide-deck`: adds two-round confirmation workflow—Round 1 asks style/audience/slides/review preferences, Round 2 (optional) collects custom dimension choices when user selects "Custom dimensions".
|
||||
- `baoyu-slide-deck`: adds conditional outline and prompt review—users can skip reviews for faster generation or enable them for more control.
|
||||
|
||||
### Documentation
|
||||
- `baoyu-slide-deck`: adds dimension reference files—`references/dimensions/texture.md`, `references/dimensions/mood.md`, `references/dimensions/typography.md`, `references/dimensions/density.md`, and `references/dimensions/presets.md` (preset → dimension mapping).
|
||||
- `baoyu-slide-deck`: adds design guidelines—`references/design-guidelines.md` with audience principles, visual hierarchy, content density, color selection, typography, and font recommendations.
|
||||
- `baoyu-slide-deck`: adds layout reference—`references/layouts.md` with layout options and selection tips.
|
||||
- `baoyu-slide-deck`: adds preferences schema—`references/config/preferences-schema.md` for EXTEND.md configuration.
|
||||
|
||||
## 1.17.1 - 2026-01-23
|
||||
|
||||
### Refactor
|
||||
- `baoyu-infographic`: simplifies SKILL.md documentation—removes redundant content, streamlines workflow description, and improves readability.
|
||||
- `baoyu-xhs-images`: improves Step 0 (Load Preferences) documentation—adds clearer first-time setup flow with visual tables and explicit path checking instructions.
|
||||
|
||||
### Improvements
|
||||
- `baoyu-infographic`: enhances `craft-handmade` style with strict hand-drawn enforcement—requires all imagery to maintain cartoon/illustrated aesthetic, no realistic or photographic elements.
|
||||
|
||||
## 1.17.0 - 2026-01-23
|
||||
|
||||
### Features
|
||||
|
||||
@@ -2,6 +2,64 @@
|
||||
|
||||
[English](./CHANGELOG.md) | 中文
|
||||
|
||||
## 1.19.0 - 2026-01-24
|
||||
|
||||
### 新功能
|
||||
- `baoyu-comic`：新增部分工作流选项——`--storyboard-only`、`--prompts-only`、`--images-only` 和 `--regenerate N`，实现灵活的工作流控制。
|
||||
- `baoyu-image-gen`：新增 `--imageSize` 参数用于 Google 提供商（1K/2K/4K），默认质量改为 2k。
|
||||
- `baoyu-image-gen`：新增 `GEMINI_API_KEY` 作为 `GOOGLE_API_KEY` 的别名。
|
||||
|
||||
### 重构
|
||||
- `baoyu-comic`：将详细工作流提取至 `references/workflow.md`，SKILL.md 减少约 400 行，功能完整保留。
|
||||
- `baoyu-comic`：将内容信号分析提取至 `references/auto-selection.md`，部分工作流文档提取至 `references/partial-workflows.md`。
|
||||
- `baoyu-image-gen`：代码模块化——类型定义提取至 `types.ts`，provider 实现提取至 `providers/google.ts` 和 `providers/openai.ts`。
|
||||
|
||||
### 文档
|
||||
- `baoyu-comic`：改进 ohmsha 预设文档，明确默认哆啦A梦角色定义和视觉描述。
|
||||
|
||||
## 1.18.3 - 2026-01-23
|
||||
|
||||
### 文档
|
||||
- `baoyu-comic`：改进角色参考处理流程，新增明确的 Strategy A/B 选择逻辑——Strategy A 使用 `--ref` 参数（适用于支持该参数的技能），Strategy B 将角色描述嵌入提示词（适用于不支持的技能）。包含两种方法的具体代码示例。
|
||||
|
||||
### 修复
|
||||
- `baoyu-image-gen`：从多模态模型列表中移除不支持的 Gemini 模型（`gemini-2.0-flash-exp-image-generation`、`gemini-2.5-flash-preview-native-audio-dialog`）。
|
||||
|
||||
## 1.18.2 - 2026-01-23
|
||||
|
||||
### 重构
|
||||
- 精简 7 个技能的 SKILL.md 文档（`baoyu-compress-image`、`baoyu-danger-gemini-web`、`baoyu-danger-x-to-markdown`、`baoyu-image-gen`、`baoyu-post-to-wechat`、`baoyu-post-to-x`、`baoyu-url-to-markdown`），遵循官方最佳实践——总文档量减少约 300 行，功能完整保留。
|
||||
|
||||
### 文档
|
||||
- `CLAUDE.md`：新增官方技能编写最佳实践链接、技能加载规则、描述编写指南和渐进式披露模式。
|
||||
|
||||
## 1.18.1 - 2026-01-23
|
||||
|
||||
### 文档
|
||||
- `baoyu-slide-deck`：进度清单新增详细子步骤（1.1-1.3），标记 Step 1.3 为必须步骤并提供明确的 Bash 检查命令用于检测已存在目录。
|
||||
|
||||
## 1.18.0 - 2026-01-23
|
||||
|
||||
### 新功能
|
||||
- `baoyu-slide-deck`：引入基于维度的风格系统——将单一风格定义重构为模块化四维架构：**纹理** (clean 纯净、grid 网格、organic 有机、pixel 像素、paper 纸张)、**氛围** (professional 专业、warm 温暖、cool 冷静、vibrant 鲜艳、dark 暗色、neutral 中性)、**字体** (geometric 几何、humanist 人文、handwritten 手写、editorial 编辑、technical 技术)、**密度** (minimal 极简、balanced 均衡、dense 密集)。16 种预设映射到特定维度组合，并提供「自定义维度」选项实现完全灵活配置。
|
||||
- `baoyu-slide-deck`：新增两轮确认工作流——第一轮询问风格/受众/页数/审核偏好，第二轮（可选）在用户选择「自定义维度」时收集具体维度选择。
|
||||
- `baoyu-slide-deck`：新增条件性大纲和提示词审核——用户可跳过审核以加快生成，或启用审核以获得更多控制。
|
||||
|
||||
### 文档
|
||||
- `baoyu-slide-deck`：新增维度参考文件——`references/dimensions/texture.md`、`references/dimensions/mood.md`、`references/dimensions/typography.md`、`references/dimensions/density.md`，以及 `references/dimensions/presets.md`（预设到维度的映射）。
|
||||
- `baoyu-slide-deck`：新增设计指南——`references/design-guidelines.md`，包含受众原则、视觉层次、内容密度、配色选择、字体排版和字体推荐。
|
||||
- `baoyu-slide-deck`：新增布局参考——`references/layouts.md`，包含布局选项和选择技巧。
|
||||
- `baoyu-slide-deck`：新增偏好配置模式——`references/config/preferences-schema.md`，用于 EXTEND.md 配置。
|
||||
|
||||
## 1.17.1 - 2026-01-23
|
||||
|
||||
### 重构
|
||||
- `baoyu-infographic`：精简 SKILL.md 文档——移除冗余内容，优化工作流描述，提升可读性。
|
||||
- `baoyu-xhs-images`：优化 Step 0（加载偏好设置）文档——新增更清晰的首次设置流程，使用可视化表格和明确的路径检查指令。
|
||||
|
||||
### 改进
|
||||
- `baoyu-infographic`：增强 `craft-handmade` 风格的手绘规则——要求所有图像必须保持卡通/插画风格，禁止写实或照片元素。
|
||||
|
||||
## 1.17.0 - 2026-01-23
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -78,6 +78,20 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
|
||||
|
||||
`.claude-plugin/marketplace.json` defines plugin metadata and skill paths. Version follows semver.
|
||||
|
||||
## Skill Loading Rules
|
||||
|
||||
**IMPORTANT**: When working in this project, follow these rules:
|
||||
|
||||
| Rule | Description |
|
||||
|------|-------------|
|
||||
| **Load project skills first** | MUST load all skills from `skills/` directory in current project. Project skills take priority over system/user-level skills with same name. |
|
||||
| **Default image generation** | When image generation is needed, use `skills/baoyu-image-gen/SKILL.md` by default (unless user specifies otherwise). |
|
||||
|
||||
**Loading Priority** (highest → lowest):
|
||||
1. Current project `skills/` directory
|
||||
2. User-level skills (`$HOME/.baoyu-skills/`)
|
||||
3. System-level skills
|
||||
|
||||
## Release Process
|
||||
|
||||
**IMPORTANT**: When user requests release/发布/push, ALWAYS use `/release-skills` workflow.
|
||||
@@ -92,6 +106,22 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
|
||||
|
||||
**IMPORTANT**: All skills MUST use `baoyu-` prefix to avoid conflicts when users import this plugin.
|
||||
|
||||
**REQUIRED READING**: Before creating a new skill, read the official [Skill authoring best practices](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices).
|
||||
|
||||
### Key Requirements from Official Best Practices
|
||||
|
||||
| Requirement | Details |
|
||||
|-------------|---------|
|
||||
| **Concise is key** | Claude is smart—only add context it doesn't have. Challenge each token. |
|
||||
| **name field** | Max 64 chars, lowercase letters/numbers/hyphens only, no "anthropic"/"claude" |
|
||||
| **description field** | Max 1024 chars, non-empty, MUST be third person, include what + when to use |
|
||||
| **SKILL.md body** | Keep under 500 lines; use separate files for additional content |
|
||||
| **Naming convention** | Gerund form preferred (e.g., `processing-pdfs`), but `baoyu-` prefix required here |
|
||||
| **References** | Keep one level deep from SKILL.md; avoid nested references |
|
||||
| **No time-sensitive info** | Avoid dates/versions that become outdated |
|
||||
|
||||
### Steps
|
||||
|
||||
1. Create `skills/baoyu-<name>/SKILL.md` with YAML front matter
|
||||
- Directory name: `baoyu-<name>`
|
||||
- SKILL.md `name` field: `baoyu-<name>`
|
||||
@@ -119,6 +149,21 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
|
||||
- `description`: Brief description of the category
|
||||
- `skills`: Array with the skill path
|
||||
|
||||
### Writing Effective Descriptions
|
||||
|
||||
**MUST write in third person** (not "I can help you" or "You can use this"):
|
||||
|
||||
```yaml
|
||||
# Good
|
||||
description: Generates Xiaohongshu infographic series from content. Use when user asks for "小红书图片", "XHS images", or "RedNote infographics".
|
||||
|
||||
# Bad
|
||||
description: I can help you create Xiaohongshu images
|
||||
description: You can use this to generate XHS content
|
||||
```
|
||||
|
||||
Include both **what** the skill does and **when** to use it (triggers/keywords).
|
||||
|
||||
### Script Directory Template
|
||||
|
||||
Every SKILL.md with scripts MUST include this section after Usage:
|
||||
@@ -142,6 +187,26 @@ Every SKILL.md with scripts MUST include this section after Usage:
|
||||
|
||||
When referencing scripts in workflow sections, use `${SKILL_DIR}/scripts/<name>.ts` so agents can resolve the correct path.
|
||||
|
||||
### Progressive Disclosure
|
||||
|
||||
For skills with extensive content, use separate reference files:
|
||||
|
||||
```
|
||||
skills/baoyu-example/
|
||||
├── SKILL.md # Main instructions (<500 lines)
|
||||
├── references/
|
||||
│ ├── styles.md # Style definitions (loaded as needed)
|
||||
│ └── examples.md # Usage examples (loaded as needed)
|
||||
└── scripts/
|
||||
└── main.ts # Executable script
|
||||
```
|
||||
|
||||
In SKILL.md, link to reference files (one level deep only):
|
||||
```markdown
|
||||
**Available styles**: See [references/styles.md](references/styles.md)
|
||||
**Examples**: See [references/examples.md](references/examples.md)
|
||||
```
|
||||
|
||||
## Code Style
|
||||
|
||||
- TypeScript throughout, no comments
|
||||
@@ -155,9 +220,11 @@ Skills that require image generation MUST delegate to available image generation
|
||||
|
||||
### 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
|
||||
**Default**: Use `skills/baoyu-image-gen/SKILL.md` (unless user specifies otherwise).
|
||||
|
||||
1. Read `skills/baoyu-image-gen/SKILL.md` for parameters and capabilities
|
||||
2. If user explicitly requests a different skill, check `skills/` directory for alternatives
|
||||
3. Only ask user to choose when they haven't specified and multiple viable options exist
|
||||
|
||||
### Generation Flow Template
|
||||
|
||||
@@ -298,18 +365,66 @@ READMEs use 3-column tables for style previews:
|
||||
|
||||
## Extension Support
|
||||
|
||||
Every SKILL.md MUST include an Extension Support section at the end:
|
||||
Every SKILL.md MUST include two parts for extension support:
|
||||
|
||||
### 1. Load Preferences Section (in Step 1 or as "Preferences" section)
|
||||
|
||||
For skills with workflows, add as Step 1.1. For utility skills, add as "Preferences (EXTEND.md)" section before Usage:
|
||||
|
||||
```markdown
|
||||
**1.1 Load Preferences (EXTEND.md)**
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
\`\`\`bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/<skill-name>/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/<skill-name>/EXTEND.md" && echo "user"
|
||||
\`\`\`
|
||||
|
||||
┌────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/<skill-name>/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/<skill-name>/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, display summary │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: [List supported configuration options for this skill]
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
```
|
||||
|
||||
### 2. Extension Support Section (at the end)
|
||||
|
||||
Simplified section that references the preferences section:
|
||||
|
||||
```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.
|
||||
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|
||||
```
|
||||
|
||||
Replace `<skill-name>` with the actual skill name (e.g., `baoyu-cover-image`).
|
||||
Or for utility skills without workflow steps:
|
||||
|
||||
```markdown
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
```
|
||||
|
||||
**Notes**:
|
||||
- Replace `<skill-name>` with actual skill name (e.g., `baoyu-cover-image`)
|
||||
- Use `$HOME` instead of `~` for cross-platform compatibility (macOS/Linux/WSL)
|
||||
- Use `test -f` Bash command for explicit file existence check
|
||||
- ASCII tables for clear visual formatting
|
||||
|
||||
@@ -297,6 +297,9 @@ Generate professional slide deck images from content. Creates comprehensive outl
|
||||
/baoyu-slide-deck path/to/article.md --style corporate
|
||||
/baoyu-slide-deck path/to/article.md --audience executives
|
||||
|
||||
# Target slide count
|
||||
/baoyu-slide-deck path/to/article.md --slides 15
|
||||
|
||||
# Outline only (no image generation)
|
||||
/baoyu-slide-deck path/to/article.md --outline-only
|
||||
|
||||
@@ -304,25 +307,50 @@ Generate professional slide deck images from content. Creates comprehensive outl
|
||||
/baoyu-slide-deck path/to/article.md --lang zh
|
||||
```
|
||||
|
||||
**Styles** (visual aesthetics):
|
||||
**Options**:
|
||||
|
||||
| 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 |
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Visual style: preset name or `custom` |
|
||||
| `--audience <type>` | Target: beginners, intermediate, experts, executives, general |
|
||||
| `--lang <code>` | Output language (en, zh, ja, etc.) |
|
||||
| `--slides <number>` | Target slide count (8-25 recommended, max 30) |
|
||||
| `--outline-only` | Generate outline only, skip images |
|
||||
| `--prompts-only` | Generate outline + prompts, skip images |
|
||||
| `--images-only` | Generate images from existing prompts |
|
||||
| `--regenerate <N>` | Regenerate specific slide(s): `3` or `2,5,8` |
|
||||
|
||||
**Style System**:
|
||||
|
||||
Styles are built from 4 dimensions: **Texture** × **Mood** × **Typography** × **Density**
|
||||
|
||||
| Dimension | Options |
|
||||
|-----------|---------|
|
||||
| Texture | clean, grid, organic, pixel, paper |
|
||||
| Mood | professional, warm, cool, vibrant, dark, neutral |
|
||||
| Typography | geometric, humanist, handwritten, editorial, technical |
|
||||
| Density | minimal, balanced, dense |
|
||||
|
||||
**Presets** (pre-configured dimension combinations):
|
||||
|
||||
| Preset | Dimensions | Best For |
|
||||
|--------|------------|----------|
|
||||
| `blueprint` (default) | grid + cool + technical + balanced | Architecture, system design |
|
||||
| `chalkboard` | organic + warm + handwritten + balanced | Education, tutorials |
|
||||
| `corporate` | clean + professional + geometric + balanced | Investor decks, proposals |
|
||||
| `minimal` | clean + neutral + geometric + minimal | Executive briefings |
|
||||
| `sketch-notes` | organic + warm + handwritten + balanced | Educational, tutorials |
|
||||
| `watercolor` | organic + warm + humanist + minimal | Lifestyle, wellness |
|
||||
| `dark-atmospheric` | clean + dark + editorial + balanced | Entertainment, gaming |
|
||||
| `notion` | clean + neutral + geometric + dense | Product demos, SaaS |
|
||||
| `bold-editorial` | clean + vibrant + editorial + balanced | Product launches, keynotes |
|
||||
| `editorial-infographic` | clean + cool + editorial + dense | Tech explainers, research |
|
||||
| `fantasy-animation` | organic + vibrant + handwritten + minimal | Educational storytelling |
|
||||
| `intuition-machine` | clean + cool + technical + dense | Technical docs, academic |
|
||||
| `pixel-art` | pixel + vibrant + technical + balanced | Gaming, developer talks |
|
||||
| `scientific` | clean + cool + technical + dense | Biology, chemistry, medical |
|
||||
| `vector-illustration` | clean + vibrant + humanist + balanced | Creative, children's content |
|
||||
| `vintage` | paper + warm + editorial + balanced | Historical, heritage |
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
@@ -341,7 +369,7 @@ Generate professional slide deck images from content. Creates comprehensive outl
|
||||
|  | | |
|
||||
| watercolor | | |
|
||||
|
||||
After generation, slides are automatically merged into a `.pptx` file for easy sharing.
|
||||
After generation, slides are automatically merged into `.pptx` and `.pdf` files for easy sharing.
|
||||
|
||||
#### baoyu-comic
|
||||
|
||||
|
||||
+47
-19
@@ -297,6 +297,9 @@ npx skills add jimliu/baoyu-skills
|
||||
/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 --slides 15
|
||||
|
||||
# 仅生成大纲（不生成图片）
|
||||
/baoyu-slide-deck path/to/article.md --outline-only
|
||||
|
||||
@@ -304,25 +307,50 @@ npx skills add jimliu/baoyu-skills
|
||||
/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` | 柔和手绘水彩纹理，自然温暖 | 生活方式、健康、旅行 |
|
||||
| 选项 | 说明 |
|
||||
|------|------|
|
||||
| `--style <name>` | 视觉风格：预设名称或 `custom` |
|
||||
| `--audience <type>` | 目标受众：beginners、intermediate、experts、executives、general |
|
||||
| `--lang <code>` | 输出语言（en、zh、ja 等） |
|
||||
| `--slides <number>` | 目标页数（推荐 8-25，最多 30） |
|
||||
| `--outline-only` | 仅生成大纲，跳过图片 |
|
||||
| `--prompts-only` | 生成大纲 + 提示词，跳过图片 |
|
||||
| `--images-only` | 从现有提示词生成图片 |
|
||||
| `--regenerate <N>` | 重新生成指定页：`3` 或 `2,5,8` |
|
||||
|
||||
**风格系统**：
|
||||
|
||||
风格由 4 个维度组合而成：**纹理** × **氛围** × **字体** × **密度**
|
||||
|
||||
| 维度 | 选项 |
|
||||
|------|------|
|
||||
| 纹理 | clean 纯净、grid 网格、organic 有机、pixel 像素、paper 纸张 |
|
||||
| 氛围 | professional 专业、warm 温暖、cool 冷静、vibrant 鲜艳、dark 暗色、neutral 中性 |
|
||||
| 字体 | geometric 几何、humanist 人文、handwritten 手写、editorial 编辑、technical 技术 |
|
||||
| 密度 | minimal 极简、balanced 均衡、dense 密集 |
|
||||
|
||||
**预设**（预配置的维度组合）：
|
||||
|
||||
| 预设 | 维度组合 | 适用场景 |
|
||||
|------|----------|----------|
|
||||
| `blueprint`（默认） | grid + cool + technical + balanced | 架构设计、系统设计 |
|
||||
| `chalkboard` | organic + warm + handwritten + balanced | 教育、教程 |
|
||||
| `corporate` | clean + professional + geometric + balanced | 投资者演示、提案 |
|
||||
| `minimal` | clean + neutral + geometric + minimal | 高管简报 |
|
||||
| `sketch-notes` | organic + warm + handwritten + balanced | 教育、教程 |
|
||||
| `watercolor` | organic + warm + humanist + minimal | 生活方式、健康 |
|
||||
| `dark-atmospheric` | clean + dark + editorial + balanced | 娱乐、游戏 |
|
||||
| `notion` | clean + neutral + geometric + dense | 产品演示、SaaS |
|
||||
| `bold-editorial` | clean + vibrant + editorial + balanced | 产品发布、主题演讲 |
|
||||
| `editorial-infographic` | clean + cool + editorial + dense | 科技解说、研究 |
|
||||
| `fantasy-animation` | organic + vibrant + handwritten + minimal | 教育故事 |
|
||||
| `intuition-machine` | clean + cool + technical + dense | 技术文档、学术 |
|
||||
| `pixel-art` | pixel + vibrant + technical + balanced | 游戏、开发者 |
|
||||
| `scientific` | clean + cool + technical + dense | 生物、化学、医学 |
|
||||
| `vector-illustration` | clean + vibrant + humanist + balanced | 创意、儿童内容 |
|
||||
| `vintage` | paper + warm + editorial + balanced | 历史、传记 |
|
||||
|
||||
**风格预览**：
|
||||
|
||||
@@ -341,7 +369,7 @@ npx skills add jimliu/baoyu-skills
|
||||
|  | | |
|
||||
| watercolor | | |
|
||||
|
||||
生成完成后，所有幻灯片会自动合并为 `.pptx` 文件，方便分享。
|
||||
生成完成后，所有幻灯片会自动合并为 `.pptx` 和 `.pdf` 文件，方便分享。
|
||||
|
||||
#### baoyu-comic
|
||||
|
||||
|
||||
+130
-358
@@ -27,6 +27,17 @@ Create original knowledge comics with flexible art style × tone combinations.
|
||||
| `--aspect` | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) | Page aspect ratio |
|
||||
| `--lang` | auto (default), zh, en, ja, etc. | Output language |
|
||||
|
||||
### Partial Workflow Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--storyboard-only` | Generate storyboard only, skip prompts and images |
|
||||
| `--prompts-only` | Generate storyboard + prompts, skip images |
|
||||
| `--images-only` | Generate images from existing prompts directory |
|
||||
| `--regenerate N` | Regenerate specific page(s) only (e.g., `3` or `2,5,8`) |
|
||||
|
||||
Details: [references/partial-workflows.md](references/partial-workflows.md)
|
||||
|
||||
### Art Styles (画风)
|
||||
|
||||
| Style | 中文 | Description |
|
||||
@@ -69,27 +80,25 @@ Presets with special rules beyond art+tone:
|
||||
| ink-brush | neutral, dramatic, action, vintage | warm | romantic, energetic |
|
||||
| chalk | neutral, warm, energetic | vintage | dramatic, action, romantic |
|
||||
|
||||
Art Style × Tone × Layout can be freely combined. Incompatible combinations work but may produce unexpected results.
|
||||
Details: [references/auto-selection.md](references/auto-selection.md)
|
||||
|
||||
## Auto Selection
|
||||
|
||||
Content signals determine default art + tone + layout (or preset):
|
||||
|
||||
| Content Signals | Art Style | Tone | Layout | Preset |
|
||||
|-----------------|-----------|------|--------|--------|
|
||||
| Tutorial, how-to, beginner | manga | neutral | webtoon | **ohmsha** |
|
||||
| Computing, AI, programming | manga | neutral | dense | **ohmsha** |
|
||||
| Technical explanation, educational | manga | neutral | webtoon | **ohmsha** |
|
||||
| Pre-1950, classical, ancient | realistic | vintage | cinematic | - |
|
||||
| Personal story, mentor | ligne-claire | warm | standard | - |
|
||||
| Conflict, breakthrough | (inherit) | dramatic | splash | - |
|
||||
| Wine, food, business, lifestyle | realistic | neutral | cinematic | - |
|
||||
| Martial arts, wuxia, xianxia | ink-brush | action | splash | **wuxia** |
|
||||
| Romance, love, school life | manga | romantic | standard | **shoujo** |
|
||||
| Biography, balanced | ligne-claire | neutral | mixed | - |
|
||||
| Content Signals | Recommended |
|
||||
|-----------------|-------------|
|
||||
| Tutorial, how-to, programming, educational | **ohmsha** preset |
|
||||
| Pre-1950, classical, ancient | realistic + vintage |
|
||||
| Personal story, mentor | ligne-claire + warm |
|
||||
| Martial arts, wuxia | **wuxia** preset |
|
||||
| Romance, school life | **shoujo** preset |
|
||||
| Biography, balanced | ligne-claire + neutral |
|
||||
|
||||
**When preset is recommended**: Load `references/presets/{preset}.md` and apply all special rules.
|
||||
|
||||
Details: [references/auto-selection.md](references/auto-selection.md)
|
||||
|
||||
## Script Directory
|
||||
|
||||
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
|
||||
@@ -111,384 +120,147 @@ Output directory: `comic/{topic-slug}/`
|
||||
- Conflict: append timestamp (e.g., `turing-story-20260118-143052`)
|
||||
|
||||
**Contents**:
|
||||
- `source-{slug}.{ext}` - Source files
|
||||
- `analysis.md` - Content analysis
|
||||
- `storyboard.md` - Storyboard with panel breakdown
|
||||
- `characters/characters.md` - Character definitions
|
||||
- `characters/characters.png` - Character reference sheet
|
||||
- `prompts/NN-{cover|page}-[slug].md` - Generation prompts
|
||||
- `NN-{cover|page}-[slug].png` - Generated images
|
||||
- `{topic-slug}.pdf` - Final merged PDF
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `source-{slug}.{ext}` | Source files |
|
||||
| `analysis.md` | Content analysis |
|
||||
| `storyboard.md` | Storyboard with panel breakdown |
|
||||
| `characters/characters.md` | Character definitions |
|
||||
| `characters/characters.png` | Character reference sheet |
|
||||
| `prompts/NN-{cover\|page}-[slug].md` | Generation prompts |
|
||||
| `NN-{cover\|page}-[slug].png` | Generated images |
|
||||
| `{topic-slug}.pdf` | Final merged PDF |
|
||||
|
||||
## Language Handling
|
||||
|
||||
**Detection Priority**:
|
||||
1. `--lang` flag (explicit)
|
||||
2. EXTEND.md `language` setting
|
||||
3. User's conversation language
|
||||
4. Source content language
|
||||
|
||||
**Rule**: Use user's input language or saved language preference for ALL interactions:
|
||||
- Storyboard outlines and scene descriptions
|
||||
- Image generation prompts
|
||||
- User selection options and confirmations
|
||||
- Progress updates, questions, errors, summaries
|
||||
|
||||
Technical terms remain in English.
|
||||
|
||||
## Workflow
|
||||
|
||||
### Progress Checklist
|
||||
|
||||
Copy and track progress:
|
||||
|
||||
```
|
||||
Comic Progress:
|
||||
- [ ] Step 1: Load preferences + Analyze content
|
||||
- [ ] Step 2: Confirmation 1 - Style & options ⚠️ REQUIRED
|
||||
- [ ] Step 1: Setup & Analyze (1.1 Preferences, 1.2 Analyze, 1.3 Check existing)
|
||||
- [ ] Step 2: Confirmation - Style & options ⚠️ REQUIRED
|
||||
- [ ] Step 3: Generate storyboard + characters
|
||||
- [ ] Step 4: Confirmation 2 - Review outline (if requested)
|
||||
- [ ] Step 5: Generate images (sequential)
|
||||
- [ ] Step 6: Merge to PDF
|
||||
- [ ] Step 7: Completion report
|
||||
- [ ] Step 4: Review outline (conditional)
|
||||
- [ ] Step 5: Generate prompts
|
||||
- [ ] Step 6: Review prompts (conditional)
|
||||
- [ ] Step 7: Generate images ⚠️ CHARACTER REF REQUIRED
|
||||
- [ ] 7.1 Generate character sheet FIRST → characters/characters.png
|
||||
- [ ] 7.2 Generate pages WITH --ref characters/characters.png
|
||||
- [ ] Step 8: Merge to PDF
|
||||
- [ ] Step 9: Completion report
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
```
|
||||
Input → Preferences → Analyze → [Confirm 1: Style + Skip?] → Storyboard → [Confirm 2: if needed] → Generate → PDF → Complete
|
||||
Input → Preferences → Analyze → [Check Existing?] → [Confirm: Style + Reviews] → Storyboard → [Review?] → Prompts → [Review?] → Images → PDF → Complete
|
||||
```
|
||||
|
||||
### Step 1: Setup & Analyze
|
||||
### Step Summary
|
||||
|
||||
**1.1 Load Preferences (EXTEND.md)**
|
||||
| Step | Action | Key Output |
|
||||
|------|--------|------------|
|
||||
| 1.1 | Load EXTEND.md preferences | Config loaded |
|
||||
| 1.2 | Analyze content | `analysis.md` |
|
||||
| 1.3 | Check existing directory | Handle conflicts |
|
||||
| 2 | Confirm style, focus, audience, reviews | User preferences |
|
||||
| 3 | Generate storyboard + characters | `storyboard.md`, `characters/` |
|
||||
| 4 | Review outline (if requested) | User approval |
|
||||
| 5 | Generate prompts | `prompts/*.md` |
|
||||
| 6 | Review prompts (if requested) | User approval |
|
||||
| **7.1** | **Generate character sheet FIRST** | `characters/characters.png` |
|
||||
| **7.2** | Generate pages **with character ref** | `*.png` files |
|
||||
| 8 | Merge to PDF | `{slug}.pdf` |
|
||||
| 9 | Completion report | Summary |
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
### Step 7: Image Generation ⚠️ CRITICAL
|
||||
|
||||
**Character reference is MANDATORY for visual consistency.**
|
||||
|
||||
**7.1 Generate character sheet first**:
|
||||
```bash
|
||||
# Use Reference Sheet Prompt from characters/characters.md
|
||||
npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
|
||||
--promptfiles characters/characters.md \
|
||||
--image characters/characters.png --ar 4:3
|
||||
```
|
||||
|
||||
**7.2 Generate each page WITH character reference**:
|
||||
|
||||
| Skill Capability | Strategy |
|
||||
|------------------|----------|
|
||||
| Supports `--ref` | Pass `characters/characters.png` with EVERY page |
|
||||
| No `--ref` support | Prepend character descriptions to EVERY prompt file |
|
||||
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-comic/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-comic/EXTEND.md" && echo "user"
|
||||
# Example: ALWAYS include --ref for consistency
|
||||
npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
|
||||
--promptfiles prompts/01-page-xxx.md \
|
||||
--image 01-page-xxx.png --ar 3:4 \
|
||||
--ref characters/characters.png
|
||||
```
|
||||
|
||||
┌──────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├──────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-comic/EXTEND.md │ Project directory │
|
||||
├──────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-comic/EXTEND.md │ User home │
|
||||
└──────────────────────────────────────────────┴───────────────────┘
|
||||
**Full workflow details**: [references/workflow.md](references/workflow.md)
|
||||
|
||||
**When EXTEND.md Found** → Read, parse, **output summary to user**:
|
||||
### EXTEND.md Paths
|
||||
|
||||
```
|
||||
📋 Loaded preferences from [full path]
|
||||
├─ Watermark: [enabled/disabled] [content if enabled]
|
||||
├─ Art Style: [style name or "auto-select"]
|
||||
├─ Tone: [tone name or "auto-select"]
|
||||
├─ Layout: [layout or "auto-select"]
|
||||
├─ Language: [language or "auto-detect"]
|
||||
└─ Character presets: [count] defined
|
||||
```
|
||||
|
||||
**MUST output this summary** so user knows their current configuration. Do not skip or silently load.
|
||||
|
||||
**When EXTEND.md Not Found** → First-time setup:
|
||||
|
||||
1. Inform user: "No preferences found. Let's set up your defaults."
|
||||
2. Use AskUserQuestion to collect preferences (see `references/config/first-time-setup.md`)
|
||||
3. Create EXTEND.md at user-chosen location
|
||||
4. Confirm: "✓ Preferences saved to [path]"
|
||||
| Path | Location |
|
||||
|------|----------|
|
||||
| `.baoyu-skills/baoyu-comic/EXTEND.md` | Project directory |
|
||||
| `$HOME/.baoyu-skills/baoyu-comic/EXTEND.md` | User home |
|
||||
|
||||
**EXTEND.md Supports**: Watermark | Preferred art/tone/layout | Custom style definitions | Character presets | Language preference
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
|
||||
**Important**: Once EXTEND.md exists, watermark, language, and style defaults are NOT asked again in Confirmation 1 or 2. These are session-persistent settings.
|
||||
|
||||
**1.2 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 language**:
|
||||
- If EXTEND.md has `language` → use it
|
||||
- Else if `--lang` option provided → use it
|
||||
- Else → use detected source language
|
||||
6. Determine recommended page count:
|
||||
- Short story: 5-8 pages
|
||||
- Medium complexity: 9-15 pages
|
||||
- Full biography: 16-25 pages
|
||||
7. Analyze content signals for art/tone/layout recommendations
|
||||
8. **Save to `analysis.md`**
|
||||
|
||||
**analysis.md Format**: YAML front matter (title, topic, time_span, source_language, user_language, aspect_ratio, recommended_page_count, recommended_art, recommended_tone) + sections for Target Audience, Value Proposition, Core Themes, Key Figures & Story Arcs, Content Signals, Recommended Approaches. See `references/analysis-framework.md` for full template.
|
||||
|
||||
### Step 2: Confirmation 1 - Style & Options ⚠️
|
||||
|
||||
**Purpose**: Select visual style + decide whether to review outline before generation. **Do NOT skip.**
|
||||
|
||||
**Note**: Watermark and language already configured in EXTEND.md (Step 1).
|
||||
|
||||
**Display summary**:
|
||||
- Content type + topic identified
|
||||
- Key figures extracted
|
||||
- Time span detected
|
||||
- Recommended page count
|
||||
- Language: [from EXTEND.md or detected]
|
||||
- **Recommended style**: [art] + [tone] (based on content signals)
|
||||
|
||||
**Use AskUserQuestion** for:
|
||||
|
||||
**Question 1: Visual Style**
|
||||
|
||||
If a preset is recommended (see Auto Selection), show it first:
|
||||
|
||||
```
|
||||
header: "Style"
|
||||
question: "Which visual style for this comic?"
|
||||
options:
|
||||
- label: "[preset name] preset (Recommended)" # If preset recommended
|
||||
description: "[preset description] - includes special rules"
|
||||
- label: "[recommended art] + [recommended tone] (Recommended)" # If no preset
|
||||
description: "Best match for your content based on analysis"
|
||||
- label: "ligne-claire + neutral"
|
||||
description: "Classic educational, Logicomix style"
|
||||
- label: "ohmsha preset"
|
||||
description: "Educational manga with visual metaphors, gadgets, NO talking heads"
|
||||
- label: "Custom"
|
||||
description: "Specify your own art + tone or preset"
|
||||
```
|
||||
|
||||
**Preset vs Art+Tone**: Presets include special rules beyond art+tone. `ohmsha` = manga + neutral + visual metaphor rules + character roles + NO talking heads. Plain `manga + neutral` does NOT include these rules.
|
||||
|
||||
**Question 2: Narrative Focus** (multiSelect: true)
|
||||
```
|
||||
header: "Focus"
|
||||
question: "What should the comic emphasize? (Select all that apply)"
|
||||
options:
|
||||
- label: "Biography/life story"
|
||||
description: "Follow a person's journey through key life events"
|
||||
- label: "Concept explanation"
|
||||
description: "Break down complex ideas visually"
|
||||
- label: "Historical event"
|
||||
description: "Dramatize important historical moments"
|
||||
- label: "Tutorial/how-to"
|
||||
description: "Step-by-step educational guide"
|
||||
```
|
||||
|
||||
**Question 3: Target Audience**
|
||||
```
|
||||
header: "Audience"
|
||||
question: "Who is the primary reader?"
|
||||
options:
|
||||
- label: "General readers"
|
||||
description: "Broad appeal, accessible content"
|
||||
- label: "Students/learners"
|
||||
description: "Educational focus, clear explanations"
|
||||
- label: "Industry professionals"
|
||||
description: "Technical depth, domain knowledge"
|
||||
- label: "Children/young readers"
|
||||
description: "Simplified language, engaging visuals"
|
||||
```
|
||||
|
||||
**Question 4: Outline Review**
|
||||
```
|
||||
header: "Review"
|
||||
question: "Do you want to review the outline before image generation?"
|
||||
options:
|
||||
- label: "Yes, let me review (Recommended)"
|
||||
description: "Review storyboard and characters before generating images"
|
||||
- label: "No, generate directly"
|
||||
description: "Skip outline review, start generating immediately"
|
||||
```
|
||||
|
||||
**After response**:
|
||||
1. Update `analysis.md` with user preferences
|
||||
2. **Store `skip_outline_review`** flag based on Question 4 response
|
||||
3. → Step 3
|
||||
|
||||
### Step 3: Generate Storyboard + Characters
|
||||
|
||||
Create storyboard and character definitions using the confirmed style from Step 2.
|
||||
|
||||
**Loading Style References**:
|
||||
- Art style: `references/art-styles/{art}.md`
|
||||
- Tone: `references/tones/{tone}.md`
|
||||
- If preset (ohmsha/wuxia/shoujo): also load `references/presets/{preset}.md`
|
||||
|
||||
**Generate**:
|
||||
|
||||
1. **Storyboard** (`storyboard.md`):
|
||||
- YAML front matter with art_style, tone, layout, aspect_ratio
|
||||
- Cover design
|
||||
- Each page: layout, panel breakdown, visual prompts
|
||||
- **Written in user's preferred language** (from Step 1)
|
||||
- Reference: `references/storyboard-template.md`
|
||||
- **If using preset**: Load and apply preset rules from `references/presets/`
|
||||
|
||||
2. **Character definitions** (`characters/characters.md`):
|
||||
- Visual specs matching the art style (in user's preferred language)
|
||||
- Include Reference Sheet Prompt for later image generation
|
||||
- Reference: `references/character-template.md`
|
||||
|
||||
**After generation**:
|
||||
- If `skip_outline_review` is true → Skip Step 4, go directly to Step 5
|
||||
- If `skip_outline_review` is false → Continue to Step 4
|
||||
|
||||
### Step 4: Confirmation 2 - Review Outline (Conditional)
|
||||
|
||||
**Skip this step** if user selected "No, generate directly" in Step 2.
|
||||
|
||||
**Purpose**: User reviews and confirms storyboard + characters before generation.
|
||||
|
||||
**Display**:
|
||||
- Page count and structure
|
||||
- Art style + Tone combination
|
||||
- Page-by-page summary (Cover → P1 → P2...)
|
||||
- Character list with brief descriptions
|
||||
|
||||
**Use AskUserQuestion**:
|
||||
|
||||
```
|
||||
header: "Confirm"
|
||||
question: "Ready to generate images with this outline?"
|
||||
options:
|
||||
- label: "Yes, proceed (Recommended)"
|
||||
description: "Generate character sheet and comic pages"
|
||||
- label: "Edit storyboard first"
|
||||
description: "I'll modify storyboard.md before continuing"
|
||||
- label: "Edit characters first"
|
||||
description: "I'll modify characters/characters.md before continuing"
|
||||
- label: "Edit both"
|
||||
description: "I'll modify both files before continuing"
|
||||
```
|
||||
|
||||
**After response**:
|
||||
1. If user wants to edit → Wait for user to finish editing, then ask again
|
||||
2. If user confirms → Continue to Step 5
|
||||
|
||||
### Step 5: Generate Images
|
||||
|
||||
With confirmed storyboard + art style + tone + aspect ratio:
|
||||
|
||||
**Style Reference Loading**:
|
||||
- Read `references/art-styles/{art}.md` for rendering guidelines
|
||||
- Read `references/tones/{tone}.md` for mood/color adjustments
|
||||
- If preset: Read `references/presets/{preset}.md` for special rules
|
||||
|
||||
**5.1 Generate Character Reference Sheet** (first):
|
||||
1. Use Reference Sheet Prompt from `characters/characters.md`
|
||||
2. Generate → `characters/characters.png`
|
||||
3. This ensures visual consistency for all subsequent pages
|
||||
|
||||
**5.2 Generate Comic Pages**:
|
||||
|
||||
**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 art style and tone guidelines
|
||||
3. Report progress after each generation
|
||||
|
||||
**Watermark Application** (if enabled in preferences):
|
||||
Add to each image generation prompt:
|
||||
```
|
||||
Include a subtle watermark "[content]" positioned at [position]
|
||||
with approximately [opacity*100]% visibility. The watermark should
|
||||
be legible but not distracting from the comic panels and storytelling.
|
||||
Ensure watermark does not overlap speech bubbles or key action.
|
||||
```
|
||||
Reference: `references/config/watermark-guide.md`
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
- Check available image generation skills
|
||||
- If multiple skills available, ask user preference
|
||||
|
||||
**Character Reference Handling** (IMPORTANT for visual consistency):
|
||||
|
||||
1. Read the selected image generation skill's SKILL.md
|
||||
2. Check if it supports reference image input (look for parameters like `--ref`, `--reference`, `--image-ref`, etc.)
|
||||
|
||||
| Skill Support | Action |
|
||||
|---------------|--------|
|
||||
| **Supports reference image** | Pass `characters/characters.png` using the skill's reference parameter |
|
||||
| **Does NOT support reference image** | Prepend `characters/characters.md` content to each page prompt |
|
||||
|
||||
Always verify the exact parameter name from the skill's documentation before calling.
|
||||
|
||||
**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 6: 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 7: Completion Report
|
||||
|
||||
```
|
||||
Comic Complete!
|
||||
Title: [title] | Art: [art] | Tone: [tone] | Pages: [count] | Aspect: [ratio] | Language: [lang]
|
||||
Watermark: [enabled/disabled]
|
||||
Location: [path]
|
||||
✓ analysis.md
|
||||
✓ characters.png
|
||||
✓ 00-cover-[slug].png ... NN-page-[slug].png
|
||||
✓ {topic-slug}.pdf
|
||||
```
|
||||
|
||||
## Page Modification
|
||||
|
||||
| Action | Steps |
|
||||
|--------|-------|
|
||||
| **Edit** | Update prompt → Regenerate image → Regenerate PDF |
|
||||
| **Add** | Create prompt at position → Generate image → Renumber subsequent (NN+1) → Update storyboard → Regenerate PDF |
|
||||
| **Delete** | Remove files → Renumber subsequent (NN-1) → Update storyboard → Regenerate PDF |
|
||||
|
||||
**File naming**: `NN-{cover|page}-[slug].png` (e.g., `03-page-enigma-machine.png`)
|
||||
- Slugs: kebab-case, unique, derived from content
|
||||
- Renumbering: Update NN prefix only, slugs unchanged
|
||||
|
||||
## Preset: Ohmsha
|
||||
|
||||
Default: Use Doraemon characters (大雄=learner, 哆啦A梦=mentor, 胖虎=challenge, 静香=support). Custom characters via `--characters "Student:小明,Mentor:教授"` or character presets in EXTEND.md.
|
||||
|
||||
Requirements: Visual metaphors, NO talking heads, narrative page titles.
|
||||
|
||||
See `references/presets/ohmsha.md` and `references/ohmsha-guide.md` for details.
|
||||
Schema: [references/config/preferences-schema.md](references/config/preferences-schema.md)
|
||||
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
|
||||
**Core Templates**:
|
||||
- `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
|
||||
- [analysis-framework.md](references/analysis-framework.md) - Deep content analysis
|
||||
- [character-template.md](references/character-template.md) - Character definition format
|
||||
- [storyboard-template.md](references/storyboard-template.md) - Storyboard structure
|
||||
- [ohmsha-guide.md](references/ohmsha-guide.md) - Ohmsha manga specifics
|
||||
|
||||
**Style Definitions** (new 3-dimension system):
|
||||
- `art-styles/` - Art style definitions (ligne-claire, manga, realistic, ink-brush, chalk)
|
||||
- `tones/` - Tone definitions (neutral, warm, dramatic, romantic, energetic, vintage, action)
|
||||
- `presets/` - Preset shortcuts with special rules (ohmsha, wuxia, shoujo)
|
||||
- `layouts/` - Layout definitions (standard, cinematic, dense, splash, mixed, webtoon)
|
||||
**Style Definitions**:
|
||||
- `references/art-styles/` - Art styles (ligne-claire, manga, realistic, ink-brush, chalk)
|
||||
- `references/tones/` - Tones (neutral, warm, dramatic, romantic, energetic, vintage, action)
|
||||
- `references/presets/` - Presets with special rules (ohmsha, wuxia, shoujo)
|
||||
- `references/layouts/` - Layouts (standard, cinematic, dense, splash, mixed, webtoon)
|
||||
|
||||
**Workflow**:
|
||||
- [workflow.md](references/workflow.md) - Full workflow details
|
||||
- [auto-selection.md](references/auto-selection.md) - Content signal analysis
|
||||
- [partial-workflows.md](references/partial-workflows.md) - Partial workflow options
|
||||
|
||||
**Config**:
|
||||
- `config/preferences-schema.md` - EXTEND.md schema
|
||||
- `config/first-time-setup.md` - First-time setup flow
|
||||
- `config/watermark-guide.md` - Watermark configuration
|
||||
- [config/preferences-schema.md](references/config/preferences-schema.md) - EXTEND.md schema
|
||||
- [config/first-time-setup.md](references/config/first-time-setup.md) - First-time setup
|
||||
- [config/watermark-guide.md](references/config/watermark-guide.md) - Watermark configuration
|
||||
|
||||
## Notes
|
||||
|
||||
- Auto-retry once on failure | Cartoon alternatives for sensitive figures
|
||||
- Use confirmed language preference | Maintain style consistency
|
||||
- **Step 2 confirmation required** - do not skip (style selection + outline review option)
|
||||
- **Step 4 conditional** - only if user requested outline review in Step 2
|
||||
- Watermark/language configured once in EXTEND.md, not asked in confirmations
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|
||||
- Image generation: 10-30 seconds per page
|
||||
- Auto-retry once on generation failure
|
||||
- Use stylized alternatives for sensitive public figures
|
||||
- Maintain style consistency via session ID
|
||||
- **Step 2 confirmation required** - do not skip
|
||||
- **Steps 4/6 conditional** - only if user requested in Step 2
|
||||
- **Step 7.1 character sheet MUST be generated before pages** - ensures consistency
|
||||
- **Step 7.2 EVERY page MUST reference characters** - use `--ref` or embed descriptions
|
||||
- Watermark/language configured once in EXTEND.md
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
# Auto Selection
|
||||
|
||||
Content signals determine default art + tone + layout (or preset).
|
||||
|
||||
## Content Signal Matrix
|
||||
|
||||
| Content Signals | Art Style | Tone | Layout | Preset |
|
||||
|-----------------|-----------|------|--------|--------|
|
||||
| Tutorial, how-to, beginner | manga | neutral | webtoon | **ohmsha** |
|
||||
| Computing, AI, programming | manga | neutral | dense | **ohmsha** |
|
||||
| Technical explanation, educational | manga | neutral | webtoon | **ohmsha** |
|
||||
| Pre-1950, classical, ancient | realistic | vintage | cinematic | - |
|
||||
| Personal story, mentor | ligne-claire | warm | standard | - |
|
||||
| Conflict, breakthrough | (inherit) | dramatic | splash | - |
|
||||
| Wine, food, business, lifestyle | realistic | neutral | cinematic | - |
|
||||
| Martial arts, wuxia, xianxia | ink-brush | action | splash | **wuxia** |
|
||||
| Romance, love, school life | manga | romantic | standard | **shoujo** |
|
||||
| Biography, balanced | ligne-claire | neutral | mixed | - |
|
||||
|
||||
## Preset Recommendation Rules
|
||||
|
||||
**When preset is recommended**: Load `presets/{preset}.md` and apply all special rules.
|
||||
|
||||
### ohmsha
|
||||
- **Triggers**: Tutorial, technical, educational, computing, programming, how-to, beginner
|
||||
- **Special rules**: Visual metaphors, NO talking heads, gadget reveals, Doraemon-style characters
|
||||
- **Base**: manga + neutral + webtoon/dense
|
||||
|
||||
### wuxia
|
||||
- **Triggers**: Martial arts, wuxia, xianxia, cultivation, swordplay
|
||||
- **Special rules**: Qi effects, combat visuals, atmospheric elements
|
||||
- **Base**: ink-brush + action + splash
|
||||
|
||||
### shoujo
|
||||
- **Triggers**: Romance, love story, school life, emotional drama
|
||||
- **Special rules**: Decorative elements, eye details, romantic beats
|
||||
- **Base**: manga + romantic + standard
|
||||
|
||||
## Compatibility Matrix
|
||||
|
||||
Art Style × Tone combinations work best when matched appropriately:
|
||||
|
||||
| Art Style | ✓✓ Best | ✓ Works | ✗ Avoid |
|
||||
|-----------|---------|---------|---------|
|
||||
| ligne-claire | neutral, warm | dramatic, vintage, energetic | romantic, action |
|
||||
| manga | neutral, romantic, energetic, action | warm, dramatic | vintage |
|
||||
| realistic | neutral, warm, dramatic, vintage | action | romantic, energetic |
|
||||
| ink-brush | neutral, dramatic, action, vintage | warm | romantic, energetic |
|
||||
| chalk | neutral, warm, energetic | vintage | dramatic, action, romantic |
|
||||
|
||||
**Note**: Art Style × Tone × Layout can be freely combined. Incompatible combinations work but may produce unexpected results.
|
||||
|
||||
## Priority Order
|
||||
|
||||
1. User-specified options (`--art`, `--tone`, `--style`)
|
||||
2. EXTEND.md defaults
|
||||
3. Content signal analysis → auto-selection
|
||||
4. Fallback: ligne-claire + neutral + standard
|
||||
@@ -0,0 +1,123 @@
|
||||
# Partial Workflows
|
||||
|
||||
Options to run specific parts of the workflow.
|
||||
|
||||
## Options Summary
|
||||
|
||||
| Option | Steps Executed | Output |
|
||||
|--------|----------------|--------|
|
||||
| `--storyboard-only` | 1-3 | `storyboard.md` + `characters/` |
|
||||
| `--prompts-only` | 1-5 | + `prompts/*.md` |
|
||||
| `--images-only` | 7-9 | + images + PDF |
|
||||
| `--regenerate N` | 7 (partial) | Specific page(s) + PDF |
|
||||
|
||||
---
|
||||
|
||||
## Using `--storyboard-only`
|
||||
|
||||
Generate storyboard and characters without prompts or images:
|
||||
|
||||
```bash
|
||||
/baoyu-comic content.md --storyboard-only
|
||||
```
|
||||
|
||||
**Workflow**: Steps 1-3 only (stop after storyboard + characters)
|
||||
|
||||
**Output**:
|
||||
- `analysis.md`
|
||||
- `storyboard.md`
|
||||
- `characters/characters.md`
|
||||
|
||||
**Use case**: Review and edit the storyboard before generating images. Useful for:
|
||||
- Getting feedback on the narrative structure
|
||||
- Making manual adjustments to panel layouts
|
||||
- Defining custom characters
|
||||
|
||||
---
|
||||
|
||||
## Using `--prompts-only`
|
||||
|
||||
Generate storyboard, characters, and prompts without images:
|
||||
|
||||
```bash
|
||||
/baoyu-comic content.md --prompts-only
|
||||
```
|
||||
|
||||
**Workflow**: Steps 1-5 (generate prompts, skip images)
|
||||
|
||||
**Output**:
|
||||
- `analysis.md`
|
||||
- `storyboard.md`
|
||||
- `characters/characters.md`
|
||||
- `prompts/*.md`
|
||||
|
||||
**Use case**: Review and edit prompts before image generation. Useful for:
|
||||
- Fine-tuning image generation prompts
|
||||
- Ensuring visual consistency before committing to generation
|
||||
- Making style adjustments at the prompt level
|
||||
|
||||
---
|
||||
|
||||
## Using `--images-only`
|
||||
|
||||
Generate images from existing prompts (starts at Step 7):
|
||||
|
||||
```bash
|
||||
/baoyu-comic comic/topic-slug/ --images-only
|
||||
```
|
||||
|
||||
**Workflow**: Skip to Step 7, then 8-9
|
||||
|
||||
**Prerequisites** (must exist in directory):
|
||||
- `prompts/` directory with page prompt files
|
||||
- `storyboard.md` with style information
|
||||
- `characters/characters.md` with character definitions
|
||||
|
||||
**Output**:
|
||||
- `characters/characters.png` (if not exists)
|
||||
- `NN-{cover|page}-[slug].png` images
|
||||
- `{topic-slug}.pdf`
|
||||
|
||||
**Use case**: Re-generate images after editing prompts. Useful for:
|
||||
- Recovering from failed image generation
|
||||
- Trying different image generation settings
|
||||
- Regenerating after manual prompt edits
|
||||
|
||||
---
|
||||
|
||||
## Using `--regenerate`
|
||||
|
||||
Regenerate specific pages only:
|
||||
|
||||
```bash
|
||||
# Single page
|
||||
/baoyu-comic comic/topic-slug/ --regenerate 3
|
||||
|
||||
# Multiple pages
|
||||
/baoyu-comic comic/topic-slug/ --regenerate 2,5,8
|
||||
|
||||
# Cover page
|
||||
/baoyu-comic comic/topic-slug/ --regenerate 0
|
||||
```
|
||||
|
||||
**Workflow**:
|
||||
1. Read existing prompts for specified pages
|
||||
2. Regenerate images only for those pages
|
||||
3. Regenerate PDF
|
||||
|
||||
**Prerequisites** (must exist):
|
||||
- `prompts/NN-{cover|page}-[slug].md` for specified pages
|
||||
- `characters/characters.png` (for reference)
|
||||
|
||||
**Output**:
|
||||
- Regenerated `NN-{cover|page}-[slug].png` for specified pages
|
||||
- Updated `{topic-slug}.pdf`
|
||||
|
||||
**Use case**: Fix specific pages without regenerating entire comic. Useful for:
|
||||
- Fixing a single problematic page
|
||||
- Iterating on specific visuals
|
||||
- Regenerating pages after prompt edits
|
||||
|
||||
**Page numbering**:
|
||||
- `0` = Cover page
|
||||
- `1-N` = Content pages
|
||||
@@ -41,16 +41,18 @@ Every technical concept MUST be visualized as a metaphor:
|
||||
|
||||
### Character Roles (Required)
|
||||
|
||||
Define characters before generating:
|
||||
**DEFAULT: Use Doraemon characters** unless user explicitly specifies `--characters` or has character presets in EXTEND.md.
|
||||
|
||||
| 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 |
|
||||
| Challenge (Role C, optional) | 胖虎 | Represents misunderstanding, or "noise" in the data |
|
||||
| Support (Role D, optional) | 静香 | Asks clarifying questions, provides alternative perspectives |
|
||||
| Role | Default Character | Visual | Traits |
|
||||
|------|-------------------|--------|--------|
|
||||
| Student (Role A) | 大雄 (Nobita) | Boy, 10yo, round glasses, black hair, yellow shirt, navy shorts | Confused, asks basic but crucial questions, represents reader |
|
||||
| Mentor (Role B) | 哆啦A梦 (Doraemon) | Blue robot cat, white belly, 4D pocket, red nose, golden bell | Knowledgeable, patient, uses gadgets as technical metaphors |
|
||||
| Challenge (Role C) | 胖虎 (Gian) | Stocky boy, small eyes, orange shirt | Represents misunderstanding, or "noise" in the data |
|
||||
| Support (Role D) | 静香 (Shizuka) | Cute girl, black short hair, pink dress | Asks clarifying questions, provides alternative perspectives |
|
||||
|
||||
Custom characters via `--characters "Student:小明,Mentor:教授"` or EXTEND.md presets.
|
||||
**IMPORTANT**: These Doraemon characters ARE the default for ohmsha preset. Generate character definitions using these exact characters unless user requests otherwise.
|
||||
|
||||
To use custom characters: `--characters "Student:小明,Mentor:教授"` or define in EXTEND.md.
|
||||
|
||||
### Page Title Convention
|
||||
|
||||
|
||||
@@ -0,0 +1,505 @@
|
||||
# Complete Workflow
|
||||
|
||||
Full workflow for generating knowledge comics.
|
||||
|
||||
## Progress Checklist
|
||||
|
||||
Copy and track progress:
|
||||
|
||||
```
|
||||
Comic Progress:
|
||||
- [ ] Step 1: Setup & Analyze
|
||||
- [ ] 1.1 Load preferences
|
||||
- [ ] 1.2 Analyze content
|
||||
- [ ] 1.3 Check existing ⚠️ REQUIRED
|
||||
- [ ] Step 2: Confirmation 1 - Style & options ⚠️ REQUIRED
|
||||
- [ ] Step 3: Generate storyboard + characters
|
||||
- [ ] Step 4: Review outline (conditional)
|
||||
- [ ] Step 5: Generate prompts
|
||||
- [ ] Step 6: Review prompts (conditional)
|
||||
- [ ] Step 7: Generate images
|
||||
- [ ] Step 8: Merge to PDF
|
||||
- [ ] Step 9: Completion report
|
||||
```
|
||||
|
||||
## Flow Diagram
|
||||
|
||||
```
|
||||
Input → Preferences → Analyze → [Check Existing?] → [Confirm 1: Style + Reviews] → Storyboard → [Review Outline?] → Prompts → [Review Prompts?] → Images → PDF → Complete
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Setup & Analyze
|
||||
|
||||
### 1.1 Load Preferences (EXTEND.md)
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-comic/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-comic/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
| Path | Location |
|
||||
|------|----------|
|
||||
| `.baoyu-skills/baoyu-comic/EXTEND.md` | Project directory |
|
||||
| `$HOME/.baoyu-skills/baoyu-comic/EXTEND.md` | User home |
|
||||
|
||||
**When EXTEND.md Found** → Read, parse, **output summary to user**:
|
||||
|
||||
```
|
||||
📋 Loaded preferences from [full path]
|
||||
├─ Watermark: [enabled/disabled] [content if enabled]
|
||||
├─ Art Style: [style name or "auto-select"]
|
||||
├─ Tone: [tone name or "auto-select"]
|
||||
├─ Layout: [layout or "auto-select"]
|
||||
├─ Language: [language or "auto-detect"]
|
||||
└─ Character presets: [count] defined
|
||||
```
|
||||
|
||||
**MUST output this summary** so user knows their current configuration. Do not skip or silently load.
|
||||
|
||||
**When EXTEND.md Not Found** → First-time setup:
|
||||
|
||||
1. Inform user: "No preferences found. Let's set up your defaults."
|
||||
2. Use AskUserQuestion to collect preferences (see `config/first-time-setup.md`)
|
||||
3. Create EXTEND.md at user-chosen location
|
||||
4. Confirm: "✓ Preferences saved to [path]"
|
||||
|
||||
**EXTEND.md Supports**: Watermark | Preferred art/tone/layout | Custom style definitions | Character presets | Language preference
|
||||
|
||||
Schema: `config/preferences-schema.md`
|
||||
|
||||
**Important**: Once EXTEND.md exists, watermark, language, and style defaults are NOT asked again in Confirmation 1 or 2. These are session-persistent settings.
|
||||
|
||||
### 1.2 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 `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 language**:
|
||||
- If EXTEND.md has `language` → use it
|
||||
- Else if `--lang` option provided → use it
|
||||
- Else → use detected source language
|
||||
6. Determine recommended page count:
|
||||
- Short story: 5-8 pages
|
||||
- Medium complexity: 9-15 pages
|
||||
- Full biography: 16-25 pages
|
||||
7. Analyze content signals for art/tone/layout recommendations
|
||||
8. **Save to `analysis.md`**
|
||||
|
||||
**analysis.md Format**: YAML front matter (title, topic, time_span, source_language, user_language, aspect_ratio, recommended_page_count, recommended_art, recommended_tone) + sections for Target Audience, Value Proposition, Core Themes, Key Figures & Story Arcs, Content Signals, Recommended Approaches. See `analysis-framework.md` for full template.
|
||||
|
||||
### 1.3 Check Existing Content ⚠️ REQUIRED
|
||||
|
||||
**MUST execute before proceeding to Step 2.**
|
||||
|
||||
Use Bash to check if output directory exists:
|
||||
|
||||
```bash
|
||||
test -d "comic/{topic-slug}" && echo "exists"
|
||||
```
|
||||
|
||||
**If directory exists**, use AskUserQuestion:
|
||||
|
||||
```
|
||||
header: "Existing"
|
||||
question: "Existing content found. How to proceed?"
|
||||
options:
|
||||
- label: "Regenerate storyboard"
|
||||
description: "Keep images, regenerate storyboard and characters only"
|
||||
- label: "Regenerate images"
|
||||
description: "Keep storyboard, regenerate images only"
|
||||
- label: "Backup and regenerate"
|
||||
description: "Backup to {slug}-backup-{timestamp}, then regenerate all"
|
||||
- label: "Exit"
|
||||
description: "Cancel, keep existing content unchanged"
|
||||
```
|
||||
|
||||
Save result and handle accordingly:
|
||||
- **Regenerate storyboard**: Skip to Step 3, preserve `prompts/` and images
|
||||
- **Regenerate images**: Skip to Step 7, use existing prompts
|
||||
- **Backup and regenerate**: Move directory, start fresh from Step 2
|
||||
- **Exit**: End workflow immediately
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Confirmation 1 - Style & Options ⚠️
|
||||
|
||||
**Purpose**: Select visual style + decide whether to review outline before generation. **Do NOT skip.**
|
||||
|
||||
**Note**: Watermark and language already configured in EXTEND.md (Step 1).
|
||||
|
||||
**Display summary**:
|
||||
- Content type + topic identified
|
||||
- Key figures extracted
|
||||
- Time span detected
|
||||
- Recommended page count
|
||||
- Language: [from EXTEND.md or detected]
|
||||
- **Recommended style**: [art] + [tone] (based on content signals)
|
||||
|
||||
**Use AskUserQuestion** for:
|
||||
|
||||
### Question 1: Visual Style
|
||||
|
||||
If a preset is recommended (see `auto-selection.md`), show it first:
|
||||
|
||||
```
|
||||
header: "Style"
|
||||
question: "Which visual style for this comic?"
|
||||
options:
|
||||
- label: "[preset name] preset (Recommended)" # If preset recommended
|
||||
description: "[preset description] - includes special rules"
|
||||
- label: "[recommended art] + [recommended tone] (Recommended)" # If no preset
|
||||
description: "Best match for your content based on analysis"
|
||||
- label: "ligne-claire + neutral"
|
||||
description: "Classic educational, Logicomix style"
|
||||
- label: "ohmsha preset"
|
||||
description: "Educational manga with visual metaphors, gadgets, NO talking heads"
|
||||
- label: "Custom"
|
||||
description: "Specify your own art + tone or preset"
|
||||
```
|
||||
|
||||
**Preset vs Art+Tone**: Presets include special rules beyond art+tone. `ohmsha` = manga + neutral + visual metaphor rules + character roles + NO talking heads. Plain `manga + neutral` does NOT include these rules.
|
||||
|
||||
### Question 2: Narrative Focus (multiSelect: true)
|
||||
|
||||
```
|
||||
header: "Focus"
|
||||
question: "What should the comic emphasize? (Select all that apply)"
|
||||
options:
|
||||
- label: "Biography/life story"
|
||||
description: "Follow a person's journey through key life events"
|
||||
- label: "Concept explanation"
|
||||
description: "Break down complex ideas visually"
|
||||
- label: "Historical event"
|
||||
description: "Dramatize important historical moments"
|
||||
- label: "Tutorial/how-to"
|
||||
description: "Step-by-step educational guide"
|
||||
```
|
||||
|
||||
### Question 3: Target Audience
|
||||
|
||||
```
|
||||
header: "Audience"
|
||||
question: "Who is the primary reader?"
|
||||
options:
|
||||
- label: "General readers"
|
||||
description: "Broad appeal, accessible content"
|
||||
- label: "Students/learners"
|
||||
description: "Educational focus, clear explanations"
|
||||
- label: "Industry professionals"
|
||||
description: "Technical depth, domain knowledge"
|
||||
- label: "Children/young readers"
|
||||
description: "Simplified language, engaging visuals"
|
||||
```
|
||||
|
||||
### Question 4: Outline Review
|
||||
|
||||
```
|
||||
header: "Review"
|
||||
question: "Do you want to review the outline before image generation?"
|
||||
options:
|
||||
- label: "Yes, let me review (Recommended)"
|
||||
description: "Review storyboard and characters before generating images"
|
||||
- label: "No, generate directly"
|
||||
description: "Skip outline review, start generating immediately"
|
||||
```
|
||||
|
||||
### Question 5: Prompt Review
|
||||
|
||||
```
|
||||
header: "Prompts"
|
||||
question: "Review prompts before generating images?"
|
||||
options:
|
||||
- label: "Yes, review prompts (Recommended)"
|
||||
description: "Review image generation prompts before generating"
|
||||
- label: "No, skip prompt review"
|
||||
description: "Proceed directly to image generation"
|
||||
```
|
||||
|
||||
**After response**:
|
||||
1. Update `analysis.md` with user preferences
|
||||
2. **Store `skip_outline_review`** flag based on Question 4 response
|
||||
3. **Store `skip_prompt_review`** flag based on Question 5 response
|
||||
4. → Step 3
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Generate Storyboard + Characters
|
||||
|
||||
Create storyboard and character definitions using the confirmed style from Step 2.
|
||||
|
||||
**Loading Style References**:
|
||||
- Art style: `art-styles/{art}.md`
|
||||
- Tone: `tones/{tone}.md`
|
||||
- If preset (ohmsha/wuxia/shoujo): also load `presets/{preset}.md`
|
||||
|
||||
**Generate**:
|
||||
|
||||
1. **Storyboard** (`storyboard.md`):
|
||||
- YAML front matter with art_style, tone, layout, aspect_ratio
|
||||
- Cover design
|
||||
- Each page: layout, panel breakdown, visual prompts
|
||||
- **Written in user's preferred language** (from Step 1)
|
||||
- Reference: `storyboard-template.md`
|
||||
- **If using preset**: Load and apply preset rules from `presets/`
|
||||
|
||||
2. **Character definitions** (`characters/characters.md`):
|
||||
- Visual specs matching the art style (in user's preferred language)
|
||||
- Include Reference Sheet Prompt for later image generation
|
||||
- Reference: `character-template.md`
|
||||
- **If using ohmsha preset**: Use default Doraemon characters (see below)
|
||||
|
||||
**Ohmsha Default Characters** (use these unless user specifies `--characters`):
|
||||
|
||||
| Role | Character | Visual Description |
|
||||
|------|-----------|-------------------|
|
||||
| Student | 大雄 (Nobita) | Japanese boy, 10yo, round glasses, black hair parted in middle, yellow shirt, navy shorts |
|
||||
| Mentor | 哆啦A梦 (Doraemon) | Round blue robot cat, big white eyes, red nose, whiskers, white belly with 4D pocket, golden bell, no ears |
|
||||
| Challenge | 胖虎 (Gian) | Stocky boy, rough features, small eyes, orange shirt |
|
||||
| Support | 静香 (Shizuka) | Cute girl, black short hair, pink dress, gentle expression |
|
||||
|
||||
These are the canonical ohmsha-style characters. Do NOT create custom characters for ohmsha unless explicitly requested.
|
||||
|
||||
**After generation**:
|
||||
- If `skip_outline_review` is true → Skip Step 4, go directly to Step 5
|
||||
- If `skip_outline_review` is false → Continue to Step 4
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Review Outline (Conditional)
|
||||
|
||||
**Skip this step** if user selected "No, generate directly" in Step 2.
|
||||
|
||||
**Purpose**: User reviews and confirms storyboard + characters before generation.
|
||||
|
||||
**Display**:
|
||||
- Page count and structure
|
||||
- Art style + Tone combination
|
||||
- Page-by-page summary (Cover → P1 → P2...)
|
||||
- Character list with brief descriptions
|
||||
|
||||
**Use AskUserQuestion**:
|
||||
|
||||
```
|
||||
header: "Confirm"
|
||||
question: "Ready to generate images with this outline?"
|
||||
options:
|
||||
- label: "Yes, proceed (Recommended)"
|
||||
description: "Generate character sheet and comic pages"
|
||||
- label: "Edit storyboard first"
|
||||
description: "I'll modify storyboard.md before continuing"
|
||||
- label: "Edit characters first"
|
||||
description: "I'll modify characters/characters.md before continuing"
|
||||
- label: "Edit both"
|
||||
description: "I'll modify both files before continuing"
|
||||
```
|
||||
|
||||
**After response**:
|
||||
1. If user wants to edit → Wait for user to finish editing, then ask again
|
||||
2. If user confirms → Continue to Step 5
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Generate Prompts
|
||||
|
||||
Create image generation prompts for all pages.
|
||||
|
||||
**Style Reference Loading**:
|
||||
- Read `art-styles/{art}.md` for rendering guidelines
|
||||
- Read `tones/{tone}.md` for mood/color adjustments
|
||||
- If preset: Read `presets/{preset}.md` for special rules
|
||||
|
||||
**For each page (cover + pages)**:
|
||||
1. Create prompt following art style + tone guidelines
|
||||
2. Include character visual descriptions for consistency
|
||||
3. Save to `prompts/NN-{cover|page}-[slug].md`
|
||||
|
||||
**Prompt File Format**:
|
||||
```markdown
|
||||
# Page NN: [Title]
|
||||
|
||||
## Visual Style
|
||||
Art: [art style] | Tone: [tone] | Layout: [layout type]
|
||||
|
||||
## Character Reference
|
||||
[Character descriptions from characters/characters.md]
|
||||
|
||||
## Panel Breakdown
|
||||
[From storyboard.md - panel descriptions, actions, dialogue]
|
||||
|
||||
## Generation Prompt
|
||||
[Combined prompt for image generation skill]
|
||||
```
|
||||
|
||||
**Watermark Application** (if enabled in preferences):
|
||||
Add to each prompt:
|
||||
```
|
||||
Include a subtle watermark "[content]" positioned at [position]
|
||||
with approximately [opacity*100]% visibility. The watermark should
|
||||
be legible but not distracting from the comic panels and storytelling.
|
||||
Ensure watermark does not overlap speech bubbles or key action.
|
||||
```
|
||||
Reference: `config/watermark-guide.md`
|
||||
|
||||
**After generation**:
|
||||
- If `skip_prompt_review` is true → Skip Step 6, go directly to Step 7
|
||||
- If `skip_prompt_review` is false → Continue to Step 6
|
||||
|
||||
---
|
||||
|
||||
## Step 6: Review Prompts (Conditional)
|
||||
|
||||
**Skip this step** if user selected "No, skip prompt review" in Step 2.
|
||||
|
||||
**Purpose**: User reviews and confirms prompts before image generation.
|
||||
|
||||
**Display prompt summary table**:
|
||||
|
||||
| Page | Title | Key Elements |
|
||||
|------|-------|--------------|
|
||||
| Cover | [title] | [main visual] |
|
||||
| P1 | [title] | [key elements] |
|
||||
| ... | ... | ... |
|
||||
|
||||
**Use AskUserQuestion**:
|
||||
|
||||
```
|
||||
header: "Confirm"
|
||||
question: "Ready to generate images with these prompts?"
|
||||
options:
|
||||
- label: "Yes, proceed (Recommended)"
|
||||
description: "Generate all comic page images"
|
||||
- label: "Edit prompts first"
|
||||
description: "I'll modify prompts/*.md before continuing"
|
||||
- label: "Regenerate prompts"
|
||||
description: "Regenerate all prompts with different approach"
|
||||
```
|
||||
|
||||
**After response**:
|
||||
1. If user wants to edit → Wait for user to finish editing, then ask again
|
||||
2. If user wants to regenerate → Go back to Step 5
|
||||
3. If user confirms → Continue to Step 7
|
||||
|
||||
---
|
||||
|
||||
## Step 7: Generate Images
|
||||
|
||||
With confirmed prompts from Step 5/6:
|
||||
|
||||
### 7.1 Generate Character Reference Sheet (first)
|
||||
|
||||
1. Use Reference Sheet Prompt from `characters/characters.md`
|
||||
2. Generate → `characters/characters.png`
|
||||
3. This ensures visual consistency for all subsequent pages
|
||||
|
||||
### 7.2 Generate Comic Pages
|
||||
|
||||
**CRITICAL: Character Reference is MANDATORY** for visual consistency across all pages.
|
||||
|
||||
**Before generating any page**:
|
||||
1. Read the image generation skill's SKILL.md
|
||||
2. Check if it supports reference image input (`--ref`, `--reference`, etc.)
|
||||
3. Choose the appropriate strategy below
|
||||
|
||||
**Character Reference Strategy**:
|
||||
|
||||
| Skill Capability | Strategy | Action |
|
||||
|------------------|----------|--------|
|
||||
| Supports `--ref` | **Strategy A** | Pass `characters/characters.png` with EVERY page |
|
||||
| Does NOT support `--ref` | **Strategy B** | Prepend character descriptions to EVERY prompt |
|
||||
|
||||
**Strategy A: Using `--ref` parameter** (e.g., baoyu-image-gen)
|
||||
|
||||
```bash
|
||||
# Each page generation MUST include --ref
|
||||
npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
|
||||
--promptfiles prompts/01-page-xxx.md \
|
||||
--image 01-page-xxx.png \
|
||||
--ar 3:4 \
|
||||
--ref characters/characters.png
|
||||
```
|
||||
|
||||
**Strategy B: Embedding character descriptions in prompt**
|
||||
|
||||
When skill does NOT support reference images, create combined prompt files:
|
||||
|
||||
```markdown
|
||||
# prompts/01-page-xxx.md (with embedded character reference)
|
||||
|
||||
## Character Reference (maintain consistency)
|
||||
[Copy relevant sections from characters/characters.md here]
|
||||
- 大雄: Japanese boy, round glasses, yellow shirt, navy shorts...
|
||||
- 哆啦A梦: Round blue robot cat, white belly, red nose, golden bell...
|
||||
|
||||
## Page Content
|
||||
[Original page prompt here]
|
||||
```
|
||||
|
||||
**For each page (cover + pages)**:
|
||||
1. Read prompt from `prompts/NN-{cover|page}-[slug].md`
|
||||
2. Generate image using Strategy A or B (based on skill capability)
|
||||
3. Save to `NN-{cover|page}-[slug].png`
|
||||
4. Report progress after each generation: "Generated X/N: [page title]"
|
||||
|
||||
**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 8: 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 9: Completion Report
|
||||
|
||||
```
|
||||
Comic Complete!
|
||||
Title: [title] | Art: [art] | Tone: [tone] | Pages: [count] | Aspect: [ratio] | Language: [lang]
|
||||
Watermark: [enabled/disabled]
|
||||
Location: [path]
|
||||
✓ analysis.md
|
||||
✓ characters.png
|
||||
✓ 00-cover-[slug].png ... NN-page-[slug].png
|
||||
✓ {topic-slug}.pdf
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Page Modification
|
||||
|
||||
| Action | Steps |
|
||||
|--------|-------|
|
||||
| **Edit** | Update prompt → Regenerate image → Regenerate PDF |
|
||||
| **Add** | Create prompt at position → Generate image → Renumber subsequent (NN+1) → Update storyboard → Regenerate PDF |
|
||||
| **Delete** | Remove files → Renumber subsequent (NN-1) → Update storyboard → Regenerate PDF |
|
||||
|
||||
**File naming**: `NN-{cover|page}-[slug].png` (e.g., `03-page-enigma-machine.png`)
|
||||
- Slugs: kebab-case, unique, derived from content
|
||||
- Renumbering: Update NN prefix only, slugs unchanged
|
||||
@@ -1,188 +1,89 @@
|
||||
---
|
||||
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.
|
||||
description: Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.
|
||||
---
|
||||
|
||||
# Image Compressor
|
||||
|
||||
Cross-platform image compression with WebP default output, PNG-to-PNG support, preferring system tools with Sharp fallback.
|
||||
Compresses images using best available tool (sips → cwebp → ImageMagick → Sharp).
|
||||
|
||||
## Script Directory
|
||||
|
||||
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
|
||||
Scripts in `scripts/` subdirectory. Replace `${SKILL_DIR}` with this SKILL.md's directory path.
|
||||
|
||||
**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 |
|
||||
| `scripts/main.ts` | Image compression CLI |
|
||||
|
||||
## Quick Start
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# Compress to WebP (default)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-compress-image/EXTEND.md && echo "project"
|
||||
|
||||
# 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
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
## Commands
|
||||
┌────────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-compress-image/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
### Single File Compression
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default format | Default quality | Keep original preference
|
||||
|
||||
## Usage
|
||||
|
||||
```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
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts <input> [options]
|
||||
```
|
||||
|
||||
## 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 |
|
||||
| `<input>` | | File or directory | Required |
|
||||
| `--output` | `-o` | Output path | Same path, new ext |
|
||||
| `--format` | `-f` | webp, png, jpeg | webp |
|
||||
| `--quality` | `-q` | Quality 0-100 | 80 |
|
||||
| `--keep` | `-k` | Keep original | false |
|
||||
| `--recursive` | `-r` | Process subdirs | false |
|
||||
| `--json` | | JSON output | false |
|
||||
| `--help` | `-h` | Show help | |
|
||||
|
||||
## Compressor Selection
|
||||
## Examples
|
||||
|
||||
Priority order (auto-detected):
|
||||
```bash
|
||||
# Single file → WebP (replaces original)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
|
||||
|
||||
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)
|
||||
# Keep PNG format
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png --keep
|
||||
|
||||
The skill automatically selects the best available compressor.
|
||||
# Directory recursive
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75
|
||||
|
||||
## Output Format
|
||||
|
||||
### Text Mode (default)
|
||||
# JSON output
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
|
||||
```
|
||||
|
||||
**Output**:
|
||||
```
|
||||
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.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
---
|
||||
name: baoyu-danger-gemini-web
|
||||
description: Image generation skill using Gemini Web. Generates images from text prompts via Google Gemini. Also supports text generation. Use as the image generation backend for other skills like cover-image, xhs-images, article-illustrator.
|
||||
description: Generates images and text via reverse-engineered Gemini Web API. Supports text generation, image generation from prompts, reference images for vision input, and multi-turn conversations. Use when other skills need image generation backend, or when user requests "generate image with Gemini", "Gemini text generation", or needs vision-capable AI generation.
|
||||
---
|
||||
|
||||
# Gemini Web Client
|
||||
|
||||
Supports:
|
||||
- Text generation
|
||||
- Image generation (download + save)
|
||||
- Reference images for vision input (attach local images)
|
||||
- Multi-turn conversations via persisted `--sessionId`
|
||||
Text/image generation via Gemini Web API. Supports reference images and multi-turn conversations.
|
||||
|
||||
## Script Directory
|
||||
|
||||
@@ -26,146 +22,73 @@ Supports:
|
||||
| `scripts/main.ts` | CLI entry point for text/image generation |
|
||||
| `scripts/gemini-webapi/*` | TypeScript port of `gemini_webapi` (GeminiClient, types, utils) |
|
||||
|
||||
## ⚠️ Disclaimer (REQUIRED)
|
||||
## Consent Check (REQUIRED)
|
||||
|
||||
**Before using this skill**, the consent check MUST be performed.
|
||||
Before first use, verify user consent for reverse-engineered API usage.
|
||||
|
||||
### Consent Check Flow
|
||||
**Consent file locations**:
|
||||
- macOS: `~/Library/Application Support/baoyu-skills/gemini-web/consent.json`
|
||||
- Linux: `~/.local/share/baoyu-skills/gemini-web/consent.json`
|
||||
- Windows: `%APPDATA%\baoyu-skills\gemini-web\consent.json`
|
||||
|
||||
**Step 1**: Check consent file
|
||||
|
||||
```bash
|
||||
# macOS
|
||||
cat ~/Library/Application\ Support/baoyu-skills/gemini-web/consent.json 2>/dev/null
|
||||
|
||||
# Linux
|
||||
cat ~/.local/share/baoyu-skills/gemini-web/consent.json 2>/dev/null
|
||||
|
||||
# Windows (PowerShell)
|
||||
Get-Content "$env:APPDATA\baoyu-skills\gemini-web\consent.json" 2>$null
|
||||
```
|
||||
|
||||
**Step 2**: If consent exists and `accepted: true` with matching `disclaimerVersion: "1.0"`:
|
||||
|
||||
Print warning and proceed:
|
||||
```
|
||||
⚠️ Warning: Using reverse-engineered Gemini Web API (not official). Accepted on: <acceptedAt date>
|
||||
```
|
||||
|
||||
**Step 3**: If consent file doesn't exist or `disclaimerVersion` mismatch:
|
||||
|
||||
Display disclaimer and ask user:
|
||||
|
||||
```
|
||||
⚠️ DISCLAIMER
|
||||
|
||||
This tool uses a reverse-engineered Gemini Web API, NOT an official Google API.
|
||||
|
||||
Risks:
|
||||
- May break without notice if Google changes their API
|
||||
- No official support or guarantees
|
||||
- Use at your own risk
|
||||
|
||||
Do you accept these terms and wish to continue?
|
||||
```
|
||||
|
||||
Use `AskUserQuestion` tool with options:
|
||||
- **Yes, I accept** - Continue and save consent
|
||||
- **No, I decline** - Exit immediately
|
||||
|
||||
**Step 4**: On acceptance, create consent file:
|
||||
|
||||
```bash
|
||||
# macOS
|
||||
mkdir -p ~/Library/Application\ Support/baoyu-skills/gemini-web
|
||||
cat > ~/Library/Application\ Support/baoyu-skills/gemini-web/consent.json << 'EOF'
|
||||
{
|
||||
"version": 1,
|
||||
"accepted": true,
|
||||
"acceptedAt": "<ISO timestamp>",
|
||||
"disclaimerVersion": "1.0"
|
||||
}
|
||||
EOF
|
||||
|
||||
# Linux
|
||||
mkdir -p ~/.local/share/baoyu-skills/gemini-web
|
||||
cat > ~/.local/share/baoyu-skills/gemini-web/consent.json << 'EOF'
|
||||
{
|
||||
"version": 1,
|
||||
"accepted": true,
|
||||
"acceptedAt": "<ISO timestamp>",
|
||||
"disclaimerVersion": "1.0"
|
||||
}
|
||||
EOF
|
||||
```
|
||||
|
||||
**Step 5**: On decline, output message and stop:
|
||||
```
|
||||
User declined the disclaimer. Exiting.
|
||||
```
|
||||
**Flow**:
|
||||
1. Check if consent file exists with `accepted: true` and `disclaimerVersion: "1.0"`
|
||||
2. If valid consent exists → print warning with `acceptedAt` date, proceed
|
||||
3. If no consent → show disclaimer, ask user via `AskUserQuestion`:
|
||||
- "Yes, I accept" → create consent file with ISO timestamp, proceed
|
||||
- "No, I decline" → output decline message, stop
|
||||
4. Consent file format: `{"version":1,"accepted":true,"acceptedAt":"<ISO>","disclaimerVersion":"1.0"}`
|
||||
|
||||
---
|
||||
|
||||
## Quick start
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello, Gemini"
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Explain quantum computing"
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-danger-gemini-web/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌──────────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├──────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-danger-gemini-web/EXTEND.md │ Project directory │
|
||||
├──────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md │ User home │
|
||||
└──────────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default model | Proxy settings | Custom data directory
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Text generation
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Your prompt"
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Your prompt" --model gemini-2.5-pro
|
||||
|
||||
# Image generation
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute cat" --image cat.png
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png
|
||||
|
||||
# Multi-turn conversation (agent generates unique sessionId)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember this: 42" --sessionId my-unique-id-123
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId my-unique-id-123
|
||||
```
|
||||
# Vision input (reference images)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Describe this" --reference image.png
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Create variation" --reference a.png --image out.png
|
||||
|
||||
## Commands
|
||||
|
||||
### Text generation
|
||||
|
||||
```bash
|
||||
# Simple prompt (positional)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Your prompt here"
|
||||
|
||||
# Explicit prompt flag
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Your prompt here"
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts -p "Your prompt here"
|
||||
|
||||
# With model selection
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts -p "Hello" -m gemini-2.5-pro
|
||||
|
||||
# Pipe from stdin
|
||||
echo "Summarize this" | npx -y bun ${SKILL_DIR}/scripts/main.ts
|
||||
```
|
||||
|
||||
### Image generation
|
||||
|
||||
```bash
|
||||
# Generate image with default path (./generated.png)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A sunset over mountains" --image
|
||||
|
||||
# Generate image with custom path
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute robot" --image robot.png
|
||||
|
||||
# Shorthand
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "A dragon" --image=dragon.png
|
||||
```
|
||||
|
||||
### Vision input (reference images)
|
||||
|
||||
```bash
|
||||
# Text + image -> text
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Describe this image" --reference a.png
|
||||
|
||||
# Text + image -> image
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Generate a variation" --reference a.png --image out.png
|
||||
```
|
||||
|
||||
### Output formats
|
||||
|
||||
```bash
|
||||
# Plain text (default)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello"
|
||||
# Multi-turn conversation
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember: 42" --sessionId session-abc
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId session-abc
|
||||
|
||||
# JSON output
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json
|
||||
@@ -175,45 +98,35 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--prompt <text>`, `-p` | Prompt text |
|
||||
| `--promptfiles <files...>` | Read prompt from files (concatenated in order) |
|
||||
| `--model <id>`, `-m` | Model: gemini-3-pro (default), gemini-2.5-pro, gemini-2.5-flash |
|
||||
| `--image [path]` | Generate image, save to path (default: generated.png) |
|
||||
| `--reference <files...>`, `--ref <files...>` | Reference images for vision input |
|
||||
| `--sessionId <id>` | Session ID for multi-turn conversation (agent generates unique ID) |
|
||||
| `--list-sessions` | List saved sessions (max 100, sorted by update time) |
|
||||
| `--prompt`, `-p` | Prompt text |
|
||||
| `--promptfiles` | Read prompt from files (concatenated) |
|
||||
| `--model`, `-m` | Model: gemini-3-pro (default), gemini-2.5-pro, gemini-2.5-flash |
|
||||
| `--image [path]` | Generate image (default: generated.png) |
|
||||
| `--reference`, `--ref` | Reference images for vision input |
|
||||
| `--sessionId` | Session ID for multi-turn conversation |
|
||||
| `--list-sessions` | List saved sessions |
|
||||
| `--json` | Output as JSON |
|
||||
| `--login` | Refresh cookies only, then exit |
|
||||
| `--cookie-path <path>` | Custom cookie file path |
|
||||
| `--profile-dir <path>` | Chrome profile directory |
|
||||
| `--help`, `-h` | Show help |
|
||||
|
||||
CLI note: `scripts/main.ts` supports text generation, image generation, reference images (`--reference/--ref`), and multi-turn conversations via `--sessionId`.
|
||||
| `--login` | Refresh cookies, then exit |
|
||||
| `--cookie-path` | Custom cookie file path |
|
||||
| `--profile-dir` | Chrome profile directory |
|
||||
|
||||
## Models
|
||||
|
||||
- `gemini-3-pro` - Default, latest model
|
||||
- `gemini-2.5-pro` - Previous generation pro
|
||||
- `gemini-2.5-flash` - Fast, lightweight
|
||||
| Model | Description |
|
||||
|-------|-------------|
|
||||
| `gemini-3-pro` | Default, latest |
|
||||
| `gemini-2.5-pro` | Previous pro |
|
||||
| `gemini-2.5-flash` | Fast, lightweight |
|
||||
|
||||
## Authentication
|
||||
|
||||
First run opens a browser to authenticate with Google. Cookies are cached for subsequent runs.
|
||||
First run opens browser for Google auth. Cookies cached automatically.
|
||||
|
||||
**Supported browsers** (auto-detected in order):
|
||||
- Google Chrome
|
||||
- Google Chrome Canary / Beta
|
||||
- Chromium
|
||||
- Microsoft Edge
|
||||
Supported browsers (auto-detected): Chrome, Chrome Canary/Beta, Chromium, Edge.
|
||||
|
||||
Override with `GEMINI_WEB_CHROME_PATH` environment variable if needed.
|
||||
Force refresh: `--login` flag. Override browser: `GEMINI_WEB_CHROME_PATH` env var.
|
||||
|
||||
```bash
|
||||
# Force cookie refresh
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --login
|
||||
```
|
||||
|
||||
## Environment variables
|
||||
## Environment Variables
|
||||
|
||||
| Variable | Description |
|
||||
|----------|-------------|
|
||||
@@ -221,72 +134,14 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts --login
|
||||
| `GEMINI_WEB_COOKIE_PATH` | Cookie file path |
|
||||
| `GEMINI_WEB_CHROME_PROFILE_DIR` | Chrome profile directory |
|
||||
| `GEMINI_WEB_CHROME_PATH` | Chrome executable path |
|
||||
| `HTTP_PROXY`, `HTTPS_PROXY` | Proxy for Google access (set inline with command) |
|
||||
|
||||
## Proxy Configuration
|
||||
## Sessions
|
||||
|
||||
If you need a proxy to access Google services (e.g., in China), set `HTTP_PROXY` and `HTTPS_PROXY` environment variables before running:
|
||||
Session files stored in data directory under `sessions/<id>.json`.
|
||||
|
||||
```bash
|
||||
# Example with local proxy
|
||||
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello"
|
||||
|
||||
# Image generation with proxy
|
||||
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
|
||||
|
||||
# Cookie refresh with proxy
|
||||
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts --login
|
||||
```
|
||||
|
||||
**Note**: Environment variables must be set inline with the command. Shell profile settings (e.g., `.bashrc`) may not be inherited by subprocesses.
|
||||
|
||||
## Examples
|
||||
|
||||
### Generate text response
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "What is the capital of France?"
|
||||
```
|
||||
|
||||
### Generate image
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "A photorealistic image of a golden retriever puppy" --image puppy.png
|
||||
```
|
||||
|
||||
### Get JSON output for parsing
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json | jq '.text'
|
||||
```
|
||||
|
||||
### Generate image from prompt files
|
||||
```bash
|
||||
# Concatenate system.md + content.md as prompt
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image output.png
|
||||
```
|
||||
|
||||
### Multi-turn conversation
|
||||
```bash
|
||||
# Start a session with unique ID (agent generates this)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "You are a helpful math tutor." --sessionId task-abc123
|
||||
|
||||
# Continue the conversation (remembers context)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "What is 2+2?" --sessionId task-abc123
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts "Now multiply that by 10" --sessionId task-abc123
|
||||
|
||||
# List recent sessions (max 100, sorted by update time)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --list-sessions
|
||||
```
|
||||
|
||||
Session files are stored in `~/Library/Application Support/baoyu-skills/gemini-web/sessions/<id>.json` and contain:
|
||||
- `id`: Session ID
|
||||
- `metadata`: Gemini chat metadata for continuation
|
||||
- `messages`: Array of `{role, content, timestamp, error?}`
|
||||
- `createdAt`, `updatedAt`: Timestamps
|
||||
Contains: `id`, `metadata` (Gemini chat state), `messages` array, timestamps.
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md` (user)
|
||||
|
||||
If found, load before workflow. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
@@ -1,119 +1,107 @@
|
||||
---
|
||||
name: baoyu-danger-x-to-markdown
|
||||
description: Convert X (Twitter) tweet or article URL to markdown. Uses reverse-engineered X API (private). Requires user consent before use.
|
||||
description: Converts X (Twitter) tweets and articles to markdown with YAML front matter. Uses reverse-engineered API requiring user consent. Use when user mentions "X to markdown", "tweet to markdown", "save tweet", or provides x.com/twitter.com URLs for conversion.
|
||||
---
|
||||
|
||||
# X to Markdown
|
||||
|
||||
Converts X (Twitter) content to markdown format:
|
||||
- Tweet threads → Markdown with YAML front matter
|
||||
- X Articles → Full article content extraction
|
||||
Converts X content to markdown:
|
||||
- Tweets/threads → Markdown with YAML front matter
|
||||
- X Articles → Full content extraction
|
||||
|
||||
## Script Directory
|
||||
|
||||
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
|
||||
Scripts located in `scripts/` subdirectory.
|
||||
|
||||
**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
|
||||
**Path Resolution**:
|
||||
1. `SKILL_DIR` = this SKILL.md's directory
|
||||
2. Script path = `${SKILL_DIR}/scripts/main.ts`
|
||||
|
||||
**Script Reference**:
|
||||
| Script | Purpose |
|
||||
|--------|---------|
|
||||
| `scripts/main.ts` | CLI entry point for URL conversion |
|
||||
## Consent Requirement
|
||||
|
||||
## ⚠️ Disclaimer (REQUIRED)
|
||||
**Before any conversion**, check and obtain consent.
|
||||
|
||||
**Before using this skill**, the consent check MUST be performed.
|
||||
|
||||
### Consent Check Flow
|
||||
### Consent Flow
|
||||
|
||||
**Step 1**: Check consent file
|
||||
|
||||
```bash
|
||||
# macOS
|
||||
cat ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json 2>/dev/null
|
||||
cat ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json
|
||||
|
||||
# Linux
|
||||
cat ~/.local/share/baoyu-skills/x-to-markdown/consent.json 2>/dev/null
|
||||
|
||||
# Windows (PowerShell)
|
||||
Get-Content "$env:APPDATA\baoyu-skills\x-to-markdown\consent.json" 2>$null
|
||||
cat ~/.local/share/baoyu-skills/x-to-markdown/consent.json
|
||||
```
|
||||
|
||||
**Step 2**: If consent exists and `accepted: true` with matching `disclaimerVersion: "1.0"`:
|
||||
|
||||
Print warning and proceed:
|
||||
**Step 2**: If `accepted: true` and `disclaimerVersion: "1.0"` → print warning and proceed:
|
||||
```
|
||||
⚠️ Warning: Using reverse-engineered X API (not official). Accepted on: <acceptedAt date>
|
||||
Warning: Using reverse-engineered X API. Accepted on: <acceptedAt>
|
||||
```
|
||||
|
||||
**Step 3**: If consent file doesn't exist or `disclaimerVersion` mismatch:
|
||||
|
||||
Display disclaimer and ask user:
|
||||
|
||||
**Step 3**: If missing or version mismatch → display disclaimer:
|
||||
```
|
||||
⚠️ DISCLAIMER
|
||||
DISCLAIMER
|
||||
|
||||
This tool uses a reverse-engineered X (Twitter) API, NOT an official API.
|
||||
This tool uses a reverse-engineered X API, NOT official.
|
||||
|
||||
Risks:
|
||||
- May break without notice if X changes their API
|
||||
- No official support or guarantees
|
||||
- Account restrictions possible if API usage detected
|
||||
- May break if X changes API
|
||||
- No guarantees or support
|
||||
- Possible account restrictions
|
||||
- Use at your own risk
|
||||
|
||||
Do you accept these terms and wish to continue?
|
||||
Accept terms and continue?
|
||||
```
|
||||
|
||||
Use `AskUserQuestion` tool with options:
|
||||
- **Yes, I accept** - Continue and save consent
|
||||
- **No, I decline** - Exit immediately
|
||||
Use `AskUserQuestion` with options: "Yes, I accept" | "No, I decline"
|
||||
|
||||
**Step 4**: On acceptance, create consent file:
|
||||
**Step 4**: On accept → create consent file:
|
||||
```json
|
||||
{
|
||||
"version": 1,
|
||||
"accepted": true,
|
||||
"acceptedAt": "<ISO timestamp>",
|
||||
"disclaimerVersion": "1.0"
|
||||
}
|
||||
```
|
||||
|
||||
**Step 5**: On decline → output "User declined. Exiting." and stop.
|
||||
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# macOS
|
||||
mkdir -p ~/Library/Application\ Support/baoyu-skills/x-to-markdown
|
||||
cat > ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json << 'EOF'
|
||||
{
|
||||
"version": 1,
|
||||
"accepted": true,
|
||||
"acceptedAt": "<ISO timestamp>",
|
||||
"disclaimerVersion": "1.0"
|
||||
}
|
||||
EOF
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md && echo "project"
|
||||
|
||||
# Linux
|
||||
mkdir -p ~/.local/share/baoyu-skills/x-to-markdown
|
||||
cat > ~/.local/share/baoyu-skills/x-to-markdown/consent.json << 'EOF'
|
||||
{
|
||||
"version": 1,
|
||||
"accepted": true,
|
||||
"acceptedAt": "<ISO timestamp>",
|
||||
"disclaimerVersion": "1.0"
|
||||
}
|
||||
EOF
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
**Step 5**: On decline, output message and stop:
|
||||
```
|
||||
User declined the disclaimer. Exiting.
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
---
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default output directory | Output format preferences
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Convert tweet (outputs markdown path)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts <url>
|
||||
|
||||
# Save to specific file
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md
|
||||
|
||||
# JSON output
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --json
|
||||
```
|
||||
|
||||
@@ -122,56 +110,35 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --json
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `<url>` | Tweet or article URL |
|
||||
| `-o <path>` | Output path (file or dir) |
|
||||
| `--json` | Output as JSON |
|
||||
| `-o <path>` | Output path |
|
||||
| `--json` | JSON output |
|
||||
| `--login` | Refresh cookies only |
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
x-to-markdown/
|
||||
└── {username}/
|
||||
└── {tweet-id}.md
|
||||
```
|
||||
|
||||
## Supported URLs
|
||||
|
||||
- `https://x.com/<user>/status/<id>`
|
||||
- `https://twitter.com/<user>/status/<id>`
|
||||
- `https://x.com/i/article/<id>`
|
||||
|
||||
## Output Format
|
||||
## Output
|
||||
|
||||
```markdown
|
||||
---
|
||||
url: https://x.com/username/status/123
|
||||
author: "Display Name (@username)"
|
||||
url: https://x.com/user/status/123
|
||||
author: "Name (@user)"
|
||||
tweet_count: 3
|
||||
---
|
||||
|
||||
Tweet content...
|
||||
|
||||
---
|
||||
|
||||
Thread continuation...
|
||||
Content...
|
||||
```
|
||||
|
||||
**File structure**: `x-to-markdown/{username}/{tweet-id}.md`
|
||||
|
||||
## Authentication
|
||||
|
||||
**Option 1**: Environment variables (recommended)
|
||||
- `X_AUTH_TOKEN` - auth_token cookie
|
||||
- `X_CT0` - ct0 cookie
|
||||
|
||||
**Option 2**: Chrome login (auto if env vars not set)
|
||||
- First run opens Chrome for login
|
||||
- Cookies cached locally
|
||||
1. **Environment variables** (preferred): `X_AUTH_TOKEN`, `X_CT0`
|
||||
2. **Chrome login** (fallback): Auto-opens Chrome, caches cookies locally
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md` (user)
|
||||
|
||||
If found, load before workflow. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
+71
-160
@@ -1,98 +1,68 @@
|
||||
---
|
||||
name: baoyu-image-gen
|
||||
description: AI SDK-based image generation using official OpenAI and Google APIs. Supports text-to-image, reference images, aspect ratios, and quality presets.
|
||||
description: Generates images using official OpenAI and Google APIs via AI SDK. Supports text-to-image, reference images, aspect ratios, and quality presets. Use when user asks to "generate image with API", "use official API for images", "create image with OpenAI/Google", or needs API-based generation instead of browser-based.
|
||||
---
|
||||
|
||||
# Image Generation (AI SDK)
|
||||
|
||||
Official API-based image generation via AI SDK. Supports OpenAI (DALL-E, GPT Image) and Google (Imagen, Gemini multimodal).
|
||||
Official API-based image generation. Supports OpenAI and Google providers.
|
||||
|
||||
## Script Directory
|
||||
|
||||
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
|
||||
**Agent Execution**:
|
||||
1. `SKILL_DIR` = this SKILL.md file's directory
|
||||
2. Script path = `${SKILL_DIR}/scripts/main.ts`
|
||||
|
||||
**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
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
**Script Reference**:
|
||||
| Script | Purpose |
|
||||
|--------|---------|
|
||||
| `scripts/main.ts` | CLI entry point for image generation |
|
||||
|
||||
## Quick Start
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# Basic generation (auto-detect provider)
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-image-gen/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-image-gen/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌──────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├──────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-image-gen/EXTEND.md │ Project directory │
|
||||
├──────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-image-gen/EXTEND.md │ User home │
|
||||
└──────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default provider | Default quality | Default aspect ratio
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Basic
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
|
||||
|
||||
# With aspect ratio
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A landscape" --image landscape.png --ar 16:9
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A landscape" --image out.png --ar 16:9
|
||||
|
||||
# High quality (2k)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality 2k
|
||||
|
||||
# Specific provider
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --provider openai
|
||||
# High quality
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image out.png --quality 2k
|
||||
|
||||
# From prompt files
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png
|
||||
|
||||
# With reference images (Google multimodal only)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Make blue" --image out.png --ref source.png
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
### Basic Image Generation
|
||||
|
||||
```bash
|
||||
# Generate with prompt
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A sunset over mountains" --image sunset.png
|
||||
|
||||
# Shorthand
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts -p "A cute robot" --image robot.png
|
||||
```
|
||||
|
||||
### Aspect Ratios
|
||||
|
||||
```bash
|
||||
# Common ratios: 1:1, 16:9, 9:16, 4:3, 3:4, 2.35:1
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A portrait" --image portrait.png --ar 3:4
|
||||
|
||||
# Or specify exact size
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Banner" --image banner.png --size 1792x1024
|
||||
```
|
||||
|
||||
### Reference Images (Google Multimodal)
|
||||
|
||||
```bash
|
||||
# Image editing with reference
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Make it blue" --image blue.png --ref original.png
|
||||
|
||||
# Multiple references
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Combine these styles" --image out.png --ref a.png b.png
|
||||
```
|
||||
|
||||
### Quality Presets
|
||||
|
||||
```bash
|
||||
# Normal quality (default)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality normal
|
||||
|
||||
# High quality (2k resolution)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality 2k
|
||||
```
|
||||
|
||||
### Output Formats
|
||||
|
||||
```bash
|
||||
# Plain output (prints saved path)
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
|
||||
|
||||
# JSON output
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --json
|
||||
# Specific provider
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image out.png --provider openai
|
||||
```
|
||||
|
||||
## Options
|
||||
@@ -106,114 +76,55 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --json
|
||||
| `--model <id>`, `-m` | Model ID |
|
||||
| `--ar <ratio>` | Aspect ratio (e.g., `16:9`, `1:1`, `4:3`) |
|
||||
| `--size <WxH>` | Size (e.g., `1024x1024`) |
|
||||
| `--quality normal\|2k` | Quality preset (default: normal) |
|
||||
| `--quality normal\|2k` | Quality preset (default: 2k) |
|
||||
| `--imageSize 1K\|2K\|4K` | Image size for Google (default: from quality) |
|
||||
| `--ref <files...>` | Reference images (Google multimodal only) |
|
||||
| `--n <count>` | Number of images |
|
||||
| `--json` | JSON output |
|
||||
| `--help`, `-h` | Show help |
|
||||
|
||||
## Environment Variables
|
||||
|
||||
| Variable | Description | Default |
|
||||
|----------|-------------|---------|
|
||||
| `OPENAI_API_KEY` | OpenAI API key | - |
|
||||
| `GOOGLE_API_KEY` | Google API key | - |
|
||||
| `OPENAI_IMAGE_MODEL` | OpenAI model | `gpt-image-1.5` |
|
||||
| `GOOGLE_IMAGE_MODEL` | Google model | `gemini-3-pro-image-preview` |
|
||||
| `OPENAI_BASE_URL` | Custom OpenAI endpoint | - |
|
||||
| `GOOGLE_BASE_URL` | Custom Google endpoint | - |
|
||||
| Variable | Description |
|
||||
|----------|-------------|
|
||||
| `OPENAI_API_KEY` | OpenAI API key |
|
||||
| `GOOGLE_API_KEY` | Google API key |
|
||||
| `OPENAI_IMAGE_MODEL` | OpenAI model override |
|
||||
| `GOOGLE_IMAGE_MODEL` | Google model override |
|
||||
| `OPENAI_BASE_URL` | Custom OpenAI endpoint |
|
||||
| `GOOGLE_BASE_URL` | Custom Google endpoint |
|
||||
|
||||
**Load Priority**: CLI args > `process.env` > `<cwd>/.baoyu-skills/.env` > `~/.baoyu-skills/.env`
|
||||
**Load Priority**: CLI args > env vars > `<cwd>/.baoyu-skills/.env` > `~/.baoyu-skills/.env`
|
||||
|
||||
## Provider & Model Strategy
|
||||
## Provider Selection
|
||||
|
||||
### Auto-Selection
|
||||
|
||||
1. If `--provider` specified → use it
|
||||
2. If only one API key available → use that provider
|
||||
3. If both available → default to Google (multimodal LLMs more versatile)
|
||||
|
||||
### API Selection by Model Type
|
||||
|
||||
| Model Category | API Function | Example Models |
|
||||
|----------------|--------------|----------------|
|
||||
| Google Multimodal | `generateText` | `gemini-2.0-flash-exp-image-generation` |
|
||||
| Google Imagen | `experimental_generateImage` | `imagen-3.0-generate-002` |
|
||||
| OpenAI | `experimental_generateImage` | `gpt-image-1`, `dall-e-3` |
|
||||
|
||||
### Available Models
|
||||
|
||||
**Google**:
|
||||
- `gemini-3-pro-image-preview` - Default, multimodal generation
|
||||
- `gemini-2.0-flash-exp-image-generation` - Gemini 2.0 Flash
|
||||
- `imagen-3.0-generate-002` - Imagen 3
|
||||
|
||||
**OpenAI**:
|
||||
- `gpt-image-1.5` - Default, GPT Image 1.5
|
||||
- `gpt-image-1` - GPT Image 1
|
||||
- `dall-e-3` - DALL-E 3
|
||||
1. `--provider` specified → use it
|
||||
2. Only one API key available → use that provider
|
||||
3. Both available → default to Google
|
||||
|
||||
## Quality Presets
|
||||
|
||||
| Preset | OpenAI | Google | Use Case |
|
||||
|--------|--------|--------|----------|
|
||||
| `normal` | 1024x1024 | Default | Covers, illustrations |
|
||||
| `2k` | 2048x2048 | "2048px" in prompt | Infographics, slides |
|
||||
| Preset | Google imageSize | OpenAI Size | Use Case |
|
||||
|--------|------------------|-------------|----------|
|
||||
| `normal` | 1K | 1024px | Quick previews |
|
||||
| `2k` (default) | 2K | 2048px | Covers, illustrations, infographics |
|
||||
|
||||
## Aspect Ratio Handling
|
||||
**Google imageSize**: Can be overridden with `--imageSize 1K|2K|4K`
|
||||
|
||||
- **Multimodal LLMs**: Embedded in prompt (e.g., `"... aspect ratio 16:9"`)
|
||||
- **Image-only models**: Uses `aspectRatio` or `size` parameter
|
||||
- **Common ratios**: 1:1, 16:9, 9:16, 4:3, 3:4, 2.35:1
|
||||
## Aspect Ratios
|
||||
|
||||
## Examples
|
||||
Supported: `1:1`, `16:9`, `9:16`, `4:3`, `3:4`, `2.35:1`
|
||||
|
||||
### Generate Cover Image
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts \
|
||||
--prompt "A minimalist tech illustration with blue gradients" \
|
||||
--image cover.png --ar 2.35:1 --quality 2k
|
||||
```
|
||||
|
||||
### Generate Social Media Post
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts \
|
||||
--prompt "Instagram post about coffee" \
|
||||
--image post.png --ar 1:1
|
||||
```
|
||||
|
||||
### Edit Image with Reference
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts \
|
||||
--prompt "Change the background to sunset" \
|
||||
--image edited.png --ref original.png --provider google
|
||||
```
|
||||
|
||||
### Batch Generation from Prompt File
|
||||
|
||||
```bash
|
||||
# Create prompt file with detailed instructions
|
||||
npx -y bun ${SKILL_DIR}/scripts/main.ts \
|
||||
--promptfiles style-guide.md scene-description.md \
|
||||
--image scene.png
|
||||
```
|
||||
- Google multimodal: uses `imageConfig.aspectRatio`
|
||||
- Google Imagen: uses `aspectRatio` parameter
|
||||
- OpenAI: maps to closest supported size
|
||||
|
||||
## Error Handling
|
||||
|
||||
- **Missing API key**: Clear error with setup instructions
|
||||
- **Generation failure**: Auto-retry once, then error
|
||||
- **Invalid aspect ratio**: Warning, proceed with default
|
||||
- **Reference images with image-only model**: Warning, ignore refs
|
||||
- Missing API key → error with setup instructions
|
||||
- Generation failure → auto-retry once
|
||||
- Invalid aspect ratio → warning, proceed with default
|
||||
- Reference images with non-multimodal model → warning, ignore refs
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-image-gen/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-image-gen/EXTEND.md` (user)
|
||||
|
||||
If found, load before workflow. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
@@ -1,36 +1,8 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
import { homedir } from "node:os";
|
||||
import { mkdir, readFile, writeFile } from "node:fs/promises";
|
||||
|
||||
type Provider = "google" | "openai";
|
||||
type Quality = "normal" | "2k";
|
||||
|
||||
type CliArgs = {
|
||||
prompt: string | null;
|
||||
promptFiles: string[];
|
||||
imagePath: string | null;
|
||||
provider: Provider | null;
|
||||
model: string | null;
|
||||
aspectRatio: string | null;
|
||||
size: string | null;
|
||||
quality: Quality;
|
||||
referenceImages: string[];
|
||||
n: number;
|
||||
json: boolean;
|
||||
help: boolean;
|
||||
};
|
||||
|
||||
const GOOGLE_MULTIMODAL_MODELS = [
|
||||
"gemini-3-pro-image-preview",
|
||||
"gemini-2.0-flash-exp-image-generation",
|
||||
"gemini-2.5-flash-preview-native-audio-dialog",
|
||||
];
|
||||
|
||||
const GOOGLE_IMAGEN_MODELS = ["imagen-3.0-generate-002", "imagen-3.0-generate-001"];
|
||||
|
||||
const OPENAI_IMAGE_MODELS = ["gpt-image-1.5", "gpt-image-1", "dall-e-3", "dall-e-2"];
|
||||
import type { CliArgs, Provider } from "./types";
|
||||
|
||||
function printUsage(): void {
|
||||
console.log(`Usage:
|
||||
@@ -46,7 +18,8 @@ Options:
|
||||
-m, --model <id> Model ID
|
||||
--ar <ratio> Aspect ratio (e.g., 16:9, 1:1, 4:3)
|
||||
--size <WxH> Size (e.g., 1024x1024)
|
||||
--quality normal|2k Quality preset (default: normal)
|
||||
--quality normal|2k Quality preset (default: 2k)
|
||||
--imageSize 1K|2K|4K Image size for Google (default: from quality)
|
||||
--ref <files...> Reference images (Google multimodal only)
|
||||
--n <count> Number of images (default: 1)
|
||||
--json JSON output
|
||||
@@ -55,6 +28,7 @@ Options:
|
||||
Environment variables:
|
||||
OPENAI_API_KEY OpenAI API key
|
||||
GOOGLE_API_KEY Google API key
|
||||
GEMINI_API_KEY Gemini API key (alias for GOOGLE_API_KEY)
|
||||
OPENAI_IMAGE_MODEL Default OpenAI model (gpt-image-1.5)
|
||||
GOOGLE_IMAGE_MODEL Default Google model (gemini-3-pro-image-preview)
|
||||
OPENAI_BASE_URL Custom OpenAI endpoint
|
||||
@@ -72,7 +46,8 @@ function parseArgs(argv: string[]): CliArgs {
|
||||
model: null,
|
||||
aspectRatio: null,
|
||||
size: null,
|
||||
quality: "normal",
|
||||
quality: "2k",
|
||||
imageSize: null,
|
||||
referenceImages: [],
|
||||
n: 1,
|
||||
json: false,
|
||||
@@ -163,6 +138,13 @@ function parseArgs(argv: string[]): CliArgs {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (a === "--imageSize") {
|
||||
const v = argv[++i]?.toUpperCase();
|
||||
if (v !== "1K" && v !== "2K" && v !== "4K") throw new Error(`Invalid imageSize: ${v}`);
|
||||
out.imageSize = v;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (a === "--ref" || a === "--reference") {
|
||||
const { items, next } = takeMany(i);
|
||||
if (items.length === 0) throw new Error(`Missing files for ${a}`);
|
||||
@@ -259,7 +241,7 @@ function normalizeOutputImagePath(p: string): string {
|
||||
function detectProvider(args: CliArgs): Provider {
|
||||
if (args.provider) return args.provider;
|
||||
|
||||
const hasGoogle = !!process.env.GOOGLE_API_KEY;
|
||||
const hasGoogle = !!(process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY);
|
||||
const hasOpenai = !!process.env.OPENAI_API_KEY;
|
||||
|
||||
if (hasGoogle && !hasOpenai) return "google";
|
||||
@@ -267,235 +249,21 @@ function detectProvider(args: CliArgs): Provider {
|
||||
if (hasGoogle && hasOpenai) return "google";
|
||||
|
||||
throw new Error(
|
||||
"No API key found. Set GOOGLE_API_KEY or OPENAI_API_KEY.\n" +
|
||||
"No API key found. Set GOOGLE_API_KEY, GEMINI_API_KEY, or OPENAI_API_KEY.\n" +
|
||||
"Create ~/.baoyu-skills/.env or <cwd>/.baoyu-skills/.env with your keys."
|
||||
);
|
||||
}
|
||||
|
||||
function getDefaultModel(provider: Provider): string {
|
||||
type ProviderModule = {
|
||||
getDefaultModel: () => string;
|
||||
generateImage: (prompt: string, model: string, args: CliArgs) => Promise<Uint8Array>;
|
||||
};
|
||||
|
||||
async function loadProviderModule(provider: Provider): Promise<ProviderModule> {
|
||||
if (provider === "google") {
|
||||
return process.env.GOOGLE_IMAGE_MODEL || "gemini-3-pro-image-preview";
|
||||
return (await import("./providers/google")) as ProviderModule;
|
||||
}
|
||||
return process.env.OPENAI_IMAGE_MODEL || "gpt-image-1.5";
|
||||
}
|
||||
|
||||
function isGoogleMultimodal(model: string): boolean {
|
||||
return GOOGLE_MULTIMODAL_MODELS.some((m) => model.includes(m));
|
||||
}
|
||||
|
||||
function isGoogleImagen(model: string): boolean {
|
||||
return GOOGLE_IMAGEN_MODELS.some((m) => model.includes(m));
|
||||
}
|
||||
|
||||
function buildPromptWithAspect(prompt: string, ar: string | null, quality: Quality): string {
|
||||
let result = prompt;
|
||||
if (ar) {
|
||||
result += ` Aspect ratio: ${ar}.`;
|
||||
}
|
||||
if (quality === "2k") {
|
||||
result += " High resolution 2048px.";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function parseAspectRatio(ar: string): { width: number; height: number } | null {
|
||||
const match = ar.match(/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/);
|
||||
if (!match) return null;
|
||||
const w = parseFloat(match[1]!);
|
||||
const h = parseFloat(match[2]!);
|
||||
if (w <= 0 || h <= 0) return null;
|
||||
return { width: w, height: h };
|
||||
}
|
||||
|
||||
function getOpenAISize(ar: string | null, quality: Quality): string {
|
||||
const base = quality === "2k" ? 2048 : 1024;
|
||||
|
||||
if (!ar) return `${base}x${base}`;
|
||||
|
||||
const parsed = parseAspectRatio(ar);
|
||||
if (!parsed) return `${base}x${base}`;
|
||||
|
||||
const ratio = parsed.width / parsed.height;
|
||||
|
||||
if (Math.abs(ratio - 1) < 0.1) return `${base}x${base}`;
|
||||
if (ratio > 1.5) return quality === "2k" ? "2048x1024" : "1792x1024";
|
||||
if (ratio < 0.67) return quality === "2k" ? "1024x2048" : "1024x1792";
|
||||
return `${base}x${base}`;
|
||||
}
|
||||
|
||||
async function readImageAsBase64(p: string): Promise<{ data: string; mimeType: string }> {
|
||||
const buf = await readFile(p);
|
||||
const ext = path.extname(p).toLowerCase();
|
||||
let mimeType = "image/png";
|
||||
if (ext === ".jpg" || ext === ".jpeg") mimeType = "image/jpeg";
|
||||
else if (ext === ".gif") mimeType = "image/gif";
|
||||
else if (ext === ".webp") mimeType = "image/webp";
|
||||
return { data: buf.toString("base64"), mimeType };
|
||||
}
|
||||
|
||||
async function generateWithGoogleMultimodal(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
const { generateText } = await import("ai");
|
||||
const { createGoogleGenerativeAI } = await import("@ai-sdk/google");
|
||||
|
||||
const google = createGoogleGenerativeAI({
|
||||
apiKey: process.env.GOOGLE_API_KEY,
|
||||
baseURL: process.env.GOOGLE_BASE_URL,
|
||||
});
|
||||
|
||||
const fullPrompt = buildPromptWithAspect(prompt, args.aspectRatio, args.quality);
|
||||
|
||||
const messages: any[] = [];
|
||||
const content: any[] = [];
|
||||
|
||||
for (const refPath of args.referenceImages) {
|
||||
const { data, mimeType } = await readImageAsBase64(refPath);
|
||||
content.push({ type: "image", image: data, mimeType });
|
||||
}
|
||||
content.push({ type: "text", text: fullPrompt });
|
||||
|
||||
messages.push({ role: "user", content });
|
||||
|
||||
const result = await generateText({
|
||||
model: google(model, { useSearchGrounding: false }),
|
||||
messages,
|
||||
providerOptions: {
|
||||
google: {
|
||||
responseModalities: ["TEXT", "IMAGE"],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const files = (result as any).files;
|
||||
if (!files || files.length === 0) {
|
||||
const expRes = (result as any).response?.body?.candidates?.[0]?.content?.parts;
|
||||
if (expRes) {
|
||||
for (const part of expRes) {
|
||||
if (part.inlineData?.data) {
|
||||
return Uint8Array.from(Buffer.from(part.inlineData.data, "base64"));
|
||||
}
|
||||
}
|
||||
}
|
||||
throw new Error("No image in response");
|
||||
}
|
||||
|
||||
const img = files[0];
|
||||
if (img.uint8Array) return img.uint8Array;
|
||||
if (img.base64) return Uint8Array.from(Buffer.from(img.base64, "base64"));
|
||||
|
||||
throw new Error("Cannot extract image data");
|
||||
}
|
||||
|
||||
async function generateWithGoogleImagen(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
const { experimental_generateImage: generateImage } = await import("ai");
|
||||
const { createGoogleGenerativeAI } = await import("@ai-sdk/google");
|
||||
|
||||
const google = createGoogleGenerativeAI({
|
||||
apiKey: process.env.GOOGLE_API_KEY,
|
||||
baseURL: process.env.GOOGLE_BASE_URL,
|
||||
});
|
||||
|
||||
const fullPrompt = buildPromptWithAspect(prompt, args.aspectRatio, args.quality);
|
||||
|
||||
const result = await generateImage({
|
||||
model: google.image(model),
|
||||
prompt: fullPrompt,
|
||||
n: args.n,
|
||||
aspectRatio: args.aspectRatio || undefined,
|
||||
});
|
||||
|
||||
const img = result.images[0];
|
||||
if (!img) throw new Error("No image in response");
|
||||
|
||||
if (img.uint8Array) return img.uint8Array;
|
||||
if (img.base64) return Uint8Array.from(Buffer.from(img.base64, "base64"));
|
||||
|
||||
throw new Error("Cannot extract image data");
|
||||
}
|
||||
|
||||
async function generateWithOpenAI(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
const baseURL = process.env.OPENAI_BASE_URL || "https://api.openai.com/v1";
|
||||
const apiKey = process.env.OPENAI_API_KEY;
|
||||
|
||||
if (!apiKey) throw new Error("OPENAI_API_KEY is required");
|
||||
|
||||
const size = args.size || getOpenAISize(args.aspectRatio, args.quality);
|
||||
|
||||
const body: Record<string, any> = {
|
||||
model,
|
||||
prompt,
|
||||
size,
|
||||
};
|
||||
|
||||
if (model.includes("dall-e-3")) {
|
||||
body.quality = args.quality === "2k" ? "hd" : "standard";
|
||||
}
|
||||
|
||||
const res = await fetch(`${baseURL}/images/generations`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${apiKey}`,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.text();
|
||||
throw new Error(`OpenAI API error: ${err}`);
|
||||
}
|
||||
|
||||
const result = (await res.json()) as { data: Array<{ url?: string; b64_json?: string }> };
|
||||
const img = result.data[0];
|
||||
|
||||
if (img?.b64_json) {
|
||||
return Uint8Array.from(Buffer.from(img.b64_json, "base64"));
|
||||
}
|
||||
|
||||
if (img?.url) {
|
||||
const imgRes = await fetch(img.url);
|
||||
if (!imgRes.ok) throw new Error("Failed to download image");
|
||||
const buf = await imgRes.arrayBuffer();
|
||||
return new Uint8Array(buf);
|
||||
}
|
||||
|
||||
throw new Error("No image in response");
|
||||
}
|
||||
|
||||
async function generate(
|
||||
provider: Provider,
|
||||
model: string,
|
||||
prompt: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
if (provider === "google") {
|
||||
if (isGoogleMultimodal(model)) {
|
||||
return generateWithGoogleMultimodal(prompt, model, args);
|
||||
}
|
||||
if (isGoogleImagen(model)) {
|
||||
if (args.referenceImages.length > 0) {
|
||||
console.error("Warning: Reference images not supported with Imagen models, ignoring.");
|
||||
}
|
||||
return generateWithGoogleImagen(prompt, model, args);
|
||||
}
|
||||
return generateWithGoogleMultimodal(prompt, model, args);
|
||||
}
|
||||
|
||||
if (args.referenceImages.length > 0) {
|
||||
console.error("Warning: Reference images not supported with OpenAI, ignoring.");
|
||||
}
|
||||
return generateWithOpenAI(prompt, model, args);
|
||||
return (await import("./providers/openai")) as ProviderModule;
|
||||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
@@ -527,7 +295,8 @@ async function main(): Promise<void> {
|
||||
}
|
||||
|
||||
const provider = detectProvider(args);
|
||||
const model = args.model || getDefaultModel(provider);
|
||||
const providerModule = await loadProviderModule(provider);
|
||||
const model = args.model || providerModule.getDefaultModel();
|
||||
const outputPath = normalizeOutputImagePath(args.imagePath);
|
||||
|
||||
let imageData: Uint8Array;
|
||||
@@ -535,7 +304,7 @@ async function main(): Promise<void> {
|
||||
|
||||
while (true) {
|
||||
try {
|
||||
imageData = await generate(provider, model, prompt, args);
|
||||
imageData = await providerModule.generateImage(prompt, model, args);
|
||||
break;
|
||||
} catch (e) {
|
||||
if (!retried) {
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import path from "node:path";
|
||||
import { readFile } from "node:fs/promises";
|
||||
import type { CliArgs } from "../types";
|
||||
|
||||
const GOOGLE_MULTIMODAL_MODELS = ["gemini-3-pro-image-preview"];
|
||||
const GOOGLE_IMAGEN_MODELS = ["imagen-3.0-generate-002", "imagen-3.0-generate-001"];
|
||||
|
||||
export function getDefaultModel(): string {
|
||||
return process.env.GOOGLE_IMAGE_MODEL || "gemini-3-pro-image-preview";
|
||||
}
|
||||
|
||||
function isGoogleMultimodal(model: string): boolean {
|
||||
return GOOGLE_MULTIMODAL_MODELS.some((m) => model.includes(m));
|
||||
}
|
||||
|
||||
function isGoogleImagen(model: string): boolean {
|
||||
return GOOGLE_IMAGEN_MODELS.some((m) => model.includes(m));
|
||||
}
|
||||
|
||||
function getGoogleApiKey(): string | null {
|
||||
return process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY || null;
|
||||
}
|
||||
|
||||
function getGoogleImageSize(args: CliArgs): "1K" | "2K" | "4K" {
|
||||
if (args.imageSize) return args.imageSize as "1K" | "2K" | "4K";
|
||||
return args.quality === "2k" ? "2K" : "1K";
|
||||
}
|
||||
|
||||
function buildPromptWithAspect(prompt: string, ar: string | null, quality: CliArgs["quality"]): string {
|
||||
let result = prompt;
|
||||
if (ar) {
|
||||
result += ` Aspect ratio: ${ar}.`;
|
||||
}
|
||||
if (quality === "2k") {
|
||||
result += " High resolution 2048px.";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function readImageAsBase64(p: string): Promise<{ data: string; mimeType: string }> {
|
||||
const buf = await readFile(p);
|
||||
const ext = path.extname(p).toLowerCase();
|
||||
let mimeType = "image/png";
|
||||
if (ext === ".jpg" || ext === ".jpeg") mimeType = "image/jpeg";
|
||||
else if (ext === ".gif") mimeType = "image/gif";
|
||||
else if (ext === ".webp") mimeType = "image/webp";
|
||||
return { data: buf.toString("base64"), mimeType };
|
||||
}
|
||||
|
||||
async function generateWithGemini(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
const { GoogleGenAI } = await import("@google/genai");
|
||||
|
||||
const apiKey = getGoogleApiKey();
|
||||
if (!apiKey) throw new Error("GOOGLE_API_KEY or GEMINI_API_KEY is required");
|
||||
|
||||
const ai = new GoogleGenAI({
|
||||
apiKey,
|
||||
httpOptions: {
|
||||
baseUrl: process.env.GOOGLE_BASE_URL || undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const input: Array<{ type: "text" | "image"; text?: string; data?: string; mime_type?: string }> = [];
|
||||
for (const refPath of args.referenceImages) {
|
||||
const { data, mimeType } = await readImageAsBase64(refPath);
|
||||
input.push({ type: "image", data, mime_type: mimeType });
|
||||
}
|
||||
input.push({ type: "text", text: prompt });
|
||||
|
||||
const imageConfig: { image_size: "1K" | "2K" | "4K"; aspect_ratio?: string } = {
|
||||
image_size: getGoogleImageSize(args),
|
||||
};
|
||||
if (args.aspectRatio) {
|
||||
imageConfig.aspect_ratio = args.aspectRatio;
|
||||
}
|
||||
|
||||
console.log("Generating image with Gemini...", imageConfig);
|
||||
const interaction = await ai.interactions.create({
|
||||
model,
|
||||
input,
|
||||
response_modalities: ["image"],
|
||||
generation_config: {
|
||||
image_config: imageConfig,
|
||||
},
|
||||
});
|
||||
console.log("Generation completed.");
|
||||
|
||||
for (const output of interaction.outputs || []) {
|
||||
if (output.type === "image" && output.data) {
|
||||
return Uint8Array.from(Buffer.from(output.data, "base64"));
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error("No image in response");
|
||||
}
|
||||
|
||||
async function generateWithImagen(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
const { experimental_generateImage: generateImage } = await import("ai");
|
||||
const { createGoogleGenerativeAI } = await import("@ai-sdk/google");
|
||||
|
||||
const google = createGoogleGenerativeAI({
|
||||
apiKey: getGoogleApiKey() || undefined,
|
||||
baseURL: process.env.GOOGLE_BASE_URL,
|
||||
});
|
||||
|
||||
const fullPrompt = buildPromptWithAspect(prompt, args.aspectRatio, args.quality);
|
||||
|
||||
const result = await generateImage({
|
||||
model: google.image(model),
|
||||
prompt: fullPrompt,
|
||||
n: args.n,
|
||||
aspectRatio: args.aspectRatio || undefined,
|
||||
});
|
||||
|
||||
const img = result.images[0];
|
||||
if (!img) throw new Error("No image in response");
|
||||
|
||||
if (img.uint8Array) return img.uint8Array;
|
||||
if (img.base64) return Uint8Array.from(Buffer.from(img.base64, "base64"));
|
||||
|
||||
throw new Error("Cannot extract image data");
|
||||
}
|
||||
|
||||
export async function generateImage(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
if (isGoogleImagen(model)) {
|
||||
if (args.referenceImages.length > 0) {
|
||||
console.error("Warning: Reference images not supported with Imagen models, ignoring.");
|
||||
}
|
||||
return generateWithImagen(prompt, model, args);
|
||||
}
|
||||
|
||||
if (!isGoogleMultimodal(model) && args.referenceImages.length > 0) {
|
||||
console.error("Warning: Reference images are only supported with Gemini multimodal models.");
|
||||
}
|
||||
|
||||
return generateWithGemini(prompt, model, args);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import type { CliArgs } from "../types";
|
||||
|
||||
export function getDefaultModel(): string {
|
||||
return process.env.OPENAI_IMAGE_MODEL || "gpt-image-1.5";
|
||||
}
|
||||
|
||||
function parseAspectRatio(ar: string): { width: number; height: number } | null {
|
||||
const match = ar.match(/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/);
|
||||
if (!match) return null;
|
||||
const w = parseFloat(match[1]!);
|
||||
const h = parseFloat(match[2]!);
|
||||
if (w <= 0 || h <= 0) return null;
|
||||
return { width: w, height: h };
|
||||
}
|
||||
|
||||
type SizeMapping = {
|
||||
square: string;
|
||||
landscape: string;
|
||||
portrait: string;
|
||||
};
|
||||
|
||||
function getOpenAISize(
|
||||
model: string,
|
||||
ar: string | null,
|
||||
quality: CliArgs["quality"]
|
||||
): string {
|
||||
const isDalle3 = model.includes("dall-e-3");
|
||||
const isDalle2 = model.includes("dall-e-2");
|
||||
|
||||
if (isDalle2) {
|
||||
return "1024x1024";
|
||||
}
|
||||
|
||||
const sizes: SizeMapping = isDalle3
|
||||
? {
|
||||
square: "1024x1024",
|
||||
landscape: "1792x1024",
|
||||
portrait: "1024x1792",
|
||||
}
|
||||
: {
|
||||
square: "1024x1024",
|
||||
landscape: "1536x1024",
|
||||
portrait: "1024x1536",
|
||||
};
|
||||
|
||||
if (!ar) return sizes.square;
|
||||
|
||||
const parsed = parseAspectRatio(ar);
|
||||
if (!parsed) return sizes.square;
|
||||
|
||||
const ratio = parsed.width / parsed.height;
|
||||
|
||||
if (Math.abs(ratio - 1) < 0.1) return sizes.square;
|
||||
if (ratio > 1.5) return sizes.landscape;
|
||||
if (ratio < 0.67) return sizes.portrait;
|
||||
return sizes.square;
|
||||
}
|
||||
|
||||
export async function generateImage(
|
||||
prompt: string,
|
||||
model: string,
|
||||
args: CliArgs
|
||||
): Promise<Uint8Array> {
|
||||
const baseURL = process.env.OPENAI_BASE_URL || "https://api.openai.com/v1";
|
||||
const apiKey = process.env.OPENAI_API_KEY;
|
||||
|
||||
if (!apiKey) throw new Error("OPENAI_API_KEY is required");
|
||||
|
||||
if (args.referenceImages.length > 0) {
|
||||
console.error("Warning: Reference images not supported with OpenAI, ignoring.");
|
||||
}
|
||||
|
||||
const size = args.size || getOpenAISize(model, args.aspectRatio, args.quality);
|
||||
|
||||
const body: Record<string, any> = {
|
||||
model,
|
||||
prompt,
|
||||
size,
|
||||
};
|
||||
|
||||
if (model.includes("dall-e-3")) {
|
||||
body.quality = args.quality === "2k" ? "hd" : "standard";
|
||||
}
|
||||
|
||||
const res = await fetch(`${baseURL}/images/generations`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${apiKey}`,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.text();
|
||||
throw new Error(`OpenAI API error: ${err}`);
|
||||
}
|
||||
|
||||
const result = (await res.json()) as { data: Array<{ url?: string; b64_json?: string }> };
|
||||
const img = result.data[0];
|
||||
|
||||
if (img?.b64_json) {
|
||||
return Uint8Array.from(Buffer.from(img.b64_json, "base64"));
|
||||
}
|
||||
|
||||
if (img?.url) {
|
||||
const imgRes = await fetch(img.url);
|
||||
if (!imgRes.ok) throw new Error("Failed to download image");
|
||||
const buf = await imgRes.arrayBuffer();
|
||||
return new Uint8Array(buf);
|
||||
}
|
||||
|
||||
throw new Error("No image in response");
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export type Provider = "google" | "openai";
|
||||
export type Quality = "normal" | "2k";
|
||||
|
||||
export type CliArgs = {
|
||||
prompt: string | null;
|
||||
promptFiles: string[];
|
||||
imagePath: string | null;
|
||||
provider: Provider | null;
|
||||
model: string | null;
|
||||
aspectRatio: string | null;
|
||||
size: string | null;
|
||||
quality: Quality;
|
||||
imageSize: string | null;
|
||||
referenceImages: string[];
|
||||
n: number;
|
||||
json: boolean;
|
||||
help: boolean;
|
||||
};
|
||||
+133
-405
@@ -1,74 +1,47 @@
|
||||
---
|
||||
name: baoyu-infographic
|
||||
description: Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", or "visual summary".
|
||||
description: Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".
|
||||
---
|
||||
|
||||
# Infographic Generator
|
||||
|
||||
Generate professional infographics with two dimensions: layout (information structure) and style (visual aesthetics).
|
||||
Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Auto-recommend combinations based on content
|
||||
/baoyu-infographic path/to/content.md
|
||||
|
||||
# Specify layout
|
||||
/baoyu-infographic path/to/content.md --layout hierarchical-layers
|
||||
|
||||
# Specify style (default: craft-handmade)
|
||||
/baoyu-infographic path/to/content.md --style technical-schematic
|
||||
|
||||
# Specify both
|
||||
/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
|
||||
|
||||
# With aspect ratio
|
||||
/baoyu-infographic path/to/content.md --aspect portrait
|
||||
|
||||
# Direct content input
|
||||
/baoyu-infographic
|
||||
[paste content]
|
||||
|
||||
# Direct input with options
|
||||
/baoyu-infographic --layout linear-progression --style aged-academia
|
||||
[paste content]
|
||||
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
|
||||
/baoyu-infographic path/to/content.md --aspect portrait --lang zh
|
||||
/baoyu-infographic # then paste content
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--layout <name>` | Information layout (20 options, see Layout Gallery) |
|
||||
| `--style <name>` | Visual style (17 options, default: craft-handmade) |
|
||||
| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||
| `--lang <code>` | Output language (en, zh, ja, etc.) |
|
||||
|
||||
## Two Dimensions
|
||||
|
||||
| Dimension | Controls | Count |
|
||||
|-----------|----------|-------|
|
||||
| **Layout** | Information structure: hierarchy, flow, relationships | 20 types |
|
||||
| **Style** | Visual aesthetics: colors, textures, artistic treatment | 17 types |
|
||||
|
||||
Layout × Style can be freely combined. Example: `--layout hierarchical-layers --style craft-handmade` creates a hierarchy with playful hand-drawn aesthetics.
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--layout` | 20 options (see Layout Gallery), default: bento-grid |
|
||||
| `--style` | 17 options (see Style Gallery), default: craft-handmade |
|
||||
| `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||
| `--lang` | en, zh, ja, etc. |
|
||||
|
||||
## Layout Gallery
|
||||
|
||||
| Layout | Best For |
|
||||
|--------|----------|
|
||||
| `linear-progression` | Timelines, step-by-step processes, tutorials |
|
||||
| `linear-progression` | Timelines, processes, tutorials |
|
||||
| `binary-comparison` | A vs B, before-after, pros-cons |
|
||||
| `comparison-matrix` | Multi-factor comparisons |
|
||||
| `hierarchical-layers` | Pyramids, concentric circles, priority levels |
|
||||
| `hierarchical-layers` | Pyramids, priority levels |
|
||||
| `tree-branching` | Categories, taxonomies |
|
||||
| `hub-spoke` | Central concept with related items |
|
||||
| `structural-breakdown` | Exploded views, cross-sections, part labeling |
|
||||
| `structural-breakdown` | Exploded views, cross-sections |
|
||||
| `bento-grid` | Multiple topics, overview (default) |
|
||||
| `iceberg` | Surface vs hidden aspects |
|
||||
| `bridge` | Problem-solution, gap-crossing |
|
||||
| `funnel` | Conversion processes, filtering |
|
||||
| `isometric-map` | Spatial relationships, locations |
|
||||
| `dashboard` | Metrics, KPIs, data display |
|
||||
| `bridge` | Problem-solution |
|
||||
| `funnel` | Conversion, filtering |
|
||||
| `isometric-map` | Spatial relationships |
|
||||
| `dashboard` | Metrics, KPIs |
|
||||
| `periodic-table` | Categorized collections |
|
||||
| `comic-strip` | Narratives, sequences |
|
||||
| `story-mountain` | Plot structure, tension arcs |
|
||||
@@ -77,415 +50,170 @@ Layout × Style can be freely combined. Example: `--layout hierarchical-layers -
|
||||
| `winding-roadmap` | Journey, milestones |
|
||||
| `circular-flow` | Cycles, recurring processes |
|
||||
|
||||
Detailed layout definitions: `references/layouts/<layout>.md`
|
||||
Full definitions: `references/layouts/<layout>.md`
|
||||
|
||||
## Style Gallery
|
||||
|
||||
| Style | Description |
|
||||
|-------|-------------|
|
||||
| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic |
|
||||
| `claymation` | 3D clay figures, playful stop-motion |
|
||||
| `kawaii` | Japanese cute, big eyes, pastel colors |
|
||||
| `storybook-watercolor` | Soft painted illustrations, whimsical |
|
||||
| `chalkboard` | Colorful chalk on black board |
|
||||
| `cyberpunk-neon` | Neon glow on dark, futuristic |
|
||||
| `bold-graphic` | Comic style, halftone dots, high contrast |
|
||||
| `aged-academia` | Vintage science, sepia sketches |
|
||||
| `corporate-memphis` | Flat vector people, vibrant fills |
|
||||
| `technical-schematic` | Blueprint, isometric 3D, engineering |
|
||||
| `origami` | Folded paper forms, geometric |
|
||||
| `pixel-art` | Retro 8-bit, nostalgic gaming |
|
||||
| `ui-wireframe` | Grayscale boxes, interface mockup |
|
||||
| `subway-map` | Transit diagram, colored lines |
|
||||
| `ikea-manual` | Minimal line art, assembly style |
|
||||
| `knolling` | Organized flat-lay, top-down |
|
||||
| `lego-brick` | Toy brick construction, playful |
|
||||
| `craft-handmade` | Hand-drawn, paper craft (default) |
|
||||
| `claymation` | 3D clay figures, stop-motion |
|
||||
| `kawaii` | Japanese cute, pastels |
|
||||
| `storybook-watercolor` | Soft painted, whimsical |
|
||||
| `chalkboard` | Chalk on black board |
|
||||
| `cyberpunk-neon` | Neon glow, futuristic |
|
||||
| `bold-graphic` | Comic style, halftone |
|
||||
| `aged-academia` | Vintage science, sepia |
|
||||
| `corporate-memphis` | Flat vector, vibrant |
|
||||
| `technical-schematic` | Blueprint, engineering |
|
||||
| `origami` | Folded paper, geometric |
|
||||
| `pixel-art` | Retro 8-bit |
|
||||
| `ui-wireframe` | Grayscale interface mockup |
|
||||
| `subway-map` | Transit diagram |
|
||||
| `ikea-manual` | Minimal line art |
|
||||
| `knolling` | Organized flat-lay |
|
||||
| `lego-brick` | Toy brick construction |
|
||||
|
||||
Detailed style definitions: `references/styles/<style>.md`
|
||||
Full definitions: `references/styles/<style>.md`
|
||||
|
||||
## Recommended Combinations
|
||||
|
||||
Based on content analysis, the system recommends 3-5 layout×style combinations:
|
||||
|
||||
| Content Type | Recommended Combination |
|
||||
|--------------|------------------------|
|
||||
| Content Type | Layout + Style |
|
||||
|--------------|----------------|
|
||||
| Timeline/History | `linear-progression` + `craft-handmade` |
|
||||
| Step-by-step Process | `linear-progression` + `ikea-manual` |
|
||||
| Comparison (A vs B) | `binary-comparison` + `corporate-memphis` |
|
||||
| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` |
|
||||
| Relationships/Overlap | `venn-diagram` + `craft-handmade` |
|
||||
| Conversion/Sales | `funnel` + `corporate-memphis` |
|
||||
| Recurring Process | `circular-flow` + `craft-handmade` |
|
||||
| Technical/System | `structural-breakdown` + `technical-schematic` |
|
||||
| Data/Metrics | `dashboard` + `corporate-memphis` |
|
||||
| Educational/Overview | `bento-grid` + `chalkboard` |
|
||||
| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` |
|
||||
| Categories/Types | `periodic-table` + `bold-graphic` |
|
||||
| Step-by-step | `linear-progression` + `ikea-manual` |
|
||||
| A vs B | `binary-comparison` + `corporate-memphis` |
|
||||
| Hierarchy | `hierarchical-layers` + `craft-handmade` |
|
||||
| Overlap | `venn-diagram` + `craft-handmade` |
|
||||
| Conversion | `funnel` + `corporate-memphis` |
|
||||
| Cycles | `circular-flow` + `craft-handmade` |
|
||||
| Technical | `structural-breakdown` + `technical-schematic` |
|
||||
| Metrics | `dashboard` + `corporate-memphis` |
|
||||
| Educational | `bento-grid` + `chalkboard` |
|
||||
| Journey | `winding-roadmap` + `storybook-watercolor` |
|
||||
| Categories | `periodic-table` + `bold-graphic` |
|
||||
|
||||
**Default combination**: `bento-grid` + `craft-handmade`
|
||||
Default: `bento-grid` + `craft-handmade`
|
||||
|
||||
## File Structure
|
||||
|
||||
Each session creates an independent directory:
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
infographic/{topic-slug}/
|
||||
├── source-{slug}.{ext} # Source files
|
||||
├── analysis.md # Deep content analysis
|
||||
├── structured-content.md # Instructional content structure
|
||||
├── prompts/
|
||||
│ └── infographic.md # Generated prompt
|
||||
└── infographic.png # Output image
|
||||
├── source-{slug}.{ext}
|
||||
├── analysis.md
|
||||
├── structured-content.md
|
||||
├── prompts/infographic.md
|
||||
└── infographic.png
|
||||
```
|
||||
|
||||
**Slug Generation**:
|
||||
1. Extract main topic from content (2-4 words, kebab-case)
|
||||
2. Example: "Machine Learning Basics" → `ml-basics`
|
||||
Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
|
||||
|
||||
**Conflict Resolution**:
|
||||
If `infographic/{topic-slug}/` already exists:
|
||||
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
|
||||
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
|
||||
## Core Principles
|
||||
|
||||
## Instructional Design Approach
|
||||
|
||||
This skill applies a **world-class instructional designer** mindset to infographic creation:
|
||||
|
||||
1. **Deep Understanding**: Read and comprehend the source material thoroughly
|
||||
2. **Learning Objectives**: Identify what the viewer should understand after seeing the infographic
|
||||
3. **Information Architecture**: Structure content for maximum clarity and retention
|
||||
4. **Visual Storytelling**: Use visuals to communicate complex ideas accessibly
|
||||
5. **Verbatim Data**: Preserve all source data exactly as written—no summarization or rephrasing of facts
|
||||
- Preserve all source data **verbatim**—no summarization or rephrasing
|
||||
- Define learning objectives before structuring content
|
||||
- Structure for visual communication (headlines, labels, visual elements)
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
### Step 1: Setup & Analyze
|
||||
|
||||
Read source content and perform deep instructional analysis.
|
||||
**1.1 Load Preferences (EXTEND.md)**
|
||||
|
||||
**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
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
2. **Deep reading**:
|
||||
- Read the entire document thoroughly
|
||||
- Develop deep understanding before proceeding
|
||||
- Identify the core message and purpose
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
|
||||
|
||||
3. **Content analysis**:
|
||||
| Aspect | Questions to Answer |
|
||||
|--------|---------------------|
|
||||
| **Main Topic** | What is this content fundamentally about? |
|
||||
| **Data Type** | Timeline? Hierarchy? Comparison? Process? Relationships? |
|
||||
| **Complexity** | Simple (3-5 points) or complex (6-10+ points)? |
|
||||
| **Tone** | Technical, educational, playful, serious, persuasive? |
|
||||
| **Audience** | Who is the intended viewer? What do they already know? |
|
||||
|
||||
4. **Language detection**:
|
||||
- Detect **source language** from content
|
||||
- Detect **user language** from conversation
|
||||
- Note if source_language ≠ user_language (will ask in Step 4)
|
||||
|
||||
5. **Extract design instructions** from user input:
|
||||
- Style preferences (colors, mood, aesthetic)
|
||||
- Layout preferences (structure, organization)
|
||||
- Any specific visual requirements
|
||||
- Separate these from content—they go in the Design Instructions section
|
||||
|
||||
6. **Save to `analysis.md`**
|
||||
|
||||
**Analysis Output Format**:
|
||||
```yaml
|
||||
---
|
||||
title: "[Main topic title]"
|
||||
topic: "[Category: educational/technical/business/etc.]"
|
||||
data_type: "[timeline/hierarchy/comparison/process/etc.]"
|
||||
complexity: "[simple/moderate/complex]"
|
||||
source_language: "[detected language]"
|
||||
user_language: "[user's language]"
|
||||
---
|
||||
|
||||
## Main Topic
|
||||
[1-2 sentence summary of what this content is about]
|
||||
|
||||
## Learning Objectives
|
||||
After viewing this infographic, the viewer should understand:
|
||||
1. [Primary objective]
|
||||
2. [Secondary objective]
|
||||
3. [Tertiary objective if applicable]
|
||||
|
||||
## Target Audience
|
||||
- **Knowledge Level**: [Beginner/Intermediate/Expert]
|
||||
- **Context**: [Why they're viewing this]
|
||||
- **Expectations**: [What they hope to learn]
|
||||
|
||||
## Content Type Analysis
|
||||
- **Data Structure**: [How information relates to itself]
|
||||
- **Key Relationships**: [What connects to what]
|
||||
- **Visual Opportunities**: [What can be shown rather than told]
|
||||
|
||||
## Design Instructions (from user input)
|
||||
[Any style, color, layout, or visual preferences extracted from user's steering prompt]
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-infographic/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, display summary │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Preferred layout/style | Default aspect ratio | Custom style definitions | Language preference
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
|
||||
**1.2 Analyze Content → `analysis.md`**
|
||||
|
||||
1. Save source content (file path or paste → `source.md`)
|
||||
2. Analyze: topic, data type, complexity, tone, audience
|
||||
3. Detect source language and user language
|
||||
4. Extract design instructions from user input
|
||||
5. Save analysis
|
||||
|
||||
See `references/analysis-framework.md` for detailed format.
|
||||
|
||||
### Step 2: Generate Structured Content → `structured-content.md`
|
||||
|
||||
Transform analyzed content into a structured format for the infographic designer.
|
||||
Transform content into infographic structure:
|
||||
1. Title and learning objectives
|
||||
2. Sections with: key concept, content (verbatim), visual element, text labels
|
||||
3. Data points (all statistics/quotes copied exactly)
|
||||
4. Design instructions from user
|
||||
|
||||
**Instructional Design Process**:
|
||||
**Rules**: Markdown only. No new information. All data verbatim.
|
||||
|
||||
1. **Create high-level outline**:
|
||||
- Title that captures the essence
|
||||
- List all main learning objectives
|
||||
- Identify the logical flow
|
||||
See `references/structured-content-template.md` for detailed format.
|
||||
|
||||
2. **Flesh out each section**:
|
||||
- For each learning objective, create a section
|
||||
- Mix conceptual explanations with practical elements
|
||||
- Preserve all source data **verbatim**—do not summarize or rephrase
|
||||
### Step 3: Recommend Combinations
|
||||
|
||||
3. **Structure for visual communication**:
|
||||
- Identify what becomes a headline
|
||||
- Identify what becomes supporting text
|
||||
- Identify what becomes a visual element
|
||||
- Identify data points, statistics, or quotes
|
||||
|
||||
**Critical Rules**:
|
||||
| Rule | Requirement |
|
||||
|------|-------------|
|
||||
| **Output format** | Markdown only |
|
||||
| **Tone** | Expert trainer: knowledgeable, clear, encouraging |
|
||||
| **No new information** | Do not add anything not in the source |
|
||||
| **Verbatim data** | All statistics, quotes, and facts copied exactly |
|
||||
|
||||
**Structured Content Format**:
|
||||
```markdown
|
||||
# [Infographic Title]
|
||||
|
||||
## Overview
|
||||
[Brief description of what this infographic conveys]
|
||||
|
||||
## Learning Objectives
|
||||
The viewer will understand:
|
||||
1. [Objective 1]
|
||||
2. [Objective 2]
|
||||
3. [Objective 3]
|
||||
|
||||
---
|
||||
|
||||
## Section 1: [Section Title]
|
||||
|
||||
**Key Concept**: [One-sentence summary]
|
||||
|
||||
**Content**:
|
||||
- [Point 1 - verbatim from source]
|
||||
- [Point 2 - verbatim from source]
|
||||
- [Point 3 - verbatim from source]
|
||||
|
||||
**Visual Element**: [What to show visually]
|
||||
|
||||
**Text Labels**:
|
||||
- Headline: "[Exact text for headline]"
|
||||
- Subhead: "[Exact text for subhead]"
|
||||
- Labels: "[Label 1]", "[Label 2]", ...
|
||||
|
||||
---
|
||||
|
||||
## Section 2: [Section Title]
|
||||
[Continue pattern...]
|
||||
|
||||
---
|
||||
|
||||
## Data Points (Verbatim)
|
||||
[All statistics, numbers, quotes exactly as they appear in source]
|
||||
- "[Exact quote or statistic 1]"
|
||||
- "[Exact quote or statistic 2]"
|
||||
|
||||
---
|
||||
|
||||
## Design Instructions
|
||||
[Extracted from user's steering prompt]
|
||||
- Style: [preferences]
|
||||
- Colors: [preferences]
|
||||
- Layout: [preferences]
|
||||
- Other: [any other visual requirements]
|
||||
```
|
||||
|
||||
### Step 3: Generate Layout×Style Recommendations
|
||||
|
||||
Based on analysis and structured content, recommend 3-5 combinations.
|
||||
|
||||
**Selection Criteria**:
|
||||
| Factor | How to Match |
|
||||
|--------|--------------|
|
||||
| **Data structure** | Timeline→linear-progression, Hierarchy→hierarchical-layers, etc. |
|
||||
| **Content tone** | Technical→technical-schematic, Playful→kawaii, etc. |
|
||||
| **Audience** | Business→corporate-memphis, Educational→chalkboard, etc. |
|
||||
| **Complexity** | Simple→sparse layouts, Complex→dense layouts |
|
||||
| **User preferences** | Honor any design instructions from Step 1 |
|
||||
|
||||
**Format each recommendation**:
|
||||
```
|
||||
[Layout] + [Style]: [Brief rationale based on content analysis]
|
||||
```
|
||||
Recommend 3-5 layout×style combinations based on:
|
||||
- Data structure → matching layout
|
||||
- Content tone → matching style
|
||||
- Audience expectations
|
||||
- User design instructions
|
||||
|
||||
### Step 4: Confirm Options
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion.
|
||||
|
||||
**Questions to ask**:
|
||||
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Combination | Always (required) |
|
||||
| Aspect ratio | Always |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
|
||||
**AskUserQuestion format**:
|
||||
|
||||
**Question 1 (Combination)** - always:
|
||||
- Option A (Recommended): [layout] + [style] - [brief rationale]
|
||||
- Option B: [layout] + [style] - [brief rationale]
|
||||
- Option C: [layout] + [style] - [brief rationale]
|
||||
- Custom: Specify your own layout and/or style
|
||||
|
||||
**Question 2 (Aspect)** - always:
|
||||
- landscape (16:9, Recommended) - standard presentation
|
||||
- portrait (9:16) - mobile/social media
|
||||
- square (1:1) - social media posts
|
||||
|
||||
**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
|
||||
- If different: Ask which language to use for all text
|
||||
Present all options in single confirmation:
|
||||
1. **Combination** (always): 3+ options with rationale
|
||||
2. **Aspect** (always): landscape/portrait/square
|
||||
3. **Language** (only if source ≠ user language): which language for text
|
||||
|
||||
### Step 5: Generate Prompt → `prompts/infographic.md`
|
||||
|
||||
Create the image generation prompt.
|
||||
|
||||
**Process**:
|
||||
1. Read layout definition from `references/layouts/<layout>.md`
|
||||
2. Read style definition from `references/styles/<style>.md`
|
||||
3. Read base prompt template from `references/base-prompt.md`
|
||||
4. Combine with structured content from Step 2
|
||||
5. **All text in prompt uses confirmed language**
|
||||
|
||||
**Prompt Structure**:
|
||||
```markdown
|
||||
Topic: [main topic from analysis]
|
||||
Layout: [selected layout]
|
||||
Style: [selected style]
|
||||
Aspect: [confirmed ratio]
|
||||
Language: [confirmed language]
|
||||
|
||||
## Layout Guidelines
|
||||
[From layout definition file]
|
||||
|
||||
## Style Guidelines
|
||||
[From style definition file]
|
||||
|
||||
## Content to Visualize
|
||||
|
||||
### Learning Objectives
|
||||
[From structured-content.md]
|
||||
|
||||
### Sections
|
||||
[From structured-content.md - each section with its visual elements]
|
||||
|
||||
### Data Points (Verbatim)
|
||||
[All exact statistics, quotes, and facts from source]
|
||||
|
||||
## Text Labels (in [language])
|
||||
[All text that appears in the infographic, organized by section]
|
||||
|
||||
## Design Instructions
|
||||
[Any specific visual requirements from user's steering prompt]
|
||||
```
|
||||
Combine:
|
||||
1. Layout definition from `references/layouts/<layout>.md`
|
||||
2. Style definition from `references/styles/<style>.md`
|
||||
3. Base template from `references/base-prompt.md`
|
||||
4. Structured content from Step 2
|
||||
5. All text in confirmed language
|
||||
|
||||
### 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 path: `prompts/infographic.md`
|
||||
- Output path: `infographic.png`
|
||||
- Aspect ratio parameter if supported
|
||||
|
||||
**Error handling**:
|
||||
- On failure, auto-retry once before reporting error
|
||||
- If retry fails, inform user with error details
|
||||
1. Select available image generation skill (ask user if multiple)
|
||||
2. Call with prompt file and output path
|
||||
3. On failure, auto-retry once
|
||||
|
||||
### Step 7: Output Summary
|
||||
|
||||
```
|
||||
Infographic Generated!
|
||||
|
||||
Topic: [topic from analysis]
|
||||
Layout: [layout name]
|
||||
Style: [style name]
|
||||
Aspect: [aspect ratio]
|
||||
Language: [confirmed language]
|
||||
Location: [output directory path]
|
||||
|
||||
Learning Objectives Covered:
|
||||
1. [Objective 1] ✓
|
||||
2. [Objective 2] ✓
|
||||
3. [Objective 3] ✓
|
||||
|
||||
Files:
|
||||
✓ analysis.md
|
||||
✓ structured-content.md
|
||||
✓ prompts/infographic.md
|
||||
✓ infographic.png
|
||||
|
||||
Preview the image to verify it matches your expectations.
|
||||
```
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
Before generating the final image, verify:
|
||||
|
||||
- [ ] All source data preserved verbatim (no summarization)
|
||||
- [ ] Learning objectives clearly represented
|
||||
- [ ] Layout matches information structure
|
||||
- [ ] Style matches content tone and audience
|
||||
- [ ] All text labels in correct language
|
||||
- [ ] Design instructions from user honored
|
||||
- [ ] Visual hierarchy supports comprehension
|
||||
Report: topic, layout, style, aspect, language, output path, files created.
|
||||
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
- `analysis-framework.md` - Instructional design analysis methodology
|
||||
- `structured-content-template.md` - Structured content format and examples
|
||||
- `base-prompt.md` - Base prompt template for image generation
|
||||
- `layouts/<layout>.md` - Detailed layout definitions (20 files)
|
||||
- `styles/<style>.md` - Detailed style definitions (17 files)
|
||||
|
||||
## Notes
|
||||
|
||||
- Layout determines information architecture; style determines visual treatment
|
||||
- Default style `craft-handmade` works well with most layouts
|
||||
- Technical content benefits from `technical-schematic` or `ui-wireframe`
|
||||
- Educational content works well with `chalkboard`, `storybook-watercolor`
|
||||
- Business content pairs with `corporate-memphis`, `dashboard`
|
||||
- All text in the infographic uses the confirmed language
|
||||
- **Never add information not present in the source document**
|
||||
- **Statistics and quotes must be copied exactly—no paraphrasing**
|
||||
- `references/analysis-framework.md` - Analysis methodology
|
||||
- `references/structured-content-template.md` - Content format
|
||||
- `references/base-prompt.md` - Prompt template
|
||||
- `references/layouts/<layout>.md` - 20 layout definitions
|
||||
- `references/styles/<style>.md` - 17 style definitions
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom styles and configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-infographic/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-infographic/EXTEND.md` (user)
|
||||
|
||||
If found, load before Step 1. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|
||||
|
||||
@@ -36,6 +36,6 @@ Modular grid layout with varied cell sizes, like a bento box.
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly overviews (default)
|
||||
- `craft-handmade`: Friendly overviews (default)
|
||||
- `corporate-memphis`: Business summaries
|
||||
- `pixel-art`: Retro feature grids
|
||||
|
||||
@@ -21,8 +21,16 @@ Hand-drawn and paper craft aesthetic with warm, organic feel.
|
||||
- Organic, slightly imperfect shapes
|
||||
- Layered depth with shadows (paper variant)
|
||||
- Simple cartoon elements and icons
|
||||
- Character illustrations (people, personalities in cartoon form)
|
||||
- Ample whitespace, clean composition
|
||||
- Keywords and core concepts highlighted
|
||||
- **Strictly hand-drawn—no realistic or photographic elements**
|
||||
|
||||
## Style Enforcement
|
||||
|
||||
- All imagery must maintain cartoon/illustrated aesthetic
|
||||
- Replace real photos or realistic figures with hand-drawn equivalents
|
||||
- Maintain consistent line weight and illustration style throughout
|
||||
|
||||
## Typography
|
||||
|
||||
|
||||
@@ -1,84 +1,94 @@
|
||||
---
|
||||
name: baoyu-post-to-wechat
|
||||
description: Post content to WeChat Official Account (微信公众号). Supports both article posting (文章) and image-text posting (图文).
|
||||
description: Posts content to WeChat Official Account (微信公众号) via Chrome CDP automation. Supports article posting (文章) with full markdown formatting and image-text posting (图文) with multiple images. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "图文/文章".
|
||||
---
|
||||
|
||||
# Post to WeChat Official Account (微信公众号)
|
||||
|
||||
Post content to WeChat Official Account using Chrome CDP automation.
|
||||
# Post to WeChat Official Account
|
||||
|
||||
## Script Directory
|
||||
|
||||
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
|
||||
**Agent Execution**: Determine this SKILL.md directory as `SKILL_DIR`, then use `${SKILL_DIR}/scripts/<name>.ts`.
|
||||
|
||||
**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/wechat-browser.ts` | Image-text posts (图文) |
|
||||
| `scripts/wechat-article.ts` | Full article posting (文章) |
|
||||
| `scripts/md-to-wechat.ts` | Markdown → WeChat HTML conversion |
|
||||
| `scripts/copy-to-clipboard.ts` | Copy content to clipboard |
|
||||
| `scripts/paste-from-clipboard.ts` | Send real paste keystroke |
|
||||
| `scripts/wechat-article.ts` | Article posting (文章) |
|
||||
| `scripts/md-to-wechat.ts` | Markdown → WeChat HTML |
|
||||
|
||||
## Quick Usage
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
### Image-Text (图文) - Multiple images with title/content
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# From markdown file and image directory
|
||||
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-post-to-wechat/EXTEND.md && echo "project"
|
||||
|
||||
# With explicit parameters
|
||||
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --submit
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
### Article (文章) - Full markdown with formatting
|
||||
┌────────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-post-to-wechat/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default theme | Auto-submit preference | Chrome profile path
|
||||
|
||||
## Usage
|
||||
|
||||
### Image-Text (图文)
|
||||
|
||||
```bash
|
||||
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
|
||||
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img.png --submit
|
||||
```
|
||||
|
||||
### Article (文章)
|
||||
|
||||
```bash
|
||||
# Post markdown article
|
||||
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --theme grace
|
||||
```
|
||||
|
||||
> **Note**: `${SKILL_DIR}` represents this skill's installation directory. Agent replaces with actual path at runtime.
|
||||
## Detailed References
|
||||
|
||||
## References
|
||||
| Topic | Reference |
|
||||
|-------|-----------|
|
||||
| Image-text parameters, auto-compression | [references/image-text-posting.md](references/image-text-posting.md) |
|
||||
| Article themes, image handling | [references/article-posting.md](references/article-posting.md) |
|
||||
|
||||
- **Image-Text Posting**: See `references/image-text-posting.md` for detailed image-text posting guide
|
||||
- **Article Posting**: See `references/article-posting.md` for detailed article posting guide
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Google Chrome installed
|
||||
- `bun` runtime (via `npx -y bun`)
|
||||
- First run: log in to WeChat Official Account in the opened browser window
|
||||
|
||||
## Features
|
||||
## Feature Comparison
|
||||
|
||||
| Feature | Image-Text | Article |
|
||||
|---------|------------|---------|
|
||||
| Multiple images | ✓ (up to 9) | ✓ (inline) |
|
||||
| Markdown support | Title/content extraction | Full formatting |
|
||||
| Auto title compression | ✓ (to 20 chars) | ✗ |
|
||||
| Content compression | ✓ (to 1000 chars) | ✗ |
|
||||
| Auto compression | ✓ (title: 20, content: 1000 chars) | ✗ |
|
||||
| Themes | ✗ | ✓ (default, grace, simple) |
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Google Chrome
|
||||
- First run: log in to WeChat Official Account (session preserved)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- **Not logged in**: First run opens browser - scan QR code to log in, session is preserved
|
||||
- **Chrome not found**: Set `WECHAT_BROWSER_CHROME_PATH` environment variable
|
||||
- **Paste fails**: Check system clipboard permissions
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Not logged in | First run opens browser - scan QR to log in |
|
||||
| Chrome not found | Set `WECHAT_BROWSER_CHROME_PATH` env var |
|
||||
| Paste fails | Check system clipboard permissions |
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-post-to-wechat/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md` (user)
|
||||
|
||||
If found, load before workflow. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
name: baoyu-post-to-x
|
||||
description: Post content and articles to X (Twitter). Supports regular posts with images/videos and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation.
|
||||
description: Posts content and articles to X (Twitter). Supports regular posts with images/videos and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation. Use when user asks to "post to X", "tweet", "publish to Twitter", or "share on X".
|
||||
---
|
||||
|
||||
# Post to X (Twitter)
|
||||
|
||||
Post content, images, videos, and long-form articles to X using real Chrome browser (bypasses anti-bot detection).
|
||||
Posts text, images, videos, and long-form articles to X via real Chrome browser (bypasses anti-bot detection).
|
||||
|
||||
## Script Directory
|
||||
|
||||
@@ -27,11 +27,41 @@ Post content, images, videos, and long-form articles to X using real Chrome brow
|
||||
| `scripts/copy-to-clipboard.ts` | Copy content to clipboard |
|
||||
| `scripts/paste-from-clipboard.ts` | Send real paste keystroke |
|
||||
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-post-to-x/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-post-to-x/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌──────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├──────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-post-to-x/EXTEND.md │ Project directory │
|
||||
├──────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-post-to-x/EXTEND.md │ User home │
|
||||
└──────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default Chrome profile | Auto-submit preference
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Google Chrome or Chromium installed
|
||||
- `bun` installed (for running scripts)
|
||||
- First run: log in to X in the opened browser window
|
||||
- Google Chrome or Chromium
|
||||
- `bun` runtime
|
||||
- First run: log in to X manually (session saved)
|
||||
|
||||
## References
|
||||
|
||||
@@ -45,72 +75,57 @@ Post content, images, videos, and long-form articles to X using real Chrome brow
|
||||
Text + up to 4 images.
|
||||
|
||||
```bash
|
||||
# Preview mode (doesn't post)
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello from Claude!" --image ./screenshot.png
|
||||
|
||||
# Actually post
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --submit
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png # Preview
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --submit # Post
|
||||
```
|
||||
|
||||
> **Note**: `${SKILL_DIR}` represents this skill's installation directory. Agent replaces with actual path at runtime.
|
||||
|
||||
**Parameters**:
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `<text>` | Post content (positional argument) |
|
||||
| `--image <path>` | Image file path (can be repeated, max 4) |
|
||||
| `--submit` | Actually post (default: preview only) |
|
||||
| `--profile <dir>` | Custom Chrome profile directory |
|
||||
| `<text>` | Post content (positional) |
|
||||
| `--image <path>` | Image file (repeatable, max 4) |
|
||||
| `--submit` | Post (default: preview) |
|
||||
| `--profile <dir>` | Custom Chrome profile |
|
||||
|
||||
---
|
||||
|
||||
## Video Posts
|
||||
|
||||
Text + video file (MP4, MOV, WebM).
|
||||
Text + video file.
|
||||
|
||||
```bash
|
||||
# Preview mode (doesn't post)
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Check out this video!" --video ./clip.mp4
|
||||
|
||||
# Actually post
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Amazing content" --video ./demo.mp4 --submit
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Check this out!" --video ./clip.mp4 # Preview
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Amazing content" --video ./demo.mp4 --submit # Post
|
||||
```
|
||||
|
||||
**Parameters**:
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `<text>` | Post content (positional argument) |
|
||||
| `--video <path>` | Video file path (required) |
|
||||
| `--submit` | Actually post (default: preview only) |
|
||||
| `--profile <dir>` | Custom Chrome profile directory |
|
||||
| `<text>` | Post content (positional) |
|
||||
| `--video <path>` | Video file (MP4, MOV, WebM) |
|
||||
| `--submit` | Post (default: preview) |
|
||||
| `--profile <dir>` | Custom Chrome profile |
|
||||
|
||||
**Video Limits**:
|
||||
- Regular accounts: 140 seconds max
|
||||
- X Premium: up to 60 minutes
|
||||
- Supported formats: MP4, MOV, WebM
|
||||
- Processing time: 30-60 seconds depending on file size
|
||||
**Limits**: Regular 140s max, Premium 60min. Processing: 30-60s.
|
||||
|
||||
---
|
||||
|
||||
## Quote Tweets
|
||||
|
||||
Quote an existing tweet with your comment - a way to share content while giving credit to the original creator.
|
||||
Quote an existing tweet with comment.
|
||||
|
||||
```bash
|
||||
# Preview mode (doesn't post)
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123456789 "Great insight!"
|
||||
|
||||
# Actually post
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123456789 "I agree!" --submit
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123 "Great insight!" # Preview
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123 "I agree!" --submit # Post
|
||||
```
|
||||
|
||||
**Parameters**:
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `<tweet-url>` | URL of the tweet to quote (positional argument) |
|
||||
| `<comment>` | Your comment text (positional argument, optional) |
|
||||
| `--submit` | Actually post (default: preview only) |
|
||||
| `--profile <dir>` | Custom Chrome profile directory |
|
||||
| `<tweet-url>` | URL to quote (positional) |
|
||||
| `<comment>` | Comment text (positional, optional) |
|
||||
| `--submit` | Post (default: preview) |
|
||||
| `--profile <dir>` | Custom Chrome profile |
|
||||
|
||||
---
|
||||
|
||||
@@ -119,47 +134,29 @@ npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123456789 "
|
||||
Long-form Markdown articles (requires X Premium).
|
||||
|
||||
```bash
|
||||
# Preview mode
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md
|
||||
|
||||
# With cover image
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg
|
||||
|
||||
# Publish
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md # Preview
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg # With cover
|
||||
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit # Publish
|
||||
```
|
||||
|
||||
**Parameters**:
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `<markdown>` | Markdown file path (positional argument) |
|
||||
| `--cover <path>` | Cover image path |
|
||||
| `--title <text>` | Override article title |
|
||||
| `--submit` | Actually publish (default: preview only) |
|
||||
| `<markdown>` | Markdown file (positional) |
|
||||
| `--cover <path>` | Cover image |
|
||||
| `--title <text>` | Override title |
|
||||
| `--submit` | Publish (default: preview) |
|
||||
|
||||
**Frontmatter** (optional):
|
||||
```yaml
|
||||
---
|
||||
title: My Article Title
|
||||
cover_image: /path/to/cover.jpg
|
||||
---
|
||||
```
|
||||
**Frontmatter**: `title`, `cover_image` supported in YAML front matter.
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- First run requires manual login (session is saved)
|
||||
- Always preview before using `--submit`
|
||||
- Browser closes automatically after operation
|
||||
- Supports macOS, Linux, and Windows
|
||||
- First run: manual login required (session persists)
|
||||
- Always preview before `--submit`
|
||||
- Cross-platform: macOS, Linux, Windows
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-post-to-x/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-post-to-x/EXTEND.md` (user)
|
||||
|
||||
If found, load before workflow. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
+558
-376
File diff suppressed because it is too large
Load Diff
@@ -52,8 +52,33 @@ You are "The Architect" - a master visual storyteller creating presentation slid
|
||||
|
||||
## STYLE_INSTRUCTIONS
|
||||
|
||||
[Insert style-specific instructions here]
|
||||
[Extract from outline.md - do NOT re-read style files]
|
||||
|
||||
The STYLE_INSTRUCTIONS block from the outline contains:
|
||||
- Design Aesthetic
|
||||
- Background (Texture + Base Color)
|
||||
- Typography (Headlines + Body descriptions)
|
||||
- Color Palette (with hex codes)
|
||||
- Visual Elements
|
||||
- Density Guidelines
|
||||
- Style Rules (Do/Don't)
|
||||
|
||||
Copy the entire `<STYLE_INSTRUCTIONS>...</STYLE_INSTRUCTIONS>` block from the outline here.
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the slide image based on the content provided below:
|
||||
## SLIDE CONTENT
|
||||
|
||||
[Insert slide-specific content from outline]
|
||||
|
||||
Include:
|
||||
- Slide number and filename
|
||||
- Type (Cover/Content/Back Cover)
|
||||
- Narrative Goal
|
||||
- Key Content (Headline, Sub-headline, Body points)
|
||||
- Visual description
|
||||
- Layout guidance (if specified)
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the slide image based on the content provided above.
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
# EXTEND.md Schema
|
||||
|
||||
Structure for user preferences in `.baoyu-skills/baoyu-slide-deck/EXTEND.md`.
|
||||
|
||||
## Full Schema
|
||||
|
||||
```yaml
|
||||
# Slide Deck Preferences
|
||||
|
||||
## Defaults
|
||||
style: blueprint # Preset name OR "custom"
|
||||
audience: general # beginners | intermediate | experts | executives | general
|
||||
language: auto # auto | en | zh | ja | etc.
|
||||
review: true # true = review outline before generation
|
||||
|
||||
## Custom Dimensions (only when style: custom)
|
||||
dimensions:
|
||||
texture: clean # clean | grid | organic | pixel | paper
|
||||
mood: professional # professional | warm | cool | vibrant | dark | neutral
|
||||
typography: geometric # geometric | humanist | handwritten | editorial | technical
|
||||
density: balanced # minimal | balanced | dense
|
||||
|
||||
## Custom Styles (optional)
|
||||
custom_styles:
|
||||
my-style:
|
||||
texture: organic
|
||||
mood: warm
|
||||
typography: humanist
|
||||
density: minimal
|
||||
description: "My custom warm and friendly style"
|
||||
```
|
||||
|
||||
## Field Descriptions
|
||||
|
||||
### Defaults
|
||||
|
||||
| Field | Type | Default | Description |
|
||||
|-------|------|---------|-------------|
|
||||
| `style` | string | `blueprint` | Preset name, `custom`, or custom style name |
|
||||
| `audience` | string | `general` | Default target audience |
|
||||
| `language` | string | `auto` | Output language (auto = detect from input) |
|
||||
| `review` | boolean | `true` | Show outline review before generation |
|
||||
|
||||
### Custom Dimensions
|
||||
|
||||
Only used when `style: custom`. Defines dimension values directly.
|
||||
|
||||
| Field | Options | Default |
|
||||
|-------|---------|---------|
|
||||
| `texture` | clean, grid, organic, pixel, paper | clean |
|
||||
| `mood` | professional, warm, cool, vibrant, dark, neutral | professional |
|
||||
| `typography` | geometric, humanist, handwritten, editorial, technical | geometric |
|
||||
| `density` | minimal, balanced, dense | balanced |
|
||||
|
||||
### Custom Styles
|
||||
|
||||
Define reusable custom dimension combinations.
|
||||
|
||||
```yaml
|
||||
custom_styles:
|
||||
style-name:
|
||||
texture: <texture>
|
||||
mood: <mood>
|
||||
typography: <typography>
|
||||
density: <density>
|
||||
description: "Optional description"
|
||||
```
|
||||
|
||||
Then use with: `/baoyu-slide-deck content.md --style style-name`
|
||||
|
||||
## Minimal Examples
|
||||
|
||||
### Just change default style
|
||||
|
||||
```yaml
|
||||
style: sketch-notes
|
||||
```
|
||||
|
||||
### Prefer no reviews
|
||||
|
||||
```yaml
|
||||
review: false
|
||||
```
|
||||
|
||||
### Custom default dimensions
|
||||
|
||||
```yaml
|
||||
style: custom
|
||||
dimensions:
|
||||
texture: organic
|
||||
mood: professional
|
||||
typography: humanist
|
||||
density: minimal
|
||||
```
|
||||
|
||||
### Define reusable custom style
|
||||
|
||||
```yaml
|
||||
custom_styles:
|
||||
brand-style:
|
||||
texture: clean
|
||||
mood: vibrant
|
||||
typography: editorial
|
||||
density: balanced
|
||||
description: "Company brand style"
|
||||
```
|
||||
|
||||
## File Locations
|
||||
|
||||
Priority order (first found wins):
|
||||
|
||||
1. `.baoyu-skills/baoyu-slide-deck/EXTEND.md` (project)
|
||||
2. `$HOME/.baoyu-skills/baoyu-slide-deck/EXTEND.md` (user)
|
||||
|
||||
## First-Time Setup
|
||||
|
||||
When no EXTEND.md exists, the skill prompts for initial preferences:
|
||||
|
||||
1. Preferred style (preset or custom)
|
||||
2. Default audience
|
||||
3. Language preference
|
||||
4. Review preference
|
||||
5. Save location (project or user)
|
||||
|
||||
Creates EXTEND.md at chosen location.
|
||||
@@ -0,0 +1,208 @@
|
||||
# Design Guidelines
|
||||
|
||||
Detailed design principles for slide decks.
|
||||
|
||||
## Audience Guidelines
|
||||
|
||||
Design decisions adapt to target audience. Use `--audience` to set.
|
||||
|
||||
| Audience | Content Density | Visual Style | Terminology | Slides |
|
||||
|----------|-----------------|--------------|-------------|--------|
|
||||
| `beginners` | Low | Friendly, illustrative | Plain language | 8-15 |
|
||||
| `intermediate` | Medium | Balanced, structured | Some jargon OK | 10-20 |
|
||||
| `experts` | High | Data-rich, precise | Technical terms | 12-25 |
|
||||
| `executives` | Low-Medium | Clean, impactful | Business language | 8-12 |
|
||||
| `general` | Medium | Accessible, engaging | Minimal jargon | 10-18 |
|
||||
|
||||
### Audience → Density Mapping
|
||||
|
||||
Recommended density dimension based on audience:
|
||||
|
||||
| Audience | Recommended Density | Rationale |
|
||||
|----------|-------------------|-----------|
|
||||
| `executives` | minimal | One insight per slide, respect time |
|
||||
| `beginners` | minimal → balanced | Single concepts, build understanding |
|
||||
| `general` | balanced | Accessible but informative |
|
||||
| `intermediate` | balanced | Standard information density |
|
||||
| `experts` | balanced → dense | Can handle more data per slide |
|
||||
|
||||
**Automatic Density Selection**:
|
||||
- If `--audience executives` → default to `minimal` density
|
||||
- If `--audience beginners` → default to `minimal` or `balanced`
|
||||
- If `--audience experts` → allow `dense` density
|
||||
- Otherwise → default to `balanced`
|
||||
|
||||
### Audience-Specific Principles
|
||||
|
||||
**Beginners**:
|
||||
- One concept per slide
|
||||
- Visual metaphors over abstract diagrams
|
||||
- Step-by-step progression
|
||||
- Generous whitespace
|
||||
|
||||
**Experts**:
|
||||
- Multiple data points per slide acceptable
|
||||
- Technical diagrams with precise labels
|
||||
- Assume domain knowledge
|
||||
- Dense but organized information
|
||||
|
||||
**Executives**:
|
||||
- Lead with insights, not data
|
||||
- "So what?" on every slide
|
||||
- Decision-enabling content
|
||||
- Bottom-line upfront (BLUF)
|
||||
|
||||
## Visual Hierarchy Principles
|
||||
|
||||
| Principle | Description |
|
||||
|-----------|-------------|
|
||||
| Focal Point | ONE dominant element per slide draws attention first |
|
||||
| Rule of Thirds | Position key elements at grid intersections |
|
||||
| Z-Pattern | Guide eye: top-left → top-right → bottom-left → bottom-right |
|
||||
| Size Contrast | Headlines 2-3x larger than body text |
|
||||
| Breathing Room | Minimum 10% margin from all edges |
|
||||
|
||||
## Content Density
|
||||
|
||||
See `references/dimensions/density.md` for full density dimension specs.
|
||||
|
||||
| Level | Description | Use When |
|
||||
|-------|-------------|----------|
|
||||
| High | Multiple data points, detailed charts, dense text | Expert audience, technical reviews |
|
||||
| Medium | Key points with supporting details | General business, mixed audiences |
|
||||
| Low | One main idea, large visuals, minimal text | Beginners, keynotes, emotional impact |
|
||||
|
||||
**High-Density Principles** (McKinsey-style):
|
||||
- Every element earns its space
|
||||
- Data speaks louder than decoration
|
||||
- Annotations explain insights, not describe data
|
||||
- White space is strategic, not filler
|
||||
|
||||
**Density by Slide Type**:
|
||||
| Slide Type | Recommended Density |
|
||||
|------------|-------------------|
|
||||
| Cover/Title | minimal |
|
||||
| Agenda/Overview | balanced |
|
||||
| Content/Analysis | balanced or dense |
|
||||
| Data/Metrics | dense |
|
||||
| Quote/Impact | minimal |
|
||||
| Summary/Takeaway | balanced |
|
||||
|
||||
## Color Selection
|
||||
|
||||
See `references/dimensions/mood.md` for full mood dimension specs.
|
||||
|
||||
**Content-First Approach**:
|
||||
1. Analyze content topic, mood, and industry
|
||||
2. Consider target audience expectations
|
||||
3. Match palette to subject matter
|
||||
4. Ensure strong contrast for readability
|
||||
|
||||
**Quick Palette Guide**:
|
||||
| Content Type | Recommended Mood |
|
||||
|--------------|-----------------|
|
||||
| Technical/Architecture | cool |
|
||||
| Educational/Friendly | warm |
|
||||
| Corporate/Professional | professional |
|
||||
| Creative/Artistic | vibrant |
|
||||
| Scientific/Medical | cool or neutral |
|
||||
| Entertainment/Gaming | dark or vibrant |
|
||||
|
||||
## Typography Principles
|
||||
|
||||
See `references/dimensions/typography.md` for full typography dimension specs.
|
||||
|
||||
| Element | Treatment |
|
||||
|---------|-----------|
|
||||
| Headlines | Bold, 2-3x body size, narrative style |
|
||||
| Body Text | Regular weight, readable size |
|
||||
| Captions | Smaller, lighter weight |
|
||||
| Data Labels | Monospace for technical content |
|
||||
| Emphasis | Use bold or color, not underlines |
|
||||
|
||||
## Font Recommendations
|
||||
|
||||
**English Fonts**:
|
||||
| Font | Style | Best For |
|
||||
|------|-------|----------|
|
||||
| Liter | Sans-serif, geometric | Modern, clean, technical |
|
||||
| HedvigLettersSans | Sans-serif, distinctive | Brand-forward, creative |
|
||||
| Oranienbaum | High-contrast serif | Elegant, classical |
|
||||
| SortsMillGoudy | Classical serif | Traditional, readable |
|
||||
| Coda | Round sans-serif | Friendly, approachable |
|
||||
|
||||
**Chinese Fonts**:
|
||||
| Font | Style | Best For |
|
||||
|------|-------|----------|
|
||||
| MiSans | Modern sans-serif | Clean, versatile, screen-optimized |
|
||||
| Noto Sans SC | Neutral sans-serif | Standard, multilingual |
|
||||
| siyuanSongti | Refined Song typeface | Elegant, editorial |
|
||||
| alimamashuheiti | Geometric sans-serif | Commercial, structured |
|
||||
| LXGW Bright | Song-Kai hybrid | Warm, readable |
|
||||
|
||||
**Multilingual Pairing**:
|
||||
| Use Case | English | Chinese |
|
||||
|----------|---------|---------|
|
||||
| Technical | Liter | MiSans |
|
||||
| Editorial | Oranienbaum | siyuanSongti |
|
||||
| Friendly | Coda | LXGW Bright |
|
||||
| Corporate | HedvigLettersSans | alimamashuheiti |
|
||||
|
||||
## Visual Elements Reference
|
||||
|
||||
See `references/dimensions/texture.md` for full texture dimension specs.
|
||||
|
||||
### Background Treatments
|
||||
|
||||
| Treatment | Description | Best For |
|
||||
|-----------|-------------|----------|
|
||||
| Solid color | Single background color | Clean, minimal |
|
||||
| Split background | Two colors, diagonal or vertical | Contrast, sections |
|
||||
| Gradient | Subtle vertical or diagonal fade | Modern, dynamic |
|
||||
| Textured | Pattern or texture overlay | Character, style |
|
||||
|
||||
### Typography Treatments
|
||||
|
||||
| Treatment | Description | Best For |
|
||||
|-----------|-------------|----------|
|
||||
| Size contrast | 3-4x difference headline vs body | Impact, hierarchy |
|
||||
| All-caps headers | Uppercase with letter spacing | Authority, structure |
|
||||
| Monospace data | Fixed-width for numbers/code | Technical, precision |
|
||||
| Hand-drawn | Organic, imperfect letterforms | Friendly, approachable |
|
||||
|
||||
### Geometric Accents
|
||||
|
||||
| Element | Description | Best For |
|
||||
|---------|-------------|----------|
|
||||
| Diagonal dividers | Angled section separators | Energy, movement |
|
||||
| Corner brackets | L-shaped frames | Focus, framing |
|
||||
| Circles/hexagons | Shape frames for images | Modern, tech |
|
||||
| Underline accents | Thick lines under headers | Emphasis, hierarchy |
|
||||
|
||||
## Consistency Requirements
|
||||
|
||||
| Element | Guideline |
|
||||
|---------|-----------|
|
||||
| Spacing | Consistent margins and padding throughout |
|
||||
| Colors | Maximum 3-4 colors per slide, palette consistent across deck |
|
||||
| Typography | Same font families and sizes for same content types |
|
||||
| Visual Language | Repeat patterns, shapes, and treatments |
|
||||
|
||||
## Dimension Combination Guide
|
||||
|
||||
When combining dimensions, consider compatibility:
|
||||
|
||||
| Audience | Recommended Dimensions |
|
||||
|----------|----------------------|
|
||||
| Executives | clean + neutral + geometric + minimal |
|
||||
| Beginners | organic + warm + humanist + minimal |
|
||||
| General | any texture + any mood + humanist/geometric + balanced |
|
||||
| Experts | grid/clean + cool + technical + balanced/dense |
|
||||
|
||||
| Content Type | Recommended Dimensions |
|
||||
|--------------|----------------------|
|
||||
| Tutorial | organic + warm + handwritten + balanced |
|
||||
| Technical | grid + cool + technical + balanced |
|
||||
| Business | clean + professional + geometric + balanced |
|
||||
| Creative | organic + vibrant + humanist + balanced |
|
||||
| Data-heavy | clean + cool + technical + dense |
|
||||
@@ -0,0 +1,118 @@
|
||||
# Density Dimension
|
||||
|
||||
Information density per slide.
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Content/Slide | Whitespace | Best For |
|
||||
|--------|---------------|------------|----------|
|
||||
| `minimal` | One focus point | Maximum | Executive briefings, keynotes, emotional impact |
|
||||
| `balanced` | 2-3 key points | Standard | General presentations, mixed audiences |
|
||||
| `dense` | Multiple data points | Compact | Data-heavy, technical reviews, detailed analysis |
|
||||
|
||||
## Rendering Guidelines
|
||||
|
||||
### minimal
|
||||
|
||||
- ONE main idea per slide
|
||||
- Large visuals dominate
|
||||
- Minimal text (headline + 1-2 lines max)
|
||||
- Generous margins (15%+ from edges)
|
||||
- Maximum breathing room between elements
|
||||
- Let single element carry full weight
|
||||
|
||||
**Principles**:
|
||||
- "One slide, one message"
|
||||
- Visual > text
|
||||
- Empty space is intentional
|
||||
- Every element must earn its space
|
||||
|
||||
### balanced
|
||||
|
||||
- 2-3 key points per slide
|
||||
- Standard margins (10% from edges)
|
||||
- Balanced text/visual ratio
|
||||
- Clear hierarchy with supporting details
|
||||
- Comfortable reading experience
|
||||
|
||||
**Principles**:
|
||||
- Primary point + supporting context
|
||||
- Visuals complement text
|
||||
- Structured but not crowded
|
||||
- Good for diverse audiences
|
||||
|
||||
### dense
|
||||
|
||||
- Multiple data points acceptable
|
||||
- Compact margins (5-8% from edges)
|
||||
- Information-rich layouts
|
||||
- Charts, tables, detailed annotations
|
||||
- Assume engaged, attentive audience
|
||||
|
||||
**Principles**:
|
||||
- Data speaks louder than decoration
|
||||
- Annotations explain insights
|
||||
- White space is strategic
|
||||
- Every pixel serves a purpose
|
||||
|
||||
## Audience → Density Mapping
|
||||
|
||||
| Audience | Recommended Density |
|
||||
|----------|-------------------|
|
||||
| Executives | minimal |
|
||||
| Beginners | minimal to balanced |
|
||||
| General | balanced |
|
||||
| Intermediate | balanced |
|
||||
| Experts | balanced to dense |
|
||||
|
||||
## Slide Type → Density Guidelines
|
||||
|
||||
| Slide Type | Recommended Density |
|
||||
|------------|-------------------|
|
||||
| Cover/Title | minimal |
|
||||
| Section break | minimal |
|
||||
| Quote/Impact | minimal |
|
||||
| Agenda/Overview | balanced |
|
||||
| Content/Analysis | balanced or dense |
|
||||
| Summary/Takeaway | balanced |
|
||||
| Data/Metrics | dense |
|
||||
|
||||
## Content Guidelines Per Density
|
||||
|
||||
### minimal
|
||||
|
||||
| Element | Guideline |
|
||||
|---------|-----------|
|
||||
| Headlines | Large (40-60pt equivalent) |
|
||||
| Body text | Minimal or none |
|
||||
| Bullet points | 0-2 max |
|
||||
| Visual elements | 1 dominant element |
|
||||
| Charts/Data | 1 key stat only |
|
||||
|
||||
### balanced
|
||||
|
||||
| Element | Guideline |
|
||||
|---------|-----------|
|
||||
| Headlines | Medium-large (32-48pt equivalent) |
|
||||
| Body text | 2-4 lines |
|
||||
| Bullet points | 2-4 |
|
||||
| Visual elements | 1-2 elements |
|
||||
| Charts/Data | Simple charts OK |
|
||||
|
||||
### dense
|
||||
|
||||
| Element | Guideline |
|
||||
|---------|-----------|
|
||||
| Headlines | Medium (24-36pt equivalent) |
|
||||
| Body text | Multiple paragraphs OK |
|
||||
| Bullet points | 4-6+ |
|
||||
| Visual elements | Multiple allowed |
|
||||
| Charts/Data | Complex charts, tables OK |
|
||||
|
||||
## Combination Notes
|
||||
|
||||
| Density | Works Best With | Avoid With |
|
||||
|---------|-----------------|------------|
|
||||
| minimal | neutral mood, geometric typography | dense data content |
|
||||
| balanced | any mood/typography | extremes (too sparse or too packed) |
|
||||
| dense | cool mood, technical typography | handwritten typography, organic texture |
|
||||
@@ -0,0 +1,135 @@
|
||||
# Mood Dimension
|
||||
|
||||
Color temperature and palette style.
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Color Temperature | Palette Style | Best For |
|
||||
|--------|-------------------|---------------|----------|
|
||||
| `professional` | Cool-neutral | Navy, gold, structured grays | Business, investor, corporate |
|
||||
| `warm` | Warm | Earth tones, oranges, natural colors | Education, friendly, approachable |
|
||||
| `cool` | Cool | Blues, grays, cyan, teal | Technical, data, analytical |
|
||||
| `vibrant` | Varied | High saturation, bold colors | Marketing, creative, attention-grabbing |
|
||||
| `dark` | Dark | Deep backgrounds with bright accents | Entertainment, gaming, atmospheric |
|
||||
| `neutral` | Neutral | Minimal color, grayscale focus | Executive, minimal, sophisticated |
|
||||
|
||||
## Palette Specifications
|
||||
|
||||
### professional
|
||||
|
||||
```
|
||||
Background: #FFFFFF (Pure White)
|
||||
Primary Text: #1E3A5F (Navy)
|
||||
Secondary Text: #4A5568 (Dark Gray)
|
||||
Accent 1: #C9A227 (Gold)
|
||||
Accent 2: #3D5A80 (Light Navy)
|
||||
```
|
||||
|
||||
### warm
|
||||
|
||||
```
|
||||
Background: #FAF8F0 (Warm Off-White)
|
||||
Primary Text: #2C3E50 (Deep Charcoal)
|
||||
Secondary Text: #4A4A4A (Deep Brown)
|
||||
Accent 1: #F4A261 (Soft Orange)
|
||||
Accent 2: #E9C46A (Mustard Yellow)
|
||||
Accent 3: #87A96B (Sage Green)
|
||||
```
|
||||
|
||||
### cool
|
||||
|
||||
```
|
||||
Background: #FAF8F5 (Blueprint Off-White)
|
||||
Primary Text: #334155 (Deep Slate)
|
||||
Secondary Text: #64748B (Slate Gray)
|
||||
Accent 1: #2563EB (Engineering Blue)
|
||||
Accent 2: #1E3A5F (Navy Blue)
|
||||
Accent 3: #BFDBFE (Light Blue)
|
||||
```
|
||||
|
||||
### vibrant
|
||||
|
||||
```
|
||||
Background: #FFFFFF or #1A1A2E (Light or Dark)
|
||||
Primary Text: #1A1A2E or #FFFFFF
|
||||
Accent 1: #E94560 (Coral Red)
|
||||
Accent 2: #0F3460 (Deep Blue)
|
||||
Accent 3: #16C79A (Teal Green)
|
||||
Accent 4: #F9B208 (Golden Yellow)
|
||||
```
|
||||
|
||||
### dark
|
||||
|
||||
```
|
||||
Background: #0D1117 (Deep Black)
|
||||
Primary Text: #E6EDF3 (Soft White)
|
||||
Secondary Text: #8B949E (Muted Gray)
|
||||
Accent 1: #58A6FF (Bright Blue)
|
||||
Accent 2: #7EE787 (Bright Green)
|
||||
Accent 3: #FF7B72 (Coral)
|
||||
```
|
||||
|
||||
### neutral
|
||||
|
||||
```
|
||||
Background: #FFFFFF (Pure White)
|
||||
Primary Text: #18181B (Near Black)
|
||||
Secondary Text: #71717A (Medium Gray)
|
||||
Accent 1: #18181B (Black)
|
||||
Accent 2: #A1A1AA (Light Gray)
|
||||
```
|
||||
|
||||
## Rendering Guidelines
|
||||
|
||||
### professional
|
||||
|
||||
- Restrained use of accent colors
|
||||
- Gold for emphasis only
|
||||
- Clean, institutional feel
|
||||
- Balanced contrast
|
||||
|
||||
### warm
|
||||
|
||||
- Generous use of warm tones
|
||||
- Natural, approachable colors
|
||||
- Soft transitions between colors
|
||||
- Welcoming atmosphere
|
||||
|
||||
### cool
|
||||
|
||||
- Blue-dominant palette
|
||||
- Technical precision in color use
|
||||
- High contrast for clarity
|
||||
- Analytical, trustworthy feel
|
||||
|
||||
### vibrant
|
||||
|
||||
- Bold color combinations
|
||||
- High saturation throughout
|
||||
- Dynamic color contrasts
|
||||
- Energetic visual presence
|
||||
|
||||
### dark
|
||||
|
||||
- Deep backgrounds dominate
|
||||
- Accent colors pop against dark
|
||||
- Glowing/luminous effects
|
||||
- Cinematic atmosphere
|
||||
|
||||
### neutral
|
||||
|
||||
- Minimal color usage
|
||||
- Typography carries weight
|
||||
- Grayscale hierarchy
|
||||
- Maximum sophistication
|
||||
|
||||
## Combination Notes
|
||||
|
||||
| Mood | Works Best With | Avoid With |
|
||||
|------|-----------------|------------|
|
||||
| professional | clean texture, geometric typography | organic texture, handwritten |
|
||||
| warm | organic texture, humanist typography | pixel texture, minimal density |
|
||||
| cool | grid texture, technical typography | paper texture, handwritten |
|
||||
| vibrant | pixel/organic texture, editorial typography | neutral mood overlaps |
|
||||
| dark | clean/pixel texture, technical typography | paper texture |
|
||||
| neutral | clean texture, geometric typography | organic texture, vibrant elements |
|
||||
@@ -0,0 +1,126 @@
|
||||
# Preset → Dimension Mapping
|
||||
|
||||
Maps 16 preset styles to their dimension combinations.
|
||||
|
||||
## Mapping Table
|
||||
|
||||
| Preset | Texture | Mood | Typography | Density |
|
||||
|--------|---------|------|------------|---------|
|
||||
| blueprint | grid | cool | technical | balanced |
|
||||
| chalkboard | organic | warm | handwritten | balanced |
|
||||
| corporate | clean | professional | geometric | balanced |
|
||||
| minimal | clean | neutral | geometric | minimal |
|
||||
| sketch-notes | organic | warm | handwritten | balanced |
|
||||
| watercolor | organic | warm | humanist | minimal |
|
||||
| dark-atmospheric | clean | dark | editorial | balanced |
|
||||
| notion | clean | neutral | geometric | dense |
|
||||
| bold-editorial | clean | vibrant | editorial | balanced |
|
||||
| editorial-infographic | clean | cool | editorial | dense |
|
||||
| fantasy-animation | organic | vibrant | handwritten | minimal |
|
||||
| intuition-machine | clean | cool | technical | dense |
|
||||
| pixel-art | pixel | vibrant | technical | balanced |
|
||||
| scientific | clean | cool | technical | dense |
|
||||
| vector-illustration | clean | vibrant | humanist | balanced |
|
||||
| vintage | paper | warm | editorial | balanced |
|
||||
|
||||
## Preset Details
|
||||
|
||||
### blueprint
|
||||
- **Dimensions**: grid + cool + technical + balanced
|
||||
- **Feel**: Engineering precision, analytical clarity
|
||||
- **Auto-select**: architecture, system, data, analysis, technical
|
||||
|
||||
### chalkboard
|
||||
- **Dimensions**: organic + warm + handwritten + balanced
|
||||
- **Feel**: Classroom warmth, educational
|
||||
- **Auto-select**: classroom, teaching, school, chalkboard
|
||||
|
||||
### corporate
|
||||
- **Dimensions**: clean + professional + geometric + balanced
|
||||
- **Feel**: Business credibility, institutional trust
|
||||
- **Auto-select**: investor, quarterly, business, corporate
|
||||
|
||||
### minimal
|
||||
- **Dimensions**: clean + neutral + geometric + minimal
|
||||
- **Feel**: Maximum sophistication, executive focus
|
||||
- **Auto-select**: executive, minimal, clean, simple
|
||||
|
||||
### sketch-notes
|
||||
- **Dimensions**: organic + warm + handwritten + balanced
|
||||
- **Feel**: Friendly learning, approachable education
|
||||
- **Auto-select**: tutorial, learn, education, guide, beginner
|
||||
|
||||
### watercolor
|
||||
- **Dimensions**: organic + warm + humanist + minimal
|
||||
- **Feel**: Artistic, natural, lifestyle
|
||||
- **Auto-select**: lifestyle, wellness, travel, artistic
|
||||
|
||||
### dark-atmospheric
|
||||
- **Dimensions**: clean + dark + editorial + balanced
|
||||
- **Feel**: Cinematic, entertainment
|
||||
- **Auto-select**: entertainment, music, gaming, atmospheric
|
||||
|
||||
### notion
|
||||
- **Dimensions**: clean + neutral + geometric + dense
|
||||
- **Feel**: SaaS professional, data-forward
|
||||
- **Auto-select**: saas, product, dashboard, metrics
|
||||
|
||||
### bold-editorial
|
||||
- **Dimensions**: clean + vibrant + editorial + balanced
|
||||
- **Feel**: Magazine impact, keynote drama
|
||||
- **Auto-select**: launch, marketing, keynote, magazine
|
||||
|
||||
### editorial-infographic
|
||||
- **Dimensions**: clean + cool + editorial + dense
|
||||
- **Feel**: Publication quality, informative
|
||||
- **Auto-select**: explainer, journalism, science communication
|
||||
|
||||
### fantasy-animation
|
||||
- **Dimensions**: organic + vibrant + handwritten + minimal
|
||||
- **Feel**: Magical, storytelling
|
||||
- **Auto-select**: story, fantasy, animation, magical
|
||||
|
||||
### intuition-machine
|
||||
- **Dimensions**: clean + cool + technical + dense
|
||||
- **Feel**: Technical briefing, bilingual documentation
|
||||
- **Auto-select**: briefing, academic, research, bilingual
|
||||
|
||||
### pixel-art
|
||||
- **Dimensions**: pixel + vibrant + technical + balanced
|
||||
- **Feel**: Retro gaming, developer culture
|
||||
- **Auto-select**: gaming, retro, pixel, developer
|
||||
|
||||
### scientific
|
||||
- **Dimensions**: clean + cool + technical + dense
|
||||
- **Feel**: Academic precision, research quality
|
||||
- **Auto-select**: biology, chemistry, medical, scientific
|
||||
|
||||
### vector-illustration
|
||||
- **Dimensions**: clean + vibrant + humanist + balanced
|
||||
- **Feel**: Flat design, friendly creative
|
||||
- **Auto-select**: creative, children, kids, cute
|
||||
|
||||
### vintage
|
||||
- **Dimensions**: paper + warm + editorial + balanced
|
||||
- **Feel**: Historical, heritage storytelling
|
||||
- **Auto-select**: history, heritage, vintage, expedition
|
||||
|
||||
## Building Custom Combinations
|
||||
|
||||
When user selects "Custom dimensions", combine any:
|
||||
|
||||
- **Texture** (5): clean, grid, organic, pixel, paper
|
||||
- **Mood** (6): professional, warm, cool, vibrant, dark, neutral
|
||||
- **Typography** (5): geometric, humanist, handwritten, editorial, technical
|
||||
- **Density** (3): minimal, balanced, dense
|
||||
|
||||
Total possible combinations: 5 × 6 × 5 × 3 = **450 unique styles**
|
||||
|
||||
## Recommended Combinations (Beyond Presets)
|
||||
|
||||
| Custom Name | Texture | Mood | Typography | Density | Use Case |
|
||||
|-------------|---------|------|------------|---------|----------|
|
||||
| tech-minimal | clean | neutral | technical | minimal | Developer keynotes |
|
||||
| warm-editorial | paper | warm | editorial | balanced | Heritage brands |
|
||||
| dark-technical | grid | dark | technical | dense | Security, DevOps |
|
||||
| playful-clean | clean | vibrant | humanist | balanced | Startups, apps |
|
||||
@@ -0,0 +1,60 @@
|
||||
# Texture Dimension
|
||||
|
||||
Visual texture and background treatment.
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Background | Visual Elements | Best For |
|
||||
|--------|------------|-----------------|----------|
|
||||
| `clean` | Pure solid color, no texture | Clean lines, geometric shapes | Executive, minimal, corporate |
|
||||
| `grid` | Subtle grid overlay | Grid lines, schematics, technical diagrams | Technical, architecture, engineering |
|
||||
| `organic` | Soft textures, hand-drawn feel | Brush strokes, watercolor, sketchy lines | Creative, educational, friendly |
|
||||
| `pixel` | Chunky pixels, 8-bit aesthetic | Pixel art, retro game elements | Gaming, developer, nostalgic |
|
||||
| `paper` | Aged/textured paper | Vintage elements, stamps, weathering | Historical, heritage, storytelling |
|
||||
|
||||
## Rendering Guidelines
|
||||
|
||||
### clean
|
||||
|
||||
- Solid background colors with no visible texture
|
||||
- Crisp, sharp edges on all elements
|
||||
- Digital precision and clarity
|
||||
- Maximum contrast for readability
|
||||
|
||||
### grid
|
||||
|
||||
- Light grid overlay (5-10% opacity)
|
||||
- Engineering paper or blueprint feel
|
||||
- Alignment guides visible but subtle
|
||||
- Technical drawing aesthetic
|
||||
|
||||
### organic
|
||||
|
||||
- Paper grain or canvas texture
|
||||
- Imperfect edges, natural variations
|
||||
- Hand-painted color fills
|
||||
- Casual, approachable feel
|
||||
|
||||
### pixel
|
||||
|
||||
- Visible pixel grid (chunky, not fine)
|
||||
- 8-bit color palette aesthetic
|
||||
- Aliased edges (no smoothing)
|
||||
- Retro game UI elements
|
||||
|
||||
### paper
|
||||
|
||||
- Aged paper texture (subtle creases, discoloration)
|
||||
- Vintage printing artifacts
|
||||
- Sepia or warm tones
|
||||
- Historical document feel
|
||||
|
||||
## Combination Notes
|
||||
|
||||
| Texture | Works Best With | Avoid With |
|
||||
|---------|-----------------|------------|
|
||||
| clean | professional, neutral moods | handwritten typography |
|
||||
| grid | cool, professional moods | handwritten, vibrant moods |
|
||||
| organic | warm, vibrant moods | technical typography |
|
||||
| pixel | vibrant, dark moods | editorial typography |
|
||||
| paper | warm moods | geometric typography, minimal density |
|
||||
@@ -0,0 +1,97 @@
|
||||
# Typography Dimension
|
||||
|
||||
Headline and body text styling.
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Headline Style | Body Style | Best For |
|
||||
|--------|----------------|------------|----------|
|
||||
| `geometric` | Modern sans-serif, clean angles | Clean sans-serif | Corporate, tech, modern |
|
||||
| `humanist` | Friendly sans-serif, warm curves | Readable sans-serif | Education, general audiences |
|
||||
| `handwritten` | Marker/brush, organic feel | Casual script or print | Creative, sketch, friendly |
|
||||
| `editorial` | Bold serif/sans mix, magazine style | Classic serif | Keynote, magazine, premium |
|
||||
| `technical` | Monospace accents, precise | Clean sans-serif | Developer, data, engineering |
|
||||
|
||||
## Rendering Guidelines
|
||||
|
||||
### geometric
|
||||
|
||||
**Headlines**: Modern geometric sans-serif with clean angles and consistent stroke width. Think Futura, Avenir, or Proxima Nova. Bold to semi-bold weight. Perfect circles in O, G characters.
|
||||
|
||||
**Body**: Clean sans-serif optimized for readability. Regular weight. Consistent x-height. Sufficient letter spacing.
|
||||
|
||||
**Characteristics**:
|
||||
- Mathematical precision in letterforms
|
||||
- Consistent stroke widths
|
||||
- Perfect geometry in curves
|
||||
- Modern, authoritative presence
|
||||
|
||||
### humanist
|
||||
|
||||
**Headlines**: Friendly sans-serif with subtle stroke variations. Think Frutiger, Open Sans, or Myriad. Medium to semi-bold weight. Warm, approachable letterforms.
|
||||
|
||||
**Body**: Readable humanist sans-serif. Comfortable line height. Slight calligraphic influence.
|
||||
|
||||
**Characteristics**:
|
||||
- Warm, approachable feel
|
||||
- Subtle stroke contrast
|
||||
- Open counters for readability
|
||||
- Natural, human touch
|
||||
|
||||
### handwritten
|
||||
|
||||
**Headlines**: Bold hand-written marker or brush lettering. Thick strokes with organic edges. Slightly uneven baseline. Render as actual hand-drawn letters.
|
||||
|
||||
**Body**: Clear handwritten style mimicking notes. Casual but legible. Natural variation in letter forms.
|
||||
|
||||
**Characteristics**:
|
||||
- Organic, imperfect letterforms
|
||||
- Visible brush/pen character
|
||||
- Casual, personal feel
|
||||
- NOT computer fonts - actual drawn letters
|
||||
|
||||
### editorial
|
||||
|
||||
**Headlines**: Bold serif or high-contrast sans-serif. Magazine cover style. Dramatic scale contrast. Think Playfair Display, Didot, or bold condensed sans.
|
||||
|
||||
**Body**: Classic serif for extended reading. Elegant, refined letterforms. Traditional publishing quality.
|
||||
|
||||
**Characteristics**:
|
||||
- High contrast (thick/thin strokes)
|
||||
- Dramatic headlines
|
||||
- Sophisticated presence
|
||||
- Premium, publication quality
|
||||
|
||||
### technical
|
||||
|
||||
**Headlines**: Clean sans-serif with monospace accents for data/code. Precise, engineered appearance. Think SF Mono for code, Inter for headers.
|
||||
|
||||
**Body**: Clean sans-serif optimized for technical content. Fixed-width for numbers and code.
|
||||
|
||||
**Characteristics**:
|
||||
- Monospace for data elements
|
||||
- Precise alignment
|
||||
- Clear number distinction (0 vs O, 1 vs l)
|
||||
- Engineering precision
|
||||
|
||||
## Font Rendering Instructions
|
||||
|
||||
Since image generators cannot use font names, describe visual characteristics:
|
||||
|
||||
| Option | Headline Description | Body Description |
|
||||
|--------|---------------------|------------------|
|
||||
| geometric | "bold geometric sans-serif with perfect circular O shapes" | "clean modern sans-serif" |
|
||||
| humanist | "friendly rounded sans-serif with warm letterforms" | "readable humanist sans-serif" |
|
||||
| handwritten | "bold hand-drawn marker lettering with organic strokes" | "casual handwritten notes style" |
|
||||
| editorial | "dramatic high-contrast serif with thick-thin stroke variation" | "elegant classic serif" |
|
||||
| technical | "precise sans-serif with monospace numbers" | "technical sans-serif, fixed-width for code" |
|
||||
|
||||
## Combination Notes
|
||||
|
||||
| Typography | Works Best With | Avoid With |
|
||||
|------------|-----------------|------------|
|
||||
| geometric | clean texture, professional/neutral mood | organic texture |
|
||||
| humanist | organic/clean texture, warm mood | pixel texture |
|
||||
| handwritten | organic/paper texture, warm/vibrant mood | grid texture, professional mood |
|
||||
| editorial | clean texture, vibrant/professional mood | pixel texture |
|
||||
| technical | grid/clean texture, cool/dark mood | paper texture, warm mood |
|
||||
@@ -0,0 +1,65 @@
|
||||
# Layout Gallery
|
||||
|
||||
Optional layout hints for individual slides. Specify in outline's `// LAYOUT` section.
|
||||
|
||||
## Slide-Specific Layouts
|
||||
|
||||
| Layout | Description | Best For |
|
||||
|--------|-------------|----------|
|
||||
| `title-hero` | Large centered title + subtitle | Cover slides, section breaks |
|
||||
| `quote-callout` | Featured quote with attribution | Testimonials, key insights |
|
||||
| `key-stat` | Single large number as focal point | Impact statistics, metrics |
|
||||
| `split-screen` | Half image, half text | Feature highlights, comparisons |
|
||||
| `icon-grid` | Grid of icons with labels | Features, capabilities, benefits |
|
||||
| `two-columns` | Content in balanced columns | Paired information, dual points |
|
||||
| `three-columns` | Content in three columns | Triple comparisons, categories |
|
||||
| `image-caption` | Full-bleed image + text overlay | Visual storytelling, emotional |
|
||||
| `agenda` | Numbered list with highlights | Session overview, roadmap |
|
||||
| `bullet-list` | Structured bullet points | Simple content, lists |
|
||||
|
||||
## Infographic-Derived Layouts
|
||||
|
||||
| Layout | Description | Best For |
|
||||
|--------|-------------|----------|
|
||||
| `linear-progression` | Sequential flow left-to-right | Timelines, step-by-step |
|
||||
| `binary-comparison` | Side-by-side A vs B | Before/after, pros-cons |
|
||||
| `comparison-matrix` | Multi-factor grid | Feature comparisons |
|
||||
| `hierarchical-layers` | Pyramid or stacked levels | Priority, importance |
|
||||
| `hub-spoke` | Central node with radiating items | Concept maps, ecosystems |
|
||||
| `bento-grid` | Varied-size tiles | Overview, summary |
|
||||
| `funnel` | Narrowing stages | Conversion, filtering |
|
||||
| `dashboard` | Metrics with charts/numbers | KPIs, data display |
|
||||
| `venn-diagram` | Overlapping circles | Relationships, intersections |
|
||||
| `circular-flow` | Continuous cycle | Recurring processes |
|
||||
| `winding-roadmap` | Curved path with milestones | Journey, timeline |
|
||||
| `tree-branching` | Parent-child hierarchy | Org charts, taxonomies |
|
||||
| `iceberg` | Visible vs hidden layers | Surface vs depth |
|
||||
| `bridge` | Gap with connection | Problem-solution |
|
||||
|
||||
**Usage**: Add `Layout: <name>` in slide's `// LAYOUT` section.
|
||||
|
||||
## Layout Selection Tips
|
||||
|
||||
**Match Layout to Content**:
|
||||
| Content Type | Recommended Layouts |
|
||||
|--------------|-------------------|
|
||||
| Single narrative | `bullet-list`, `image-caption` |
|
||||
| Two concepts | `split-screen`, `binary-comparison` |
|
||||
| Three items | `three-columns`, `icon-grid` |
|
||||
| Process/Steps | `linear-progression`, `winding-roadmap` |
|
||||
| Data/Metrics | `dashboard`, `key-stat` |
|
||||
| Relationships | `hub-spoke`, `venn-diagram` |
|
||||
| Hierarchy | `hierarchical-layers`, `tree-branching` |
|
||||
|
||||
**Layout Flow Patterns**:
|
||||
| Position | Recommended Layouts |
|
||||
|----------|-------------------|
|
||||
| Opening | `title-hero`, `agenda` |
|
||||
| Middle | Content-specific layouts |
|
||||
| Closing | `quote-callout`, `key-stat` |
|
||||
|
||||
**Common Mistakes to Avoid**:
|
||||
- Using 3-column layout for 2 items (leaves columns empty)
|
||||
- Stacking charts/tables below text (use side-by-side instead)
|
||||
- Image layouts without actual images
|
||||
- Quote layouts for emphasis (use only for real quotes with attribution)
|
||||
@@ -8,7 +8,8 @@ Standard structure for slide deck outlines with style instructions.
|
||||
# Slide Deck Outline
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Style**: [selected style]
|
||||
**Style**: [preset name OR "custom"]
|
||||
**Dimensions**: [texture] + [mood] + [typography] + [density]
|
||||
**Audience**: [target audience]
|
||||
**Language**: [output language]
|
||||
**Slide Count**: N slides
|
||||
@@ -17,15 +18,15 @@ Standard structure for slide deck outlines with style instructions.
|
||||
---
|
||||
|
||||
<STYLE_INSTRUCTIONS>
|
||||
Design Aesthetic: [2-3 sentence description from style file]
|
||||
Design Aesthetic: [2-3 sentence description combining dimension characteristics]
|
||||
|
||||
Background:
|
||||
Color: [Name] ([Hex])
|
||||
Texture: [description]
|
||||
Texture: [from texture dimension]
|
||||
Base Color: [from mood dimension palette]
|
||||
|
||||
Typography:
|
||||
Primary Font: [detailed description for image generation]
|
||||
Secondary Font: [detailed description for image generation]
|
||||
Headlines: [from typography dimension - describe visual appearance]
|
||||
Body: [from typography dimension - describe visual appearance]
|
||||
|
||||
Color Palette:
|
||||
Primary Text: [Name] ([Hex]) - [usage]
|
||||
@@ -34,13 +35,17 @@ Color Palette:
|
||||
Accent 2: [Name] ([Hex]) - [usage]
|
||||
|
||||
Visual Elements:
|
||||
- [element 1 with rendering guidance]
|
||||
- [element 1 from texture + mood combination]
|
||||
- [element 2 with rendering guidance]
|
||||
- ...
|
||||
|
||||
Density Guidelines:
|
||||
- Content per slide: [from density dimension]
|
||||
- Whitespace: [from density dimension]
|
||||
|
||||
Style Rules:
|
||||
Do: [guidelines from style file]
|
||||
Don't: [anti-patterns from style file]
|
||||
Do: [guidelines from dimension combinations]
|
||||
Don't: [anti-patterns from dimension combinations]
|
||||
</STYLE_INSTRUCTIONS>
|
||||
|
||||
---
|
||||
@@ -48,6 +53,88 @@ Style Rules:
|
||||
[Slide entries follow...]
|
||||
```
|
||||
|
||||
## Building STYLE_INSTRUCTIONS from Dimensions
|
||||
|
||||
When using custom dimensions or presets, build STYLE_INSTRUCTIONS by combining:
|
||||
|
||||
### 1. Design Aesthetic
|
||||
|
||||
Combine characteristics from all four dimensions into 2-3 sentences:
|
||||
|
||||
| Texture | Contribution |
|
||||
|---------|--------------|
|
||||
| clean | "Clean, digital precision with crisp edges" |
|
||||
| grid | "Technical grid overlay with engineering precision" |
|
||||
| organic | "Hand-drawn feel with soft textures" |
|
||||
| pixel | "Chunky pixel aesthetic with 8-bit charm" |
|
||||
| paper | "Aged paper texture with vintage character" |
|
||||
|
||||
| Mood | Contribution |
|
||||
|------|--------------|
|
||||
| professional | "Professional navy and gold palette" |
|
||||
| warm | "Warm earth tones creating approachable atmosphere" |
|
||||
| cool | "Cool analytical blues and grays" |
|
||||
| vibrant | "Bold, high-saturation colors with energy" |
|
||||
| dark | "Deep cinematic backgrounds with glowing accents" |
|
||||
| neutral | "Minimal grayscale sophistication" |
|
||||
|
||||
### 2. Background
|
||||
|
||||
From `references/dimensions/texture.md`:
|
||||
- Texture description
|
||||
- Base color from mood palette
|
||||
|
||||
### 3. Typography
|
||||
|
||||
From `references/dimensions/typography.md`:
|
||||
- Headline visual description (NOT font names)
|
||||
- Body text visual description (NOT font names)
|
||||
|
||||
**Important**: Describe appearance for image generation: "bold geometric sans-serif with perfect circular O shapes" NOT "Inter font".
|
||||
|
||||
### 4. Color Palette
|
||||
|
||||
From `references/dimensions/mood.md`:
|
||||
- Copy the palette specifications for the selected mood
|
||||
- Include hex codes and usage notes
|
||||
|
||||
### 5. Visual Elements
|
||||
|
||||
Combine texture and mood characteristics:
|
||||
|
||||
| Combination | Visual Elements |
|
||||
|-------------|-----------------|
|
||||
| clean + professional | Clean charts, outlined icons, structured grids |
|
||||
| grid + cool | Technical schematics, dimension lines, blueprints |
|
||||
| organic + warm | Hand-drawn icons, brush strokes, doodles |
|
||||
| pixel + vibrant | Pixel art icons, retro game elements |
|
||||
| paper + warm | Vintage stamps, aged elements, sepia overlays |
|
||||
|
||||
### 6. Density Guidelines
|
||||
|
||||
From `references/dimensions/density.md`:
|
||||
- Content per slide limits
|
||||
- Whitespace requirements
|
||||
- Element count guidelines
|
||||
|
||||
### 7. Style Rules
|
||||
|
||||
Combine dimension-specific rules:
|
||||
|
||||
**Do rules by texture**:
|
||||
- clean: Maintain sharp edges, use grid alignment
|
||||
- grid: Show precise measurements, use technical diagrams
|
||||
- organic: Allow imperfection, layer with subtle overlaps
|
||||
- pixel: Keep aliased edges, use chunky elements
|
||||
- paper: Add subtle aging effects, use warm tones
|
||||
|
||||
**Don't rules by texture**:
|
||||
- clean: Don't use hand-drawn elements
|
||||
- grid: Don't use organic curves
|
||||
- organic: Don't use perfect geometry
|
||||
- pixel: Don't smooth edges
|
||||
- paper: Don't use bright digital colors
|
||||
|
||||
## Cover Slide Template
|
||||
|
||||
```markdown
|
||||
@@ -123,18 +210,33 @@ Layout: [optional: layout name from gallery]
|
||||
|
||||
## STYLE_INSTRUCTIONS Block
|
||||
|
||||
The `<STYLE_INSTRUCTIONS>` block contains all style-specific guidance for image generation:
|
||||
The `<STYLE_INSTRUCTIONS>` block is the SINGLE SOURCE OF TRUTH for style information in this outline.
|
||||
|
||||
| Section | Content |
|
||||
|---------|---------|
|
||||
| Design Aesthetic | Overall visual direction from style file |
|
||||
| Background | Base color and texture details |
|
||||
| Typography | Font descriptions for Gemini (no font names, describe appearance) |
|
||||
| Color Palette | Named colors with hex codes and usage guidance |
|
||||
| Visual Elements | Specific graphic elements with rendering instructions |
|
||||
| Style Rules | Do/Don't guidelines from style file |
|
||||
| Section | Content | Source |
|
||||
|---------|---------|--------|
|
||||
| Design Aesthetic | Overall visual direction | Combined from all dimensions |
|
||||
| Background | Base color and texture details | texture + mood dimensions |
|
||||
| Typography | Font descriptions (visual, not names) | typography dimension |
|
||||
| Color Palette | Named colors with hex codes and usage | mood dimension |
|
||||
| Visual Elements | Graphic elements with rendering instructions | texture + mood dimensions |
|
||||
| Density Guidelines | Content limits and whitespace | density dimension |
|
||||
| Style Rules | Do/Don't guidelines | Combined from dimensions |
|
||||
|
||||
**Important**: Typography descriptions must describe the visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names.
|
||||
**Important**:
|
||||
- Typography descriptions must describe visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names
|
||||
- Prompts should extract STYLE_INSTRUCTIONS from this outline, NOT re-read style files
|
||||
|
||||
## Preset → Dimensions Reference
|
||||
|
||||
When using a preset, look up dimensions in `references/dimensions/presets.md`:
|
||||
|
||||
| Preset | Dimensions |
|
||||
|--------|------------|
|
||||
| blueprint | grid + cool + technical + balanced |
|
||||
| sketch-notes | organic + warm + handwritten + balanced |
|
||||
| corporate | clean + professional + geometric + balanced |
|
||||
| minimal | clean + neutral + geometric + minimal |
|
||||
| ... | See presets.md for full mapping |
|
||||
|
||||
## Section Dividers
|
||||
|
||||
|
||||
@@ -21,6 +21,36 @@ Fetches any URL via Chrome CDP and converts HTML to clean markdown.
|
||||
|--------|---------|
|
||||
| `scripts/main.ts` | CLI entry point for URL fetching |
|
||||
|
||||
## Preferences (EXTEND.md)
|
||||
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-url-to-markdown/EXTEND.md && echo "project"
|
||||
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-url-to-markdown/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, apply settings │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Use defaults │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Default output directory | Default capture mode | Timeout settings
|
||||
|
||||
## Features
|
||||
|
||||
- Chrome CDP for full JavaScript rendering
|
||||
@@ -52,103 +82,28 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md
|
||||
|
||||
## Capture Modes
|
||||
|
||||
### Auto Mode (default)
|
||||
| Mode | Behavior | Use When |
|
||||
|------|----------|----------|
|
||||
| Auto (default) | Capture on network idle | Public pages, static content |
|
||||
| Wait (`--wait`) | User signals when ready | Login-required, lazy loading, paywalls |
|
||||
|
||||
Page loads → waits for network idle → captures immediately.
|
||||
|
||||
Best for:
|
||||
- Public pages
|
||||
- Static content
|
||||
- No login required
|
||||
|
||||
### Wait Mode (`--wait`)
|
||||
|
||||
Page opens → user can interact (login, scroll, etc.) → user signals ready → captures.
|
||||
|
||||
Best for:
|
||||
- Login-required pages
|
||||
- Dynamic content needing interaction
|
||||
- Pages with lazy loading
|
||||
|
||||
**Agent workflow for wait mode**:
|
||||
1. Run script with `--wait` flag
|
||||
2. Script outputs: `Page opened. Press Enter when ready to capture...`
|
||||
3. Use `AskUserQuestion` to ask user if page is ready
|
||||
4. When user confirms, send newline to stdin to trigger capture
|
||||
**Wait mode workflow**:
|
||||
1. Run with `--wait` → script outputs "Press Enter when ready"
|
||||
2. Ask user to confirm page is ready
|
||||
3. Send newline to stdin to trigger capture
|
||||
|
||||
## Output Format
|
||||
|
||||
```markdown
|
||||
---
|
||||
url: https://example.com/page
|
||||
title: "Page Title"
|
||||
description: "Meta description if available"
|
||||
author: "Author if available"
|
||||
published: "2024-01-01"
|
||||
captured_at: "2024-01-15T10:30:00Z"
|
||||
---
|
||||
|
||||
# Page Title
|
||||
|
||||
Converted markdown content...
|
||||
```
|
||||
|
||||
## Mode Selection Guide
|
||||
|
||||
When user requests URL capture, help select appropriate mode:
|
||||
|
||||
**Suggest Auto Mode when**:
|
||||
- URL is public (no login wall visible)
|
||||
- Content appears static
|
||||
- User doesn't mention login requirements
|
||||
|
||||
**Suggest Wait Mode when**:
|
||||
- User mentions needing to log in
|
||||
- Site known to require authentication
|
||||
- User wants to scroll/interact before capture
|
||||
- Content is behind paywall
|
||||
|
||||
**Ask user when unclear**:
|
||||
```
|
||||
The page may require login or interaction before capturing.
|
||||
|
||||
Which mode should I use?
|
||||
1. Auto - Capture immediately when loaded
|
||||
2. Wait - Wait for you to interact first
|
||||
```
|
||||
YAML front matter with `url`, `title`, `description`, `author`, `published`, `captured_at` fields, followed by converted markdown content.
|
||||
|
||||
## Output Directory
|
||||
|
||||
Each capture creates a file organized by domain:
|
||||
|
||||
```
|
||||
url-to-markdown/
|
||||
└── <domain>/
|
||||
└── <slug>.md
|
||||
url-to-markdown/<domain>/<slug>.md
|
||||
```
|
||||
|
||||
**Path Components**:
|
||||
- `<domain>`: Site domain (e.g., `example.com`, `github.com`)
|
||||
- `<slug>`: Generated from page title or URL path (kebab-case)
|
||||
|
||||
**Slug Generation**:
|
||||
1. Extract from page title (preferred) or URL path
|
||||
2. Convert to kebab-case, 2-6 words
|
||||
3. Example: "Getting Started with React" → `getting-started-with-react`
|
||||
|
||||
**Conflict Resolution**:
|
||||
If `url-to-markdown/<domain>/<slug>.md` already exists:
|
||||
- Append timestamp: `<slug>-YYYYMMDD-HHMMSS.md`
|
||||
- Example: `getting-started.md` exists → `getting-started-20260118-143052.md`
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Error | Resolution |
|
||||
|-------|------------|
|
||||
| Chrome not found | Install Chrome or set `URL_CHROME_PATH` env |
|
||||
| Page timeout | Increase `--timeout` value |
|
||||
| Capture failed | Try wait mode for complex pages |
|
||||
| Empty content | Page may need JS rendering time |
|
||||
- `<slug>`: From page title or URL path (kebab-case, 2-6 words)
|
||||
- Conflict resolution: Append timestamp `<slug>-YYYYMMDD-HHMMSS.md`
|
||||
|
||||
## Environment Variables
|
||||
|
||||
@@ -158,12 +113,8 @@ If `url-to-markdown/<domain>/<slug>.md` already exists:
|
||||
| `URL_DATA_DIR` | Custom data directory |
|
||||
| `URL_CHROME_PROFILE_DIR` | Custom Chrome profile directory |
|
||||
|
||||
**Troubleshooting**: Chrome not found → set `URL_CHROME_PATH`. Timeout → increase `--timeout`. Complex pages → try `--wait` mode.
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-url-to-markdown/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md` (user)
|
||||
|
||||
If found, load before workflow. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
|
||||
|
||||
@@ -164,11 +164,11 @@ Copy and track progress:
|
||||
|
||||
```
|
||||
XHS Infographic Progress:
|
||||
- [ ] Step 0: Check preferences (EXTEND.md)
|
||||
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
|
||||
- [ ] Step 1: Analyze content → analysis.md
|
||||
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
|
||||
- [ ] Step 3: Generate 3 outline + style variants
|
||||
- [ ] Step 4: Confirmation 2 - Outline & style selection ⚠️ REQUIRED
|
||||
- [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
|
||||
- [ ] Step 5: Generate images (sequential)
|
||||
- [ ] Step 6: Completion report
|
||||
```
|
||||
@@ -176,33 +176,48 @@ XHS Infographic Progress:
|
||||
### Flow
|
||||
|
||||
```
|
||||
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style] → Generate → Complete
|
||||
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete
|
||||
```
|
||||
|
||||
### Step 0: Check Preferences
|
||||
### Step 0: Load Preferences (EXTEND.md) ⚠️
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
|
||||
|
||||
**If preferences found**:
|
||||
1. Parse YAML frontmatter
|
||||
2. Display current preferences summary:
|
||||
```
|
||||
Loaded preferences from [path]:
|
||||
- Watermark: [enabled/disabled] "[content]" at [position]
|
||||
- Style: [name] - [description]
|
||||
- Layout: [layout]
|
||||
- Language: [lang]
|
||||
```
|
||||
3. Continue to Step 1
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
**If NO preferences found**:
|
||||
1. Ask user with AskUserQuestion (see `references/config/first-time-setup.md`)
|
||||
2. Create EXTEND.md with user choices
|
||||
3. Continue to Step 1
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
|
||||
|
||||
Schema reference: `references/config/preferences-schema.md`
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-xhs-images/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, display summary → Continue to Step 1 │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**First-Time Setup** (when EXTEND.md not found):
|
||||
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use AskUserQuestion with ALL questions in ONE call. See `references/config/first-time-setup.md` for question details.
|
||||
|
||||
**EXTEND.md Supports**: Watermark | Preferred style/layout | Custom style definitions | Language preference
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
|
||||
@@ -262,6 +277,11 @@ strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: warm # recommended style for this strategy
|
||||
style_reason: "Warm tones enhance emotional storytelling and personal connection"
|
||||
elements: # from style preset, can be customized in Step 4
|
||||
background: solid-pastel
|
||||
decorations: [clouds, stars-sparkles]
|
||||
emphasis: star-burst
|
||||
typography: highlight
|
||||
layout: balanced # primary layout
|
||||
image_count: 5
|
||||
---
|
||||
@@ -289,15 +309,15 @@ image_count: 5
|
||||
|
||||
Reference: `references/workflows/outline-template.md`
|
||||
|
||||
### Step 4: Confirmation 2 - Outline & Style Selection ⚠️
|
||||
### Step 4: Confirmation 2 - Outline & Style & Elements Selection ⚠️
|
||||
|
||||
**Purpose**: User chooses outline strategy AND confirms visual style. **Do NOT skip.**
|
||||
**Purpose**: User chooses outline strategy, confirms visual style, and customizes elements. **Do NOT skip.**
|
||||
|
||||
**Display each strategy**:
|
||||
- Strategy name + page count + recommended style
|
||||
- Page-by-page summary (P1 → P2 → P3...)
|
||||
|
||||
**Use AskUserQuestion** with two questions:
|
||||
**Use AskUserQuestion** with three questions:
|
||||
|
||||
**Question 1: Outline Strategy**
|
||||
- Strategy A (Recommended if "authentic sharing")
|
||||
@@ -310,11 +330,22 @@ Reference: `references/workflows/outline-template.md`
|
||||
- Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
|
||||
- Or type custom style description
|
||||
|
||||
**Question 3: Visual Elements** (show after style selection)
|
||||
Display the selected style's default elements from preset, then ask:
|
||||
- Use style defaults (Recommended) - show preview: background, decorations, emphasis
|
||||
- Adjust background - options: solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
|
||||
- Adjust decorations - options: hearts / stars-sparkles / flowers / clouds / leaves / confetti
|
||||
- Type custom element preferences
|
||||
|
||||
**After response**:
|
||||
- Single strategy → copy to `outline.md` with confirmed style
|
||||
- Combination → merge specified pages with confirmed style
|
||||
- Custom request → regenerate based on feedback
|
||||
- Update `outline.md` frontmatter with final style choice
|
||||
- Style defaults → use preset's Element Combination as-is
|
||||
- Background adjustment → update elements.background with user choice
|
||||
- Decorations adjustment → update elements.decorations with user choice
|
||||
- Custom elements → parse user's preferences into elements fields
|
||||
- Update `outline.md` frontmatter with final style and elements
|
||||
|
||||
### Step 5: Generate Images
|
||||
|
||||
@@ -428,10 +459,4 @@ Detailed templates in `references/` directory:
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md. Loaded in Step 0, overrides defaults.
|
||||
|
||||
**Check paths** (priority): `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project) → `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
|
||||
**Supports**: Watermark | Preferred style/layout | Custom style definitions
|
||||
|
||||
**References**: `config/preferences-schema.md` | `config/first-time-setup.md`
|
||||
Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
|
||||
|
||||
@@ -31,7 +31,7 @@ No EXTEND.md found
|
||||
|
||||
## Questions
|
||||
|
||||
**Language**: Use user's input language or preferred language for all questions. Do not always use English.
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
|
||||
|
||||
|
||||
Reference in New Issue
Block a user