mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-12 22:09:48 +08:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jim Liu 宝玉
|
4821508c34 | ||
|
Jim Liu 宝玉
|
f1042c8a6c | ||
|
Jim Liu 宝玉
|
fa0fe441f5 | ||
|
Jim Liu 宝玉
|
90b2205914 | ||
|
Jim Liu 宝玉
|
8e111c17b3 | ||
|
Jim Liu 宝玉
|
80d7675355 | ||
|
Jim Liu 宝玉
|
538ede2b32 | ||
|
Jim Liu 宝玉
|
038e67fd9b | ||
|
Jim Liu 宝玉
|
049462d6dd |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "1.92.0"
|
||||
"version": "1.95.0"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -2,6 +2,28 @@
|
||||
|
||||
English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 1.95.0 - 2026-04-08
|
||||
|
||||
### Features
|
||||
- `baoyu-infographic`: add `hand-drawn-edu` style — macaron pastels, hand-drawn wobble, stick figures
|
||||
- `baoyu-slide-deck`: add `hand-drawn-edu` preset and `macaron` mood dimension with pastel color palette
|
||||
|
||||
## 1.94.0 - 2026-04-08
|
||||
|
||||
### Features
|
||||
- `baoyu-cover-image`: add macaron palette and hand-drawn-edu style preset
|
||||
|
||||
## 1.93.0 - 2026-04-08
|
||||
|
||||
### Features
|
||||
- `baoyu-article-illustrator`: add `hand-drawn-edu` preset — flowchart + sketch-notes + macaron combination for hand-drawn educational diagrams
|
||||
|
||||
### Refactor
|
||||
- `baoyu-article-illustrator`: extract palette as independent third dimension in Type × Style × Palette system
|
||||
|
||||
### Fixes
|
||||
- `baoyu-article-illustrator`: add explicit style file loading step in workflow
|
||||
|
||||
## 1.92.0 - 2026-04-08
|
||||
|
||||
### Features
|
||||
|
||||
@@ -2,6 +2,28 @@
|
||||
|
||||
[English](./CHANGELOG.md) | 中文
|
||||
|
||||
## 1.95.0 - 2026-04-08
|
||||
|
||||
### 新功能
|
||||
- `baoyu-infographic`：新增 `hand-drawn-edu` 风格 — 马卡龙柔和色块、手绘线条、火柴人角色
|
||||
- `baoyu-slide-deck`：新增 `hand-drawn-edu` 预设和 `macaron` 色调维度，含柔和马卡龙色板
|
||||
|
||||
## 1.94.0 - 2026-04-08
|
||||
|
||||
### 新功能
|
||||
- `baoyu-cover-image`：新增马卡龙色板和 hand-drawn-edu 风格预设
|
||||
|
||||
## 1.93.0 - 2026-04-08
|
||||
|
||||
### 新功能
|
||||
- `baoyu-article-illustrator`：新增 `hand-drawn-edu` 预设 — flowchart + sketch-notes + macaron 组合，用于手绘教育图解
|
||||
|
||||
### 重构
|
||||
- `baoyu-article-illustrator`：将色板（Palette）提取为独立的第三维度，形成 Type × Style × Palette 三维系统
|
||||
|
||||
### 修复
|
||||
- `baoyu-article-illustrator`：在工作流中添加显式的风格文件加载步骤
|
||||
|
||||
## 1.92.0 - 2026-04-08
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# CLAUDE.md
|
||||
|
||||
Claude Code marketplace plugin providing AI-powered content generation skills. Version: **1.92.0**.
|
||||
Claude Code marketplace plugin providing AI-powered content generation skills. Version: **1.95.0**.
|
||||
|
||||
## Architecture
|
||||
|
||||
|
||||
@@ -156,7 +156,7 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
|
||||
|
||||
#### baoyu-infographic
|
||||
|
||||
Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics.
|
||||
Generate professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics.
|
||||
|
||||
```bash
|
||||
# Auto-recommend combinations based on content
|
||||
@@ -269,7 +269,7 @@ Generate professional infographics with 20 layout types and 17 visual styles. An
|
||||
|
||||
#### baoyu-cover-image
|
||||
|
||||
Generate cover images for articles with 5 dimensions: Type × Palette × Rendering × Text × Mood. Combines 9 color palettes with 6 rendering styles for 54 unique combinations.
|
||||
Generate cover images for articles with 5 dimensions: Type × Palette × Rendering × Text × Mood. Combines 11 color palettes with 7 rendering styles for 77 unique combinations.
|
||||
|
||||
```bash
|
||||
# Auto-select all dimensions based on content
|
||||
@@ -294,8 +294,8 @@ Generate cover images for articles with 5 dimensions: Type × Palette × Renderi
|
||||
|
||||
**Five Dimensions**:
|
||||
- **Type**: `hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`
|
||||
- **Palette**: `warm`, `elegant`, `cool`, `dark`, `earth`, `vivid`, `pastel`, `mono`, `retro`
|
||||
- **Rendering**: `flat-vector`, `hand-drawn`, `painterly`, `digital`, `pixel`, `chalk`
|
||||
- **Palette**: `warm`, `elegant`, `cool`, `dark`, `earth`, `vivid`, `pastel`, `mono`, `retro`, `duotone`, `macaron`
|
||||
- **Rendering**: `flat-vector`, `hand-drawn`, `painterly`, `digital`, `pixel`, `chalk`, `screen-print`
|
||||
- **Text**: `none`, `title-only` (default), `title-subtitle`, `text-rich`
|
||||
- **Mood**: `subtle`, `balanced` (default), `bold`
|
||||
|
||||
@@ -473,20 +473,17 @@ Knowledge comic creator with flexible art style × tone combinations. Creates or
|
||||
|
||||
#### baoyu-article-illustrator
|
||||
|
||||
Smart article illustration skill with Type × Style two-dimension approach. Analyzes article structure, identifies positions requiring visual aids, and generates illustrations.
|
||||
Smart article illustration skill with Type × Style × Palette three-dimension approach. Analyzes article structure, identifies positions requiring visual aids, and generates illustrations.
|
||||
|
||||
```bash
|
||||
# Auto-select type and style based on content
|
||||
/baoyu-article-illustrator path/to/article.md
|
||||
|
||||
# Specify type
|
||||
/baoyu-article-illustrator path/to/article.md --type infographic
|
||||
|
||||
# Specify style
|
||||
/baoyu-article-illustrator path/to/article.md --style blueprint
|
||||
|
||||
# Combine type and style
|
||||
# Specify type and style
|
||||
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
|
||||
|
||||
# With palette override
|
||||
/baoyu-article-illustrator path/to/article.md --style vector-illustration --palette macaron
|
||||
```
|
||||
|
||||
**Types** (information structure):
|
||||
@@ -500,7 +497,7 @@ Smart article illustration skill with Type × Style two-dimension approach. Anal
|
||||
| `framework` | Concept maps, relationship diagrams | Methodologies, architecture |
|
||||
| `timeline` | Chronological progression | History, project progress |
|
||||
|
||||
**Styles** (visual aesthetics):
|
||||
**Styles** (rendering approach):
|
||||
|
||||
| Style | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
@@ -512,7 +509,14 @@ Smart article illustration skill with Type × Style two-dimension approach. Anal
|
||||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
||||
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
|
||||
| `macaron` | Soft macaron pastel blocks on warm cream | Educational, knowledge, tutorials |
|
||||
|
||||
**Palettes** (optional color override):
|
||||
|
||||
| Palette | Description | Best For |
|
||||
|---------|-------------|----------|
|
||||
| `macaron` | Soft pastel blocks (blue, mint, lavender, peach) on warm cream | Educational, knowledge, tutorials |
|
||||
| `warm` | Warm earth tones on soft peach, no cool colors | Brand, product, lifestyle |
|
||||
| `neon` | Vibrant neon on dark purple | Gaming, retro, pop culture |
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
|
||||
+17
-13
@@ -156,7 +156,7 @@ clawhub install baoyu-markdown-to-html
|
||||
|
||||
#### baoyu-infographic
|
||||
|
||||
专业信息图生成器，支持 20 种布局和 17 种视觉风格。分析内容后推荐布局×风格组合，生成可发布的信息图。
|
||||
专业信息图生成器，支持 21 种布局和 21 种视觉风格。分析内容后推荐布局×风格组合，生成可发布的信息图。
|
||||
|
||||
```bash
|
||||
# 根据内容自动推荐组合
|
||||
@@ -269,7 +269,7 @@ clawhub install baoyu-markdown-to-html
|
||||
|
||||
#### baoyu-cover-image
|
||||
|
||||
为文章生成封面图，支持五维定制系统：类型 × 配色 × 渲染 × 文字 × 氛围。9 种配色方案与 6 种渲染风格组合，提供 54 种独特效果。
|
||||
为文章生成封面图，支持五维定制系统：类型 × 配色 × 渲染 × 文字 × 氛围。11 种配色方案与 7 种渲染风格组合，提供 77 种独特效果。
|
||||
|
||||
```bash
|
||||
# 根据内容自动选择所有维度
|
||||
@@ -294,8 +294,8 @@ clawhub install baoyu-markdown-to-html
|
||||
|
||||
**五个维度**：
|
||||
- **类型 (Type)**：`hero`、`conceptual`、`typography`、`metaphor`、`scene`、`minimal`
|
||||
- **配色 (Palette)**：`warm`、`elegant`、`cool`、`dark`、`earth`、`vivid`、`pastel`、`mono`、`retro`
|
||||
- **渲染 (Rendering)**：`flat-vector`、`hand-drawn`、`painterly`、`digital`、`pixel`、`chalk`
|
||||
- **配色 (Palette)**：`warm`、`elegant`、`cool`、`dark`、`earth`、`vivid`、`pastel`、`mono`、`retro`、`duotone`、`macaron`
|
||||
- **渲染 (Rendering)**：`flat-vector`、`hand-drawn`、`painterly`、`digital`、`pixel`、`chalk`、`screen-print`
|
||||
- **文字 (Text)**：`none`、`title-only`（默认）、`title-subtitle`、`text-rich`
|
||||
- **氛围 (Mood)**：`subtle`、`balanced`（默认）、`bold`
|
||||
|
||||
@@ -473,20 +473,17 @@ clawhub install baoyu-markdown-to-html
|
||||
|
||||
#### baoyu-article-illustrator
|
||||
|
||||
智能文章插图技能，采用类型 × 风格二维系统。分析文章结构，识别需要视觉辅助的位置，生成插图。
|
||||
智能文章插图技能，采用类型 × 风格 × 色板三维系统。分析文章结构，识别需要视觉辅助的位置，生成插图。
|
||||
|
||||
```bash
|
||||
# 根据内容自动选择类型和风格
|
||||
/baoyu-article-illustrator path/to/article.md
|
||||
|
||||
# 指定类型
|
||||
/baoyu-article-illustrator path/to/article.md --type infographic
|
||||
|
||||
# 指定风格
|
||||
/baoyu-article-illustrator path/to/article.md --style blueprint
|
||||
|
||||
# 组合类型和风格
|
||||
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
|
||||
|
||||
# 使用色板覆盖
|
||||
/baoyu-article-illustrator path/to/article.md --style vector-illustration --palette macaron
|
||||
```
|
||||
|
||||
**类型**（信息结构）：
|
||||
@@ -500,7 +497,7 @@ clawhub install baoyu-markdown-to-html
|
||||
| `framework` | 概念图、关系图 | 方法论、架构 |
|
||||
| `timeline` | 时间线进展 | 历史、项目进度 |
|
||||
|
||||
**风格**（视觉美学）：
|
||||
**风格**（渲染手法）：
|
||||
|
||||
| 风格 | 描述 | 适用场景 |
|
||||
|------|------|----------|
|
||||
@@ -512,7 +509,14 @@ clawhub install baoyu-markdown-to-html
|
||||
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
|
||||
| `editorial` | 杂志风格信息图 | 科技解说、新闻 |
|
||||
| `scientific` | 学术精确图表 | 生物、化学、技术 |
|
||||
| `macaron` | 马卡龙柔和色块、暖白底色 | 教育、知识分享、教程 |
|
||||
|
||||
**色板**（可选配色覆盖）：
|
||||
|
||||
| 色板 | 描述 | 适用场景 |
|
||||
|------|------|----------|
|
||||
| `macaron` | 马卡龙柔和色块（浅蓝、浅绿、浅紫、浅橙）暖白底 | 教育、知识分享、教程 |
|
||||
| `warm` | 暖色系（橙、赭石、金）无冷色 | 品牌、产品、生活方式 |
|
||||
| `neon` | 霓虹色（粉、青、黄）深色底 | 游戏、复古、潮流 |
|
||||
|
||||
**风格预览**：
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: baoyu-article-illustrator
|
||||
description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style two-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
|
||||
description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
|
||||
version: 1.57.0
|
||||
metadata:
|
||||
openclaw:
|
||||
@@ -9,18 +9,19 @@ metadata:
|
||||
|
||||
# Article Illustrator
|
||||
|
||||
Analyze articles, identify illustration positions, generate images with Type × Style consistency.
|
||||
Analyze articles, identify illustration positions, generate images with Type × Style × Palette consistency.
|
||||
|
||||
## Two Dimensions
|
||||
## Three Dimensions
|
||||
|
||||
| Dimension | Controls | Examples |
|
||||
|-----------|----------|----------|
|
||||
| **Type** | Information structure | infographic, scene, flowchart, comparison, framework, timeline |
|
||||
| **Style** | Visual aesthetics | notion, warm, minimal, blueprint, watercolor, elegant |
|
||||
| **Style** | Rendering approach | notion, warm, minimal, blueprint, watercolor, elegant |
|
||||
| **Palette** | Color scheme (optional) | macaron, warm, neon — overrides style's default colors |
|
||||
|
||||
Combine freely: `--type infographic --style blueprint`
|
||||
Combine freely: `--type infographic --style vector-illustration --palette macaron`
|
||||
|
||||
Or use presets: `--preset tech-explainer` → type + style in one flag. See [Style Presets](references/style-presets.md).
|
||||
Or use presets: `--preset edu-visual` → type + style + palette in one flag. See [Style Presets](references/style-presets.md).
|
||||
|
||||
## Types
|
||||
|
||||
@@ -96,13 +97,14 @@ Full procedures: [references/workflow.md](references/workflow.md#step-2-setup--a
|
||||
| **Q1: Preset or Type** | [Recommended preset], [alt preset], or manual: infographic, scene, flowchart, comparison, framework, timeline, mixed |
|
||||
| **Q2: Density** | minimal (1-2), balanced (3-5), per-section (Recommended), rich (6+) |
|
||||
| **Q3: Style** | [Recommended], minimal-flat, sci-fi, hand-drawn, editorial, scene, poster, Other — **skip if preset chosen** |
|
||||
| Q4: Language | When article language ≠ EXTEND.md setting |
|
||||
| Q4: Palette | Default (style colors), macaron, warm, neon — **skip if preset includes palette or preferred_palette set** |
|
||||
| Q5: Language | When article language ≠ EXTEND.md setting |
|
||||
|
||||
Full procedures: [references/workflow.md](references/workflow.md#step-3-confirm-settings-)
|
||||
|
||||
### Step 4: Generate Outline
|
||||
|
||||
Save `outline.md` with frontmatter (type, density, style, image_count) and entries:
|
||||
Save `outline.md` with frontmatter (type, density, style, palette, image_count) and entries:
|
||||
|
||||
```yaml
|
||||
## Illustration 1
|
||||
@@ -137,7 +139,7 @@ Insert `` after paragraphs.
|
||||
|
||||
```
|
||||
Article Illustration Complete!
|
||||
Article: [path] | Type: [type] | Density: [level] | Style: [style]
|
||||
Article: [path] | Type: [type] | Density: [level] | Style: [style] | Palette: [palette or default]
|
||||
Images: X/N generated
|
||||
```
|
||||
|
||||
@@ -180,7 +182,7 @@ When input is **pasted content** (no file path), always uses `illustrations/{top
|
||||
|------|---------|
|
||||
| [references/workflow.md](references/workflow.md) | Detailed procedures |
|
||||
| [references/usage.md](references/usage.md) | Command syntax |
|
||||
| [references/styles.md](references/styles.md) | Style gallery |
|
||||
| [references/style-presets.md](references/style-presets.md) | Preset shortcuts (type + style) |
|
||||
| [references/styles.md](references/styles.md) | Style gallery + Palette gallery |
|
||||
| [references/style-presets.md](references/style-presets.md) | Preset shortcuts (type + style + palette) |
|
||||
| [references/prompt-construction.md](references/prompt-construction.md) | Prompt templates |
|
||||
| [references/config/first-time-setup.md](references/config/first-time-setup.md) | First-time setup |
|
||||
|
||||
@@ -20,6 +20,8 @@ preferred_style:
|
||||
name: null # Built-in or custom style name
|
||||
description: "" # Override/notes
|
||||
|
||||
preferred_palette: null # Built-in palette name (macaron|warm|neon) or null
|
||||
|
||||
language: null # zh|en|ja|ko|auto
|
||||
|
||||
default_output_dir: null # same-dir|illustrations-subdir|independent
|
||||
@@ -47,6 +49,7 @@ custom_styles:
|
||||
| `watermark.position` | enum | bottom-right | Position on image |
|
||||
| `preferred_style.name` | string | null | Style name or null |
|
||||
| `preferred_style.description` | string | "" | Custom notes/override |
|
||||
| `preferred_palette` | string | null | Palette override (macaron, warm, neon, or null) |
|
||||
| `language` | string | null | Output language (null = auto-detect) |
|
||||
| `default_output_dir` | enum | null | Output directory preference (null = ask each time) |
|
||||
| `custom_styles` | array | [] | User-defined styles |
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
# macaron
|
||||
|
||||
Soft macaron pastel color blocks on warm cream
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Cream (#F5F0E8)
|
||||
- Texture: Subtle warm paper grain
|
||||
|
||||
## Colors
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Cream | #F5F0E8 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
|
||||
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
|
||||
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
|
||||
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
|
||||
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
|
||||
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis |
|
||||
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
|
||||
|
||||
## Accent
|
||||
|
||||
Coral Red (#E8655A) for key data, warnings, and emphasis highlights. Use sparingly — one or two elements per illustration.
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials
|
||||
@@ -0,0 +1,29 @@
|
||||
# neon
|
||||
|
||||
Vibrant neon colors on dark backgrounds
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Deep Purple (#2D1B4E)
|
||||
- Texture: Subtle grid pattern or solid dark
|
||||
|
||||
## Colors
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Deep Purple | #2D1B4E | Primary background |
|
||||
| Alt Background | Dark Teal | #0F4C5C | Alternative sections |
|
||||
| Primary | Hot Pink | #FF1493 | Main accent |
|
||||
| Secondary | Electric Cyan | #00FFFF | Supporting elements |
|
||||
| Tertiary | Neon Yellow | #FFFF00 | Highlights |
|
||||
| Accent 1 | Lime Green | #32CD32 | Energy, success |
|
||||
| Accent 2 | Orange | #FF6B35 | Warmth |
|
||||
| Text | White | #FFFFFF | Text elements |
|
||||
|
||||
## Accent
|
||||
|
||||
Hot Pink (#FF1493) for primary emphasis. High contrast neon-on-dark creates immediate visual impact.
|
||||
|
||||
## Best For
|
||||
|
||||
Gaming, retro tech, 80s/90s nostalgic content, bold editorial, trend and pop culture
|
||||
@@ -0,0 +1,28 @@
|
||||
# warm
|
||||
|
||||
Warm earth tones on soft peach, no cool colors
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Soft Peach (#FFECD2)
|
||||
- Texture: Warm paper texture
|
||||
|
||||
## Colors
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Soft Peach | #FFECD2 | Primary background |
|
||||
| Outlines | Deep Charcoal | #2D2D2D | All element outlines |
|
||||
| Primary | Warm Orange | #ED8936 | Main accent color |
|
||||
| Secondary | Terracotta | #C05621 | Warm depth |
|
||||
| Tertiary | Golden Yellow | #F6AD55 | Highlights, energy |
|
||||
| Accent | Deep Brown | #744210 | Grounding, anchoring |
|
||||
| Text | Warm Charcoal | #4A4A4A | Text elements |
|
||||
|
||||
## Accent
|
||||
|
||||
Warm Orange (#ED8936) for primary emphasis. Warm-only palette — no cool colors (no green, blue, purple). Modern-retro feel.
|
||||
|
||||
## Best For
|
||||
|
||||
Product showcases, team introductions, feature grids, brand content, personal growth, lifestyle
|
||||
@@ -135,10 +135,10 @@ COLORS: Cream background (#F5F0E6), Coral Red (#E07A5F), Mint Green (#81B29A), M
|
||||
ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements (dots, stars)
|
||||
```
|
||||
|
||||
**Infographic + vector-illustration (warm palette)**:
|
||||
**Infographic + vector-illustration + warm palette**:
|
||||
```
|
||||
Flat vector illustration infographic. Clean black outlines on all elements.
|
||||
Warm-only color palette, no cool colors.
|
||||
PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
|
||||
COLORS: Soft Peach background (#FFECD2), Warm Orange (#ED8936),
|
||||
Terracotta (#C05621), Golden Yellow (#F6AD55), Deep Brown (#744210)
|
||||
ELEMENTS: Geometric simplified icons, no gradients, rounded corners,
|
||||
@@ -182,6 +182,17 @@ COLORS: Cream background (#F5F0E6), steps in Coral/Mint/Mustard, black outlines
|
||||
ELEMENTS: Rounded rectangles, thick arrows, simple icons per step
|
||||
```
|
||||
|
||||
**Flowchart + sketch-notes + macaron palette**:
|
||||
```
|
||||
Hand-drawn educational flowchart on warm cream paper. Slight wobble on all lines.
|
||||
PALETTE: macaron — soft pastel color blocks
|
||||
COLORS: Warm Cream background (#F5F0E8), zone fills in Macaron Blue (#A8D8EA),
|
||||
Lavender (#D5C6E0), Mint (#B5E5CF), Coral Red (#E8655A) for emphasis
|
||||
ELEMENTS: Rounded cards with dashed/solid borders, wavy hand-drawn arrows with labels,
|
||||
simple stick-figure characters, doodle decorations (stars, underlines)
|
||||
STYLE: Color fills don't completely fill outlines, hand-drawn lettering, generous white space
|
||||
```
|
||||
|
||||
### Comparison
|
||||
|
||||
```
|
||||
@@ -207,10 +218,10 @@ COLORS: Left side Coral (#E07A5F), Right side Mint (#81B29A), cream background
|
||||
ELEMENTS: Bold icons, black outlines, centered divider line
|
||||
```
|
||||
|
||||
**Comparison + vector-illustration (warm palette)**:
|
||||
**Comparison + vector-illustration + warm palette**:
|
||||
```
|
||||
Flat vector comparison with split layout. Clear visual separation.
|
||||
Warm-only color palette, no cool colors.
|
||||
PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
|
||||
COLORS: Left side Warm Orange (#ED8936), Right side Terracotta (#C05621),
|
||||
Soft Peach background (#FFECD2), Deep Brown (#744210) accents
|
||||
ELEMENTS: Bold icons, black outlines, centered divider line
|
||||
@@ -239,10 +250,10 @@ COLORS: Cream background (#F5F0E6), nodes in Coral/Mint/Mustard/Blue, black outl
|
||||
ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
|
||||
```
|
||||
|
||||
**Framework + vector-illustration (warm palette)**:
|
||||
**Framework + vector-illustration + warm palette**:
|
||||
```
|
||||
Flat vector framework diagram with geometric nodes and bold connectors.
|
||||
Warm-only color palette, no cool colors.
|
||||
PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
|
||||
COLORS: Soft Peach background (#FFECD2), nodes in Warm Orange (#ED8936),
|
||||
Terracotta (#C05621), Golden Yellow (#F6AD55), black outlines
|
||||
ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
|
||||
@@ -264,37 +275,6 @@ STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
### Macaron Style Instructions
|
||||
|
||||
When `style: macaron`, add these style instructions:
|
||||
|
||||
```
|
||||
Educational infographic with soft macaron pastel color blocks on warm cream paper.
|
||||
COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Macaron Mint (#B5E5CF),
|
||||
Macaron Lavender (#D5C6E0), Macaron Peach (#FFD5C2), Coral Red (#E8655A) for emphasis,
|
||||
Deep Charcoal (#2D2D2D) text, Warm Gray (#6B6B6B) annotations
|
||||
CONTAINERS: Rounded cards, bubbles, dashed-box frames with pastel fills to separate info zones
|
||||
TYPOGRAPHY: Bold large title, bold keywords, smaller muted annotations
|
||||
STRUCTURE: Auto-select best layout for content (flow→arrows, compare→columns, cycle→ring, cards→grid)
|
||||
BOTTOM: Bold summary quote at bottom capturing core insight
|
||||
```
|
||||
|
||||
**Infographic + macaron**:
|
||||
```
|
||||
Educational infographic on warm cream paper (#F5F0E8). Soft macaron pastel blocks as info zones.
|
||||
COLORS: Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2),
|
||||
Coral Red (#E8655A) for key data, Deep Charcoal (#2D2D2D) text
|
||||
ELEMENTS: Rounded-corner cards with pastel fills, clear labels, bold title, summary quote at bottom
|
||||
```
|
||||
|
||||
**Flowchart + macaron**:
|
||||
```
|
||||
Process flow on warm cream paper (#F5F0E8). Each step in a macaron pastel card.
|
||||
COLORS: Steps alternate Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2),
|
||||
Coral Red (#E8655A) for decision points, Deep Charcoal (#2D2D2D) outlines
|
||||
ELEMENTS: Rounded step containers, soft arrow connectors, bold step labels
|
||||
```
|
||||
|
||||
### Screen-Print Style Override
|
||||
|
||||
When `style: screen-print`, replace standard style instructions with:
|
||||
@@ -327,6 +307,39 @@ TEXTURE: Halftone transitions between sides
|
||||
|
||||
---
|
||||
|
||||
## Palette Override
|
||||
|
||||
When a palette is specified (via `--palette` or preset), it overrides the style's default colors:
|
||||
|
||||
1. Read style file → get rendering rules (Visual Elements, Style Rules, line treatment)
|
||||
2. Read palette file (`palettes/<palette>.md`) → get Colors + Background
|
||||
3. Palette Colors **replace** style's default Color Palette in prompt
|
||||
4. Palette Background **replaces** style's Background color (keep style's texture description)
|
||||
5. Build prompt: style rendering instructions + palette colors
|
||||
|
||||
**Prompt frontmatter** includes palette when specified:
|
||||
```yaml
|
||||
---
|
||||
illustration_id: 01
|
||||
type: infographic
|
||||
style: vector-illustration
|
||||
palette: macaron
|
||||
---
|
||||
```
|
||||
|
||||
**Example**: `vector-illustration` + `macaron` palette:
|
||||
```
|
||||
Flat vector illustration infographic. Clean black outlines on all elements.
|
||||
PALETTE: macaron — soft pastel color blocks
|
||||
COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Mint (#B5E5CF),
|
||||
Lavender (#D5C6E0), Peach (#FFD5C2), Coral Red (#E8655A) for emphasis
|
||||
ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements
|
||||
```
|
||||
|
||||
When no palette is specified, use the style's built-in Color Palette as before.
|
||||
|
||||
---
|
||||
|
||||
## What to Avoid
|
||||
|
||||
- Vague descriptions ("a nice image")
|
||||
|
||||
@@ -1,53 +1,54 @@
|
||||
# Style Presets
|
||||
|
||||
`--preset X` expands to a type + style combination. Users can override either dimension.
|
||||
`--preset X` expands to a type + style + optional palette combination. Users can override any dimension.
|
||||
|
||||
## By Category
|
||||
|
||||
### Technical & Engineering
|
||||
|
||||
| --preset | Type | Style | Best For |
|
||||
|----------|------|-------|----------|
|
||||
| `tech-explainer` | `infographic` | `blueprint` | API docs, system metrics, technical deep-dives |
|
||||
| `system-design` | `framework` | `blueprint` | Architecture diagrams, system design |
|
||||
| `architecture` | `framework` | `vector-illustration` | Component relationships, module structure |
|
||||
| `science-paper` | `infographic` | `scientific` | Research findings, lab results, academic |
|
||||
| --preset | Type | Style | Palette | Best For |
|
||||
|----------|------|-------|---------|----------|
|
||||
| `tech-explainer` | `infographic` | `blueprint` | — | API docs, system metrics, technical deep-dives |
|
||||
| `system-design` | `framework` | `blueprint` | — | Architecture diagrams, system design |
|
||||
| `architecture` | `framework` | `vector-illustration` | — | Component relationships, module structure |
|
||||
| `science-paper` | `infographic` | `scientific` | — | Research findings, lab results, academic |
|
||||
|
||||
### Knowledge & Education
|
||||
|
||||
| --preset | Type | Style | Best For |
|
||||
|----------|------|-------|----------|
|
||||
| `knowledge-base` | `infographic` | `vector-illustration` | Concept explainers, tutorials, how-to |
|
||||
| `saas-guide` | `infographic` | `notion` | Product guides, SaaS docs, tool walkthroughs |
|
||||
| `tutorial` | `flowchart` | `vector-illustration` | Step-by-step tutorials, setup guides |
|
||||
| `process-flow` | `flowchart` | `notion` | Workflow documentation, onboarding flows |
|
||||
| `warm-knowledge` | `infographic` | `vector-illustration` (warm palette) | Product showcases, team intros, feature cards, brand content |
|
||||
| `edu-visual` | `infographic` | `macaron` | Knowledge summaries, concept explainers, educational articles |
|
||||
| --preset | Type | Style | Palette | Best For |
|
||||
|----------|------|-------|---------|----------|
|
||||
| `knowledge-base` | `infographic` | `vector-illustration` | — | Concept explainers, tutorials, how-to |
|
||||
| `saas-guide` | `infographic` | `notion` | — | Product guides, SaaS docs, tool walkthroughs |
|
||||
| `tutorial` | `flowchart` | `vector-illustration` | — | Step-by-step tutorials, setup guides |
|
||||
| `process-flow` | `flowchart` | `notion` | — | Workflow documentation, onboarding flows |
|
||||
| `warm-knowledge` | `infographic` | `vector-illustration` | `warm` | Product showcases, team intros, feature cards, brand content |
|
||||
| `edu-visual` | `infographic` | `vector-illustration` | `macaron` | Knowledge summaries, concept explainers, educational articles |
|
||||
| `hand-drawn-edu` | `flowchart` | `sketch-notes` | `macaron` | Hand-drawn educational diagrams, process explainers, onboarding visuals |
|
||||
|
||||
### Data & Analysis
|
||||
|
||||
| --preset | Type | Style | Best For |
|
||||
|----------|------|-------|----------|
|
||||
| `data-report` | `infographic` | `editorial` | Data journalism, metrics reports, dashboards |
|
||||
| `versus` | `comparison` | `vector-illustration` | Tech comparisons, framework shootouts |
|
||||
| `business-compare` | `comparison` | `elegant` | Product evaluations, strategy options |
|
||||
| --preset | Type | Style | Palette | Best For |
|
||||
|----------|------|-------|---------|----------|
|
||||
| `data-report` | `infographic` | `editorial` | — | Data journalism, metrics reports, dashboards |
|
||||
| `versus` | `comparison` | `vector-illustration` | — | Tech comparisons, framework shootouts |
|
||||
| `business-compare` | `comparison` | `elegant` | — | Product evaluations, strategy options |
|
||||
|
||||
### Narrative & Creative
|
||||
|
||||
| --preset | Type | Style | Best For |
|
||||
|----------|------|-------|----------|
|
||||
| `storytelling` | `scene` | `warm` | Personal essays, reflections, growth stories |
|
||||
| `lifestyle` | `scene` | `watercolor` | Travel, wellness, lifestyle, creative |
|
||||
| `history` | `timeline` | `elegant` | Historical overviews, milestones |
|
||||
| `evolution` | `timeline` | `warm` | Progress narratives, growth journeys |
|
||||
| --preset | Type | Style | Palette | Best For |
|
||||
|----------|------|-------|---------|----------|
|
||||
| `storytelling` | `scene` | `warm` | — | Personal essays, reflections, growth stories |
|
||||
| `lifestyle` | `scene` | `watercolor` | — | Travel, wellness, lifestyle, creative |
|
||||
| `history` | `timeline` | `elegant` | — | Historical overviews, milestones |
|
||||
| `evolution` | `timeline` | `warm` | — | Progress narratives, growth journeys |
|
||||
|
||||
### Editorial & Opinion
|
||||
|
||||
| --preset | Type | Style | Best For |
|
||||
|----------|------|-------|----------|
|
||||
| `opinion-piece` | `scene` | `screen-print` | Op-eds, commentary, critical essays |
|
||||
| `editorial-poster` | `comparison` | `screen-print` | Debate, contrasting viewpoints |
|
||||
| `cinematic` | `scene` | `screen-print` | Dramatic narratives, cultural essays |
|
||||
| --preset | Type | Style | Palette | Best For |
|
||||
|----------|------|-------|---------|----------|
|
||||
| `opinion-piece` | `scene` | `screen-print` | — | Op-eds, commentary, critical essays |
|
||||
| `editorial-poster` | `comparison` | `screen-print` | — | Debate, contrasting viewpoints |
|
||||
| `cinematic` | `scene` | `screen-print` | — | Dramatic narratives, cultural essays |
|
||||
|
||||
## Content Type → Preset Recommendations
|
||||
|
||||
@@ -63,8 +64,9 @@ Use this table during Step 3 to recommend presets based on Step 2 content analys
|
||||
| Narrative / Personal | `storytelling` | `lifestyle`, `evolution` |
|
||||
| Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` |
|
||||
| Historical / Timeline | `history` | `evolution` |
|
||||
| Academic / Research | `science-paper` | `tech-explainer`, `data-report`, `edu-visual` |
|
||||
| Academic / Research | `science-paper` | `tech-explainer`, `data-report` |
|
||||
| SaaS / Product | `saas-guide` | `knowledge-base`, `process-flow`, `warm-knowledge` |
|
||||
| Education / Knowledge | `edu-visual` | `knowledge-base`, `tutorial`, `hand-drawn-edu` |
|
||||
|
||||
## Override Examples
|
||||
|
||||
|
||||
@@ -43,21 +43,20 @@ Use Core Styles for most cases. See full Style Gallery below for granular contro
|
||||
| `sketch` | Raw pencil notebook style | Brainstorming, creative exploration |
|
||||
| `screen-print` | Bold poster art, halftone textures, limited colors | Opinion, editorial, cultural, cinematic |
|
||||
| `sketch-notes` | Soft hand-drawn warm notes | Educational, warm notes |
|
||||
| `macaron` | Soft macaron pastel blocks on warm cream, clean educational layouts | Educational, knowledge, tutorials, concept explainers |
|
||||
| `vintage` | Aged parchment historical | Historical, heritage |
|
||||
|
||||
Full specifications: `references/styles/<style>.md`
|
||||
|
||||
## Type × Style Compatibility Matrix
|
||||
|
||||
| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print | macaron |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ |
|
||||
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ | ✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
|
||||
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ |
|
||||
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
@@ -77,7 +76,7 @@ Full specifications: `references/styles/<style>.md`
|
||||
| Content Signals | Recommended Type | Recommended Style |
|
||||
|-----------------|------------------|-------------------|
|
||||
| API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration |
|
||||
| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion, macaron |
|
||||
| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion |
|
||||
| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint |
|
||||
| How-to, steps, workflow, process, tutorial | flowchart | vector-illustration, notion |
|
||||
| Framework, model, architecture, principles | framework | blueprint, vector-illustration |
|
||||
@@ -99,12 +98,6 @@ Full specifications: `references/styles/<style>.md`
|
||||
- Modern, professional, highly readable
|
||||
- Perfect for knowledge articles and tutorials
|
||||
|
||||
### infographic + vector-illustration (warm palette)
|
||||
- Same rendering: flat vector, black outlines, geometric simplification
|
||||
- Warm-only palette: terracotta, gold, brown tones on soft peach
|
||||
- Modern-retro feel, approachable and brand-friendly
|
||||
- Best for product showcases, team intros, feature grids, brand content
|
||||
|
||||
### flowchart + vector-illustration
|
||||
- Bold arrows and connectors
|
||||
- Distinct step containers with icons
|
||||
@@ -202,27 +195,27 @@ Full specifications: `references/styles/<style>.md`
|
||||
- Clean silhouette-based iconography
|
||||
- Poster-style hierarchy with bold typography
|
||||
|
||||
### infographic + macaron
|
||||
- Soft pastel color blocks (blue, mint, lavender, peach) as info zone backgrounds
|
||||
- Warm cream base with clear typography hierarchy
|
||||
- Rounded-corner cards and bubble containers
|
||||
- Coral Red accents for key data and emphasis
|
||||
- Bold summary quote at bottom
|
||||
---
|
||||
|
||||
### flowchart + macaron
|
||||
- Each step in a distinct macaron pastel card
|
||||
- Arrow chains connecting pastel containers
|
||||
- Clear progression with color-coded stages
|
||||
- Generous spacing between steps
|
||||
## Palette Gallery
|
||||
|
||||
### comparison + macaron
|
||||
- Split columns with different pastel fills per side
|
||||
- Soft visual separation, not harsh dividers
|
||||
- Coral Red highlights for key differentiators
|
||||
- Bottom summary capturing the comparison insight
|
||||
Palettes override a style's default colors. Combine any style with any palette: `--style vector-illustration --palette macaron`.
|
||||
|
||||
| Palette | Description | Best For |
|
||||
|---------|-------------|----------|
|
||||
| `macaron` | Soft pastel blocks (blue, mint, lavender, peach) on warm cream | Educational, knowledge, tutorials |
|
||||
| `warm` | Warm earth tones (orange, terracotta, gold) on soft peach, no cool colors | Brand, product, lifestyle |
|
||||
| `neon` | Vibrant neon (pink, cyan, yellow) on dark purple | Gaming, retro, pop culture |
|
||||
|
||||
Full specifications: `references/palettes/<palette>.md`
|
||||
|
||||
When no palette is specified, the style's built-in Color Palette is used.
|
||||
|
||||
## Palette Override Rules
|
||||
|
||||
1. Read style file → rendering rules (Visual Elements, Style Rules)
|
||||
2. Read palette file → Colors + Background
|
||||
3. Palette colors **replace** style's default Color Palette
|
||||
4. Palette Background **replaces** style's default Background color
|
||||
5. Style's texture description is preserved
|
||||
|
||||
### framework + macaron
|
||||
- Nodes as rounded pastel-filled cards
|
||||
- Hierarchical or network layout with soft connectors
|
||||
- Each concept level in a different macaron color
|
||||
- Clean labels with bold keywords
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
# macaron
|
||||
|
||||
Soft macaron pastel color blocks on warm cream, clean and readable educational layouts
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Clean, approachable infographic style built around soft macaron pastel color blocks as information containers. Each content zone sits on a distinct pastel fill — blue, mint, lavender, or peach — against a warm cream paper background. Emphasis on clarity, information hierarchy, and moderate density. Pairs well with hand-drawn line treatment (optional) or clean flat vector rendering.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Cream (#F5F0E8)
|
||||
- Texture: Subtle warm paper grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Cream | #F5F0E8 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
|
||||
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
|
||||
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
|
||||
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
|
||||
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
|
||||
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis highlights |
|
||||
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Rounded-corner cards, speech bubbles, and dashed-box frames as content containers
|
||||
- Each container filled with a distinct macaron pastel color
|
||||
- Clear typography hierarchy: bold large title → bold keywords → smaller muted annotations
|
||||
- Bold summary quote at the bottom of the image capturing the core insight
|
||||
- Auto-selected visual structure based on content: flow → arrow chains, compare → split columns, cycle → ring layout, composition → parallel cards, hierarchy → nested containers
|
||||
- Generous whitespace between zones, moderate information density
|
||||
|
||||
## Optional Hand-Drawn Mode
|
||||
|
||||
Can be combined with hand-drawn rendering for a warmer feel:
|
||||
- Slight wobble on lines and shape edges (not perfectly straight)
|
||||
- Simple stick-figure cartoon characters or hand-drawn icons
|
||||
- Color fills that don't completely fill outlines (hand-painted feel)
|
||||
- Doodle decorations: small stars, underlines, arrows
|
||||
|
||||
When not using hand-drawn mode, renders as clean flat shapes with smooth edges.
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use pastel color blocks to visually separate information zones
|
||||
- Maintain clear information hierarchy through typography weight and size
|
||||
- Include a bold summary quote at the bottom
|
||||
- Choose the best visual structure for the content (don't force one layout)
|
||||
- Keep generous whitespace and moderate density
|
||||
- Use Coral Red sparingly for emphasis on key data or warnings
|
||||
|
||||
### Don't
|
||||
|
||||
- Use pure white backgrounds
|
||||
- Overcrowd with too many elements or decorations
|
||||
- Mix too many accent colors beyond the macaron palette
|
||||
- Create dark or moody compositions
|
||||
- Use tiny text that's hard to read
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials, visual study notes
|
||||
@@ -24,26 +24,6 @@ Flat vector illustration with no gradients or 3D effects. Clear, uniform-thickne
|
||||
| Accent 2 | Rock Blue | #577590 | Cool balance |
|
||||
| Text | Black | #1A1A1A | Text elements |
|
||||
|
||||
## Palette Variants
|
||||
|
||||
### Warm Palette
|
||||
|
||||
Use with `--preset warm-knowledge` or specify in prompt. For product showcases, team introductions, feature grids, brand content.
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Soft Peach | #FFECD2 | Primary background |
|
||||
| Outlines | Deep Charcoal | #2D2D2D | All element outlines |
|
||||
| Primary | Warm Orange | #ED8936 | Main accent color |
|
||||
| Secondary | Terracotta | #C05621 | Warm depth |
|
||||
| Tertiary | Golden Yellow | #F6AD55 | Highlights, energy |
|
||||
| Accent | Deep Brown | #744210 | Grounding, anchoring |
|
||||
| Text | Warm Charcoal | #4A4A4A | Text elements |
|
||||
|
||||
Warm-only palette, no cool colors (no green, blue, purple). Modern-retro feel.
|
||||
|
||||
Default palette includes Mint Green (#81B29A) and Rock Blue (#577590) for colorful educational content. Warm palette uses exclusively warm tones for brand/product/team content.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- All objects have closed black outlines (coloring book style)
|
||||
|
||||
@@ -211,9 +211,22 @@ If no `preferred_style` (present Core Styles first):
|
||||
| `poster` | screen-print | Opinion, editorial, cultural, cinematic |
|
||||
|
||||
Style selection based on Type × Style compatibility matrix (styles.md).
|
||||
Full specs: `styles/<style>.md`
|
||||
**In Step 5.1**, read `styles/<style>.md` for visual elements and rendering rules.
|
||||
|
||||
### Q4: Image Text Language ⚠️ REQUIRED when article language ≠ EXTEND.md `language`
|
||||
### Q4: Palette (optional)
|
||||
|
||||
If preset did not specify a palette, and the user may benefit from a palette override, offer available palettes:
|
||||
|
||||
- Default (use style's built-in colors) (Recommended)
|
||||
- `macaron` — soft pastel blocks on warm cream
|
||||
- `warm` — warm earth tones, no cool colors
|
||||
- `neon` — vibrant neon on dark backgrounds
|
||||
|
||||
**Skip if**: preset already resolved palette, or `preferred_palette` set in EXTEND.md.
|
||||
|
||||
See Palette Gallery in [styles.md](styles.md#palette-gallery) and full specs in `palettes/<palette>.md`.
|
||||
|
||||
### Q5: Image Text Language ⚠️ REQUIRED when article language ≠ EXTEND.md `language`
|
||||
|
||||
Detect article language from content. If different from EXTEND.md `language` setting, MUST ask:
|
||||
- Article language (match article content) (Recommended)
|
||||
@@ -294,16 +307,18 @@ For each illustration in the outline:
|
||||
style: custom-flat-vector
|
||||
---
|
||||
```
|
||||
3. **Follow type-specific template** from [prompt-construction.md](prompt-construction.md)
|
||||
4. **Prompt quality requirements** (all REQUIRED):
|
||||
3. **Load style specs**: Read `styles/<style>.md` for visual elements, style rules, and rendering instructions
|
||||
4. **Load palette specs** (if palette specified): Read `palettes/<palette>.md` for colors and background. Palette colors **replace** the style's default Color Palette. If no palette specified, use the style's built-in colors.
|
||||
5. **Follow type-specific template** from [prompt-construction.md](prompt-construction.md), using rendering from style + colors from palette (or style default)
|
||||
6. **Prompt quality requirements** (all REQUIRED):
|
||||
- `Layout`: Describe overall composition (grid / radial / hierarchical / left-right / top-down)
|
||||
- `ZONES`: Describe each visual area with specific content, not vague descriptions
|
||||
- `LABELS`: Use **actual numbers, terms, metrics, quotes from the article** — NOT generic placeholders
|
||||
- `COLORS`: Specify hex codes with semantic meaning (e.g., `Coral (#E07A5F) for emphasis`)
|
||||
- `STYLE`: Describe line treatment, texture, mood, character rendering
|
||||
- `COLORS`: Specify hex codes from palette (or style default) with semantic meaning
|
||||
- `STYLE`: Describe line treatment, texture, mood, character rendering per style rules
|
||||
- `ASPECT`: Specify ratio (e.g., `16:9`)
|
||||
5. **Apply defaults**: composition requirements, character rendering, text guidelines, watermark
|
||||
6. **Backup rule**: If prompt file exists, rename to `prompts/NN-{type}-{slug}-backup-YYYYMMDD-HHMMSS.md`
|
||||
7. **Apply defaults**: composition requirements, character rendering, text guidelines, watermark
|
||||
8. **Backup rule**: If prompt file exists, rename to `prompts/NN-{type}-{slug}-backup-YYYYMMDD-HHMMSS.md`
|
||||
|
||||
**Verification** ⛔: Before proceeding to 5.2, confirm ALL prompt files exist:
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: baoyu-cover-image
|
||||
description: Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 10 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".
|
||||
description: Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".
|
||||
version: 1.56.1
|
||||
metadata:
|
||||
openclaw:
|
||||
@@ -39,7 +39,7 @@ Generate elegant cover images for articles with 5-dimensional customization.
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--type <name>` | hero, conceptual, typography, metaphor, scene, minimal |
|
||||
| `--palette <name>` | warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone |
|
||||
| `--palette <name>` | warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone, macaron |
|
||||
| `--rendering <name>` | flat-vector, hand-drawn, painterly, digital, pixel, chalk, screen-print |
|
||||
| `--style <name>` | Preset shorthand (see [Style Presets](references/style-presets.md)) |
|
||||
| `--text <level>` | none, title-only, title-subtitle, text-rich |
|
||||
@@ -56,7 +56,7 @@ Generate elegant cover images for articles with 5-dimensional customization.
|
||||
| Dimension | Values | Default |
|
||||
|-----------|--------|---------|
|
||||
| **Type** | hero, conceptual, typography, metaphor, scene, minimal | auto |
|
||||
| **Palette** | warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone | auto |
|
||||
| **Palette** | warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone, macaron | auto |
|
||||
| **Rendering** | flat-vector, hand-drawn, painterly, digital, pixel, chalk, screen-print | auto |
|
||||
| **Text** | none, title-only, title-subtitle, text-rich | title-only |
|
||||
| **Mood** | subtle, balanced, bold | balanced |
|
||||
@@ -69,7 +69,7 @@ Auto-selection rules: [references/auto-selection.md](references/auto-selection.m
|
||||
**Types**: hero, conceptual, typography, metaphor, scene, minimal
|
||||
→ Details: [references/types.md](references/types.md)
|
||||
|
||||
**Palettes**: warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone
|
||||
**Palettes**: warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone, macaron
|
||||
→ Details: [references/palettes/](references/palettes/)
|
||||
|
||||
**Renderings**: flat-vector, hand-drawn, painterly, digital, pixel, chalk, screen-print
|
||||
|
||||
@@ -27,6 +27,7 @@ When a dimension is omitted, select based on content signals.
|
||||
| Zen, focus, essential, pure, simple | `mono` |
|
||||
| History, vintage, retro, classic, exploration | `retro` |
|
||||
| Movie poster, album cover, concert, cinematic, dramatic, two-color | `duotone` |
|
||||
| Education, tutorial, knowledge, onboarding, concept explainer | `macaron` |
|
||||
|
||||
## Auto Rendering Selection
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ watermark:
|
||||
|
||||
preferred_type: null # hero|conceptual|typography|metaphor|scene|minimal or null for auto-select
|
||||
|
||||
preferred_palette: null # warm|elegant|cool|dark|earth|vivid|pastel|mono|retro or null for auto-select
|
||||
preferred_palette: null # warm|elegant|cool|dark|earth|vivid|pastel|mono|retro|duotone|macaron or null for auto-select
|
||||
|
||||
preferred_rendering: null # flat-vector|hand-drawn|painterly|digital|pixel|chalk or null for auto-select
|
||||
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
# macaron
|
||||
|
||||
Soft macaron pastel color blocks on warm cream
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Sky Blue | #A8D8EA |
|
||||
| Primary 2 | Mint Green | #B5E5CF |
|
||||
| Primary 3 | Lavender | #D5C6E0 |
|
||||
| Background | Warm Cream | #F5F0E8 |
|
||||
| Background Alt | Peach | #FFD5C2 |
|
||||
| Accent 1 | Coral Red | #E8655A |
|
||||
| Accent 2 | Deep Charcoal | #2D2D2D |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Rounded pastel color blocks
|
||||
- Subtle warm paper grain texture
|
||||
- Soft shadows, no hard edges
|
||||
- Gentle gradient transitions between zones
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials
|
||||
@@ -23,6 +23,7 @@
|
||||
| `vintage` | `retro` | `hand-drawn` |
|
||||
| `warm` | `warm` | `hand-drawn` |
|
||||
| `warm-flat` | `warm` | `flat-vector` |
|
||||
| `hand-drawn-edu` | `macaron` | `hand-drawn` |
|
||||
| `watercolor` | `earth` | `painterly` |
|
||||
| `poster-art` | `retro` | `screen-print` |
|
||||
| `mondo` | `mono` | `screen-print` |
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: baoyu-infographic
|
||||
description: Generates professional infographics with 21 layout types and 20 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图".
|
||||
description: Generates professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图".
|
||||
version: 1.56.1
|
||||
metadata:
|
||||
openclaw:
|
||||
@@ -26,7 +26,7 @@ Two dimensions: **layout** (information structure) × **style** (visual aestheti
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--layout` | 21 options (see Layout Gallery), default: bento-grid |
|
||||
| `--style` | 20 options (see Style Gallery), default: craft-handmade |
|
||||
| `--style` | 21 options (see Style Gallery), default: craft-handmade |
|
||||
| `--aspect` | Named: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1) |
|
||||
| `--lang` | en, zh, ja, etc. |
|
||||
|
||||
@@ -82,6 +82,7 @@ Full definitions: `references/layouts/<layout>.md`
|
||||
| `pop-laboratory` | Blueprint grid, coordinate markers, lab precision |
|
||||
| `morandi-journal` | Hand-drawn doodle, warm Morandi tones |
|
||||
| `retro-pop-grid` | 1970s retro pop art, Swiss grid, thick outlines |
|
||||
| `hand-drawn-edu` | Macaron pastels, hand-drawn wobble, stick figures |
|
||||
|
||||
Full definitions: `references/styles/<style>.md`
|
||||
|
||||
@@ -104,6 +105,8 @@ Full definitions: `references/styles/<style>.md`
|
||||
| Product Guide | `dense-modules` + `morandi-journal` |
|
||||
| Technical Guide | `dense-modules` + `pop-laboratory` |
|
||||
| Trendy Guide | `dense-modules` + `retro-pop-grid` |
|
||||
| Educational Diagram | `hub-spoke` + `hand-drawn-edu` |
|
||||
| Process Tutorial | `linear-progression` + `hand-drawn-edu` |
|
||||
|
||||
Default: `bento-grid` + `craft-handmade`
|
||||
|
||||
@@ -259,7 +262,7 @@ Report: topic, layout, style, aspect, language, output path, files created.
|
||||
- `references/structured-content-template.md` - Content format
|
||||
- `references/base-prompt.md` - Prompt template
|
||||
- `references/layouts/<layout>.md` - 21 layout definitions
|
||||
- `references/styles/<style>.md` - 20 style definitions
|
||||
- `references/styles/<style>.md` - 21 style definitions
|
||||
|
||||
## Extension Support
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
# hand-drawn-edu
|
||||
|
||||
Hand-drawn educational infographic with macaron pastel color blocks on warm cream paper texture.
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Background: Warm cream (#F5F0E8) with subtle paper grain texture
|
||||
- Primary text: Deep charcoal (#2D2D2D) for headlines, outlines
|
||||
- Macaron Blue: #A8D8EA for cool-toned information zones
|
||||
- Macaron Mint: #B5E5CF for growth/positive zones
|
||||
- Macaron Lavender: #D5C6E0 for abstract/concept zones
|
||||
- Macaron Peach: #FFD5C2 for warm-toned zones
|
||||
- Accent: Coral Red (#E8655A) for key data, warnings, emphasis
|
||||
- Muted annotations: Warm gray (#6B6B6B) for secondary labels
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Macaron pastel rounded cards as distinct information zones
|
||||
- Hand-drawn wavy connection lines and arrows with small text labels
|
||||
- Simple stick-figure characters and cartoon icons to humanize concepts
|
||||
- Doodle decorations: small stars, underlines, spirals, sparkles
|
||||
- Color fills don't completely fill outlines — preserve casual hand-drawn feel
|
||||
- Dashed borders for secondary or contained zones
|
||||
- Small icon doodles (clipboard, lock, checkmark, lightbulb) to reinforce concepts
|
||||
- Bold centered quote or takeaway at the bottom
|
||||
- Slight hand-drawn wobble on all lines and shapes
|
||||
|
||||
## Variants
|
||||
|
||||
| Variant | Focus | Visual Emphasis |
|
||||
|---------|-------|-----------------|
|
||||
| **Sketch-notes** | Concept mapping | More stick figures, thought bubbles, connecting arrows |
|
||||
| **Pastel cards** | Structured info | Cleaner macaron blocks, less doodle, more white space |
|
||||
|
||||
## Typography
|
||||
|
||||
- Main title: Bold hand-drawn lettering with organic strokes, large confident letterforms with slight wobble
|
||||
- Section headers: Hand-lettered text on or inside macaron color blocks
|
||||
- Body text: Clear handwritten print style, legible but not mechanical
|
||||
- Annotations: Warm gray (#6B6B6B), smaller, neat handwritten labels
|
||||
- Keywords: Bold emphasis within body text
|
||||
|
||||
## Style Enforcement
|
||||
|
||||
- All lines must have slight hand-drawn wobble — no perfect geometry
|
||||
- Each information zone uses a distinct macaron color block
|
||||
- Maintain consistent wobble quality across all shapes and lines
|
||||
- Include at least one simple cartoon character or stick figure
|
||||
- Generous white space between zones — each zone should breathe
|
||||
- Maximum 4 macaron colors per infographic
|
||||
|
||||
## Avoid
|
||||
|
||||
- Perfect geometric shapes or straight lines
|
||||
- Photorealistic elements or stock illustration style
|
||||
- Pure white backgrounds
|
||||
- Flat vector icons or digital-precision graphics
|
||||
- Overcrowded layouts — let zones breathe
|
||||
- Corporate or clinical aesthetic
|
||||
|
||||
## Best For
|
||||
|
||||
Educational diagrams, process explainers, concept maps, knowledge summaries, tutorial walkthroughs, onboarding visuals
|
||||
@@ -71,6 +71,7 @@ Transform content into professional slide deck images.
|
||||
| `corporate` | clean + professional + geometric + balanced | Investor decks, proposals |
|
||||
| `minimal` | clean + neutral + geometric + minimal | Executive briefings |
|
||||
| `sketch-notes` | organic + warm + handwritten + balanced | Educational, tutorials |
|
||||
| `hand-drawn-edu` | organic + macaron + handwritten + balanced | Educational diagrams, process explainers |
|
||||
| `watercolor` | organic + warm + humanist + minimal | Lifestyle, wellness |
|
||||
| `dark-atmospheric` | clean + dark + editorial + balanced | Entertainment, gaming |
|
||||
| `notion` | clean + neutral + geometric + dense | Product demos, SaaS |
|
||||
@@ -88,7 +89,7 @@ Transform content into professional slide deck images.
|
||||
| Dimension | Options | Description |
|
||||
|-----------|---------|-------------|
|
||||
| **Texture** | clean, grid, organic, pixel, paper | Visual texture and background treatment |
|
||||
| **Mood** | professional, warm, cool, vibrant, dark, neutral | Color temperature and palette style |
|
||||
| **Mood** | professional, warm, cool, vibrant, dark, neutral, macaron | Color temperature and palette style |
|
||||
| **Typography** | geometric, humanist, handwritten, editorial, technical | Headline and body text styling |
|
||||
| **Density** | minimal, balanced, dense | Information density per slide |
|
||||
|
||||
@@ -99,6 +100,7 @@ Full specs: `references/dimensions/*.md`
|
||||
| Content Signals | Preset |
|
||||
|-----------------|--------|
|
||||
| tutorial, learn, education, guide, beginner | `sketch-notes` |
|
||||
| hand-drawn, infographic, diagram, process, onboarding | `hand-drawn-edu` |
|
||||
| classroom, teaching, school, chalkboard | `chalkboard` |
|
||||
| architecture, system, data, analysis, technical | `blueprint` |
|
||||
| creative, children, kids, cute | `vector-illustration` |
|
||||
@@ -393,6 +395,8 @@ options:
|
||||
description: "Blues, grays, analytical"
|
||||
- label: "vibrant"
|
||||
description: "High saturation, bold"
|
||||
- label: "macaron"
|
||||
description: "Pastel blocks (blue, mint, lavender, peach) on cream"
|
||||
```
|
||||
(Note: "dark", "neutral" available via Other)
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ Color temperature and palette style.
|
||||
|--------|-------------------|---------------|----------|
|
||||
| `professional` | Cool-neutral | Navy, gold, structured grays | Business, investor, corporate |
|
||||
| `warm` | Warm | Earth tones, oranges, natural colors | Education, friendly, approachable |
|
||||
| `macaron` | Warm | Pastel blocks (blue, mint, lavender, peach) on cream | Educational diagrams, knowledge sharing |
|
||||
| `cool` | Cool | Blues, grays, cyan, teal | Technical, data, analytical |
|
||||
| `vibrant` | Varied | High saturation, bold colors | Marketing, creative, attention-grabbing |
|
||||
| `dark` | Dark | Deep backgrounds with bright accents | Entertainment, gaming, atmospheric |
|
||||
@@ -36,6 +37,19 @@ Accent 2: #E9C46A (Mustard Yellow)
|
||||
Accent 3: #87A96B (Sage Green)
|
||||
```
|
||||
|
||||
### macaron
|
||||
|
||||
```
|
||||
Background: #F5F0E8 (Warm Cream)
|
||||
Primary Text: #2D2D2D (Deep Charcoal)
|
||||
Muted Text: #6B6B6B (Warm Gray)
|
||||
Macaron Blue: #A8D8EA (Sky Blue)
|
||||
Macaron Mint: #B5E5CF (Mint Green)
|
||||
Macaron Lavender: #D5C6E0 (Lavender)
|
||||
Macaron Peach: #FFD5C2 (Peach)
|
||||
Accent: #E8655A (Coral Red)
|
||||
```
|
||||
|
||||
### cool
|
||||
|
||||
```
|
||||
@@ -95,6 +109,13 @@ Accent 2: #A1A1AA (Light Gray)
|
||||
- Soft transitions between colors
|
||||
- Welcoming atmosphere
|
||||
|
||||
### macaron
|
||||
|
||||
- Soft pastel color blocks as distinct information zones
|
||||
- Each zone uses one macaron color (blue, mint, lavender, peach)
|
||||
- Coral Red accent used sparingly for emphasis
|
||||
- Warm cream background maintains friendly, approachable feel
|
||||
|
||||
### cool
|
||||
|
||||
- Blue-dominant palette
|
||||
@@ -129,6 +150,7 @@ Accent 2: #A1A1AA (Light Gray)
|
||||
|------|-----------------|------------|
|
||||
| professional | clean texture, geometric typography | organic texture, handwritten |
|
||||
| warm | organic texture, humanist typography | pixel texture, minimal density |
|
||||
| macaron | organic texture, handwritten typography | pixel texture, dark mood |
|
||||
| cool | grid texture, technical typography | paper texture, handwritten |
|
||||
| vibrant | pixel/organic texture, editorial typography | neutral mood overlaps |
|
||||
| dark | clean/pixel texture, technical typography | paper texture |
|
||||
|
||||
@@ -11,6 +11,7 @@ Maps 16 preset styles to their dimension combinations.
|
||||
| corporate | clean | professional | geometric | balanced |
|
||||
| minimal | clean | neutral | geometric | minimal |
|
||||
| sketch-notes | organic | warm | handwritten | balanced |
|
||||
| hand-drawn-edu | organic | macaron | handwritten | balanced |
|
||||
| watercolor | organic | warm | humanist | minimal |
|
||||
| dark-atmospheric | clean | dark | editorial | balanced |
|
||||
| notion | clean | neutral | geometric | dense |
|
||||
@@ -50,6 +51,11 @@ Maps 16 preset styles to their dimension combinations.
|
||||
- **Feel**: Friendly learning, approachable education
|
||||
- **Auto-select**: tutorial, learn, education, guide, beginner
|
||||
|
||||
### hand-drawn-edu
|
||||
- **Dimensions**: organic + macaron + handwritten + balanced
|
||||
- **Feel**: Hand-drawn educational infographic, macaron pastel zones
|
||||
- **Auto-select**: hand-drawn, infographic, diagram, process, onboarding
|
||||
|
||||
### watercolor
|
||||
- **Dimensions**: organic + warm + humanist + minimal
|
||||
- **Feel**: Artistic, natural, lifestyle
|
||||
@@ -114,7 +120,7 @@ When user selects "Custom dimensions", combine any:
|
||||
- **Typography** (5): geometric, humanist, handwritten, editorial, technical
|
||||
- **Density** (3): minimal, balanced, dense
|
||||
|
||||
Total possible combinations: 5 × 6 × 5 × 3 = **450 unique styles**
|
||||
Total possible combinations: 5 × 7 × 5 × 3 = **525 unique styles**
|
||||
|
||||
## Recommended Combinations (Beyond Presets)
|
||||
|
||||
|
||||
@@ -55,6 +55,6 @@ Visual texture and background treatment.
|
||||
|---------|-----------------|------------|
|
||||
| clean | professional, neutral moods | handwritten typography |
|
||||
| grid | cool, professional moods | handwritten, vibrant moods |
|
||||
| organic | warm, vibrant moods | technical typography |
|
||||
| organic | warm, macaron, vibrant moods | technical typography |
|
||||
| pixel | vibrant, dark moods | editorial typography |
|
||||
| paper | warm moods | geometric typography, minimal density |
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
# hand-drawn-edu
|
||||
|
||||
Hand-drawn educational infographic with macaron pastel color blocks on warm cream paper
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Hand-drawn educational infographic feel with slight wobble on all lines and shapes, like a high-quality presentation visual summary. Warm cream paper background with macaron pastel color blocks creating distinct information zones. Simple cartoon characters and doodle decorations bring concepts to life while maintaining clean composition and generous white space.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Cream (#F5F0E8)
|
||||
- Texture: Subtle warm paper grain, hand-drawn feel with slight organic imperfection
|
||||
|
||||
## Typography
|
||||
|
||||
### Primary Font (Headlines)
|
||||
|
||||
Bold hand-drawn lettering with organic strokes. Large, confident letterforms with slight wobble. Thick marker-style strokes. Render as hand-drawn letters, not typed text.
|
||||
|
||||
### Secondary Font (Body)
|
||||
|
||||
Clear handwritten style for body text and labels. Warm gray (#6B6B6B) for annotations and small labels. Bold keywords within body text for emphasis. Legible but not mechanical.
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Cream | #F5F0E8 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
|
||||
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
|
||||
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
|
||||
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
|
||||
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
|
||||
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis |
|
||||
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Macaron pastel rounded cards as distinct information zones
|
||||
- Hand-drawn wavy connection lines and arrows between zones
|
||||
- Simple stick-figure characters and cartoon icons
|
||||
- Doodle decorations: small stars, underlines, spirals
|
||||
- Color fills don't completely fill outlines — preserve hand-drawn casual feel
|
||||
- Dashed borders for secondary or contained zones
|
||||
- Small icon doodles (clipboard, lock, checkmark) to reinforce concepts
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use distinct macaron color blocks for each information zone
|
||||
- Keep hand-drawn wobble consistent across all lines and shapes
|
||||
- Include simple cartoon characters to humanize concepts
|
||||
- Add small label annotations on connecting arrows
|
||||
- Include a bold centered quote or takeaway at the bottom
|
||||
- Maintain generous white space between zones
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes or straight lines
|
||||
- Create photorealistic elements
|
||||
- Mix more than 4 macaron colors per slide
|
||||
- Use pure white backgrounds
|
||||
- Add slide numbers, footers, or logos
|
||||
- Overcrowd — each zone should breathe
|
||||
|
||||
## Best For
|
||||
|
||||
Educational diagrams, process explainers, concept maps, onboarding visuals, knowledge summaries, tutorial walkthroughs
|
||||
Reference in New Issue
Block a user