Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c6e309f501 | |||
| 089e0b5ba9 | |||
| 4bc0d05f66 | |||
| 90f3e2ff24 | |||
| 575ed29391 | |||
| 7a193481d4 | |||
| aea27950ad | |||
| 76ddcf134e | |||
| 5a0feba96e | |||
| 97bc68efd8 | |||
| 464edf0656 | |||
| 43c2589a38 | |||
| 4c82884722 | |||
| 56d0485412 | |||
| 4998eaf8c2 | |||
| 5d4ff2e9c2 |
@@ -6,16 +6,15 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "0.11.0"
|
||||
"version": "1.5.0"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"name": "content-skills",
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"description": "Content generation and publishing skills",
|
||||
"source": "./",
|
||||
"strict": false,
|
||||
"skills": [
|
||||
"./skills/baoyu-gemini-web",
|
||||
"./skills/baoyu-xhs-images",
|
||||
"./skills/baoyu-post-to-x",
|
||||
"./skills/baoyu-post-to-wechat",
|
||||
@@ -24,6 +23,25 @@
|
||||
"./skills/baoyu-slide-deck",
|
||||
"./skills/baoyu-comic"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "ai-generation-skills",
|
||||
"description": "AI-powered generation backends",
|
||||
"source": "./",
|
||||
"strict": false,
|
||||
"skills": [
|
||||
"./skills/baoyu-danger-gemini-web"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "utility-skills",
|
||||
"description": "Utility tools for content processing",
|
||||
"source": "./",
|
||||
"strict": false,
|
||||
"skills": [
|
||||
"./skills/baoyu-danger-x-to-markdown",
|
||||
"./skills/baoyu-compress-image"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -143,3 +143,4 @@ tests-data/
|
||||
|
||||
# Skill extensions (user customization)
|
||||
.baoyu-skills/
|
||||
x-to-markdown/
|
||||
|
||||
@@ -2,10 +2,92 @@
|
||||
|
||||
English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 1.5.0 - 2026-01-19
|
||||
|
||||
### Features
|
||||
- `baoyu-article-illustrator`: expands style library to 20 styles—extracts styles to `references/styles/` directory and adds 11 new styles (`blueprint`, `chalkboard`, `editorial`, `fantasy-animation`, `flat`, `intuition-machine`, `pixel-art`, `retro`, `scientific`, `sketch-notes`, `vector-illustration`, `vintage`, `watercolor`).
|
||||
|
||||
### Breaking Changes
|
||||
- `baoyu-article-illustrator`: removes `tech`, `bold`, and `isometric` styles.
|
||||
- `baoyu-cover-image`: removes `bold` style (use `bold-editorial` for bold editorial content).
|
||||
|
||||
### Documentation
|
||||
- `README.md`, `README.zh.md`: adds style preview gallery for article-illustrator (20 styles).
|
||||
|
||||
## 1.4.2 - 2026-01-19
|
||||
|
||||
### Documentation
|
||||
- `baoyu-danger-gemini-web`: adds supported browsers list (Chrome, Chromium, Edge) and proxy configuration guide.
|
||||
|
||||
## 1.4.1 - 2026-01-18
|
||||
|
||||
### Fixes
|
||||
- `baoyu-post-to-x`: supports multi-language UI selectors for X Articles (contributed by [@ianchenx](https://github.com/ianchenx)).
|
||||
|
||||
## 1.4.0 - 2026-01-18
|
||||
|
||||
### Features
|
||||
- `baoyu-cover-image`: expands style library from 8 to 19 styles with 12 new additions—`blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `intuition-machine`, `notion`, `pixel-art`, `sketch-notes`, `vector-illustration`, `vintage`, `watercolor`.
|
||||
- `baoyu-slide-deck`: adds `chalkboard` style—black chalkboard background with colorful chalk drawings for education and tutorials.
|
||||
|
||||
### Breaking Changes
|
||||
- `baoyu-cover-image`: removes `tech` style (use `blueprint` or `editorial-infographic` for technical content).
|
||||
|
||||
### Documentation
|
||||
- `README.md`, `README.zh.md`: updates style preview screenshots for cover-image and slide-deck.
|
||||
|
||||
## 1.3.0 - 2026-01-18
|
||||
|
||||
### Features
|
||||
- `baoyu-comic`: adds `wuxia` style—Hong Kong martial arts comic style with ink brush strokes, dynamic combat poses, and qi energy effects. Best for wuxia/xianxia and Chinese historical fiction.
|
||||
- `baoyu-comic`: adds style and layout preview screenshots for all 8 styles and 6 layouts in README.
|
||||
|
||||
### Refactor
|
||||
- `baoyu-comic`: removes `tech` style (replaced by `ohmsha` for technical content).
|
||||
|
||||
## 1.2.0 - 2026-01-18
|
||||
|
||||
### Features
|
||||
- Session-independent output directories: each generation session creates a new directory (`<skill-suffix>/<topic-slug>/`), even for the same source file. Conflicts resolved by appending timestamp.
|
||||
- Multi-source file support: source files now saved as `source-{slug}.{ext}`, supporting multiple inputs (text, images, files from conversation).
|
||||
|
||||
### Documentation
|
||||
- `CLAUDE.md`: updates Output Path Convention with new session-independent directory structure and multi-source file naming.
|
||||
- Multiple skills: updates file management sections to reflect new directory and source file conventions.
|
||||
- `baoyu-slide-deck`, `baoyu-article-illustrator`, `baoyu-cover-image`, `baoyu-xhs-images`, `baoyu-comic`
|
||||
|
||||
## 1.1.0 - 2026-01-18
|
||||
|
||||
### Features
|
||||
- `baoyu-compress-image`: new utility skill for cross-platform image compression. Converts to WebP by default with PNG-to-PNG support. Uses system tools (sips, cwebp, ImageMagick) with Sharp fallback.
|
||||
|
||||
### Refactor
|
||||
- Marketplace structure: reorganizes plugins into three categories—`content-skills`, `ai-generation-skills`, and `utility-skills`—for better organization.
|
||||
|
||||
### Documentation
|
||||
- `CLAUDE.md`, `README.md`, `README.zh.md`: updates skill architecture documentation to reflect the new three-category structure.
|
||||
|
||||
## 1.0.1 - 2026-01-18
|
||||
|
||||
### Refactor
|
||||
- Code structure improvements for better readability and maintainability.
|
||||
- `baoyu-slide-deck`: unified style reference file formats.
|
||||
|
||||
### Other
|
||||
- Screenshots: converted from PNG to WebP format for smaller file sizes; added screenshots for new styles.
|
||||
|
||||
## 1.0.0 - 2026-01-18
|
||||
|
||||
### Features
|
||||
- `baoyu-danger-x-to-markdown`: new skill to convert X/Twitter posts and threads to Markdown format.
|
||||
|
||||
### Breaking Changes
|
||||
- `baoyu-gemini-web` renamed to `baoyu-danger-gemini-web` to indicate potential risks of using reverse-engineered APIs.
|
||||
|
||||
## 0.11.0 - 2026-01-18
|
||||
|
||||
### Features
|
||||
- `baoyu-gemini-web`: adds disclaimer consent check flow—requires user acceptance before first use, with persistent consent storage per platform.
|
||||
- `baoyu-danger-gemini-web`: adds disclaimer consent check flow—requires user acceptance before first use, with persistent consent storage per platform.
|
||||
|
||||
## 0.10.0 - 2026-01-18
|
||||
|
||||
@@ -26,12 +108,12 @@ English | [中文](./CHANGELOG.zh.md)
|
||||
## 0.8.2 - 2026-01-17
|
||||
|
||||
### Refactor
|
||||
- `baoyu-gemini-web`: reorganizes script architecture—moves modular files into `gemini-webapi/` subdirectory and updates SKILL.md with `${SKILL_DIR}` path references.
|
||||
- `baoyu-danger-gemini-web`: reorganizes script architecture—moves modular files into `gemini-webapi/` subdirectory and updates SKILL.md with `${SKILL_DIR}` path references.
|
||||
|
||||
## 0.8.1 - 2026-01-17
|
||||
|
||||
### Refactor
|
||||
- `baoyu-gemini-web`: refactors script architecture—consolidates 10 separate files into a structured `gemini-webapi/` module (TypeScript port of gemini_webapi Python library).
|
||||
- `baoyu-danger-gemini-web`: refactors script architecture—consolidates 10 separate files into a structured `gemini-webapi/` module (TypeScript port of gemini_webapi Python library).
|
||||
|
||||
## 0.8.0 - 2026-01-17
|
||||
|
||||
@@ -61,7 +143,7 @@ English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
- `baoyu-slide-deck`: adds `scripts/merge-to-pdf.ts` to export generated slides into a single PDF; docs updated with pptx/pdf outputs.
|
||||
- `baoyu-comic`: adds `scripts/merge-to-pdf.ts` to merge cover/pages into a PDF; docs clarify character reference handling (image vs text).
|
||||
- Docs conventions: adds a “Script Directory” template to `CLAUDE.md`; aligns `baoyu-gemini-web` / `baoyu-slide-deck` / `baoyu-comic` docs to use `${SKILL_DIR}` in commands so agents can run scripts from any install location.
|
||||
- Docs conventions: adds a “Script Directory” template to `CLAUDE.md`; aligns `baoyu-danger-gemini-web` / `baoyu-slide-deck` / `baoyu-comic` docs to use `${SKILL_DIR}` in commands so agents can run scripts from any install location.
|
||||
|
||||
## 0.6.0 - 2026-01-17
|
||||
|
||||
@@ -76,8 +158,8 @@ English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 0.5.2 - 2026-01-16
|
||||
|
||||
- `baoyu-gemini-web`: adds `--sessionId` (local persisted sessions, plus `--list-sessions`) for multi-turn conversations and consistent multi-image generation.
|
||||
- `baoyu-gemini-web`: adds `--reference/--ref` for reference images (vision input), plus stronger timeout handling and cookie refresh recovery.
|
||||
- `baoyu-danger-gemini-web`: adds `--sessionId` (local persisted sessions, plus `--list-sessions`) for multi-turn conversations and consistent multi-image generation.
|
||||
- `baoyu-danger-gemini-web`: adds `--reference/--ref` for reference images (vision input), plus stronger timeout handling and cookie refresh recovery.
|
||||
- Docs: `baoyu-xhs-images` / `baoyu-slide-deck` / `baoyu-comic` document session usage (reuse one `sessionId` per set) to improve visual consistency.
|
||||
|
||||
## 0.5.1 - 2026-01-16
|
||||
@@ -93,7 +175,7 @@ English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 0.4.2 - 2026-01-15
|
||||
|
||||
- `baoyu-gemini-web`: updates description to clarify it as the image-generation backend for other skills (e.g. `cover-image`, `xhs-images`, `article-illustrator`).
|
||||
- `baoyu-danger-gemini-web`: updates description to clarify it as the image-generation backend for other skills (e.g. `cover-image`, `xhs-images`, `article-illustrator`).
|
||||
|
||||
## 0.4.1 - 2026-01-15
|
||||
|
||||
|
||||
@@ -2,10 +2,92 @@
|
||||
|
||||
[English](./CHANGELOG.md) | 中文
|
||||
|
||||
## 1.5.0 - 2026-01-19
|
||||
|
||||
### 新功能
|
||||
- `baoyu-article-illustrator`:风格库扩展至 20 种——将风格定义提取到 `references/styles/` 目录,新增 11 种风格(`blueprint`(蓝图)、`chalkboard`(黑板)、`editorial`(杂志信息图)、`fantasy-animation`(奇幻动画)、`flat`(扁平矢量)、`intuition-machine`(技术简报)、`pixel-art`(像素艺术)、`retro`(复古)、`scientific`(科学图解)、`sketch-notes`(手绘笔记)、`vector-illustration`(矢量插画)、`vintage`(复古文献)、`watercolor`(水彩))。
|
||||
|
||||
### 破坏性变更
|
||||
- `baoyu-article-illustrator`:移除 `tech`、`bold`、`isometric` 风格。
|
||||
- `baoyu-cover-image`:移除 `bold` 风格(大胆编辑内容改用 `bold-editorial` 风格)。
|
||||
|
||||
### 文档
|
||||
- `README.md`、`README.zh.md`:新增 article-illustrator 风格预览图库(20 种风格)。
|
||||
|
||||
## 1.4.2 - 2026-01-19
|
||||
|
||||
### 文档
|
||||
- `baoyu-danger-gemini-web`:添加支持的浏览器列表(Chrome、Chromium、Edge)和代理配置指南。
|
||||
|
||||
## 1.4.1 - 2026-01-18
|
||||
|
||||
### 修复
|
||||
- `baoyu-post-to-x`:支持 X Articles 多语言 UI 选择器(感谢 [@ianchenx](https://github.com/ianchenx) 贡献)。
|
||||
|
||||
## 1.4.0 - 2026-01-18
|
||||
|
||||
### 新功能
|
||||
- `baoyu-cover-image`:风格库从 8 个扩展至 19 个,新增 12 种风格——`blueprint`(蓝图)、`bold-editorial`(大胆编辑)、`chalkboard`(黑板)、`dark-atmospheric`(暗黑氛围)、`editorial-infographic`(杂志信息图)、`fantasy-animation`(奇幻动画)、`intuition-machine`(技术简报)、`notion`(Notion 风格)、`pixel-art`(像素艺术)、`sketch-notes`(手绘笔记)、`vector-illustration`(矢量插画)、`vintage`(复古文献)、`watercolor`(水彩)。
|
||||
- `baoyu-slide-deck`:新增 `chalkboard`(黑板)风格——黑色黑板背景配彩色粉笔绘画,适合教育和教程内容。
|
||||
|
||||
### 破坏性变更
|
||||
- `baoyu-cover-image`:移除 `tech` 风格(技术内容改用 `blueprint` 或 `editorial-infographic` 风格)。
|
||||
|
||||
### 文档
|
||||
- `README.md`、`README.zh.md`:更新 cover-image 和 slide-deck 风格预览截图。
|
||||
|
||||
## 1.3.0 - 2026-01-18
|
||||
|
||||
### 新功能
|
||||
- `baoyu-comic`:新增 `wuxia` 武侠风格——港漫武侠风格,水墨笔触、动态打斗、气功特效。适用于武侠、仙侠、中国历史小说。
|
||||
- `baoyu-comic`:README 新增风格和布局预览截图(8 种风格 + 6 种布局)。
|
||||
|
||||
### 重构
|
||||
- `baoyu-comic`:移除 `tech` 风格(技术内容改用 `ohmsha` 风格)。
|
||||
|
||||
## 1.2.0 - 2026-01-18
|
||||
|
||||
### 新功能
|
||||
- Session 独立输出目录:每次生成创建独立目录(`<skill-suffix>/<topic-slug>/`),即使是同一源文件也会新建目录。目录冲突时追加时间戳。
|
||||
- 多源文件支持:源文件现以 `source-{slug}.{ext}` 命名,支持多个输入(文本、图片、会话中的文件)。
|
||||
|
||||
### 文档
|
||||
- `CLAUDE.md`:更新 Output Path Convention,采用新的 session 独立目录结构和多源文件命名规范。
|
||||
- 多个技能:更新文件管理部分,反映新的目录和源文件规范。
|
||||
- `baoyu-slide-deck`、`baoyu-article-illustrator`、`baoyu-cover-image`、`baoyu-xhs-images`、`baoyu-comic`
|
||||
|
||||
## 1.1.0 - 2026-01-18
|
||||
|
||||
### 新功能
|
||||
- `baoyu-compress-image`:新增跨平台图片压缩技能。默认转换为 WebP 格式,支持 PNG 转 PNG。自动选择系统工具(sips、cwebp、ImageMagick),Sharp 作为兜底方案。
|
||||
|
||||
### 重构
|
||||
- Marketplace 结构重组:将插件分为三大类——`content-skills`(内容技能)、`ai-generation-skills`(AI 生成技能)和 `utility-skills`(工具技能),便于管理和发现。
|
||||
|
||||
### 文档
|
||||
- `CLAUDE.md`、`README.md`、`README.zh.md`:更新技能架构文档,反映新的三类分组结构。
|
||||
|
||||
## 1.0.1 - 2026-01-18
|
||||
|
||||
### 重构
|
||||
- 代码结构优化,提升可读性和可维护性。
|
||||
- `baoyu-slide-deck`:统一风格参考文件格式。
|
||||
|
||||
### 其他
|
||||
- 截图:从 PNG 转换为 WebP 格式,减小文件体积;新增新风格的截图。
|
||||
|
||||
## 1.0.0 - 2026-01-18
|
||||
|
||||
### 新功能
|
||||
- `baoyu-danger-x-to-markdown`:新增技能,将 X/Twitter 帖子和线程转换为 Markdown 格式。
|
||||
|
||||
### 破坏性变更
|
||||
- `baoyu-gemini-web` 重命名为 `baoyu-danger-gemini-web`,以提示使用逆向工程 API 的潜在风险。
|
||||
|
||||
## 0.11.0 - 2026-01-18
|
||||
|
||||
### 新功能
|
||||
- `baoyu-gemini-web`:新增 Disclaimer 同意检查流程——首次使用前需用户确认接受,同意状态按平台持久化存储。
|
||||
- `baoyu-danger-gemini-web`:新增 Disclaimer 同意检查流程——首次使用前需用户确认接受,同意状态按平台持久化存储。
|
||||
|
||||
## 0.10.0 - 2026-01-18
|
||||
|
||||
@@ -26,12 +108,12 @@
|
||||
## 0.8.2 - 2026-01-17
|
||||
|
||||
### 重构
|
||||
- `baoyu-gemini-web`:重组脚本架构——将模块文件移至 `gemini-webapi/` 子目录,并更新 SKILL.md 使用 `${SKILL_DIR}` 路径引用。
|
||||
- `baoyu-danger-gemini-web`:重组脚本架构——将模块文件移至 `gemini-webapi/` 子目录,并更新 SKILL.md 使用 `${SKILL_DIR}` 路径引用。
|
||||
|
||||
## 0.8.1 - 2026-01-17
|
||||
|
||||
### 重构
|
||||
- `baoyu-gemini-web`:重构脚本架构——将 10 个分散的脚本文件整合为结构化的 `gemini-webapi/` 模块(gemini_webapi Python 库的 TypeScript 移植版)。
|
||||
- `baoyu-danger-gemini-web`:重构脚本架构——将 10 个分散的脚本文件整合为结构化的 `gemini-webapi/` 模块(gemini_webapi Python 库的 TypeScript 移植版)。
|
||||
|
||||
## 0.8.0 - 2026-01-17
|
||||
|
||||
@@ -61,7 +143,7 @@
|
||||
|
||||
- `baoyu-slide-deck`:新增 `scripts/merge-to-pdf.ts`,可将生成的 slide 图片一键合并为 PDF;文档补充导出步骤与产物命名(pptx/pdf)。
|
||||
- `baoyu-comic`:新增 `scripts/merge-to-pdf.ts`,将封面/分页图片合并为 PDF;补充角色参考(图片/文本)处理说明。
|
||||
- 文档规范:在 `CLAUDE.md` 中补充“Script Directory”模板;`baoyu-gemini-web` / `baoyu-slide-deck` / `baoyu-comic` 文档统一用 `${SKILL_DIR}` 引用脚本路径,方便 agent 在任意安装目录运行。
|
||||
- 文档规范:在 `CLAUDE.md` 中补充“Script Directory”模板;`baoyu-danger-gemini-web` / `baoyu-slide-deck` / `baoyu-comic` 文档统一用 `${SKILL_DIR}` 引用脚本路径,方便 agent 在任意安装目录运行。
|
||||
|
||||
## 0.6.0 - 2026-01-17
|
||||
|
||||
@@ -76,8 +158,8 @@
|
||||
|
||||
## 0.5.2 - 2026-01-16
|
||||
|
||||
- `baoyu-gemini-web`:新增 `--sessionId`(本地持久化会话,支持 `--list-sessions`),用于多轮对话/多图生成保持上下文一致。
|
||||
- `baoyu-gemini-web`:新增 `--reference/--ref` 传入参考图片(vision 输入),并增强超时与 cookie 失效自动恢复逻辑。
|
||||
- `baoyu-danger-gemini-web`:新增 `--sessionId`(本地持久化会话,支持 `--list-sessions`),用于多轮对话/多图生成保持上下文一致。
|
||||
- `baoyu-danger-gemini-web`:新增 `--reference/--ref` 传入参考图片(vision 输入),并增强超时与 cookie 失效自动恢复逻辑。
|
||||
- `baoyu-xhs-images` / `baoyu-slide-deck` / `baoyu-comic`:文档补充 session 约定(整套图使用同一 `sessionId`,增强风格一致性)。
|
||||
|
||||
## 0.5.1 - 2026-01-16
|
||||
@@ -93,7 +175,7 @@
|
||||
|
||||
## 0.4.2 - 2026-01-15
|
||||
|
||||
- `baoyu-gemini-web`:描述信息更新,明确其作为 `cover-image` / `xhs-images` / `article-illustrator` 等技能的图片生成后端。
|
||||
- `baoyu-danger-gemini-web`:描述信息更新,明确其作为 `cover-image` / `xhs-images` / `article-illustrator` 等技能的图片生成后端。
|
||||
|
||||
## 0.4.1 - 2026-01-15
|
||||
|
||||
|
||||
@@ -8,17 +8,34 @@ Claude Code marketplace plugin providing AI-powered content generation skills. S
|
||||
|
||||
## Architecture
|
||||
|
||||
Skills are organized into three plugin categories in `marketplace.json`:
|
||||
|
||||
```
|
||||
skills/
|
||||
├── baoyu-gemini-web/ # Core: Gemini API wrapper (text + image gen)
|
||||
├── baoyu-xhs-images/ # Xiaohongshu infographic series (1-10 images)
|
||||
├── baoyu-cover-image/ # Article cover images (2.35:1 aspect)
|
||||
├── baoyu-slide-deck/ # Presentation slides with outlines
|
||||
├── baoyu-article-illustrator/ # Smart illustration placement
|
||||
├── baoyu-post-to-x/ # X/Twitter posting automation
|
||||
└── baoyu-post-to-wechat/ # WeChat Official Account posting
|
||||
├── [content-skills] # Content generation and publishing
|
||||
│ ├── baoyu-xhs-images/ # Xiaohongshu infographic series (1-10 images)
|
||||
│ ├── baoyu-cover-image/ # Article cover images (2.35:1 aspect)
|
||||
│ ├── baoyu-slide-deck/ # Presentation slides with outlines
|
||||
│ ├── baoyu-article-illustrator/ # Smart illustration placement
|
||||
│ ├── baoyu-comic/ # Knowledge comics (Logicomix/Ohmsha style)
|
||||
│ ├── baoyu-post-to-x/ # X/Twitter posting automation
|
||||
│ └── baoyu-post-to-wechat/ # WeChat Official Account posting
|
||||
│
|
||||
├── [ai-generation-skills] # AI-powered generation backends
|
||||
│ └── baoyu-danger-gemini-web/ # Gemini API wrapper (text + image gen)
|
||||
│
|
||||
└── [utility-skills] # Utility tools for content processing
|
||||
├── baoyu-danger-x-to-markdown/ # X/Twitter content to markdown
|
||||
└── baoyu-compress-image/ # Image compression
|
||||
```
|
||||
|
||||
**Plugin Categories**:
|
||||
| Category | Description |
|
||||
|----------|-------------|
|
||||
| `content-skills` | Skills that generate or publish content (images, slides, comics, posts) |
|
||||
| `ai-generation-skills` | Backend skills providing AI generation capabilities |
|
||||
| `utility-skills` | Helper tools for content processing (conversion, compression) |
|
||||
|
||||
Each skill contains:
|
||||
- `SKILL.md` - YAML front matter (name, description) + documentation
|
||||
- `scripts/` - TypeScript implementations
|
||||
@@ -35,24 +52,24 @@ npx -y bun skills/<skill>/scripts/main.ts [options]
|
||||
Examples:
|
||||
```bash
|
||||
# Text generation
|
||||
npx -y bun skills/baoyu-gemini-web/scripts/main.ts "Hello"
|
||||
npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts "Hello"
|
||||
|
||||
# Image generation
|
||||
npx -y bun skills/baoyu-gemini-web/scripts/main.ts --prompt "A cat" --image cat.png
|
||||
npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --prompt "A cat" --image cat.png
|
||||
|
||||
# From prompt files
|
||||
npx -y bun skills/baoyu-gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png
|
||||
npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png
|
||||
```
|
||||
|
||||
## Key Dependencies
|
||||
|
||||
- **Bun**: TypeScript runtime (via `npx -y bun`)
|
||||
- **Chrome**: Required for `baoyu-gemini-web` auth and `baoyu-post-to-x` automation
|
||||
- **Chrome**: Required for `baoyu-danger-gemini-web` auth and `baoyu-post-to-x` automation
|
||||
- **No npm packages**: Self-contained TypeScript, no external dependencies
|
||||
|
||||
## Authentication
|
||||
|
||||
`baoyu-gemini-web` uses browser cookies for Google auth:
|
||||
`baoyu-danger-gemini-web` uses browser cookies for Google auth:
|
||||
- First run opens Chrome for login
|
||||
- Cookies cached in data directory
|
||||
- Force refresh: `--login` flag
|
||||
@@ -70,9 +87,28 @@ npx -y bun skills/baoyu-gemini-web/scripts/main.ts --promptfiles system.md conte
|
||||
- SKILL.md `name` field: `baoyu-<name>`
|
||||
2. Add TypeScript in `skills/baoyu-<name>/scripts/`
|
||||
3. Add prompt templates in `skills/baoyu-<name>/prompts/` if needed
|
||||
4. Register in `marketplace.json` plugins[0].skills array as `./skills/baoyu-<name>`
|
||||
4. **Choose the appropriate category** and register in `marketplace.json`:
|
||||
- `content-skills`: For content generation/publishing (images, slides, posts)
|
||||
- `ai-generation-skills`: For AI backend capabilities
|
||||
- `utility-skills`: For helper tools (conversion, compression)
|
||||
- If none fit, create a new category with descriptive name
|
||||
5. **Add Script Directory section** to SKILL.md (see template below)
|
||||
|
||||
### Choosing a Category
|
||||
|
||||
| If your skill... | Use category |
|
||||
|------------------|--------------|
|
||||
| Generates visual content (images, slides, comics) | `content-skills` |
|
||||
| Publishes to platforms (X, WeChat, etc.) | `content-skills` |
|
||||
| Provides AI generation backend | `ai-generation-skills` |
|
||||
| Converts or processes content | `utility-skills` |
|
||||
| Compresses or optimizes files | `utility-skills` |
|
||||
|
||||
**Creating a new category**: If the skill doesn't fit existing categories, add a new plugin object to `marketplace.json` with:
|
||||
- `name`: Descriptive kebab-case name (e.g., `analytics-skills`)
|
||||
- `description`: Brief description of the category
|
||||
- `skills`: Array with the skill path
|
||||
|
||||
### Script Directory Template
|
||||
|
||||
Every SKILL.md with scripts MUST include this section after Usage:
|
||||
@@ -121,7 +157,7 @@ Use this template when implementing image generation in skills:
|
||||
### Step N: Generate Images
|
||||
|
||||
**Skill Selection**:
|
||||
1. Check available image generation skills (e.g., `baoyu-gemini-web`)
|
||||
1. Check available image generation skills (e.g., `baoyu-danger-gemini-web`)
|
||||
2. Read selected skill's SKILL.md for parameter reference
|
||||
3. If multiple skills available, ask user to choose
|
||||
|
||||
@@ -137,27 +173,33 @@ Use this template when implementing image generation in skills:
|
||||
|
||||
### Output Path Convention
|
||||
|
||||
Generated images from the same skill and source file MUST be grouped together:
|
||||
Each session creates an independent directory. Even the same source file generates a new directory per session.
|
||||
|
||||
**With source file** (e.g., `/path/to/project/content/my-article.md`):
|
||||
**Output Directory**:
|
||||
```
|
||||
/path/to/project/content/my-article/<skill-suffix>/
|
||||
<skill-suffix>/<topic-slug>/
|
||||
```
|
||||
- Remove file extension from source filename
|
||||
- Use skill name suffix (e.g., `xhs-images`, `cover-image`, `slide-deck`)
|
||||
- Example: source `/tests-data/anthropic-economic-index.md` + skill `baoyu-xhs-images` → `/tests-data/anthropic-economic-index/xhs-images/`
|
||||
- `<skill-suffix>`: Skill name suffix (e.g., `xhs-images`, `cover-image`, `slide-deck`, `comic`)
|
||||
- `<topic-slug>`: Generated from content topic (2-4 words, kebab-case)
|
||||
- Example: `xhs-images/ai-future-trends/`
|
||||
|
||||
**Without source file**:
|
||||
```
|
||||
./<skill-suffix>/<source-slug>/
|
||||
```
|
||||
- Place under current project directory
|
||||
- Use descriptive slug for the content
|
||||
**Slug Generation**:
|
||||
1. Extract main topic from content (2-4 words, kebab-case)
|
||||
2. Example: "Introduction to Machine Learning" → `intro-machine-learning`
|
||||
|
||||
**Directory Backup**:
|
||||
- If output directory already exists, rename existing directory with timestamp
|
||||
- Format: `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
- Example: `xhs-images` → `xhs-images-backup-20260117-143052`
|
||||
**Conflict Resolution**:
|
||||
If `<skill-suffix>/<topic-slug>/` already exists:
|
||||
- Append timestamp: `<topic-slug>-YYYYMMDD-HHMMSS`
|
||||
- Example: `ai-future` exists → `ai-future-20260118-143052`
|
||||
|
||||
**Source Files**:
|
||||
- Copy all sources to `<skill-suffix>/<topic-slug>/` with naming: `source-{slug}.{ext}`
|
||||
- Multiple sources supported: text, images, files from conversation
|
||||
- Examples:
|
||||
- `source-article.md` (main text content)
|
||||
- `source-reference.png` (image from conversation)
|
||||
- `source-data.csv` (additional file)
|
||||
- Original source files remain unchanged
|
||||
|
||||
### Image Naming Convention
|
||||
|
||||
|
||||
@@ -31,13 +31,16 @@ Run the following command in Claude Code:
|
||||
|
||||
1. Select **Browse and install plugins**
|
||||
2. Select **baoyu-skills**
|
||||
3. Select **content-skills**
|
||||
3. Select the plugin(s) you want to install
|
||||
4. Select **Install now**
|
||||
|
||||
**Option 2: Direct Install**
|
||||
|
||||
```bash
|
||||
# Install specific plugin
|
||||
/plugin install content-skills@baoyu-skills
|
||||
/plugin install ai-generation-skills@baoyu-skills
|
||||
/plugin install utility-skills@baoyu-skills
|
||||
```
|
||||
|
||||
**Option 3: Ask the Agent**
|
||||
@@ -46,6 +49,14 @@ Simply tell Claude Code:
|
||||
|
||||
> Please install Skills from github.com/JimLiu/baoyu-skills
|
||||
|
||||
### Available Plugins
|
||||
|
||||
| Plugin | Description | Skills |
|
||||
|--------|-------------|--------|
|
||||
| **content-skills** | Content generation and publishing | [xhs-images](#baoyu-xhs-images), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
|
||||
| **ai-generation-skills** | AI-powered generation backends | [danger-gemini-web](#baoyu-danger-gemini-web) |
|
||||
| **utility-skills** | Utility tools for content processing | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
|
||||
|
||||
## Update Skills
|
||||
|
||||
To update skills to the latest version:
|
||||
@@ -61,25 +72,13 @@ You can also **Enable auto-update** to get the latest versions automatically.
|
||||
|
||||
## Available Skills
|
||||
|
||||
### baoyu-gemini-web
|
||||
Skills are organized into three categories:
|
||||
|
||||
Interacts with Gemini Web to generate text and images.
|
||||
### Content Skills
|
||||
|
||||
**Text Generation:**
|
||||
Content generation and publishing skills.
|
||||
|
||||
```bash
|
||||
/baoyu-gemini-web "Hello, Gemini"
|
||||
/baoyu-gemini-web --prompt "Explain quantum computing"
|
||||
```
|
||||
|
||||
**Image Generation:**
|
||||
|
||||
```bash
|
||||
/baoyu-gemini-web --prompt "A cute cat" --image cat.png
|
||||
/baoyu-gemini-web --promptfiles system.md content.md --image out.png
|
||||
```
|
||||
|
||||
### baoyu-xhs-images
|
||||
#### baoyu-xhs-images
|
||||
|
||||
Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics with **Style × Layout** two-dimensional system.
|
||||
|
||||
@@ -112,7 +111,7 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
|
||||
| `comparison` | 2 sides | Before/after, pros/cons |
|
||||
| `flow` | 3-6 steps | Processes, timelines |
|
||||
|
||||
### baoyu-cover-image
|
||||
#### baoyu-cover-image
|
||||
|
||||
Generate hand-drawn style cover images for articles with multiple style options.
|
||||
|
||||
@@ -128,9 +127,28 @@ Generate hand-drawn style cover images for articles with multiple style options.
|
||||
/baoyu-cover-image path/to/article.md --no-title
|
||||
```
|
||||
|
||||
Available styles: `elegant` (default), `tech`, `warm`, `bold`, `minimal`, `playful`, `nature`, `retro`
|
||||
Available styles: `elegant` (default), `blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor`
|
||||
|
||||
### baoyu-slide-deck
|
||||
**Style Previews**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| elegant | blueprint | bold-editorial |
|
||||
|  |  |  |
|
||||
| chalkboard | dark-atmospheric | editorial-infographic |
|
||||
|  |  |  |
|
||||
| fantasy-animation | intuition-machine | minimal |
|
||||
|  |  |  |
|
||||
| nature | notion | pixel-art |
|
||||
|  |  |  |
|
||||
| playful | retro | sketch-notes |
|
||||
|  |  |  |
|
||||
| vector-illustration | vintage | warm |
|
||||
|  | | |
|
||||
| watercolor | | |
|
||||
|
||||
#### baoyu-slide-deck
|
||||
|
||||
Generate professional slide deck images from content. Creates comprehensive outlines with style instructions, then generates individual slide images.
|
||||
|
||||
@@ -169,9 +187,26 @@ Generate professional slide deck images from content. Creates comprehensive outl
|
||||
| `vintage` | Aged-paper aesthetic, historical document styling | Historical, heritage, biography |
|
||||
| `watercolor` | Soft hand-painted textures, natural warmth | Lifestyle, wellness, travel |
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| blueprint | chalkboard | bold-editorial |
|
||||
|  |  |  |
|
||||
| corporate | dark-atmospheric | editorial-infographic |
|
||||
|  |  |  |
|
||||
| fantasy-animation | intuition-machine | minimal |
|
||||
|  |  |  |
|
||||
| notion | pixel-art | scientific |
|
||||
|  |  |  |
|
||||
| sketch-notes | vector-illustration | vintage |
|
||||
|  | | |
|
||||
| watercolor | | |
|
||||
|
||||
After generation, slides are automatically merged into a `.pptx` file for easy sharing.
|
||||
|
||||
### baoyu-comic
|
||||
#### baoyu-comic
|
||||
|
||||
Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation.
|
||||
|
||||
@@ -200,7 +235,7 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
|
||||
**Options**:
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--style` | `classic` (default), `dramatic`, `warm`, `tech`, `sepia`, `vibrant`, `ohmsha`, `realistic`, or custom description |
|
||||
| `--style` | `classic` (default), `dramatic`, `warm`, `sepia`, `vibrant`, `ohmsha`, `realistic`, `wuxia`, or custom description |
|
||||
| `--layout` | `standard` (default), `cinematic`, `dense`, `splash`, `mixed`, `webtoon` |
|
||||
| `--aspect` | `3:4` (default, portrait), `4:3` (landscape), `16:9` (widescreen) |
|
||||
| `--lang` | `auto` (default), `zh`, `en`, `ja`, etc. |
|
||||
@@ -212,11 +247,22 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
|
||||
| `classic` (default) | Traditional Ligne Claire with clean uniform outlines, flat colors, detailed backgrounds | Biographies, balanced narratives, educational content |
|
||||
| `dramatic` | High contrast with heavy shadows, intense expressions, angular compositions | Pivotal discoveries, conflicts, climactic scenes |
|
||||
| `warm` | Soft edges, golden tones, cozy interiors with nostalgic feel | Personal stories, childhood scenes, mentorship |
|
||||
| `tech` | Precise geometric lines, circuit motifs, neon accents on dark backgrounds | Computing history, AI stories, modern tech |
|
||||
| `sepia` | Vintage illustration style with aged paper effect, period-accurate details | Pre-1950s stories, classical science, historical figures |
|
||||
| `vibrant` | Energetic lines with weight variation, bright colors, dynamic poses | Science explanations, "aha" moments, young audience |
|
||||
| `ohmsha` | Manga guide style with visual metaphors, gadgets, student/mentor dynamic | Technical tutorials, complex concepts (ML, physics) |
|
||||
| `realistic` | Full-color realistic manga with digital painting, smooth gradients, accurate proportions | Wine, food, business, lifestyle, professional topics |
|
||||
| `wuxia` | Hong Kong martial arts style with ink brush strokes, dynamic combat, qi effects | Martial arts, wuxia/xianxia, Chinese historical fiction |
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| classic | dramatic | warm |
|
||||
|  |  |  |
|
||||
| sepia | vibrant | ohmsha |
|
||||
|  |  | |
|
||||
| realistic | wuxia | |
|
||||
|
||||
**Layouts** (panel arrangement):
|
||||
| Layout | Panels/Page | Best for |
|
||||
@@ -228,7 +274,88 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
|
||||
| `mixed` | 3-7 varies | Complex narratives, emotional arcs |
|
||||
| `webtoon` | 3-5 vertical | Ohmsha tutorials, mobile reading |
|
||||
|
||||
### baoyu-post-to-wechat
|
||||
**Layout Previews**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| standard | cinematic | dense |
|
||||
|  |  |  |
|
||||
| splash | mixed | webtoon |
|
||||
|
||||
#### baoyu-article-illustrator
|
||||
|
||||
Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids.
|
||||
|
||||
```bash
|
||||
# Auto-select style based on content
|
||||
/baoyu-article-illustrator path/to/article.md
|
||||
|
||||
# Specify a style
|
||||
/baoyu-article-illustrator path/to/article.md --style warm
|
||||
/baoyu-article-illustrator path/to/article.md --style watercolor
|
||||
```
|
||||
|
||||
**Styles** (visual aesthetics):
|
||||
|
||||
| Style | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
| `notion` (default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
|
||||
| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
|
||||
| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle |
|
||||
| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism |
|
||||
| `playful` | Fun, creative, whimsical | Tutorials, beginner guides |
|
||||
| `nature` | Organic, calm, earthy | Sustainability, wellness |
|
||||
| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming |
|
||||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
||||
| `vintage` | Nostalgic aged-paper aesthetic | Historical, biography |
|
||||
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
|
||||
| `chalkboard` | Classroom chalk drawing style | Education, tutorials |
|
||||
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||
| `flat` | Modern flat vector illustration | Startups, digital |
|
||||
| `retro` | 80s/90s vibrant nostalgic | Pop culture, entertainment |
|
||||
| `blueprint` | Technical schematics, engineering | Architecture, system design |
|
||||
| `vector-illustration` | Flat vector, black outlines, retro | Educational, creative, brand |
|
||||
| `sketch-notes` | Soft hand-drawn, warm feel | Knowledge sharing, tutorials |
|
||||
| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, tech, developer |
|
||||
| `intuition-machine` | Technical briefing, bilingual | Academic, technical, research |
|
||||
| `fantasy-animation` | Ghibli/Disney whimsical style | Storytelling, children's |
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| notion | elegant | warm |
|
||||
|  |  |  |
|
||||
| minimal | playful | nature |
|
||||
|  |  |  |
|
||||
| sketch | watercolor | vintage |
|
||||
|  |  |  |
|
||||
| scientific | chalkboard | editorial |
|
||||
|  |  |  |
|
||||
| flat | retro | blueprint |
|
||||
|  |  |  |
|
||||
| vector-illustration | sketch-notes | pixel-art |
|
||||
|  |  | |
|
||||
| intuition-machine | fantasy-animation | |
|
||||
|
||||
#### baoyu-post-to-x
|
||||
|
||||
Post content and articles to X (Twitter). Supports regular posts with images and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation.
|
||||
|
||||
```bash
|
||||
# Post with text
|
||||
/baoyu-post-to-x "Hello from Claude Code!"
|
||||
|
||||
# Post with images
|
||||
/baoyu-post-to-x "Check this out" --image photo.png
|
||||
|
||||
# Post X Article
|
||||
/baoyu-post-to-x --article path/to/article.md
|
||||
```
|
||||
|
||||
#### baoyu-post-to-wechat
|
||||
|
||||
Post content to WeChat Official Account (微信公众号). Two modes available:
|
||||
|
||||
@@ -250,6 +377,63 @@ Post content to WeChat Official Account (微信公众号). Two modes available:
|
||||
|
||||
Prerequisites: Google Chrome installed. First run requires QR code login (session preserved).
|
||||
|
||||
### AI Generation Skills
|
||||
|
||||
AI-powered generation backends.
|
||||
|
||||
#### baoyu-danger-gemini-web
|
||||
|
||||
Interacts with Gemini Web to generate text and images.
|
||||
|
||||
**Text Generation:**
|
||||
|
||||
```bash
|
||||
/baoyu-danger-gemini-web "Hello, Gemini"
|
||||
/baoyu-danger-gemini-web --prompt "Explain quantum computing"
|
||||
```
|
||||
|
||||
**Image Generation:**
|
||||
|
||||
```bash
|
||||
/baoyu-danger-gemini-web --prompt "A cute cat" --image cat.png
|
||||
/baoyu-danger-gemini-web --promptfiles system.md content.md --image out.png
|
||||
```
|
||||
|
||||
### Utility Skills
|
||||
|
||||
Utility tools for content processing.
|
||||
|
||||
#### baoyu-danger-x-to-markdown
|
||||
|
||||
Converts X (Twitter) content to markdown format. Supports tweet threads and X Articles.
|
||||
|
||||
```bash
|
||||
# Convert tweet to markdown
|
||||
/baoyu-danger-x-to-markdown https://x.com/username/status/123456
|
||||
|
||||
# Save to specific file
|
||||
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 -o output.md
|
||||
|
||||
# JSON output
|
||||
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 --json
|
||||
```
|
||||
|
||||
**Supported URLs:**
|
||||
- `https://x.com/<user>/status/<id>`
|
||||
- `https://twitter.com/<user>/status/<id>`
|
||||
- `https://x.com/i/article/<id>`
|
||||
|
||||
**Authentication:** Uses environment variables (`X_AUTH_TOKEN`, `X_CT0`) or Chrome login for cookie-based auth.
|
||||
|
||||
#### baoyu-compress-image
|
||||
|
||||
Compress images to reduce file size while maintaining quality.
|
||||
|
||||
```bash
|
||||
/baoyu-compress-image path/to/image.png
|
||||
/baoyu-compress-image path/to/images/ --quality 80
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
All skills support customization via `EXTEND.md` files. Create an extension file to override default styles, add custom configurations, or define your own presets.
|
||||
@@ -280,16 +464,35 @@ The extension content will be loaded before skill execution and override default
|
||||
|
||||
## Disclaimer
|
||||
|
||||
### baoyu-gemini-web
|
||||
### baoyu-danger-gemini-web
|
||||
|
||||
This skill uses the Gemini Web API (reverse-engineered).
|
||||
|
||||
**Warning:** This project uses unofficial API access via browser cookies. Use at your own risk.
|
||||
|
||||
- First run opens Chrome to authenticate with Google
|
||||
- First run opens a browser to authenticate with Google
|
||||
- Cookies are cached for subsequent runs
|
||||
- No guarantees on API stability or availability
|
||||
|
||||
**Supported browsers** (auto-detected): Google Chrome, Chrome Canary/Beta, Chromium, Microsoft Edge
|
||||
|
||||
**Proxy configuration**: If you need a proxy to access Google services (e.g., in China), set environment variables inline:
|
||||
|
||||
```bash
|
||||
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 /baoyu-danger-gemini-web "Hello"
|
||||
```
|
||||
|
||||
### baoyu-danger-x-to-markdown
|
||||
|
||||
This skill uses a reverse-engineered X (Twitter) API.
|
||||
|
||||
**Warning:** This is NOT an official API. Use at your own risk.
|
||||
|
||||
- May break without notice if X changes their API
|
||||
- Account restrictions possible if API usage detected
|
||||
- First use requires consent acknowledgment
|
||||
- Authentication via environment variables or Chrome login
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
@@ -31,13 +31,16 @@ npx add-skill jimliu/baoyu-skills
|
||||
|
||||
1. 选择 **Browse and install plugins**
|
||||
2. 选择 **baoyu-skills**
|
||||
3. 选择 **content-skills**
|
||||
3. 选择要安装的插件
|
||||
4. 选择 **Install now**
|
||||
|
||||
**方式二:直接安装**
|
||||
|
||||
```bash
|
||||
# 安装指定插件
|
||||
/plugin install content-skills@baoyu-skills
|
||||
/plugin install ai-generation-skills@baoyu-skills
|
||||
/plugin install utility-skills@baoyu-skills
|
||||
```
|
||||
|
||||
**方式三:告诉 Agent**
|
||||
@@ -46,6 +49,14 @@ npx add-skill jimliu/baoyu-skills
|
||||
|
||||
> 请帮我安装 github.com/JimLiu/baoyu-skills 中的 Skills
|
||||
|
||||
### 可用插件
|
||||
|
||||
| 插件 | 说明 | 包含技能 |
|
||||
|------|------|----------|
|
||||
| **content-skills** | 内容生成和发布 | [xhs-images](#baoyu-xhs-images), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
|
||||
| **ai-generation-skills** | AI 生成后端 | [danger-gemini-web](#baoyu-danger-gemini-web) |
|
||||
| **utility-skills** | 内容处理工具 | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
|
||||
|
||||
## 更新技能
|
||||
|
||||
更新技能到最新版本:
|
||||
@@ -61,25 +72,13 @@ npx add-skill jimliu/baoyu-skills
|
||||
|
||||
## 可用技能
|
||||
|
||||
### baoyu-gemini-web
|
||||
技能分为三大类:
|
||||
|
||||
与 Gemini Web 交互,生成文本和图片。
|
||||
### 内容技能 (Content Skills)
|
||||
|
||||
**文本生成:**
|
||||
内容生成和发布技能。
|
||||
|
||||
```bash
|
||||
/baoyu-gemini-web "你好,Gemini"
|
||||
/baoyu-gemini-web --prompt "解释量子计算"
|
||||
```
|
||||
|
||||
**图片生成:**
|
||||
|
||||
```bash
|
||||
/baoyu-gemini-web --prompt "一只可爱的猫" --image cat.png
|
||||
/baoyu-gemini-web --promptfiles system.md content.md --image out.png
|
||||
```
|
||||
|
||||
### baoyu-xhs-images
|
||||
#### baoyu-xhs-images
|
||||
|
||||
小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图,支持 **风格 × 布局** 二维系统。
|
||||
|
||||
@@ -112,7 +111,7 @@ npx add-skill jimliu/baoyu-skills
|
||||
| `comparison` | 双栏 | 对比、优劣 |
|
||||
| `flow` | 3-6 步 | 流程、时间线 |
|
||||
|
||||
### baoyu-cover-image
|
||||
#### baoyu-cover-image
|
||||
|
||||
为文章生成手绘风格封面图,支持多种风格选项。
|
||||
|
||||
@@ -128,9 +127,28 @@ npx add-skill jimliu/baoyu-skills
|
||||
/baoyu-cover-image path/to/article.md --no-title
|
||||
```
|
||||
|
||||
可用风格:`elegant`(默认)、`tech`、`warm`、`bold`、`minimal`、`playful`、`nature`、`retro`
|
||||
可用风格:`elegant`(默认)、`blueprint`、`bold-editorial`、`chalkboard`、`dark-atmospheric`、`editorial-infographic`、`fantasy-animation`、`intuition-machine`、`minimal`、`nature`、`notion`、`pixel-art`、`playful`、`retro`、`sketch-notes`、`vector-illustration`、`vintage`、`warm`、`watercolor`
|
||||
|
||||
### baoyu-slide-deck
|
||||
**风格预览**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| elegant | blueprint | bold-editorial |
|
||||
|  |  |  |
|
||||
| chalkboard | dark-atmospheric | editorial-infographic |
|
||||
|  |  |  |
|
||||
| fantasy-animation | intuition-machine | minimal |
|
||||
|  |  |  |
|
||||
| nature | notion | pixel-art |
|
||||
|  |  |  |
|
||||
| playful | retro | sketch-notes |
|
||||
|  |  |  |
|
||||
| vector-illustration | vintage | warm |
|
||||
|  | | |
|
||||
| watercolor | | |
|
||||
|
||||
#### baoyu-slide-deck
|
||||
|
||||
从内容生成专业的幻灯片图片。先创建包含样式说明的完整大纲,然后逐页生成幻灯片图片。
|
||||
|
||||
@@ -169,9 +187,26 @@ npx add-skill jimliu/baoyu-skills
|
||||
| `vintage` | 做旧纸张美学,历史文档风格 | 历史、传记、人文 |
|
||||
| `watercolor` | 柔和手绘水彩纹理,自然温暖 | 生活方式、健康、旅行 |
|
||||
|
||||
**风格预览**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| blueprint | chalkboard | bold-editorial |
|
||||
|  |  |  |
|
||||
| corporate | dark-atmospheric | editorial-infographic |
|
||||
|  |  |  |
|
||||
| fantasy-animation | intuition-machine | minimal |
|
||||
|  |  |  |
|
||||
| notion | pixel-art | scientific |
|
||||
|  |  |  |
|
||||
| sketch-notes | vector-illustration | vintage |
|
||||
|  | | |
|
||||
| watercolor | | |
|
||||
|
||||
生成完成后,所有幻灯片会自动合并为 `.pptx` 文件,方便分享。
|
||||
|
||||
### baoyu-comic
|
||||
#### baoyu-comic
|
||||
|
||||
知识漫画创作器,支持多种风格(Logicomix/清线风格、欧姆社漫画教程风格)。创作带有详细分镜布局的原创教育漫画,逐页生成图片。
|
||||
|
||||
@@ -200,7 +235,7 @@ npx add-skill jimliu/baoyu-skills
|
||||
**选项**:
|
||||
| 选项 | 取值 |
|
||||
|------|------|
|
||||
| `--style` | `classic`(默认)、`dramatic`、`warm`、`tech`、`sepia`、`vibrant`、`ohmsha`、`realistic`,或自然语言描述 |
|
||||
| `--style` | `classic`(默认)、`dramatic`、`warm`、`sepia`、`vibrant`、`ohmsha`、`realistic`、`wuxia`,或自然语言描述 |
|
||||
| `--layout` | `standard`(默认)、`cinematic`、`dense`、`splash`、`mixed`、`webtoon` |
|
||||
| `--aspect` | `3:4`(默认,竖版)、`4:3`(横版)、`16:9`(宽屏) |
|
||||
| `--lang` | `auto`(默认)、`zh`、`en`、`ja` 等 |
|
||||
@@ -212,11 +247,22 @@ npx add-skill jimliu/baoyu-skills
|
||||
| `classic`(默认) | 传统清线风格,统一线条、平涂色彩、精细背景 | 传记、平衡叙事、教育内容 |
|
||||
| `dramatic` | 高对比度,重阴影、紧张表情、棱角分明的构图 | 重大发现、冲突、高潮场景 |
|
||||
| `warm` | 柔和边缘、金色调、温馨室内、怀旧感 | 个人故事、童年场景、师生情 |
|
||||
| `tech` | 精确几何线条、电路纹理、深色背景配霓虹色 | 计算机史、AI 故事、现代科技 |
|
||||
| `sepia` | 复古插画风格、做旧纸张效果、时代准确细节 | 1950 年前故事、古典科学、历史人物 |
|
||||
| `vibrant` | 富有活力的线条、明亮色彩、动感姿态 | 科学解说、"顿悟"时刻、青少年读者 |
|
||||
| `ohmsha` | 欧姆社漫画风格,视觉比喻、道具、学生/导师互动 | 技术教程、复杂概念(机器学习、物理) |
|
||||
| `realistic` | 全彩写实日漫风格,数字绘画、平滑渐变、准确人体比例 | 红酒、美食、商业、生活方式、专业话题 |
|
||||
| `wuxia` | 港漫武侠风格,水墨笔触、动态打斗、气功特效 | 武侠、仙侠、中国历史小说 |
|
||||
|
||||
**风格预览**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| classic | dramatic | warm |
|
||||
|  |  |  |
|
||||
| sepia | vibrant | ohmsha |
|
||||
|  |  | |
|
||||
| realistic | wuxia | |
|
||||
|
||||
**布局**(分镜排列):
|
||||
| 布局 | 每页分镜数 | 适用场景 |
|
||||
@@ -228,7 +274,88 @@ npx add-skill jimliu/baoyu-skills
|
||||
| `mixed` | 3-7 不等 | 复杂叙事、情感弧线 |
|
||||
| `webtoon` | 3-5 竖向 | 欧姆社教程、手机阅读 |
|
||||
|
||||
### baoyu-post-to-wechat
|
||||
**布局预览**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| standard | cinematic | dense |
|
||||
|  |  |  |
|
||||
| splash | mixed | webtoon |
|
||||
|
||||
#### baoyu-article-illustrator
|
||||
|
||||
智能文章插图技能。分析文章内容,在需要视觉辅助的位置生成插图。
|
||||
|
||||
```bash
|
||||
# 根据内容自动选择风格
|
||||
/baoyu-article-illustrator path/to/article.md
|
||||
|
||||
# 指定风格
|
||||
/baoyu-article-illustrator path/to/article.md --style warm
|
||||
/baoyu-article-illustrator path/to/article.md --style watercolor
|
||||
```
|
||||
|
||||
**风格**(视觉美学):
|
||||
|
||||
| 风格 | 描述 | 适用场景 |
|
||||
|------|------|----------|
|
||||
| `notion`(默认) | 极简手绘线条画 | 知识分享、SaaS、生产力 |
|
||||
| `elegant` | 精致、优雅、专业 | 商业、思想领导力 |
|
||||
| `warm` | 友好、亲切、人文关怀 | 个人成长、生活方式 |
|
||||
| `minimal` | 极简、禅意、专注 | 哲学、极简主义 |
|
||||
| `playful` | 有趣、创意、俏皮 | 教程、新手指南 |
|
||||
| `nature` | 自然、平静、质朴 | 可持续发展、健康 |
|
||||
| `sketch` | 原始、真实、笔记风格 | 想法、头脑风暴 |
|
||||
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
|
||||
| `vintage` | 怀旧做旧纸张美学 | 历史、传记 |
|
||||
| `scientific` | 学术精确图表 | 生物、化学、技术 |
|
||||
| `chalkboard` | 教室粉笔画风格 | 教育、教程 |
|
||||
| `editorial` | 杂志风格信息图 | 科技解说、新闻 |
|
||||
| `flat` | 现代扁平矢量插画 | 创业公司、数字化 |
|
||||
| `retro` | 80/90 年代复古鲜艳 | 流行文化、娱乐 |
|
||||
| `blueprint` | 技术蓝图、工程精度 | 架构、系统设计 |
|
||||
| `vector-illustration` | 扁平矢量、黑色轮廓、复古 | 教育、创意、品牌 |
|
||||
| `sketch-notes` | 柔和手绘、温暖感 | 知识分享、教程 |
|
||||
| `pixel-art` | 复古 8-bit 游戏风格 | 游戏、技术、开发者 |
|
||||
| `intuition-machine` | 技术简报、双语标签 | 学术、技术、研究 |
|
||||
| `fantasy-animation` | 吉卜力/迪士尼童话风格 | 故事、儿童、创意 |
|
||||
|
||||
**风格预览**:
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| notion | elegant | warm |
|
||||
|  |  |  |
|
||||
| minimal | playful | nature |
|
||||
|  |  |  |
|
||||
| sketch | watercolor | vintage |
|
||||
|  |  |  |
|
||||
| scientific | chalkboard | editorial |
|
||||
|  |  |  |
|
||||
| flat | retro | blueprint |
|
||||
|  |  |  |
|
||||
| vector-illustration | sketch-notes | pixel-art |
|
||||
|  |  | |
|
||||
| intuition-machine | fantasy-animation | |
|
||||
|
||||
#### baoyu-post-to-x
|
||||
|
||||
发布内容和文章到 X (Twitter)。支持带图片的普通帖子和 X 文章(长篇 Markdown)。使用真实 Chrome + CDP 绕过反自动化检测。
|
||||
|
||||
```bash
|
||||
# 发布文字
|
||||
/baoyu-post-to-x "Hello from Claude Code!"
|
||||
|
||||
# 发布带图片
|
||||
/baoyu-post-to-x "看看这个" --image photo.png
|
||||
|
||||
# 发布 X 文章
|
||||
/baoyu-post-to-x --article path/to/article.md
|
||||
```
|
||||
|
||||
#### baoyu-post-to-wechat
|
||||
|
||||
发布内容到微信公众号,支持两种模式:
|
||||
|
||||
@@ -250,6 +377,63 @@ npx add-skill jimliu/baoyu-skills
|
||||
|
||||
前置要求:已安装 Google Chrome,首次运行需扫码登录(登录状态会保存)
|
||||
|
||||
### AI 生成技能 (AI Generation Skills)
|
||||
|
||||
AI 驱动的生成后端。
|
||||
|
||||
#### baoyu-danger-gemini-web
|
||||
|
||||
与 Gemini Web 交互,生成文本和图片。
|
||||
|
||||
**文本生成:**
|
||||
|
||||
```bash
|
||||
/baoyu-danger-gemini-web "你好,Gemini"
|
||||
/baoyu-danger-gemini-web --prompt "解释量子计算"
|
||||
```
|
||||
|
||||
**图片生成:**
|
||||
|
||||
```bash
|
||||
/baoyu-danger-gemini-web --prompt "一只可爱的猫" --image cat.png
|
||||
/baoyu-danger-gemini-web --promptfiles system.md content.md --image out.png
|
||||
```
|
||||
|
||||
### 工具技能 (Utility Skills)
|
||||
|
||||
内容处理工具。
|
||||
|
||||
#### baoyu-danger-x-to-markdown
|
||||
|
||||
将 X (Twitter) 内容转换为 markdown 格式。支持推文串和 X 文章。
|
||||
|
||||
```bash
|
||||
# 将推文转换为 markdown
|
||||
/baoyu-danger-x-to-markdown https://x.com/username/status/123456
|
||||
|
||||
# 保存到指定文件
|
||||
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 -o output.md
|
||||
|
||||
# JSON 输出
|
||||
/baoyu-danger-x-to-markdown https://x.com/username/status/123456 --json
|
||||
```
|
||||
|
||||
**支持的 URL:**
|
||||
- `https://x.com/<user>/status/<id>`
|
||||
- `https://twitter.com/<user>/status/<id>`
|
||||
- `https://x.com/i/article/<id>`
|
||||
|
||||
**身份验证:** 使用环境变量(`X_AUTH_TOKEN`、`X_CT0`)或 Chrome 登录进行 cookie 认证。
|
||||
|
||||
#### baoyu-compress-image
|
||||
|
||||
压缩图片以减小文件大小,同时保持质量。
|
||||
|
||||
```bash
|
||||
/baoyu-compress-image path/to/image.png
|
||||
/baoyu-compress-image path/to/images/ --quality 80
|
||||
```
|
||||
|
||||
## 自定义扩展
|
||||
|
||||
所有技能支持通过 `EXTEND.md` 文件自定义。创建扩展文件可覆盖默认样式、添加自定义配置或定义个人预设。
|
||||
@@ -280,16 +464,35 @@ mkdir -p .baoyu-skills/baoyu-cover-image
|
||||
|
||||
## 免责声明
|
||||
|
||||
### baoyu-gemini-web
|
||||
### baoyu-danger-gemini-web
|
||||
|
||||
此技能使用 Gemini Web API(逆向工程)。
|
||||
|
||||
**警告:** 本项目通过浏览器 cookies 使用非官方 API。使用风险自负。
|
||||
|
||||
- 首次运行会打开 Chrome 进行 Google 身份验证
|
||||
- 首次运行会打开浏览器进行 Google 身份验证
|
||||
- Cookies 会被缓存供后续使用
|
||||
- 不保证 API 的稳定性或可用性
|
||||
|
||||
**支持的浏览器**(自动检测):Google Chrome、Chrome Canary/Beta、Chromium、Microsoft Edge
|
||||
|
||||
**代理配置**:如果需要通过代理访问 Google 服务(如中国大陆用户),请在命令前设置环境变量:
|
||||
|
||||
```bash
|
||||
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 /baoyu-danger-gemini-web "你好"
|
||||
```
|
||||
|
||||
### baoyu-danger-x-to-markdown
|
||||
|
||||
此技能使用逆向工程的 X (Twitter) API。
|
||||
|
||||
**警告:** 这不是官方 API。使用风险自负。
|
||||
|
||||
- 如果 X 更改其 API,可能会无预警失效
|
||||
- 如检测到 API 使用,账号可能受限
|
||||
- 首次使用需确认免责声明
|
||||
- 通过环境变量或 Chrome 登录进行身份验证
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
|
||||
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 171 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 175 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 199 KiB |
|
After Width: | Height: | Size: 175 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 211 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 241 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 184 KiB |
|
Before Width: | Height: | Size: 782 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 936 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 402 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 926 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 98 KiB |
@@ -14,9 +14,9 @@ Analyze article structure and content, identify positions requiring visual aids,
|
||||
/baoyu-article-illustrator path/to/article.md
|
||||
|
||||
# Specify a style
|
||||
/baoyu-article-illustrator path/to/article.md --style tech
|
||||
/baoyu-article-illustrator path/to/article.md --style warm
|
||||
/baoyu-article-illustrator path/to/article.md --style minimal
|
||||
/baoyu-article-illustrator path/to/article.md --style watercolor
|
||||
|
||||
# Combine with other options
|
||||
/baoyu-article-illustrator path/to/article.md --style playful
|
||||
@@ -30,59 +30,30 @@ Analyze article structure and content, identify positions requiring visual aids,
|
||||
|
||||
## Style Gallery
|
||||
|
||||
### 1. `elegant`
|
||||
Refined, sophisticated, professional
|
||||
- **Colors**: Soft coral, muted teal, dusty rose, cream background
|
||||
- **Elements**: Delicate line work, subtle icons, balanced composition
|
||||
- **Best for**: Professional articles, thought leadership, business topics
|
||||
| Style | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
| `notion` (Default) | Minimalist hand-drawn line art, intellectual | Knowledge sharing, SaaS, productivity |
|
||||
| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
|
||||
| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle, education |
|
||||
| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism, core concepts |
|
||||
| `playful` | Fun, creative, whimsical | Tutorials, beginner guides, fun topics |
|
||||
| `nature` | Organic, calm, earthy | Sustainability, wellness, outdoor |
|
||||
| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming, drafts |
|
||||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
||||
| `vintage` | Nostalgic aged-paper aesthetic | Historical, biography, heritage |
|
||||
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
|
||||
| `chalkboard` | Classroom chalk drawing style | Education, tutorials, workshops |
|
||||
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||
| `flat` | Modern flat vector illustration | Startups, digital, contemporary |
|
||||
| `retro` | 80s/90s vibrant nostalgic | Pop culture, gaming, entertainment |
|
||||
| `blueprint` | Technical schematics, engineering precision | Architecture, system design |
|
||||
| `vector-illustration` | Flat vector with black outlines, retro colors | Educational, creative, brand content |
|
||||
| `sketch-notes` | Soft hand-drawn, warm educational feel | Knowledge sharing, tutorials |
|
||||
| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, tech, developer content |
|
||||
| `intuition-machine` | Technical briefing with bilingual labels | Academic, technical, bilingual |
|
||||
| `fantasy-animation` | Ghibli/Disney whimsical style | Storytelling, children's, creative |
|
||||
|
||||
### 2. `tech`
|
||||
Modern, futuristic, digital
|
||||
- **Colors**: Deep blue, electric cyan, purple, dark backgrounds
|
||||
- **Elements**: Geometric shapes, circuit patterns, data visualizations, tech icons
|
||||
- **Best for**: AI, programming, technology, digital transformation articles
|
||||
|
||||
### 3. `warm`
|
||||
Friendly, approachable, human-centered
|
||||
- **Colors**: Warm orange, golden yellow, terracotta, cream
|
||||
- **Elements**: Rounded shapes, friendly characters, sun/light motifs, hearts
|
||||
- **Best for**: Personal growth, lifestyle, education, human interest stories
|
||||
|
||||
### 4. `bold`
|
||||
High contrast, impactful, energetic
|
||||
- **Colors**: Vibrant red/orange, deep black, bright yellow accents
|
||||
- **Elements**: Strong shapes, dramatic contrast, dynamic compositions
|
||||
- **Best for**: Opinion pieces, important warnings, call-to-action content
|
||||
|
||||
### 5. `minimal`
|
||||
Ultra-clean, zen-like, focused
|
||||
- **Colors**: Black, white, single accent color
|
||||
- **Elements**: Maximum whitespace, single focal element, simple lines
|
||||
- **Best for**: Philosophy, minimalism, focused explanations
|
||||
|
||||
### 6. `playful`
|
||||
Fun, creative, whimsical
|
||||
- **Colors**: Pastel rainbow, bright pops, light backgrounds
|
||||
- **Elements**: Doodles, quirky characters, speech bubbles, emoji-style icons
|
||||
- **Best for**: Tutorials, beginner guides, casual content, fun topics
|
||||
|
||||
### 7. `nature`
|
||||
Organic, calm, earthy
|
||||
- **Colors**: Forest green, earth brown, sky blue, sand beige
|
||||
- **Elements**: Plant motifs, natural textures, flowing lines, organic shapes
|
||||
- **Best for**: Sustainability, wellness, outdoor topics, slow living
|
||||
|
||||
### 8. `sketch`
|
||||
Raw, authentic, notebook-style
|
||||
- **Colors**: Pencil gray, paper white, occasional color highlights
|
||||
- **Elements**: Rough lines, sketch marks, handwritten notes, arrows
|
||||
- **Best for**: Ideas in progress, brainstorming, thought processes
|
||||
|
||||
### 9. `notion` (Default)
|
||||
Minimalist hand-drawn line art, intellectual
|
||||
- **Colors**: Black outlines, white background, 1-2 pastel accents
|
||||
- **Elements**: Simple line doodles, geometric shapes, hand-drawn wobble, maximum whitespace
|
||||
- **Best for**: Knowledge sharing, concept explanations, SaaS content, productivity articles
|
||||
Full style specifications in `references/styles/<style>.md`
|
||||
|
||||
## Auto Style Selection
|
||||
|
||||
@@ -90,55 +61,66 @@ When no `--style` is specified, analyze content to select the best style:
|
||||
|
||||
| Content Signals | Selected Style |
|
||||
|----------------|----------------|
|
||||
| AI, coding, tech, digital, algorithm, data | `tech` |
|
||||
| Personal story, emotion, growth, life, feeling | `warm` |
|
||||
| Warning, urgent, must-read, critical, important | `bold` |
|
||||
| Simple, zen, focus, essential, core | `minimal` |
|
||||
| Fun, easy, beginner, tutorial, guide, how-to | `playful` |
|
||||
| Nature, eco, wellness, health, organic, green | `nature` |
|
||||
| Idea, thought, concept, draft, brainstorm | `sketch` |
|
||||
| Business, professional, strategy, analysis | `elegant` |
|
||||
| Knowledge, concept, productivity, SaaS, notion | `notion` |
|
||||
| Personal story, emotion, growth, life, feeling, relationship | `warm` |
|
||||
| Simple, zen, focus, essential, core, minimalist | `minimal` |
|
||||
| Fun, easy, beginner, tutorial, guide, how-to, learn | `playful` |
|
||||
| Nature, eco, wellness, health, organic, green, outdoor | `nature` |
|
||||
| Idea, thought, concept, draft, brainstorm, sketch | `sketch` |
|
||||
| Business, professional, strategy, analysis, corporate | `elegant` |
|
||||
| Knowledge, concept, productivity, SaaS, notion, tool | `notion` |
|
||||
| Lifestyle, travel, food, art, creative, artistic | `watercolor` |
|
||||
| History, heritage, vintage, biography, classic, expedition | `vintage` |
|
||||
| Biology, chemistry, medical, scientific, research, academic | `scientific` |
|
||||
| Education, classroom, teaching, school, lecture, workshop | `chalkboard` |
|
||||
| Explainer, journalism, magazine, in-depth, investigation | `editorial` |
|
||||
| Modern, startup, app, product, digital marketing, saas | `flat` |
|
||||
| 80s, 90s, retro, pop culture, music, nostalgia | `retro` |
|
||||
| Architecture, system, infrastructure, engineering, technical | `blueprint` |
|
||||
| Brand, explainer, children, cute, toy, geometric | `vector-illustration` |
|
||||
| Notes, doodle, friendly, warm tutorial, onboarding | `sketch-notes` |
|
||||
| Gaming, 8-bit, pixel, developer, retro tech | `pixel-art` |
|
||||
| Bilingual, briefing, academic, research, documentation | `intuition-machine` |
|
||||
| Fantasy, story, magical, Ghibli, Disney, children | `fantasy-animation` |
|
||||
| Default | `notion` |
|
||||
|
||||
## File Management
|
||||
|
||||
### With Article Path
|
||||
### Output Directory
|
||||
|
||||
Save illustrations to `[source-name-no-ext]/illustrations/` subdirectory in the same folder as the article:
|
||||
Each session creates an independent directory named by content slug:
|
||||
|
||||
```
|
||||
path/to/
|
||||
├── article.md
|
||||
└── article/
|
||||
└── illustrations/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── illustration-concept-a.md
|
||||
│ ├── illustration-concept-b.md
|
||||
│ └── ...
|
||||
├── illustration-concept-a.png
|
||||
├── illustration-concept-b.png
|
||||
└── ...
|
||||
illustrations/{topic-slug}/
|
||||
├── source-{slug}.{ext} # Source files (text, images, etc.)
|
||||
├── outline.md
|
||||
├── outline-{style}.md # Style variant outlines
|
||||
├── prompts/
|
||||
│ ├── illustration-concept-a.md
|
||||
│ ├── illustration-concept-b.md
|
||||
│ └── ...
|
||||
├── illustration-concept-a.png
|
||||
├── illustration-concept-b.png
|
||||
└── ...
|
||||
```
|
||||
|
||||
Example: `/posts/ai-future.md` → `/posts/ai-future/illustrations/`
|
||||
**Slug Generation**:
|
||||
1. Extract main topic from content (2-4 words, kebab-case)
|
||||
2. Example: "The Future of AI" → `future-of-ai`
|
||||
|
||||
### Without Article Path (Pasted Content)
|
||||
### Conflict Resolution
|
||||
|
||||
Save to `./illustrations/[topic-slug]/`:
|
||||
If `illustrations/{topic-slug}/` already exists:
|
||||
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
|
||||
- Example: `ai-future` exists → `ai-future-20260118-143052`
|
||||
|
||||
```
|
||||
illustrations/
|
||||
└── ai-future/
|
||||
├── source.md
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
└── *.png
|
||||
```
|
||||
### Source Files
|
||||
|
||||
### Directory Backup
|
||||
Copy all sources with naming `source-{slug}.{ext}`:
|
||||
- `source-article.md` (main text content)
|
||||
- `source-photo.jpg` (image from conversation)
|
||||
- `source-reference.pdf` (additional file)
|
||||
|
||||
If target directory exists, rename existing to `<dirname>-backup-YYYYMMDD-HHMMSS`
|
||||
Multiple sources supported: text, images, files from conversation.
|
||||
|
||||
## Workflow
|
||||
|
||||
@@ -366,80 +348,11 @@ Examples:
|
||||
- Must be unique within the article
|
||||
- When content changes significantly, update slug accordingly
|
||||
|
||||
## Style Reference Details
|
||||
## References
|
||||
|
||||
### elegant
|
||||
```
|
||||
Colors: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
|
||||
Background: Warm cream (#F5F0E6), soft beige
|
||||
Accents: Gold (#C9A962), copper
|
||||
Elements: Delicate lines, refined icons, subtle gradients, balanced whitespace
|
||||
```
|
||||
|
||||
### tech
|
||||
```
|
||||
Colors: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
|
||||
Background: Dark gray (#1A202C), near-black (#0D1117)
|
||||
Accents: Neon green (#00FF88), bright white
|
||||
Elements: Circuit patterns, data nodes, geometric grids, glowing effects
|
||||
```
|
||||
|
||||
### warm
|
||||
```
|
||||
Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
|
||||
Background: Cream (#FFFAF0), soft peach (#FED7AA)
|
||||
Accents: Deep brown (#744210), soft red
|
||||
Elements: Rounded shapes, smiling faces, sun rays, hearts, cozy lighting
|
||||
```
|
||||
|
||||
### bold
|
||||
```
|
||||
Colors: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
|
||||
Background: Deep black (#000000), dark charcoal
|
||||
Accents: White, neon highlights
|
||||
Elements: Strong shapes, exclamation marks, arrows, dramatic contrast
|
||||
```
|
||||
|
||||
### minimal
|
||||
```
|
||||
Colors: Pure black (#000000), white (#FFFFFF)
|
||||
Background: White or off-white (#FAFAFA)
|
||||
Accents: Single color (content-derived)
|
||||
Elements: Single focal point, maximum negative space, thin precise lines
|
||||
```
|
||||
|
||||
### playful
|
||||
```
|
||||
Colors: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
|
||||
Background: Light cream (#FFFBEB), soft white
|
||||
Accents: Bright pops - yellow, coral, turquoise
|
||||
Elements: Doodles, stars, swirls, cute characters, speech bubbles
|
||||
```
|
||||
|
||||
### nature
|
||||
```
|
||||
Colors: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
|
||||
Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
|
||||
Accents: Sunset orange, water blue
|
||||
Elements: Leaves, trees, mountains, organic flowing lines, natural textures
|
||||
```
|
||||
|
||||
### sketch
|
||||
```
|
||||
Colors: Pencil gray (#4A5568), paper white (#FAFAFA)
|
||||
Background: Off-white paper texture (#F7FAFC)
|
||||
Accents: Single highlight color (blue, red, or yellow)
|
||||
Elements: Rough sketch lines, arrows, handwritten labels, crossed-out marks
|
||||
```
|
||||
|
||||
### notion
|
||||
```
|
||||
Colors: Black (#1A1A1A), dark gray (#4A4A4A)
|
||||
Background: Pure white (#FFFFFF), off-white (#FAFAFA)
|
||||
Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
|
||||
Elements: Simple line doodles, hand-drawn wobble effect, geometric shapes, stick figures, maximum whitespace
|
||||
Typography: Clean hand-drawn lettering, simple sans-serif labels
|
||||
```
|
||||
| File | Content |
|
||||
|------|---------|
|
||||
| `references/styles/<style>.md` | Full style specifications with colors, elements, rules |
|
||||
|
||||
## Notes
|
||||
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
# blueprint
|
||||
|
||||
Precise technical blueprint style with engineering precision
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Clean, structured visual metaphors using blueprints, diagrams, and schematics. Precise, analytical and aesthetically refined. Information presented in grid-based layouts with engineering precision. Technical drawing quality with professional polish.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Blueprint Off-White (#FAF8F5)
|
||||
- Texture: Subtle grid overlay, engineering paper feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Blueprint Paper | #FAF8F5 | Primary background |
|
||||
| Grid | Light Gray | #E5E5E5 | Background grid lines |
|
||||
| Primary Text | Deep Slate | #334155 | Headlines, body |
|
||||
| Primary Accent | Engineering Blue | #2563EB | Key elements |
|
||||
| Secondary Accent | Navy Blue | #1E3A5F | Supporting elements |
|
||||
| Tertiary | Light Blue | #BFDBFE | Fills, backgrounds |
|
||||
| Warning | Amber | #F59E0B | Warnings, emphasis |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Precise lines with consistent stroke weights
|
||||
- Technical schematics and clean vector graphics
|
||||
- Thin line work in technical drawing style
|
||||
- Connection lines: straight or 90-degree angles only
|
||||
- Data visualization with minimal charts
|
||||
- Dimension lines and measurement indicators
|
||||
- Cross-section style diagrams
|
||||
- Isometric or orthographic projections
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain consistent line weights
|
||||
- Use grid alignment for all elements
|
||||
- Keep color palette restrained
|
||||
- Create clear visual hierarchy through scale
|
||||
- Use geometric precision for all shapes
|
||||
|
||||
### Don't
|
||||
|
||||
- Use hand-drawn or organic shapes
|
||||
- Add decorative flourishes
|
||||
- Use curved connection lines
|
||||
- Include photographic elements
|
||||
- Add unnecessary embellishments
|
||||
|
||||
## Best For
|
||||
|
||||
Technical architecture, system design, data analysis, engineering documentation, process flows, infrastructure articles
|
||||
@@ -0,0 +1,58 @@
|
||||
# chalkboard
|
||||
|
||||
Classic classroom chalkboard style for educational content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines. Colorful chalk creates visual hierarchy while maintaining authentic chalkboard warmth.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
|
||||
- Texture: Realistic chalkboard texture with dust and eraser marks
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Chalkboard Black | #1A1A1A | Primary background |
|
||||
| Alt Background | Green-Black | #1C2B1C | Traditional green |
|
||||
| Primary | Chalk White | #F5F5F5 | Main elements |
|
||||
| Accent 1 | Chalk Yellow | #FFE566 | Highlights |
|
||||
| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
|
||||
| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
|
||||
| Accent 4 | Chalk Green | #90EE90 | Success, growth |
|
||||
| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hand-drawn chalk illustrations
|
||||
- Chalk dust effects
|
||||
- Doodles: stars, arrows, underlines
|
||||
- Mathematical formulas
|
||||
- Eraser smudges and chalk residue
|
||||
- Stick figures and icons
|
||||
- Connection lines with hand feel
|
||||
- Checkmarks and annotations
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain chalk texture on all elements
|
||||
- Use imperfect hand-drawn quality
|
||||
- Add chalk dust and smudge effects
|
||||
- Create hierarchy with color
|
||||
- Include playful annotations
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes
|
||||
- Create clean digital lines
|
||||
- Add photorealistic elements
|
||||
- Use gradients or gloss
|
||||
- Make it look computerized
|
||||
|
||||
## Best For
|
||||
|
||||
Educational articles, tutorials, teaching content, workshops, informal learning, knowledge sharing, how-to guides, classroom-style explanations
|
||||
@@ -0,0 +1,59 @@
|
||||
# editorial
|
||||
|
||||
Magazine-style editorial infographic for professional content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
High-quality magazine explainer aesthetic. Clear visual storytelling with structured layouts and professional typography. Think Wired, The Verge, or quality science publications. Complex information made digestible.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF) or Light Gray (#F8F9FA)
|
||||
- Texture: None or subtle paper grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Pure White | #FFFFFF | Primary background |
|
||||
| Alt Background | Light Gray | #F8F9FA | Section backgrounds |
|
||||
| Primary Text | Near Black | #1A1A1A | Headlines, body |
|
||||
| Secondary Text | Dark Gray | #4A5568 | Captions |
|
||||
| Accent 1 | Editorial Blue | #2563EB | Primary accent |
|
||||
| Accent 2 | Coral | #F97316 | Secondary accent |
|
||||
| Accent 3 | Emerald | #10B981 | Positive elements |
|
||||
| Accent 4 | Amber | #F59E0B | Attention points |
|
||||
| Dividers | Medium Gray | #D1D5DB | Section dividers |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Clean flat illustrations
|
||||
- Structured multi-section layouts
|
||||
- Callout boxes for insights
|
||||
- Icon-based visualizations
|
||||
- Visual metaphors for concepts
|
||||
- Flow diagrams with hierarchy
|
||||
- Pull quotes and highlights
|
||||
- Clear section dividers
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Create clear narrative flow
|
||||
- Use structured layouts
|
||||
- Include callout boxes
|
||||
- Design visual metaphors
|
||||
- Maintain magazine polish
|
||||
|
||||
### Don't
|
||||
|
||||
- Use photographic imagery
|
||||
- Create cluttered layouts
|
||||
- Mix too many styles
|
||||
- Add purposeless decoration
|
||||
- Compromise clarity for style
|
||||
|
||||
## Best For
|
||||
|
||||
Technology explainers, science communication, research articles, policy analysis, investigative pieces, thought leadership, long-form journalism
|
||||
@@ -0,0 +1,56 @@
|
||||
# elegant
|
||||
|
||||
Refined, sophisticated illustration style for professional content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Elegant and refined visual approach with sophisticated color palette. Professional polish with subtle artistic touches. Emphasizes clarity and thoughtful composition. Conveys authority and trustworthiness without being cold or clinical.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Cream (#F5F0E6) or Soft Beige (#FAF6F0)
|
||||
- Texture: Subtle paper texture, very light grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Cream | #F5F0E6 | Primary background |
|
||||
| Primary | Soft Coral | #E8A598 | Main accent color |
|
||||
| Secondary | Muted Teal | #5B8A8A | Supporting elements |
|
||||
| Tertiary | Dusty Rose | #D4A5A5 | Subtle highlights |
|
||||
| Accent | Gold | #C9A962 | Premium touches |
|
||||
| Alt Accent | Copper | #B87333 | Warm metallic notes |
|
||||
| Text | Charcoal | #3D3D3D | Text and outlines |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Delicate line work with refined strokes
|
||||
- Subtle icons with balanced weight
|
||||
- Graceful curves and flowing compositions
|
||||
- Soft gradients with smooth transitions
|
||||
- Balanced whitespace and breathing room
|
||||
- Thin borders and elegant dividers
|
||||
- Subtle drop shadows for depth
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use refined color combinations
|
||||
- Create balanced, harmonious compositions
|
||||
- Keep elements light and airy
|
||||
- Use subtle gradients sparingly
|
||||
- Maintain generous margins
|
||||
|
||||
### Don't
|
||||
|
||||
- Use harsh contrasts
|
||||
- Overcrowd the composition
|
||||
- Add playful or casual elements
|
||||
- Use neon or overly bright colors
|
||||
- Create busy or cluttered layouts
|
||||
|
||||
## Best For
|
||||
|
||||
Professional articles, thought leadership pieces, business topics, executive communications, corporate blogs, strategy discussions, industry analysis
|
||||
@@ -0,0 +1,58 @@
|
||||
# fantasy-animation
|
||||
|
||||
Whimsical hand-drawn animation style inspired by Ghibli/Disney
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Charming hand-drawn animation aesthetic reminiscent of classic Disney, Studio Ghibli, or European storybook illustration. Soft, painterly textures with warm, inviting colors. Friendly characters, magical elements, and storybook feel. Enchanting, nostalgic, and emotionally engaging.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Soft Sky Blue (#E8F4FC) or Warm Cream (#FFF8E7)
|
||||
- Texture: Subtle watercolor wash, soft brush strokes
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Soft Sky Blue | #E8F4FC | Primary background |
|
||||
| Alt Background | Warm Cream | #FFF8E7 | Secondary areas |
|
||||
| Primary Text | Deep Forest | #2D5A3D | Headlines |
|
||||
| Body Text | Warm Brown | #5D4E37 | Content |
|
||||
| Accent 1 | Golden Yellow | #F4D03F | Magic, highlights |
|
||||
| Accent 2 | Rose Pink | #E8A0BF | Warmth, charm |
|
||||
| Accent 3 | Sage Green | #87A96B | Nature elements |
|
||||
| Accent 4 | Sky Blue | #7EC8E3 | Air, water, dreams |
|
||||
| Accent 5 | Coral | #F08080 | Emphasis, life |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Central illustrated character (friendly, expressive)
|
||||
- Small companion creatures (animals, magical beings)
|
||||
- Storybook-style environment backgrounds
|
||||
- Magical floating objects (books, orbs, sparkles)
|
||||
- Decorative elements: stars, flowers, leaves
|
||||
- Soft shadows and gentle highlights
|
||||
- Layered depth with foreground/background
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Create warm, inviting compositions
|
||||
- Use soft edges and painterly textures
|
||||
- Include charming character illustrations
|
||||
- Add magical decorative touches
|
||||
- Maintain storybook narrative feel
|
||||
|
||||
### Don't
|
||||
|
||||
- Use harsh geometric shapes
|
||||
- Create dark or intimidating imagery
|
||||
- Add photorealistic elements
|
||||
- Use cold color palettes
|
||||
- Make it look digital/computerized
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, children's articles, storytelling, creative topics, fantasy/gaming, inspirational pieces, family-friendly content
|
||||
@@ -0,0 +1,59 @@
|
||||
# flat
|
||||
|
||||
Modern flat vector illustration style for contemporary content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Contemporary flat design aesthetic with bold shapes and limited depth. Clean geometric forms with no gradients or shadows. Modern, accessible, and highly readable. Optimized for digital consumption with scalable vector quality.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: White (#FFFFFF) or Soft Gray (#F5F5F5)
|
||||
- Texture: None - clean solid backgrounds
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Alt Background | Soft Gray | #F5F5F5 | Accent areas |
|
||||
| Primary | Vibrant Blue | #3B82F6 | Main elements |
|
||||
| Secondary | Coral | #F97316 | Supporting elements |
|
||||
| Tertiary | Emerald | #10B981 | Accent elements |
|
||||
| Accent 1 | Purple | #8B5CF6 | Additional accent |
|
||||
| Accent 2 | Amber | #F59E0B | Highlight |
|
||||
| Text | Dark Slate | #1E293B | Text elements |
|
||||
| Light | Light Gray | #E5E7EB | Subtle elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold geometric shapes
|
||||
- Flat color fills with no gradients
|
||||
- Simple character illustrations
|
||||
- Clean icon designs
|
||||
- Minimal line work
|
||||
- Overlapping shape compositions
|
||||
- Abstract concept visualizations
|
||||
- Consistent stroke weights
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use flat solid colors
|
||||
- Create clean geometric shapes
|
||||
- Keep elements simple
|
||||
- Maintain consistent styling
|
||||
- Use bold color combinations
|
||||
|
||||
### Don't
|
||||
|
||||
- Add shadows or depth
|
||||
- Use gradients or textures
|
||||
- Create realistic illustrations
|
||||
- Add unnecessary details
|
||||
- Use photographic elements
|
||||
|
||||
## Best For
|
||||
|
||||
Modern articles, app and product content, startup stories, digital topics, contemporary business, tech company blogs, social media content
|
||||
@@ -0,0 +1,57 @@
|
||||
# intuition-machine
|
||||
|
||||
Technical briefing infographic style with aged paper and bilingual labels
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Academic/technical briefing style with clean 2D or isometric technical illustrations. Information-dense but organized with clear visual hierarchy. Vintage blueprint aesthetic with modern clarity. Multiple explanatory elements with bilingual callouts.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Aged Cream (#F5F0E6)
|
||||
- Texture: Subtle paper texture with light creases, vintage technical print feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Aged Cream | #F5F0E6 | Primary background |
|
||||
| Paper Texture | Warm White | #F5F0E1 | Blueprint effect |
|
||||
| Primary Text | Dark Maroon | #5D3A3A | Headlines, titles |
|
||||
| Body Text | Near Black | #1A1A1A | Content text |
|
||||
| Accent 1 | Teal | #2F7373 | Primary illustrations |
|
||||
| Accent 2 | Warm Brown | #8B7355 | Secondary elements |
|
||||
| Accent 3 | Maroon | #722F37 | Emphasis |
|
||||
| Outline | Deep Charcoal | #2D2D2D | Element outlines |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Isometric 3D or flat 2D technical diagrams
|
||||
- Explanatory text boxes with labeled content
|
||||
- Bilingual callout labels (English + Chinese)
|
||||
- Faded thematic background patterns
|
||||
- Clean black outlines on elements
|
||||
- Split or triptych layouts
|
||||
- Key insight boxes
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Include multiple text boxes with content
|
||||
- Use bilingual labels for key elements
|
||||
- Add faded thematic background patterns
|
||||
- Maintain aged paper texture
|
||||
- Create clear visual hierarchy
|
||||
|
||||
### Don't
|
||||
|
||||
- Create photorealistic 3D renders
|
||||
- Leave illustrations without explanatory text
|
||||
- Add stamps or watermarks in corners
|
||||
- Use gradients or glossy effects
|
||||
- Make it look too modern/digital
|
||||
|
||||
## Best For
|
||||
|
||||
Technical explanations, concept breakdowns, academic content, research summaries, bilingual audiences, knowledge documentation
|
||||
@@ -0,0 +1,58 @@
|
||||
# minimal
|
||||
|
||||
Ultra-clean, zen-like illustration style for focused content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Maximum simplicity with purposeful restraint. Every element serves a function. Zen-like calm and focus through extensive negative space. Single focal point approach that guides attention naturally. Quiet elegance through reduction.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF) or Off-White (#FAFAFA)
|
||||
- Texture: None - clean solid backgrounds
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Alt Background | Off-White | #FAFAFA | Subtle variation |
|
||||
| Primary | Pure Black | #000000 | Main elements |
|
||||
| Accent | Content-Derived | varies | Single accent color |
|
||||
| Text | Black | #000000 | Text elements |
|
||||
| Alt Text | Medium Gray | #6B6B6B | Secondary text |
|
||||
|
||||
Note: Accent color is derived from content context. Use sparingly.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Single focal element per illustration
|
||||
- Maximum negative space
|
||||
- Thin, precise lines
|
||||
- Simple geometric forms
|
||||
- Subtle shadows if any
|
||||
- Typography as primary element
|
||||
- Strategic use of single accent
|
||||
- Clean, uncluttered compositions
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Embrace empty space
|
||||
- Use single focal points
|
||||
- Keep lines thin and precise
|
||||
- Let content breathe
|
||||
- Question every element
|
||||
|
||||
### Don't
|
||||
|
||||
- Add decorative elements
|
||||
- Use multiple accent colors
|
||||
- Fill available space
|
||||
- Add textures or patterns
|
||||
- Create visual complexity
|
||||
|
||||
## Best For
|
||||
|
||||
Philosophy articles, minimalism content, focused explanations, meditation and mindfulness, essential concepts, clarity-focused writing
|
||||
@@ -0,0 +1,58 @@
|
||||
# nature
|
||||
|
||||
Organic, earthy illustration style for environmental and wellness content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Natural and organic visual approach inspired by the outdoors. Earth tones and natural textures that evoke calm and connection to nature. Flowing lines and organic shapes. Creates a sense of tranquility and environmental awareness.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Sand Beige (#F5E6D3) or Sky Blue wash (#E0F2FE)
|
||||
- Texture: Natural paper texture with organic feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Sand Beige | #F5E6D3 | Primary background |
|
||||
| Alt Background | Sky Blue | #E0F2FE | Alternative canvas |
|
||||
| Primary | Forest Green | #276749 | Main natural color |
|
||||
| Secondary | Sage | #9AE6B4 | Supporting green |
|
||||
| Tertiary | Earth Brown | #744210 | Grounding element |
|
||||
| Accent 1 | Sunset Orange | #ED8936 | Warm accent |
|
||||
| Accent 2 | Water Blue | #63B3ED | Cool accent |
|
||||
| Text | Deep Brown | #5D4E3C | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Leaf and plant motifs
|
||||
- Tree and branch silhouettes
|
||||
- Mountain and landscape shapes
|
||||
- Organic flowing lines
|
||||
- Natural textures (wood grain, stone)
|
||||
- Water and wave patterns
|
||||
- Animal silhouettes
|
||||
- Sun and moon symbols
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use earth-inspired colors
|
||||
- Create organic, flowing shapes
|
||||
- Include nature elements
|
||||
- Evoke outdoor atmosphere
|
||||
- Maintain calm and balance
|
||||
|
||||
### Don't
|
||||
|
||||
- Use synthetic or neon colors
|
||||
- Create rigid geometric shapes
|
||||
- Add tech or digital elements
|
||||
- Use stark contrasts
|
||||
- Overcomplicate compositions
|
||||
|
||||
## Best For
|
||||
|
||||
Sustainability articles, wellness content, outdoor topics, slow living, environmental issues, health and fitness, gardening, travel nature pieces
|
||||
@@ -0,0 +1,58 @@
|
||||
# notion
|
||||
|
||||
Minimalist hand-drawn line art style for knowledge content (Default)
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Clean, minimalist hand-drawn line art with intellectual feel. Simple doodle-style illustrations with intentional wobble. Maximum whitespace with single concept focus. Notion-like aesthetic that feels thoughtful and organized.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF) or Off-White (#FAFAFA)
|
||||
- Texture: None - clean solid backgrounds
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Alt Background | Off-White | #FAFAFA | Subtle variation |
|
||||
| Primary | Black | #1A1A1A | Main outlines |
|
||||
| Secondary | Dark Gray | #4A4A4A | Supporting lines |
|
||||
| Accent 1 | Pastel Blue | #A8D4F0 | Soft highlight |
|
||||
| Accent 2 | Pastel Yellow | #F9E79F | Warm highlight |
|
||||
| Accent 3 | Pastel Pink | #FADBD8 | Gentle accent |
|
||||
| Text | Near Black | #1A1A1A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Simple line doodles
|
||||
- Hand-drawn wobble effect
|
||||
- Basic geometric shapes
|
||||
- Stick figures for people
|
||||
- Conceptual icons
|
||||
- Clean hand-drawn lettering
|
||||
- Minimal decorative elements
|
||||
- Single-weight line work
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use maximum whitespace
|
||||
- Keep illustrations simple
|
||||
- Add slight hand-drawn wobble
|
||||
- Focus on single concepts
|
||||
- Use pastel accents sparingly
|
||||
|
||||
### Don't
|
||||
|
||||
- Create complex illustrations
|
||||
- Use many colors at once
|
||||
- Add detailed textures
|
||||
- Make precise geometric shapes
|
||||
- Overcrowd the composition
|
||||
|
||||
## Best For
|
||||
|
||||
Knowledge sharing, concept explanations, SaaS content, productivity articles, educational posts, how-to guides, professional blogs
|
||||
@@ -0,0 +1,57 @@
|
||||
# pixel-art
|
||||
|
||||
Retro 8-bit pixel art aesthetic with nostalgic gaming style
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Pixelated retro aesthetic reminiscent of classic 8-bit and 16-bit era games. Chunky pixels, limited color palettes, and nostalgic gaming references. Simple geometric shapes rendered in blocky pixel form. Fun, playful, and immediately recognizable retro tech aesthetic.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Light Blue (#87CEEB) or Soft Lavender (#E6E6FA)
|
||||
- Texture: Subtle pixel grid pattern, optional CRT scanline effect
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Light Blue | #87CEEB | Primary background |
|
||||
| Alt Background | Soft Lavender | #E6E6FA | Secondary backgrounds |
|
||||
| Primary Text | Dark Navy | #1A1A2E | Main elements |
|
||||
| Accent 1 | Pixel Green | #00FF00 | Success, highlights |
|
||||
| Accent 2 | Pixel Red | #FF0000 | Alerts, emphasis |
|
||||
| Accent 3 | Pixel Yellow | #FFFF00 | Warnings, energy |
|
||||
| Accent 4 | Pixel Cyan | #00FFFF | Info, tech elements |
|
||||
| Accent 5 | Pixel Magenta | #FF00FF | Special elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- All elements rendered with visible pixel structure
|
||||
- Simple iconography: notepad, checkboxes, gears, rockets
|
||||
- Text bubbles with pixel borders
|
||||
- 8-bit decorations: stars, hearts, arrows
|
||||
- Progress bars with chunky pixel segments
|
||||
- Dithering patterns for color transitions
|
||||
- Limited 16-32 color palette
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain consistent pixel grid throughout
|
||||
- Use limited color palette (16-32 colors max)
|
||||
- Create blocky, geometric shapes
|
||||
- Add nostalgic gaming references
|
||||
- Use dithering for color transitions
|
||||
|
||||
### Don't
|
||||
|
||||
- Use smooth gradients or anti-aliasing
|
||||
- Create photorealistic elements
|
||||
- Use thin lines or fine details
|
||||
- Add modern glossy effects
|
||||
- Break the pixel grid alignment
|
||||
|
||||
## Best For
|
||||
|
||||
Gaming articles, tech tutorials, nostalgic content, developer topics, retro-themed pieces, creative tech content
|
||||
@@ -0,0 +1,59 @@
|
||||
# playful
|
||||
|
||||
Fun, creative illustration style for casual and educational content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Whimsical and entertaining visual approach that sparks joy. Pastel colors with bright pops of energy. Doodle-like quality that feels approachable and fun. Creates a sense of play and discovery. Encourages engagement through visual delight.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Light Cream (#FFFBEB) or Soft White (#FFF)
|
||||
- Texture: Subtle, playful pattern or clean
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Light Cream | #FFFBEB | Primary background |
|
||||
| Primary | Pastel Pink | #FED7E2 | Soft warmth |
|
||||
| Secondary | Mint | #C6F6D5 | Fresh energy |
|
||||
| Tertiary | Lavender | #E9D8FD | Dreamy touch |
|
||||
| Accent 1 | Sky Blue | #BEE3F8 | Calm brightness |
|
||||
| Accent 2 | Bright Yellow | #FBBF24 | Energy pop |
|
||||
| Accent 3 | Coral | #F6AD55 | Warm pop |
|
||||
| Accent 4 | Turquoise | #38B2AC | Cool pop |
|
||||
| Text | Soft Charcoal | #4A4A4A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Doodles and sketchy lines
|
||||
- Star and sparkle decorations
|
||||
- Swirls and curvy elements
|
||||
- Cute character illustrations
|
||||
- Speech bubbles and callouts
|
||||
- Emoji-style icons
|
||||
- Confetti and celebration marks
|
||||
- Playful hand-lettering
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use varied pastel palette
|
||||
- Add whimsical decorations
|
||||
- Create friendly characters
|
||||
- Include playful details
|
||||
- Keep energy high and positive
|
||||
|
||||
### Don't
|
||||
|
||||
- Use dark or moody colors
|
||||
- Create serious compositions
|
||||
- Add corporate elements
|
||||
- Use rigid geometric shapes
|
||||
- Make it feel professional
|
||||
|
||||
## Best For
|
||||
|
||||
Tutorials and guides, beginner-friendly content, casual articles, fun topics, children's content, hobby-related posts, entertaining explanations
|
||||
@@ -0,0 +1,59 @@
|
||||
# retro
|
||||
|
||||
80s/90s nostalgic aesthetic with vibrant colors and geometric patterns
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Nostalgic retro aesthetic inspired by 80s and 90s design trends. Vibrant neon colors, geometric patterns, and Memphis design influence. Energetic, fun, and unapologetically bold. Perfect for content that embraces nostalgia or playful energy.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Deep Purple (#2D1B4E) or Dark Teal (#0F4C5C)
|
||||
- Texture: Subtle grid patterns or geometric shapes
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Deep Purple | #2D1B4E | Primary background |
|
||||
| Alt Background | Dark Teal | #0F4C5C | Alternative |
|
||||
| Primary | Hot Pink | #FF1493 | Main accent |
|
||||
| Secondary | Electric Cyan | #00FFFF | Supporting |
|
||||
| Tertiary | Neon Yellow | #FFFF00 | Highlights |
|
||||
| Accent 1 | Lime Green | #32CD32 | Energy |
|
||||
| Accent 2 | Orange | #FF6B35 | Warmth |
|
||||
| Text | White | #FFFFFF | Text elements |
|
||||
| Grid | Light Purple | #9D8EC0 | Grid lines |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Geometric patterns (triangles, circles)
|
||||
- Grid backgrounds and lines
|
||||
- Neon glow effects
|
||||
- Memphis design shapes
|
||||
- Zigzag and wavy patterns
|
||||
- Retro computer graphics
|
||||
- Bold outline strokes
|
||||
- Gradient sunsets
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use bold neon colors
|
||||
- Create geometric patterns
|
||||
- Add retro typography
|
||||
- Include Memphis-style shapes
|
||||
- Embrace maximalism
|
||||
|
||||
### Don't
|
||||
|
||||
- Use muted or subtle colors
|
||||
- Create minimal compositions
|
||||
- Add modern flat design
|
||||
- Make it look contemporary
|
||||
- Use understated elements
|
||||
|
||||
## Best For
|
||||
|
||||
Pop culture articles, gaming content, music and entertainment, nostalgia pieces, youth-focused content, creative industry, party and event content
|
||||
@@ -0,0 +1,59 @@
|
||||
# scientific
|
||||
|
||||
Academic scientific illustration style for technical diagrams and processes
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Academic scientific illustration aesthetic for biological, chemical, and technical diagrams. Clean, precise diagrams with proper labeling and clear visual flow. Educational clarity with professional polish. Textbook quality illustrations.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Off-White (#FAFAFA) or Light Blue-Gray (#F0F4F8)
|
||||
- Texture: None or subtle paper grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Off-White | #FAFAFA | Primary background |
|
||||
| Primary Text | Dark Slate | #1E293B | Labels, headers |
|
||||
| Label Text | Medium Gray | #475569 | Annotations |
|
||||
| Pathway 1 | Teal | #0D9488 | Primary pathway |
|
||||
| Pathway 2 | Blue | #3B82F6 | Secondary pathway |
|
||||
| Pathway 3 | Purple | #8B5CF6 | Tertiary pathway |
|
||||
| Structure | Amber | #F59E0B | Membranes, structures |
|
||||
| Alert | Red | #EF4444 | Key elements |
|
||||
| Positive | Green | #22C55E | Products, outputs |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Precise labeled diagrams
|
||||
- Flow arrows showing direction
|
||||
- Modular components with colors
|
||||
- Chemical formulas and notation
|
||||
- Cross-section views
|
||||
- Numbered step sequences
|
||||
- Molecule and cell representations
|
||||
- Process summary boxes
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use precise consistent lines
|
||||
- Label all components clearly
|
||||
- Show directional flow
|
||||
- Include technical notation
|
||||
- Create clear numbered sequences
|
||||
|
||||
### Don't
|
||||
|
||||
- Use decorative elements
|
||||
- Create imprecise diagrams
|
||||
- Omit important labels
|
||||
- Use inconsistent styling
|
||||
- Add artistic flourishes
|
||||
|
||||
## Best For
|
||||
|
||||
Biology articles, chemistry explanations, medical content, research summaries, academic writing, technical documentation, process explanations
|
||||
@@ -0,0 +1,56 @@
|
||||
# sketch-notes
|
||||
|
||||
Soft hand-drawn illustration style with warm, educational feel
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Hand-drawn feel with soft, relaxed brush strokes. Fresh, refined style with minimalist editorial approach. Emphasis on precision, clarity and intelligent elegance while prioritizing warmth, approachability and friendliness.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Off-White (#FAF8F0)
|
||||
- Texture: Subtle paper grain, warm tone
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Off-White | #FAF8F0 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2C3E50 | Main elements |
|
||||
| Alt Text | Deep Brown | #4A4A4A | Secondary elements |
|
||||
| Accent 1 | Soft Orange | #F4A261 | Highlights, emphasis |
|
||||
| Accent 2 | Mustard Yellow | #E9C46A | Secondary highlights |
|
||||
| Accent 3 | Sage Green | #87A96B | Nature, growth concepts |
|
||||
| Accent 4 | Light Blue | #7EC8E3 | Tech, digital elements |
|
||||
| Accent 5 | Red Brown | #A0522D | Earthy elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Connection lines with hand-drawn wavy feel
|
||||
- Conceptual abstract icons illustrating ideas
|
||||
- Color fills don't completely fill outlines (hand-painted feel)
|
||||
- Simple geometric shapes with rounded corners
|
||||
- Arrows and pointers with sketchy style
|
||||
- Doodle decorations: stars, spirals, underlines
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Keep layouts open and well-structured
|
||||
- Emphasize information hierarchy
|
||||
- Use hand-drawn quality for all elements
|
||||
- Allow imperfection (slight wobbles add character)
|
||||
- Layer elements with subtle overlaps
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes
|
||||
- Create photorealistic elements
|
||||
- Overcrowd with too many elements
|
||||
- Use pure white backgrounds
|
||||
- Make it look computer-generated
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, technical explanations, tutorials, onboarding materials, friendly articles
|
||||