Compare commits

...

5 Commits

Author SHA1 Message Date
Jim Liu 宝玉 90f3e2ff24 chore: release v1.4.1 2026-01-18 23:51:31 -06:00
Jim Liu 宝玉 575ed29391 Merge pull request #4 from ianchenx/fix/x-article-multilingual-selectors
fix(x-article): support multi-language UI selectors
2026-01-18 23:50:20 -06:00
Jim Liu 宝玉 7a193481d4 chore: release v1.4.0 2026-01-18 23:46:07 -06:00
Jim Liu 宝玉 aea27950ad chore: release v1.3.0 2026-01-18 22:16:24 -06:00
ianchenx 5d4ff2e9c2 fix(x-article): support multi-language UI selectors for X Articles
Extract hardcoded UI selectors into I18N_SELECTORS constant.
Now supports English, Chinese, Japanese, and Korean X interfaces.

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

To add more languages, simply append to the I18N_SELECTORS arrays.
2026-01-18 22:12:52 +08:00
63 changed files with 719 additions and 115 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
}, },
"metadata": { "metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency", "description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "1.2.0" "version": "1.4.1"
}, },
"plugins": [ "plugins": [
{ {
+26
View File
@@ -2,6 +2,32 @@
English | [中文](./CHANGELOG.zh.md) English | [中文](./CHANGELOG.zh.md)
## 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 ## 1.2.0 - 2026-01-18
### Features ### Features
+26
View File
@@ -2,6 +2,32 @@
[English](./CHANGELOG.md) | 中文 [English](./CHANGELOG.md) | 中文
## 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 ## 1.2.0 - 2026-01-18
### 新功能 ### 新功能
+54 -13
View File
@@ -127,7 +127,26 @@ Generate hand-drawn style cover images for articles with multiple style options.
/baoyu-cover-image path/to/article.md --no-title /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`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor`
**Style Previews**:
| | | |
|:---:|:---:|:---:|
| ![elegant](./screenshots/cover-image-styles/elegant.webp) | ![blueprint](./screenshots/cover-image-styles/blueprint.webp) | ![bold](./screenshots/cover-image-styles/bold.webp) |
| elegant | blueprint | bold |
| ![bold-editorial](./screenshots/cover-image-styles/bold-editorial.webp) | ![chalkboard](./screenshots/cover-image-styles/chalkboard.webp) | ![dark-atmospheric](./screenshots/cover-image-styles/dark-atmospheric.webp) |
| bold-editorial | chalkboard | dark-atmospheric |
| ![editorial-infographic](./screenshots/cover-image-styles/editorial-infographic.webp) | ![fantasy-animation](./screenshots/cover-image-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/cover-image-styles/intuition-machine.webp) |
| editorial-infographic | fantasy-animation | intuition-machine |
| ![minimal](./screenshots/cover-image-styles/minimal.webp) | ![nature](./screenshots/cover-image-styles/nature.webp) | ![notion](./screenshots/cover-image-styles/notion.webp) |
| minimal | nature | notion |
| ![pixel-art](./screenshots/cover-image-styles/pixel-art.webp) | ![playful](./screenshots/cover-image-styles/playful.webp) | ![retro](./screenshots/cover-image-styles/retro.webp) |
| pixel-art | playful | retro |
| ![sketch-notes](./screenshots/cover-image-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/cover-image-styles/vector-illustration.webp) | ![vintage](./screenshots/cover-image-styles/vintage.webp) |
| sketch-notes | vector-illustration | vintage |
| ![warm](./screenshots/cover-image-styles/warm.webp) | ![watercolor](./screenshots/cover-image-styles/watercolor.webp) | |
| warm | watercolor | |
#### baoyu-slide-deck #### baoyu-slide-deck
@@ -172,16 +191,18 @@ Generate professional slide deck images from content. Creates comprehensive outl
| | | | | | | |
|:---:|:---:|:---:| |:---:|:---:|:---:|
| ![blueprint](./screenshots/slide-deck-styles/blueprint.webp) | ![bold-editorial](./screenshots/slide-deck-styles/bold-editorial.webp) | ![corporate](./screenshots/slide-deck-styles/corporate.webp) | | ![blueprint](./screenshots/slide-deck-styles/blueprint.webp) | ![chalkboard](./screenshots/slide-deck-styles/chalkboard.webp) | ![bold-editorial](./screenshots/slide-deck-styles/bold-editorial.webp) |
| blueprint | bold-editorial | corporate | | blueprint | chalkboard | bold-editorial |
| ![dark-atmospheric](./screenshots/slide-deck-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/slide-deck-styles/editorial-infographic.webp) | ![fantasy-animation](./screenshots/slide-deck-styles/fantasy-animation.webp) | | ![corporate](./screenshots/slide-deck-styles/corporate.webp) | ![dark-atmospheric](./screenshots/slide-deck-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/slide-deck-styles/editorial-infographic.webp) |
| dark-atmospheric | editorial-infographic | fantasy-animation | | corporate | dark-atmospheric | editorial-infographic |
| ![intuition-machine](./screenshots/slide-deck-styles/intuition-machine.webp) | ![minimal](./screenshots/slide-deck-styles/minimal.webp) | ![notion](./screenshots/slide-deck-styles/notion.webp) | | ![fantasy-animation](./screenshots/slide-deck-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/slide-deck-styles/intuition-machine.webp) | ![minimal](./screenshots/slide-deck-styles/minimal.webp) |
| intuition-machine | minimal | notion | | fantasy-animation | intuition-machine | minimal |
| ![pixel-art](./screenshots/slide-deck-styles/pixel-art.webp) | ![scientific](./screenshots/slide-deck-styles/scientific.webp) | ![sketch-notes](./screenshots/slide-deck-styles/sketch-notes.webp) | | ![notion](./screenshots/slide-deck-styles/notion.webp) | ![pixel-art](./screenshots/slide-deck-styles/pixel-art.webp) | ![scientific](./screenshots/slide-deck-styles/scientific.webp) |
| pixel-art | scientific | sketch-notes | | notion | pixel-art | scientific |
| ![vector-illustration](./screenshots/slide-deck-styles/vector-illustration.webp) | ![vintage](./screenshots/slide-deck-styles/vintage.webp) | ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | ![sketch-notes](./screenshots/slide-deck-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/slide-deck-styles/vector-illustration.webp) | ![vintage](./screenshots/slide-deck-styles/vintage.webp) |
| vector-illustration | vintage | watercolor | | sketch-notes | vector-illustration | vintage |
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | |
After generation, slides are automatically merged into a `.pptx` file for easy sharing. After generation, slides are automatically merged into a `.pptx` file for easy sharing.
@@ -214,7 +235,7 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
**Options**: **Options**:
| Option | Values | | 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` | | `--layout` | `standard` (default), `cinematic`, `dense`, `splash`, `mixed`, `webtoon` |
| `--aspect` | `3:4` (default, portrait), `4:3` (landscape), `16:9` (widescreen) | | `--aspect` | `3:4` (default, portrait), `4:3` (landscape), `16:9` (widescreen) |
| `--lang` | `auto` (default), `zh`, `en`, `ja`, etc. | | `--lang` | `auto` (default), `zh`, `en`, `ja`, etc. |
@@ -226,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 | | `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 | | `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 | | `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 | | `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 | | `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) | | `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 | | `realistic` | Full-color realistic manga with digital painting, smooth gradients, accurate proportions | Wine, food, business, lifestyle, professional topics |
| `wuxia` | Hong Kong martial arts style with ink brush strokes, dynamic combat, qi effects | Martial arts, wuxia/xianxia, Chinese historical fiction |
**Style Previews**:
| | | |
|:---:|:---:|:---:|
| ![classic](./screenshots/comic-styles/classic.webp) | ![dramatic](./screenshots/comic-styles/dramatic.webp) | ![warm](./screenshots/comic-styles/warm.webp) |
| classic | dramatic | warm |
| ![sepia](./screenshots/comic-styles/sepia.webp) | ![vibrant](./screenshots/comic-styles/vibrant.webp) | ![ohmsha](./screenshots/comic-styles/ohmsha.webp) |
| sepia | vibrant | ohmsha |
| ![realistic](./screenshots/comic-styles/realistic.webp) | ![wuxia](./screenshots/comic-styles/wuxia.webp) | |
| realistic | wuxia | |
**Layouts** (panel arrangement): **Layouts** (panel arrangement):
| Layout | Panels/Page | Best for | | Layout | Panels/Page | Best for |
@@ -242,6 +274,15 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
| `mixed` | 3-7 varies | Complex narratives, emotional arcs | | `mixed` | 3-7 varies | Complex narratives, emotional arcs |
| `webtoon` | 3-5 vertical | Ohmsha tutorials, mobile reading | | `webtoon` | 3-5 vertical | Ohmsha tutorials, mobile reading |
**Layout Previews**:
| | | |
|:---:|:---:|:---:|
| ![standard](./screenshots/comic-layouts/standard.webp) | ![cinematic](./screenshots/comic-layouts/cinematic.webp) | ![dense](./screenshots/comic-layouts/dense.webp) |
| standard | cinematic | dense |
| ![splash](./screenshots/comic-layouts/splash.webp) | ![mixed](./screenshots/comic-layouts/mixed.webp) | ![webtoon](./screenshots/comic-layouts/webtoon.webp) |
| splash | mixed | webtoon |
#### baoyu-article-illustrator #### baoyu-article-illustrator
Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids. Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids.
+54 -13
View File
@@ -127,7 +127,26 @@ npx add-skill jimliu/baoyu-skills
/baoyu-cover-image path/to/article.md --no-title /baoyu-cover-image path/to/article.md --no-title
``` ```
可用风格:`elegant`(默认)、`tech``warm``bold``minimal``playful``nature``retro` 可用风格:`elegant`(默认)、`blueprint``bold``bold-editorial``chalkboard``dark-atmospheric``editorial-infographic``fantasy-animation``intuition-machine``minimal``nature``notion``pixel-art``playful``retro``sketch-notes``vector-illustration``vintage``warm``watercolor`
**风格预览**
| | | |
|:---:|:---:|:---:|
| ![elegant](./screenshots/cover-image-styles/elegant.webp) | ![blueprint](./screenshots/cover-image-styles/blueprint.webp) | ![bold](./screenshots/cover-image-styles/bold.webp) |
| elegant | blueprint | bold |
| ![bold-editorial](./screenshots/cover-image-styles/bold-editorial.webp) | ![chalkboard](./screenshots/cover-image-styles/chalkboard.webp) | ![dark-atmospheric](./screenshots/cover-image-styles/dark-atmospheric.webp) |
| bold-editorial | chalkboard | dark-atmospheric |
| ![editorial-infographic](./screenshots/cover-image-styles/editorial-infographic.webp) | ![fantasy-animation](./screenshots/cover-image-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/cover-image-styles/intuition-machine.webp) |
| editorial-infographic | fantasy-animation | intuition-machine |
| ![minimal](./screenshots/cover-image-styles/minimal.webp) | ![nature](./screenshots/cover-image-styles/nature.webp) | ![notion](./screenshots/cover-image-styles/notion.webp) |
| minimal | nature | notion |
| ![pixel-art](./screenshots/cover-image-styles/pixel-art.webp) | ![playful](./screenshots/cover-image-styles/playful.webp) | ![retro](./screenshots/cover-image-styles/retro.webp) |
| pixel-art | playful | retro |
| ![sketch-notes](./screenshots/cover-image-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/cover-image-styles/vector-illustration.webp) | ![vintage](./screenshots/cover-image-styles/vintage.webp) |
| sketch-notes | vector-illustration | vintage |
| ![warm](./screenshots/cover-image-styles/warm.webp) | ![watercolor](./screenshots/cover-image-styles/watercolor.webp) | |
| warm | watercolor | |
#### baoyu-slide-deck #### baoyu-slide-deck
@@ -172,16 +191,18 @@ npx add-skill jimliu/baoyu-skills
| | | | | | | |
|:---:|:---:|:---:| |:---:|:---:|:---:|
| ![blueprint](./screenshots/slide-deck-styles/blueprint.webp) | ![bold-editorial](./screenshots/slide-deck-styles/bold-editorial.webp) | ![corporate](./screenshots/slide-deck-styles/corporate.webp) | | ![blueprint](./screenshots/slide-deck-styles/blueprint.webp) | ![chalkboard](./screenshots/slide-deck-styles/chalkboard.webp) | ![bold-editorial](./screenshots/slide-deck-styles/bold-editorial.webp) |
| blueprint | bold-editorial | corporate | | blueprint | chalkboard | bold-editorial |
| ![dark-atmospheric](./screenshots/slide-deck-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/slide-deck-styles/editorial-infographic.webp) | ![fantasy-animation](./screenshots/slide-deck-styles/fantasy-animation.webp) | | ![corporate](./screenshots/slide-deck-styles/corporate.webp) | ![dark-atmospheric](./screenshots/slide-deck-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/slide-deck-styles/editorial-infographic.webp) |
| dark-atmospheric | editorial-infographic | fantasy-animation | | corporate | dark-atmospheric | editorial-infographic |
| ![intuition-machine](./screenshots/slide-deck-styles/intuition-machine.webp) | ![minimal](./screenshots/slide-deck-styles/minimal.webp) | ![notion](./screenshots/slide-deck-styles/notion.webp) | | ![fantasy-animation](./screenshots/slide-deck-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/slide-deck-styles/intuition-machine.webp) | ![minimal](./screenshots/slide-deck-styles/minimal.webp) |
| intuition-machine | minimal | notion | | fantasy-animation | intuition-machine | minimal |
| ![pixel-art](./screenshots/slide-deck-styles/pixel-art.webp) | ![scientific](./screenshots/slide-deck-styles/scientific.webp) | ![sketch-notes](./screenshots/slide-deck-styles/sketch-notes.webp) | | ![notion](./screenshots/slide-deck-styles/notion.webp) | ![pixel-art](./screenshots/slide-deck-styles/pixel-art.webp) | ![scientific](./screenshots/slide-deck-styles/scientific.webp) |
| pixel-art | scientific | sketch-notes | | notion | pixel-art | scientific |
| ![vector-illustration](./screenshots/slide-deck-styles/vector-illustration.webp) | ![vintage](./screenshots/slide-deck-styles/vintage.webp) | ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | ![sketch-notes](./screenshots/slide-deck-styles/sketch-notes.webp) | ![vector-illustration](./screenshots/slide-deck-styles/vector-illustration.webp) | ![vintage](./screenshots/slide-deck-styles/vintage.webp) |
| vector-illustration | vintage | watercolor | | sketch-notes | vector-illustration | vintage |
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | |
生成完成后,所有幻灯片会自动合并为 `.pptx` 文件,方便分享。 生成完成后,所有幻灯片会自动合并为 `.pptx` 文件,方便分享。
@@ -214,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` | | `--layout` | `standard`(默认)、`cinematic``dense``splash``mixed``webtoon` |
| `--aspect` | `3:4`(默认,竖版)、`4:3`(横版)、`16:9`(宽屏) | | `--aspect` | `3:4`(默认,竖版)、`4:3`(横版)、`16:9`(宽屏) |
| `--lang` | `auto`(默认)、`zh``en``ja` 等 | | `--lang` | `auto`(默认)、`zh``en``ja` 等 |
@@ -226,11 +247,22 @@ npx add-skill jimliu/baoyu-skills
| `classic`(默认) | 传统清线风格,统一线条、平涂色彩、精细背景 | 传记、平衡叙事、教育内容 | | `classic`(默认) | 传统清线风格,统一线条、平涂色彩、精细背景 | 传记、平衡叙事、教育内容 |
| `dramatic` | 高对比度,重阴影、紧张表情、棱角分明的构图 | 重大发现、冲突、高潮场景 | | `dramatic` | 高对比度,重阴影、紧张表情、棱角分明的构图 | 重大发现、冲突、高潮场景 |
| `warm` | 柔和边缘、金色调、温馨室内、怀旧感 | 个人故事、童年场景、师生情 | | `warm` | 柔和边缘、金色调、温馨室内、怀旧感 | 个人故事、童年场景、师生情 |
| `tech` | 精确几何线条、电路纹理、深色背景配霓虹色 | 计算机史、AI 故事、现代科技 |
| `sepia` | 复古插画风格、做旧纸张效果、时代准确细节 | 1950 年前故事、古典科学、历史人物 | | `sepia` | 复古插画风格、做旧纸张效果、时代准确细节 | 1950 年前故事、古典科学、历史人物 |
| `vibrant` | 富有活力的线条、明亮色彩、动感姿态 | 科学解说、"顿悟"时刻、青少年读者 | | `vibrant` | 富有活力的线条、明亮色彩、动感姿态 | 科学解说、"顿悟"时刻、青少年读者 |
| `ohmsha` | 欧姆社漫画风格,视觉比喻、道具、学生/导师互动 | 技术教程、复杂概念(机器学习、物理) | | `ohmsha` | 欧姆社漫画风格,视觉比喻、道具、学生/导师互动 | 技术教程、复杂概念(机器学习、物理) |
| `realistic` | 全彩写实日漫风格,数字绘画、平滑渐变、准确人体比例 | 红酒、美食、商业、生活方式、专业话题 | | `realistic` | 全彩写实日漫风格,数字绘画、平滑渐变、准确人体比例 | 红酒、美食、商业、生活方式、专业话题 |
| `wuxia` | 港漫武侠风格,水墨笔触、动态打斗、气功特效 | 武侠、仙侠、中国历史小说 |
**风格预览**
| | | |
|:---:|:---:|:---:|
| ![classic](./screenshots/comic-styles/classic.webp) | ![dramatic](./screenshots/comic-styles/dramatic.webp) | ![warm](./screenshots/comic-styles/warm.webp) |
| classic | dramatic | warm |
| ![sepia](./screenshots/comic-styles/sepia.webp) | ![vibrant](./screenshots/comic-styles/vibrant.webp) | ![ohmsha](./screenshots/comic-styles/ohmsha.webp) |
| sepia | vibrant | ohmsha |
| ![realistic](./screenshots/comic-styles/realistic.webp) | ![wuxia](./screenshots/comic-styles/wuxia.webp) | |
| realistic | wuxia | |
**布局**(分镜排列): **布局**(分镜排列):
| 布局 | 每页分镜数 | 适用场景 | | 布局 | 每页分镜数 | 适用场景 |
@@ -242,6 +274,15 @@ npx add-skill jimliu/baoyu-skills
| `mixed` | 3-7 不等 | 复杂叙事、情感弧线 | | `mixed` | 3-7 不等 | 复杂叙事、情感弧线 |
| `webtoon` | 3-5 竖向 | 欧姆社教程、手机阅读 | | `webtoon` | 3-5 竖向 | 欧姆社教程、手机阅读 |
**布局预览**
| | | |
|:---:|:---:|:---:|
| ![standard](./screenshots/comic-layouts/standard.webp) | ![cinematic](./screenshots/comic-layouts/cinematic.webp) | ![dense](./screenshots/comic-layouts/dense.webp) |
| standard | cinematic | dense |
| ![splash](./screenshots/comic-layouts/splash.webp) | ![mixed](./screenshots/comic-layouts/mixed.webp) | ![webtoon](./screenshots/comic-layouts/webtoon.webp) |
| splash | mixed | webtoon |
#### baoyu-article-illustrator #### baoyu-article-illustrator
智能文章插图技能。分析文章内容,在需要视觉辅助的位置生成插图。 智能文章插图技能。分析文章内容,在需要视觉辅助的位置生成插图。
Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

+7 -6
View File
@@ -18,7 +18,7 @@ Create original knowledge comics with multiple visual styles.
| Option | Values | | 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 | | `--layout` | standard (default), cinematic, dense, splash, mixed, webtoon |
| `--aspect` | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) | | `--aspect` | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) |
| `--lang` | auto (default), zh, en, ja, etc. | | `--lang` | auto (default), zh, en, ja, etc. |
@@ -32,11 +32,12 @@ Style × Layout × Aspect can be freely combined. Custom styles can be described
| Content Signals | Style | Layout | | Content Signals | Style | Layout |
|-----------------|-------|--------| |-----------------|-------|--------|
| Tutorial, how-to, beginner | ohmsha | webtoon | | Tutorial, how-to, beginner | ohmsha | webtoon |
| Computing, AI, programming | tech | dense | | Computing, AI, programming | ohmsha | dense |
| Pre-1950, classical, ancient | sepia | cinematic | | Pre-1950, classical, ancient | sepia | cinematic |
| Personal story, mentor | warm | standard | | Personal story, mentor | warm | standard |
| Conflict, breakthrough | dramatic | splash | | Conflict, breakthrough | dramatic | splash |
| Wine, food, business, lifestyle, professional | realistic | cinematic | | Wine, food, business, lifestyle, professional | realistic | cinematic |
| Martial arts, wuxia, xianxia, Chinese historical | wuxia | splash |
| Biography, balanced | classic | mixed | | Biography, balanced | classic | mixed |
## Script Directory ## Script Directory
@@ -172,7 +173,7 @@ What readers will gain:
## Content Signals ## Content Signals
- "biography" → classic + mixed - "biography" → classic + mixed
- "computing history" tech + dense - "computing history" ohmsha + dense
- "personal tragedy" → dramatic + splash - "personal tragedy" → dramatic + splash
## Recommended Approaches ## Recommended Approaches
@@ -189,7 +190,7 @@ Create three distinct variants, each combining a narrative approach with a recom
| Variant | Narrative Approach | Recommended Style | Layout | | Variant | Narrative Approach | Recommended Style | Layout |
|---------|-------------------|-------------------|--------| |---------|-------------------|-------------------|--------|
| A | Chronological | sepia | cinematic | | A | Chronological | sepia | cinematic |
| B | Thematic | tech | dense | | B | Thematic | ohmsha | dense |
| C | Character-focused | warm | standard | | C | Character-focused | warm | standard |
**For each variant**: **For each variant**:
@@ -237,13 +238,13 @@ Create three distinct variants, each combining a narrative approach with a recom
``` ```
Question 1 (Storyboard): Which storyboard variant? Question 1 (Storyboard): Which storyboard variant?
- A: Chronological + sepia (Recommended) - A: Chronological + sepia (Recommended)
- B: Thematic + tech - B: Thematic + ohmsha
- C: Character-focused + warm - C: Character-focused + warm
- Custom - Custom
Question 2 (Style): Which visual style? Question 2 (Style): Which visual style?
- sepia (Recommended from variant) - sepia (Recommended from variant)
- classic / dramatic / warm / tech / vibrant / ohmsha / realistic - classic / dramatic / warm / sepia / vibrant / ohmsha / realistic / wuxia
- Custom description - Custom description
Question 3 (Language) - only if mismatch: Question 3 (Language) - only if mismatch:
@@ -20,4 +20,4 @@ Technical explanations, complex narratives, timelines
## Best Style Pairings ## Best Style Pairings
tech, ohmsha, vibrant ohmsha, vibrant
@@ -27,4 +27,4 @@ Ohmsha-style tutorials, mobile reading, step-by-step guides
## Best Style Pairings ## Best Style Pairings
ohmsha, tech, vibrant ohmsha, vibrant
@@ -1,34 +0,0 @@
# tech
Modern, digital-age narratives
## Style Guidelines
### Line Work
- 2px, precise geometric undertones
- Clean, technical precision
- Circuit-like patterns in backgrounds
### Character Design
- Contemporary clothing, focused expressions
- Modern tech accessories
- Clean, precise features
### Background Treatment
- Digital elements, screens, circuit motifs
- Grid patterns
- Glowing interface elements
## Color Palette
- Primary: Cyan (#00D4FF), deep blue (#1A365D), white
- Accents: Neon green (#00FF88), electric purple (#805AD5)
- Background: Dark gray (#1A202C), grid patterns
## Mood
Innovation, digital, contemporary
## Best For
Computing history, AI stories, modern tech
@@ -0,0 +1,54 @@
# wuxia
Hong Kong martial arts comic style (港漫武侠风格)
## Style Guidelines
### Line Work
- 2-3px dynamic brush strokes with varying weight
- Ink wash effects, traditional Chinese brush feel
- Speed lines and impact effects for action scenes
- Bold, confident strokes with sharp edges
### Character Design
- Realistic human proportions (7.5-8 head heights)
- Defined musculature, dynamic warrior poses
- Flowing hair and clothing in motion
- Intense, determined facial expressions
- Traditional Chinese martial arts attire (robes, armor)
### Background Treatment
- Dramatic landscapes: mountains, waterfalls, temples
- Ink wash atmospheric effects
- Flying debris, dust clouds during combat
- Energy/qi effects with flowing lines
- High contrast silhouettes
## Color Palette
- Primary: Deep black ink, crimson red (#8B0000), gold (#D4AF37)
- Skin: Natural tan with dramatic shadows
- Background: Misty grays, earth tones, ink wash gradients
- Effects: Glowing qi energy (blue, gold, white)
## Special Effects
- **Combat impact**: Radiating lines, shockwaves, debris
- **Qi/energy**: Flowing aura, glowing effects around characters
- **Movement**: Extreme speed lines, motion blur
- **Atmosphere**: Ink wash clouds, mist, flying leaves/petals
## Quality Markers
A good wuxia comic page exhibits:
- ✓ Dynamic action poses with sense of motion
- ✓ Ink brush aesthetic in line work
- ✓ High contrast dramatic lighting
- ✓ Atmospheric backgrounds with Chinese elements
- ✓ Energy/qi effects that feel powerful
- ✓ Flowing fabric and hair movement
- ✓ Impactful combat moments
## Best For
Martial arts stories, Chinese historical fiction, action-heavy narratives, wuxia/xianxia adaptations
+33 -9
View File
@@ -14,9 +14,9 @@ Generate hand-drawn style cover images for articles with multiple style options.
/baoyu-cover-image path/to/article.md /baoyu-cover-image path/to/article.md
# Specify a style # Specify a style
/baoyu-cover-image path/to/article.md --style tech /baoyu-cover-image path/to/article.md --style blueprint
/baoyu-cover-image path/to/article.md --style warm /baoyu-cover-image path/to/article.md --style warm
/baoyu-cover-image path/to/article.md --style bold /baoyu-cover-image path/to/article.md --style dark-atmospheric
# Without title text # Without title text
/baoyu-cover-image path/to/article.md --no-title /baoyu-cover-image path/to/article.md --no-title
@@ -47,13 +47,25 @@ Generate hand-drawn style cover images for articles with multiple style options.
| Style | Description | | Style | Description |
|-------|-------------| |-------|-------------|
| `elegant` (Default) | Refined, sophisticated, understated | | `elegant` (Default) | Refined, sophisticated, understated |
| `tech` | Modern, clean, futuristic | | `blueprint` | Technical schematics, engineering precision |
| `warm` | Friendly, approachable, human-centered |
| `bold` | High contrast, attention-grabbing, energetic | | `bold` | High contrast, attention-grabbing, energetic |
| `bold-editorial` | Magazine cover impact, dramatic typography |
| `chalkboard` | Black chalkboard, colorful chalk drawings |
| `dark-atmospheric` | Cinematic dark mode, glowing accents |
| `editorial-infographic` | Magazine explainer, visual storytelling |
| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm |
| `intuition-machine` | Technical briefing, bilingual labels |
| `minimal` | Ultra-clean, zen-like, focused | | `minimal` | Ultra-clean, zen-like, focused |
| `playful` | Fun, creative, whimsical |
| `nature` | Organic, calm, earthy | | `nature` | Organic, calm, earthy |
| `retro` | Vintage, nostalgic, classic | | `notion` | Clean SaaS dashboard, productivity styling |
| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic |
| `playful` | Fun, creative, whimsical |
| `retro` | Halftone dots, vintage badges, classic |
| `sketch-notes` | Hand-drawn, educational, warm |
| `vector-illustration` | Flat vector, black outlines, retro colors |
| `vintage` | Aged paper, historical, expedition style |
| `warm` | Friendly, approachable, human-centered |
| `watercolor` | Soft hand-painted, natural warmth |
Detailed style definitions: `references/styles/<style>.md` Detailed style definitions: `references/styles/<style>.md`
@@ -63,13 +75,25 @@ When no `--style` is specified, the system analyzes content to select the best s
| Content Signals | Selected Style | | Content Signals | Selected Style |
|----------------|----------------| |----------------|----------------|
| AI, coding, tech, digital, algorithm | `tech` | | Architecture, system design, engineering | `blueprint` |
| Product launch, keynote, marketing, brand | `bold-editorial` |
| Education, classroom, tutorial, teaching | `chalkboard` |
| Entertainment, creative, premium, cinematic | `dark-atmospheric` |
| Technology explainer, science, research | `editorial-infographic` |
| Storytelling, children, fantasy, magical | `fantasy-animation` |
| Technical docs, academic, bilingual | `intuition-machine` |
| Personal story, emotion, growth, life | `warm` | | Personal story, emotion, growth, life | `warm` |
| Controversial, urgent, must-read, warning | `bold` | | Controversial, urgent, must-read, warning | `bold` |
| Simple, zen, focus, essential | `minimal` | | Simple, zen, focus, essential | `minimal` |
| Fun, easy, beginner, casual, tutorial | `playful` | | Fun, easy, beginner, casual | `playful` |
| Nature, eco, wellness, health, organic | `nature` | | Nature, eco, wellness, health, organic | `nature` |
| History, classic, vintage, old, traditional | `retro` | | Pop culture, 80s/90s nostalgia, badges | `retro` |
| Product, SaaS, dashboard, productivity | `notion` |
| Gaming, retro tech, developer, 8-bit | `pixel-art` |
| Educational, tutorial, knowledge sharing | `sketch-notes` |
| Creative proposals, brand, toy-like | `vector-illustration` |
| History, exploration, heritage, biography | `vintage` |
| Lifestyle, travel, food, personal | `watercolor` |
| Business, professional, strategy, analysis | `elegant` | | Business, professional, strategy, analysis | `elegant` |
## File Management ## File Management
@@ -0,0 +1,25 @@
# blueprint
Precise technical blueprint style with engineering aesthetic
## Color Palette
- Primary: Engineering Blue (#2563EB), Navy Blue (#1E3A5F)
- Background: Blueprint Off-White (#FAF8F5), subtle grid overlay
- Accents: Amber (#F59E0B), Light Blue (#BFDBFE)
## Visual Elements
- Precise lines with consistent stroke weights
- Technical schematics and clean vector graphics
- Dimension lines and measurement indicators
- Grid alignment for all elements
- Geometric precision for all shapes
## Typography
- Clean sans-serif hand lettering, technical and authoritative
## Best For
Technical architecture, system design, data analysis, engineering documentation
@@ -0,0 +1,26 @@
# bold-editorial
High-impact magazine editorial with bold visual expression
## Color Palette
- Primary: Pure White (#FFFFFF), Electric Blue (#3B82F6), Bright Orange (#FB923C)
- Background: Deep Black (#0A0A0A), Deep Blue (#0F172A)
- Accents: Magenta (#EC4899), Neon Green (#22C55E), Violet (#8B5CF6)
## Visual Elements
- Strong typography as visual element itself
- Geometric shapes and bold color blocks
- Full-bleed solid color backgrounds
- Dynamic diagonal lines and angles
- Dramatic lighting effects on text
- Minimal decoration, maximum impact
## Typography
- Bold condensed typeface, oversized headlines, all-caps, tight letter-spacing
## Best For
Product launches, marketing, keynote speeches, brand showcases, investor pitches
@@ -0,0 +1,26 @@
# chalkboard
Black chalkboard background with colorful chalk drawing style
## Color Palette
- Primary: Chalk White (#F5F5F5), Chalk Yellow (#FFE566), Chalk Pink (#FF9999)
- Background: Chalkboard Black (#1A1A1A), Dark Green-Black (#1C2B1C)
- Accents: Chalk Blue (#66B3FF), Chalk Green (#90EE90), Chalk Orange (#FFB366)
## Visual Elements
- Chalkboard texture with subtle dust and smudges
- Hand-drawn chalk illustrations with sketchy lines
- Chalk dust effects around text and drawings
- Imperfect lines with visible texture
- Doodles, arrows, underlines, stars
- Eraser marks and chalk residue
## Typography
- Hand-drawn chalk lettering, slightly uneven, with chalk texture
## Best For
Educational content, tutorials, classroom themes, back-to-school, teaching materials
@@ -0,0 +1,25 @@
# dark-atmospheric
Dark moody aesthetic with glowing accent elements
## Color Palette
- Primary: Electric Purple (#8B5CF6), Cyan Blue (#06B6D4), Magenta Pink (#EC4899)
- Background: Deep Purple-Black (#0D0D1A), Rich Navy (#1A1A2E)
- Accents: Amber (#F59E0B), Pure White (#FFFFFF)
## Visual Elements
- Glowing accent elements and borders
- Subtle gradient backgrounds
- Atmospheric fog or particle effects
- Neon-style highlights on key elements
- Silhouettes with backlit edges
## Typography
- Elegant serif or refined sans-serif in light/white with subtle glow
## Best For
Entertainment, creative industries, premium brands, cinematic storytelling
@@ -0,0 +1,26 @@
# editorial-infographic
Modern magazine-style editorial with clear visual storytelling
## Color Palette
- Primary: Near Black (#1A1A1A), Editorial Blue (#2563EB)
- Background: Pure White (#FFFFFF), Light Gray (#F8F9FA)
- Accents: Coral (#F97316), Emerald (#10B981), Amber (#F59E0B)
## Visual Elements
- Clean flat illustrations (not photos)
- Structured multi-section layouts
- Callout boxes for key insights
- Icon-based data visualization
- Visual metaphors for abstract concepts
- Pull quotes and highlight boxes
## Typography
- Bold display serif or modern sans-serif, editorial sophistication
## Best For
Technology explainers, science communication, research summaries, thought leadership
@@ -0,0 +1,25 @@
# fantasy-animation
Whimsical hand-drawn animation style inspired by Ghibli and Disney
## Color Palette
- Primary: Golden Yellow (#F4D03F), Rose Pink (#E8A0BF), Deep Forest (#2D5A3D)
- Background: Soft Sky Blue (#E8F4FC), Warm Cream (#FFF8E7)
- Accents: Sage Green (#87A96B), Sky Blue (#7EC8E3), Coral (#F08080)
## Visual Elements
- Central illustrated character (friendly, expressive)
- Magical floating objects (books, orbs, sparkles)
- Storybook-style environment backgrounds
- Soft shadows and gentle highlights
- Decorative elements: stars, sparkles, flowers, leaves
## Typography
- Whimsical serif or decorative hand-lettered style, organic feel
## Best For
Educational content, storytelling, creative workshops, fantasy/gaming content
@@ -0,0 +1,26 @@
# intuition-machine
Technical briefing style with aged paper and bilingual labels
## Color Palette
- Primary: Dark Maroon (#5D3A3A), Teal (#2F7373)
- Background: Aged Cream (#F5F0E6), subtle paper texture with light creases
- Accents: Warm Brown (#8B7355), Maroon (#722F37), Deep Charcoal (#2D2D2D)
## Visual Elements
- Isometric 3D technical illustrations or flat 2D diagrams
- Bilingual callout labels (English + Chinese)
- Faded thematic background patterns
- Clean black outlines on all elements
- Split or triptych layouts
- Key quote box at bottom
## Typography
- Bold display font in dark maroon, ALL CAPS for titles, bilingual labels
## Best For
Technical explanations, academic presentations, bilingual audiences, knowledge docs
@@ -0,0 +1,25 @@
# notion
Clean SaaS dashboard aesthetic with productivity tool styling
## Color Palette
- Primary: Near Black (#1F1F1F), Notion Blue (#2383E2)
- Background: Light Gray (#F7F7F5), Pure White (#FFFFFF)
- Accents: Success Green (#0F7B6C), Alert Red (#E03E3E), Warning Yellow (#DFAB01)
## Visual Elements
- Card-based layouts with subtle borders
- Clean data visualizations
- Tag and label chips
- Icon-based navigation hints
- Progress bars and metric displays
## Typography
- System UI or Inter style, clean and functional
## Best For
Product demos, SaaS presentations, productivity content, B2B topics
@@ -0,0 +1,26 @@
# pixel-art
Retro 8-bit pixel art aesthetic with nostalgic gaming style
## Color Palette
- Primary: Dark Navy (#1A1A2E), Pixel Green (#00FF00)
- Background: Light Blue (#87CEEB), Soft Lavender (#E6E6FA)
- Accents: Pixel Red (#FF0000), Pixel Yellow (#FFFF00), Pixel Cyan (#00FFFF)
## Visual Elements
- All elements with visible pixel structure
- Simple iconography: stars, hearts, arrows
- Text bubbles with pixel borders
- Progress bars with chunky segments
- Dithering patterns for gradients
- Limited 16-32 color palette
## Typography
- Pixelated bitmap font style, chunky blocky letterforms
## Best For
Gaming content, tech tutorials, developer talks, retro-themed topics
@@ -0,0 +1,25 @@
# sketch-notes
Soft hand-drawn illustration style with fresh minimalist aesthetic
## Color Palette
- Primary: Deep Charcoal (#2C3E50), Soft Orange (#F4A261)
- Background: Warm Off-White (#FAF8F0), subtle paper grain
- Accents: Mustard Yellow (#E9C46A), Sage Green (#87A96B), Light Blue (#7EC8E3)
## Visual Elements
- Connection lines with hand-drawn wavy feel
- Conceptual abstract icons illustrating ideas
- Color fills with hand-painted casual feel
- Doodle-style decorative elements
- Arrows and pointers with sketchy style
## Typography
- Bold hand-written marker font for headlines, casual handwriting for body
## Best For
Educational content, knowledge sharing, technical explanations, tutorials
@@ -1,23 +0,0 @@
# tech
Modern, clean, futuristic
## Color Palette
- Primary: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
- Background: Dark gray (#1A202C), near-black (#0D1117)
- Accents: Neon green (#00FF88), bright white
## Visual Elements
- Circuit patterns, data nodes
- Geometric grids, code snippets
- Glowing effects
## Typography
- Monospace-style hand lettering, glowing effects
## Best For
AI, programming, technology, digital transformation
@@ -0,0 +1,25 @@
# vector-illustration
Flat vector illustration with black outlines and retro soft colors
## Color Palette
- Primary: Coral Red (#E07A5F), Mint Green (#81B29A), Mustard Yellow (#F2CC8F)
- Background: Cream Off-White (#F5F0E6), subtle paper texture
- Accents: Burnt Orange (#D4764A), Rock Blue (#577590), Deep Charcoal (#2D2D2D) outlines
## Visual Elements
- All objects have closed black outlines (coloring book style)
- Rounded line endings, avoid sharp corners
- Simplified geometric shapes
- 2.5D perspective with layering
- Decorative elements: sunbursts, pill clouds, dots, stars
## Typography
- Large bold retro serif for titles, clean geometric sans-serif for body
## Best For
Educational content, creative proposals, brand showcases, explainer content
@@ -0,0 +1,26 @@
# vintage
Vintage aged-paper aesthetic with historical document styling
## Color Palette
- Primary: Dark Brown (#3D2914), Forest Green (#2D5A3D), Navy Blue (#1E3A5F)
- Background: Aged Parchment (#F5E6D3), Sepia Cream (#FFF8DC)
- Accents: Burgundy (#722F37), Gold (#C9A227), Sepia Black (#3D3D3D)
## Visual Elements
- Antique maps with route lines and landmarks
- Compass roses and nautical elements
- Specimen drawings (flora, fauna)
- Handwritten-style annotations
- Rope, leather, brass decorative motifs
- Aged texture with subtle creases
## Typography
- Classic serif with historical character, elegant flourishes
## Best For
Historical content, travel, heritage storytelling, biography, scientific discovery
@@ -0,0 +1,25 @@
# watercolor
Soft watercolor illustration style with hand-painted textures
## Color Palette
- Primary: Soft Coral (#F4A261), Dusty Rose (#E8A0A0)
- Background: Warm Off-White (#FAF8F0), Soft Cream (#FFF9E6)
- Accents: Sage Green (#87A96B), Sky Blue (#7EC8E3), Soft Lavender (#C5B4E3)
## Visual Elements
- Watercolor washes as backgrounds
- Visible brush strokes and textures
- Natural elements: leaves, flowers, organic shapes
- Color bleeds and soft edges
- Hand-drawn arrows and connections
## Typography
- Elegant handwritten or brush script, organic letterforms
## Best For
Lifestyle content, wellness, travel guides, personal stories, creative topics
+61 -14
View File
@@ -10,6 +10,37 @@ import { parseMarkdown } from './md-to-html.js';
const X_ARTICLES_URL = 'https://x.com/compose/articles'; const X_ARTICLES_URL = 'https://x.com/compose/articles';
const I18N_SELECTORS = {
titleInput: [
'textarea[placeholder="Add a title"]',
'textarea[placeholder="添加标题"]',
'textarea[placeholder="タイトルを追加"]',
'textarea[placeholder="제목 추가"]',
'textarea[name="Article Title"]',
],
addPhotosButton: [
'[aria-label="Add photos or video"]',
'[aria-label="添加照片或视频"]',
'[aria-label="写真や動画を追加"]',
'[aria-label="사진 또는 동영상 추가"]',
],
previewButton: [
'a[href*="/preview"]',
'[data-testid="previewButton"]',
'button[aria-label*="preview" i]',
'button[aria-label*="预览" i]',
'button[aria-label*="プレビュー" i]',
'button[aria-label*="미리보기" i]',
],
publishButton: [
'[data-testid="publishButton"]',
'button[aria-label*="publish" i]',
'button[aria-label*="发布" i]',
'button[aria-label*="公開" i]',
'button[aria-label*="게시" i]',
],
};
function sleep(ms: number): Promise<void> { function sleep(ms: number): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, ms)); return new Promise((resolve) => setTimeout(resolve, ms));
} }
@@ -299,8 +330,9 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
} }
// Wait for editor (title textarea) // Wait for editor (title textarea)
const titleSelectors = I18N_SELECTORS.titleInput.join(', ');
console.log('[x-article] Waiting for editor...'); console.log('[x-article] Waiting for editor...');
const editorFound = await waitForElement('textarea[placeholder="Add a title"], textarea[name="Article Title"]', 30_000); const editorFound = await waitForElement(titleSelectors, 30_000);
if (!editorFound) { if (!editorFound) {
console.log('[x-article] Editor not found. Please ensure you have X Premium and are logged in.'); console.log('[x-article] Editor not found. Please ensure you have X Premium and are logged in.');
await sleep(60_000); await sleep(60_000);
@@ -312,8 +344,16 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
console.log('[x-article] Uploading cover image...'); console.log('[x-article] Uploading cover image...');
// Click "Add photos or video" button // Click "Add photos or video" button
const addPhotosSelectors = JSON.stringify(I18N_SELECTORS.addPhotosButton);
await cdp.send('Runtime.evaluate', { await cdp.send('Runtime.evaluate', {
expression: `document.querySelector('[aria-label="Add photos or video"]')?.click()`, expression: `(() => {
const selectors = ${addPhotosSelectors};
for (const sel of selectors) {
const el = document.querySelector(sel);
if (el) { el.click(); return true; }
}
return false;
})()`,
}, { sessionId }); }, { sessionId });
await sleep(500); await sleep(500);
@@ -351,8 +391,16 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
console.log('[x-article] Filling title...'); console.log('[x-article] Filling title...');
// Focus title input // Focus title input
const titleInputSelectors = JSON.stringify(I18N_SELECTORS.titleInput);
await cdp.send('Runtime.evaluate', { await cdp.send('Runtime.evaluate', {
expression: `document.querySelector('textarea[placeholder="Add a title"], textarea[name="Article Title"]')?.focus()`, expression: `(() => {
const selectors = ${titleInputSelectors};
for (const sel of selectors) {
const el = document.querySelector(sel);
if (el) { el.focus(); return true; }
}
return false;
})()`,
}, { sessionId }); }, { sessionId });
await sleep(200); await sleep(200);
@@ -633,15 +681,13 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
// Click Preview button // Click Preview button
console.log('[x-article] Opening preview...'); console.log('[x-article] Opening preview...');
const previewSelectors = JSON.stringify(I18N_SELECTORS.previewButton);
const previewClicked = await cdp.send<{ result: { value: boolean } }>('Runtime.evaluate', { const previewClicked = await cdp.send<{ result: { value: boolean } }>('Runtime.evaluate', {
expression: `(() => { expression: `(() => {
// Try multiple selectors for preview button const selectors = ${previewSelectors};
const previewLink = document.querySelector('a[href*="/preview"]') for (const sel of selectors) {
|| document.querySelector('[data-testid="previewButton"]') const el = document.querySelector(sel);
|| document.querySelector('button[aria-label*="preview" i]'); if (el) { el.click(); return true; }
if (previewLink) {
previewLink.click();
return true;
} }
return false; return false;
})()`, })()`,
@@ -658,12 +704,13 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
// Check for publish button // Check for publish button
if (submit) { if (submit) {
console.log('[x-article] Publishing...'); console.log('[x-article] Publishing...');
const publishSelectors = JSON.stringify(I18N_SELECTORS.publishButton);
await cdp.send('Runtime.evaluate', { await cdp.send('Runtime.evaluate', {
expression: `(() => { expression: `(() => {
const publishBtn = document.querySelector('[data-testid="publishButton"], button[aria-label*="publish" i], button[aria-label*="发布" i]'); const selectors = ${publishSelectors};
if (publishBtn && !publishBtn.disabled) { for (const sel of selectors) {
publishBtn.click(); const el = document.querySelector(sel);
return true; if (el && !el.disabled) { el.click(); return true; }
} }
return false; return false;
})()`, })()`,
+2
View File
@@ -49,6 +49,7 @@ Transform content into professional slide deck images with flexible style option
| Style | Description | Best For | | Style | Description | Best For |
|-------|-------------|----------| |-------|-------------|----------|
| `blueprint` (Default) | Technical schematics, grid texture | Architecture, system design | | `blueprint` (Default) | Technical schematics, grid texture | Architecture, system design |
| `chalkboard` | Black chalkboard, colorful chalk | Education, tutorials, classroom |
| `notion` | SaaS dashboard, card-based layouts | Product demos, SaaS, B2B | | `notion` | SaaS dashboard, card-based layouts | Product demos, SaaS, B2B |
| `bold-editorial` | Magazine cover, bold typography, dark | Product launches, keynotes | | `bold-editorial` | Magazine cover, bold typography, dark | Product launches, keynotes |
| `corporate` | Navy/gold, structured layouts | Investor decks, proposals | | `corporate` | Navy/gold, structured layouts | Investor decks, proposals |
@@ -69,6 +70,7 @@ Transform content into professional slide deck images with flexible style option
| Content Signals | Selected Style | | Content Signals | Selected Style |
|-----------------|----------------| |-----------------|----------------|
| tutorial, learn, education, guide, intro, beginner | `sketch-notes` | | tutorial, learn, education, guide, intro, beginner | `sketch-notes` |
| classroom, teaching, school, chalkboard, blackboard | `chalkboard` |
| architecture, system, data, analysis, technical | `blueprint` | | architecture, system, data, analysis, technical | `blueprint` |
| creative, children, kids, cute, illustration | `vector-illustration` | | creative, children, kids, cute, illustration | `vector-illustration` |
| briefing, academic, research, bilingual, infographic, concept | `intuition-machine` | | briefing, academic, research, bilingual, infographic, concept | `intuition-machine` |
@@ -0,0 +1,68 @@
# chalkboard
Black chalkboard background with colorful chalk drawing style
## Design Aesthetic
Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
## Background
- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
## Typography
### Primary Font (Headlines)
Hand-drawn chalk lettering style. Bold, slightly uneven strokes with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
### Secondary Font (Body)
Neater chalk handwriting for readability. Consistent sizing with natural variation. Light chalk texture, thinner strokes than headlines.
## Color Palette
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Chalkboard Black | #1A1A1A | Primary background |
| Alt Background | Green-Black | #1C2B1C | Traditional green board |
| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
| Accent 4 | Chalk Green | #90EE90 | Success, nature |
| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
## Visual Elements
- Hand-drawn chalk illustrations with sketchy, imperfect lines
- Chalk dust effects around text and key elements
- Doodles: stars, arrows, underlines, circles, checkmarks
- Mathematical formulas and simple diagrams
- Eraser smudges and chalk residue textures
- Wooden frame border optional
- Stick figures and simple icons
- Connection lines with hand-drawn feel
## Style Rules
### Do
- Maintain authentic chalk texture on all elements
- Use imperfect, hand-drawn quality throughout
- Add subtle chalk dust and smudge effects
- Create visual hierarchy with color variety
- Include playful doodles and annotations
### Don't
- Use perfect geometric shapes
- Create clean digital-looking lines
- Add photorealistic elements
- Use gradients or glossy effects
- Add slide numbers, footers, or logos
## Best For
Educational presentations, classroom content, tutorials, teaching materials, back-to-school themes, workshop presentations, informal learning sessions, knowledge sharing