initial commit
This commit is contained in:
ray
@@ -0,0 +1,48 @@
|
||||
# Port Notes — baoyu-article-illustrator
|
||||
|
||||
Ported from [JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills) v1.57.0.
|
||||
|
||||
## Changes from upstream
|
||||
|
||||
`SKILL.md`, `references/workflow.md`, `references/usage.md`, `references/style-presets.md`, `references/styles.md`, `references/prompt-construction.md`, and `prompts/system.md` were adapted. The 23 style files and 4 palette files are verbatim copies. The `references/config/` directory was removed entirely.
|
||||
|
||||
### Adaptations
|
||||
|
||||
| Change | Upstream | Hermes |
|
||||
|--------|----------|--------|
|
||||
| Metadata namespace | `openclaw` | `hermes` |
|
||||
| Trigger | `/baoyu-article-illustrator` slash command + CLI flags | Natural language skill matching |
|
||||
| User config | EXTEND.md (project/user/XDG paths) + first-time-setup | Removed — not part of Hermes infra |
|
||||
| User prompts | `AskUserQuestion` (batched, multi-question) | `clarify` tool (one question at a time) |
|
||||
| Image generation | `baoyu-imagine` (Bun/TypeScript, multi-provider, accepts `--ref`, writes to local path) | `image_generate` (returns URL only; agent downloads via `terminal`/`curl`) |
|
||||
| Backend selection | User picks provider via CLI flags | Not agent-selectable — `image_generate` uses the user-configured FAL model. Removed hardcoded "nano banana pro" line from `prompts/system.md`. |
|
||||
| Reference images | Passed to backend via `--ref`, copied via shell | `vision_analyze` extracts a textual description (binary never touched by `write_file`/`read_file`); description is embedded in prompts. Optional `terminal cp` for a local record. |
|
||||
| Platform support | Linux/macOS/Windows/WSL/PowerShell | Linux/macOS only |
|
||||
| File operations | Bash commands | Hermes file tools: `write_file`/`read_file` for text, `terminal` for binaries and URL downloads, `vision_analyze` for reading images |
|
||||
| Watermark | Driven by EXTEND.md `watermark.enabled` | Optional — user asks for it per-article |
|
||||
| Output directory | EXTEND.md `default_output_dir` (imgs-subdir / same-dir / illustrations-subdir / independent) | Defaults based on input type; user overrides in request |
|
||||
|
||||
### What was preserved
|
||||
|
||||
- Type × Style × Palette three-dimension framework
|
||||
- All style definitions (23 files, verbatim)
|
||||
- All palette definitions (4 files, verbatim)
|
||||
- Core reference files (workflow, prompt-construction, styles, style-presets) — adapted for Hermes tooling
|
||||
- Core principles and workflow structure (analyze → confirm → outline → prompts → generate)
|
||||
- Prompt-file-as-reproducibility-record discipline
|
||||
- Author, version, homepage attribution
|
||||
|
||||
## Syncing with upstream
|
||||
|
||||
To pull upstream updates:
|
||||
|
||||
```bash
|
||||
# Compare versions
|
||||
curl -sL https://raw.githubusercontent.com/JimLiu/baoyu-skills/main/skills/baoyu-article-illustrator/SKILL.md | head -5
|
||||
# Look for version: line
|
||||
|
||||
# Diff style/palette files (safe to overwrite — unchanged from upstream)
|
||||
diff <(curl -sL https://raw.githubusercontent.com/JimLiu/baoyu-skills/main/skills/baoyu-article-illustrator/references/styles/blueprint.md) references/styles/blueprint.md
|
||||
```
|
||||
|
||||
`references/styles/*` and `references/palettes/*` can be overwritten directly. `SKILL.md`, `references/workflow.md`, `references/usage.md`, `references/style-presets.md`, `references/styles.md`, `references/prompt-construction.md`, and `prompts/system.md` must be manually merged since they contain Hermes-specific adaptations (tool wiring, backend neutrality, removed EXTEND.md references).
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
name: baoyu-article-illustrator
|
||||
description: "Article illustrations: type × style × palette consistency."
|
||||
version: 1.57.0
|
||||
author: 宝玉 (JimLiu)
|
||||
license: MIT
|
||||
platforms: [linux, macos, windows]
|
||||
metadata:
|
||||
hermes:
|
||||
tags: [article-illustration, creative, image-generation]
|
||||
category: creative
|
||||
homepage: https://github.com/JimLiu/baoyu-skills#baoyu-article-illustrator
|
||||
---
|
||||
|
||||
# Article Illustrator
|
||||
|
||||
Adapted from [baoyu-article-illustrator](https://github.com/JimLiu/baoyu-skills) for Hermes Agent's tool ecosystem.
|
||||
|
||||
Analyze articles, identify illustration positions, generate images with **Type × Style × Palette** consistency.
|
||||
|
||||
## When to Use
|
||||
|
||||
Trigger this skill when the user asks to illustrate an article, add images to an article, generate illustrations for content, or uses phrases like "为文章配图", "illustrate article", or "add images". The user provides an article (file path or pasted content) and optionally specifies type, style, palette, or density.
|
||||
|
||||
## Three Dimensions
|
||||
|
||||
| Dimension | Controls | Examples |
|
||||
|-----------|----------|----------|
|
||||
| **Type** | Information structure | infographic, scene, flowchart, comparison, framework, timeline |
|
||||
| **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=vector-illustration, palette=macaron`.
|
||||
|
||||
Or use presets: `edu-visual` → type + style + palette in one shot. See [style-presets.md](references/style-presets.md).
|
||||
|
||||
## Types
|
||||
|
||||
| Type | Best For |
|
||||
|------|----------|
|
||||
| `infographic` | Data, metrics, technical |
|
||||
| `scene` | Narratives, emotional |
|
||||
| `flowchart` | Processes, workflows |
|
||||
| `comparison` | Side-by-side, options |
|
||||
| `framework` | Models, architecture |
|
||||
| `timeline` | History, evolution |
|
||||
|
||||
## Styles
|
||||
|
||||
See [references/styles.md](references/styles.md) for Core Styles, the full gallery, and Type × Style compatibility.
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{output-dir}/
|
||||
├── source-{slug}.{ext} # Only for pasted content
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ └── NN-{type}-{slug}.md
|
||||
└── NN-{type}-{slug}.png
|
||||
```
|
||||
|
||||
**Default output directory**:
|
||||
|
||||
| Input | Output Directory | Markdown Insert Path |
|
||||
|-------|------------------|----------------------|
|
||||
| Article file path | `{article-dir}/imgs/` | `imgs/NN-{type}-{slug}.png` |
|
||||
| Pasted content | `illustrations/{topic-slug}/` (cwd) | `illustrations/{topic-slug}/NN-{type}-{slug}.png` |
|
||||
|
||||
If the user asks for a different layout (e.g., images alongside the article, or a `illustrations/` subdirectory), honor that.
|
||||
|
||||
**Slug**: 2-4 words, kebab-case. **Conflict**: append `-YYYYMMDD-HHMMSS`.
|
||||
|
||||
## Core Principles
|
||||
|
||||
- **Visualize concepts, not metaphors** — if the article uses a metaphor (e.g., "电锯切西瓜"), illustrate the underlying concept, not the literal image.
|
||||
- **Labels use article data** — actual numbers, terms, and quotes from the article, not generic placeholders.
|
||||
- **Prompt files are reproducibility records** — every illustration must have a saved prompt file under `prompts/` before any image is generated.
|
||||
- **Strip secrets** — scan source content for API keys, tokens, or credentials before writing anything to disk.
|
||||
|
||||
## Workflow
|
||||
|
||||
```
|
||||
- [ ] Step 1: Detect reference images (if provided)
|
||||
- [ ] Step 2: Analyze content
|
||||
- [ ] Step 3: Confirm settings (clarify tool, one question at a time)
|
||||
- [ ] Step 4: Generate outline
|
||||
- [ ] Step 5: Generate prompts
|
||||
- [ ] Step 6: Generate images (image_generate)
|
||||
- [ ] Step 7: Finalize
|
||||
```
|
||||
|
||||
### Step 1: Detect Reference Images
|
||||
|
||||
If the user supplies reference images (paths pasted inline, attachments, or a URL):
|
||||
|
||||
1. For each reference, call `vision_analyze` with the path/URL and a question asking for style, palette, composition, and subject. Record the returned description in `{output-dir}/references/NN-ref-{slug}.md` via `write_file`.
|
||||
2. **Do not** try to copy the binary via `write_file` / `read_file` — those are text-only. If you want a local copy for the record, use `terminal` (`cp "$src" "{output-dir}/references/NN-ref-{slug}.{ext}"`). The skill itself never needs to read the binary; it works off the vision description.
|
||||
3. Since `image_generate` doesn't take image inputs, the vision description is what gets embedded in prompts during Step 5.
|
||||
|
||||
Full procedures: [references/workflow.md](references/workflow.md#step-1-detect-reference-images).
|
||||
|
||||
### Step 2: Analyze
|
||||
|
||||
| Analysis | Output |
|
||||
|----------|--------|
|
||||
| Content type | Technical / Tutorial / Methodology / Narrative |
|
||||
| Purpose | information / visualization / imagination |
|
||||
| Core arguments | 2-5 main points |
|
||||
| Positions | Where illustrations add value |
|
||||
|
||||
Read source (file path → `read_file`, or pasted text) and write the analysis to `{output-dir}/analysis.md` using `write_file`.
|
||||
|
||||
Full procedures: [references/workflow.md](references/workflow.md#step-2-analyze).
|
||||
|
||||
### Step 3: Confirm Settings
|
||||
|
||||
Use the `clarify` tool. Since `clarify` handles one question at a time, ask the most important question first. Skip any question whose answer is already present in the user's request.
|
||||
|
||||
| Order | Question | Options |
|
||||
|-------|----------|---------|
|
||||
| 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** *(skip if preset chosen in Q1)* | [Recommended], minimal-flat, sci-fi, hand-drawn, editorial, scene, poster |
|
||||
| Q4 | **Palette** *(optional)* | Default (style colors), macaron, warm, neon |
|
||||
| Q5 | **Language** *(only if article language is ambiguous)* | article language / user language |
|
||||
|
||||
Don't ask more than 2-3 `clarify` questions in a row. If the user already specified these in their request, skip entirely.
|
||||
|
||||
Full procedures: [references/workflow.md](references/workflow.md#step-3-confirm-settings).
|
||||
|
||||
### Step 4: Generate Outline → `outline.md`
|
||||
|
||||
Save `{output-dir}/outline.md` using `write_file` with frontmatter (type, density, style, palette, image_count) and one entry per illustration:
|
||||
|
||||
```yaml
|
||||
## Illustration 1
|
||||
**Position**: [section/paragraph]
|
||||
**Purpose**: [why]
|
||||
**Visual Content**: [what to show]
|
||||
**Filename**: 01-infographic-concept-name.png
|
||||
```
|
||||
|
||||
Full template: [references/workflow.md](references/workflow.md#step-4-generate-outline).
|
||||
|
||||
### Step 5: Generate Prompts
|
||||
|
||||
**BLOCKING**: Every illustration must have a saved prompt file before any image is generated — the prompt file is the reproducibility record.
|
||||
|
||||
For each illustration:
|
||||
|
||||
1. Create a prompt file per [references/prompt-construction.md](references/prompt-construction.md).
|
||||
2. Save to `{output-dir}/prompts/NN-{type}-{slug}.md` using `write_file` with YAML frontmatter.
|
||||
3. Prompts MUST use type-specific templates with structured sections (ZONES / LABELS / COLORS / STYLE / ASPECT).
|
||||
4. LABELS MUST include article-specific data: actual numbers, terms, metrics, quotes.
|
||||
5. Process references (`direct`/`style`/`palette`) per prompt frontmatter — for `direct` usage, embed a textual description of the reference in the prompt (since `image_generate` doesn't take reference-image inputs).
|
||||
|
||||
### Step 6: Generate Images
|
||||
|
||||
For each prompt file:
|
||||
|
||||
1. Call `image_generate(prompt=..., aspect_ratio=...)`. `image_generate` returns a JSON result containing an image URL; it does NOT write to disk and does NOT accept an output path.
|
||||
2. Map the prompt's `ASPECT` to `image_generate`'s enum: `16:9` → `landscape`, `9:16` → `portrait`, `1:1` → `square`. Custom ratios → nearest named aspect.
|
||||
3. Download the returned URL to `{output-dir}/NN-{type}-{slug}.png` via `terminal` (e.g. `curl -sSL -o "{output-dir}/NN-{type}-{slug}.png" "{url}"`).
|
||||
4. On generation failure, auto-retry once.
|
||||
|
||||
Note: the underlying image-generation backend is user-configured (default: FAL FLUX 2 Klein 9B) and is NOT agent-selectable via `image_generate`. Do not write model names into prompts expecting them to route.
|
||||
|
||||
### Step 7: Finalize
|
||||
|
||||
Insert `` after the corresponding paragraph. Alt text: concise description in the article's language.
|
||||
|
||||
Report:
|
||||
|
||||
```
|
||||
Article Illustration Complete!
|
||||
Article: [path] | Type: [type] | Density: [level] | Style: [style] | Palette: [palette or default]
|
||||
Images: X/N generated
|
||||
```
|
||||
|
||||
## Modification
|
||||
|
||||
| Action | Steps |
|
||||
|--------|-------|
|
||||
| Edit | Update prompt → Regenerate → Update reference |
|
||||
| Add | Position → Prompt → Generate → Update outline → Insert |
|
||||
| Delete | Delete files → Remove reference → Update outline |
|
||||
|
||||
## References
|
||||
|
||||
| File | Content |
|
||||
|------|---------|
|
||||
| [references/workflow.md](references/workflow.md) | Detailed procedures |
|
||||
| [references/usage.md](references/usage.md) | Invocation examples |
|
||||
| [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 |
|
||||
|
||||
## Pitfalls
|
||||
|
||||
1. **Data integrity is paramount** — never summarize, paraphrase, or alter source statistics. "73% increase" stays "73% increase".
|
||||
2. **Strip secrets** — scan source content for API keys, tokens, or credentials before including in any output file.
|
||||
3. **Don't illustrate metaphors literally** — visualize the underlying concept.
|
||||
4. **Prompt files are mandatory** — no image generation without a saved prompt file. The file is what lets you regenerate or switch backends later.
|
||||
5. **`image_generate` aspect ratios** — the tool supports `landscape`, `portrait`, and `square`. Custom ratios map to the nearest option.
|
||||
6. **`image_generate` returns a URL, not a local file** — always download via `terminal` (`curl`) before inserting local image paths into the article.
|
||||
7. **No backend selection from the agent** — `image_generate` uses whatever model the user configured (default: FAL FLUX 2 Klein 9B). Don't write `"use <model> to generate this"` into prompts expecting it to route.
|
||||
@@ -0,0 +1,32 @@
|
||||
Create a cartoon-style infographic illustration following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic illustration
|
||||
- **Orientation**: Landscape (horizontal)
|
||||
- **Aspect Ratio**: 16:9
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Core Principles
|
||||
|
||||
- Hand-drawn quality throughout - NO realistic or photographic elements
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## Text Style (When Text Included)
|
||||
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Text should be readable and complement the visual
|
||||
- Font style harmonizes with illustration style
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below for any text elements
|
||||
- Match punctuation style to the content language
|
||||
|
||||
---
|
||||
|
||||
Generate the illustration based on the content provided below:
|
||||
@@ -0,0 +1,33 @@
|
||||
# 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.
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Soft pastel macaron color palette. Use block colors as rounded card backgrounds for distinct information sections. Accent coral red sparingly for emphasis on key terms only. Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials
|
||||
@@ -0,0 +1,42 @@
|
||||
# mono-ink
|
||||
|
||||
Black ink on pure white with sparse semantic accent colors
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF)
|
||||
- Texture: Clean, no grain, no tint
|
||||
|
||||
## Colors
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Pure White | #FFFFFF | Canvas |
|
||||
| Primary | Near Black | #1A1A1A | All lines, text, figures, arrows |
|
||||
| Accent (risk/emphasis) | Coral Red | #E8655A | Risk, problem, gap, key emphasis |
|
||||
| Accent (positive) | Muted Teal | #5FA8A8 | Positive, solution, "after" state |
|
||||
| Accent (neutral tag) | Dusty Lavender | #9B8AB5 | Neutral tags, category labels |
|
||||
| Soft Fill | Pale Gray | #F0F0F0 | Subtle zone backgrounds (optional) |
|
||||
|
||||
## Accent
|
||||
|
||||
Use black ink for all structural elements — lines, text, figures. Accent colors appear only for semantic highlighting: coral red for risks/gaps/problems, muted teal for positive/solution/after-states, dusty lavender for neutral category tags. Total colored pixels must remain under 10% of canvas. Pale gray may back a subtle zone but must never dominate.
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Black ink on white canvas. Accent colors for semantic highlighting only — total colored pixels under 10% of canvas. Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Compatible With
|
||||
|
||||
- `ink-notes` (primary, default pairing)
|
||||
- `minimal` (strict monochrome variation, drops the style's built-in accent)
|
||||
- `sketch` (pencil + ink hybrid look)
|
||||
|
||||
## Not Recommended With
|
||||
|
||||
- `sketch-notes` — its "no pure white backgrounds" rule conflicts
|
||||
- `warm`, `elegant`, `watercolor`, `fantasy-animation` — color-heavy by design, mono-ink strips their identity
|
||||
|
||||
## Best For
|
||||
|
||||
Professional visual notes, Before/After essays, tech manifestos, framework analogies, whiteboard-presentation explainers
|
||||
@@ -0,0 +1,33 @@
|
||||
# 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.
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Vibrant neon-on-dark palette. High contrast, immediate visual impact. Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Gaming, retro tech, 80s/90s nostalgic content, bold editorial, trend and pop culture
|
||||
@@ -0,0 +1,32 @@
|
||||
# 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.
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Warm earth tone palette. Warm-only — no cool colors (no green, blue, purple). Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Product showcases, team introductions, feature grids, brand content, personal growth, lifestyle
|
||||
@@ -0,0 +1,426 @@
|
||||
# Prompt Construction
|
||||
|
||||
## Prompt File Format
|
||||
|
||||
Each prompt file uses YAML frontmatter + content:
|
||||
|
||||
```yaml
|
||||
---
|
||||
illustration_id: 01
|
||||
type: infographic
|
||||
style: blueprint
|
||||
references: # ⚠️ ONLY if files EXIST in references/ directory
|
||||
- ref_id: 01
|
||||
filename: 01-ref-diagram.png
|
||||
usage: direct # direct | style | palette
|
||||
---
|
||||
|
||||
[Type-specific template content below...]
|
||||
```
|
||||
|
||||
**⚠️ CRITICAL - When to include `references` field**:
|
||||
|
||||
| Situation | Action |
|
||||
|-----------|--------|
|
||||
| Reference file saved to `references/` | Include in frontmatter ✓ |
|
||||
| Style extracted verbally (no file) | DO NOT include in frontmatter, append to prompt body instead |
|
||||
| File path in frontmatter but file doesn't exist | ERROR - remove references field |
|
||||
|
||||
**Reference Usage Types** (only when file exists):
|
||||
|
||||
| Usage | Description | Generation Action |
|
||||
|-------|-------------|-------------------|
|
||||
| `direct` | Primary visual reference | Describe the reference (composition, subject, style, palette) in prompt text — `image_generate` does not accept reference-image inputs |
|
||||
| `style` | Style characteristics only | Describe style in prompt text |
|
||||
| `palette` | Color palette extraction | Include colors in prompt |
|
||||
|
||||
**If no reference file but style/palette extracted verbally**, append directly to prompt body:
|
||||
```
|
||||
COLORS (from reference):
|
||||
- Primary: #E8756D coral
|
||||
- Secondary: #7ECFC0 mint
|
||||
...
|
||||
|
||||
STYLE (from reference):
|
||||
- Clean lines, minimal shadows
|
||||
- Gradient backgrounds
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Default Composition Requirements
|
||||
|
||||
**Apply to ALL prompts by default**:
|
||||
|
||||
| Requirement | Description |
|
||||
|-------------|-------------|
|
||||
| **Clean composition** | Simple layouts, no visual clutter |
|
||||
| **White space** | Generous margins, breathing room around elements |
|
||||
| **No complex backgrounds** | Solid colors or subtle gradients only, avoid busy textures |
|
||||
| **Centered or content-appropriate** | Main visual elements centered or positioned by content needs |
|
||||
| **Matching graphics** | Use graphic elements that align with content theme |
|
||||
| **Highlight core info** | White space draws attention to key information |
|
||||
|
||||
**Add to ALL prompts**:
|
||||
> Clean composition with generous white space. Simple or no background. Main elements centered or positioned by content needs.
|
||||
|
||||
---
|
||||
|
||||
## Color Specification Rules
|
||||
|
||||
Colors in prompts use hex codes for **rendering guidance only** — they tell the model which colors to use, NOT what text to display.
|
||||
|
||||
**⚠️ CRITICAL**: Image generation models sometimes render color names and hex values as visible text labels in the image (e.g., painting "Macaron Blue #A8D8EA" as a label). This must be prevented.
|
||||
|
||||
**Add to ALL prompts that contain a COLORS section**:
|
||||
> Color values (#hex) and color names are rendering guidance only — do NOT display color names, hex codes, or palette labels as visible text in the image.
|
||||
|
||||
---
|
||||
|
||||
## Character Rendering
|
||||
|
||||
When depicting people:
|
||||
|
||||
| Guideline | Description |
|
||||
|-----------|-------------|
|
||||
| **Style** | Simplified cartoon silhouettes or symbolic expressions |
|
||||
| **Avoid** | Realistic human portrayals, detailed faces |
|
||||
| **Diversity** | Varied body types when showing multiple people |
|
||||
| **Emotion** | Express through posture and simple gestures |
|
||||
|
||||
**Add to ALL prompts with human figures**:
|
||||
> Human figures: simplified stylized silhouettes or symbolic representations, not photorealistic.
|
||||
|
||||
---
|
||||
|
||||
## Text in Illustrations
|
||||
|
||||
| Element | Guideline |
|
||||
|---------|-----------|
|
||||
| **Size** | Large, prominent, immediately readable |
|
||||
| **Style** | Handwritten fonts preferred for warmth |
|
||||
| **Content** | Concise keywords and core concepts only |
|
||||
| **Language** | Match article language |
|
||||
|
||||
**Add to prompts with text**:
|
||||
> Text should be large and prominent with handwritten-style fonts. Keep minimal, focus on keywords.
|
||||
|
||||
---
|
||||
|
||||
## Principles
|
||||
|
||||
Good prompts must include:
|
||||
|
||||
1. **Layout Structure First**: Describe composition, zones, flow direction
|
||||
2. **Specific Data/Labels**: Use actual numbers, terms from article
|
||||
3. **Visual Relationships**: How elements connect
|
||||
4. **Semantic Colors**: Meaning-based color choices (red=warning, green=efficient)
|
||||
5. **Style Characteristics**: Line treatment, texture, mood
|
||||
6. **Aspect Ratio**: End with ratio and complexity level
|
||||
|
||||
## Type-Specific Templates
|
||||
|
||||
### Infographic
|
||||
|
||||
```
|
||||
[Title] - Data Visualization
|
||||
|
||||
Layout: [grid/radial/hierarchical]
|
||||
|
||||
ZONES:
|
||||
- Zone 1: [data point with specific values]
|
||||
- Zone 2: [comparison with metrics]
|
||||
- Zone 3: [summary/conclusion]
|
||||
|
||||
LABELS: [specific numbers, percentages, terms from article]
|
||||
COLORS: [semantic color mapping]
|
||||
STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
**Infographic + vector-illustration**:
|
||||
```
|
||||
Flat vector illustration infographic. Clean black outlines on all elements.
|
||||
COLORS: Cream background (#F5F0E6), Coral Red (#E07A5F), Mint Green (#81B29A), Mustard Yellow (#F2CC8F)
|
||||
ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements (dots, stars)
|
||||
```
|
||||
|
||||
**Infographic + vector-illustration + warm palette**:
|
||||
```
|
||||
Flat vector illustration infographic. Clean black outlines on all elements.
|
||||
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,
|
||||
modular card layout, consistent icon style
|
||||
```
|
||||
|
||||
### Scene
|
||||
|
||||
```
|
||||
[Title] - Atmospheric Scene
|
||||
|
||||
FOCAL POINT: [main subject]
|
||||
ATMOSPHERE: [lighting, mood, environment]
|
||||
MOOD: [emotion to convey]
|
||||
COLOR TEMPERATURE: [warm/cool/neutral]
|
||||
STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
[Title] - Process Flow
|
||||
|
||||
Layout: [left-right/top-down/circular]
|
||||
|
||||
STEPS:
|
||||
1. [Step name] - [brief description]
|
||||
2. [Step name] - [brief description]
|
||||
...
|
||||
|
||||
CONNECTIONS: [arrow types, decision points]
|
||||
STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
**Flowchart + vector-illustration**:
|
||||
```
|
||||
Flat vector flowchart with bold arrows and geometric step containers.
|
||||
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
|
||||
```
|
||||
|
||||
**Flowchart + ink-notes + mono-ink palette**:
|
||||
```
|
||||
Professional hand-drawn visual-note flowchart on pure white. Black ink line work
|
||||
with slight wobble, à la Mike Rohde sketchnoting.
|
||||
PALETTE: mono-ink — black ink dominant, sparse semantic accents
|
||||
COLORS: Pure White background (#FFFFFF), Near Black (#1A1A1A) for all lines,
|
||||
text, and figures; Coral Red (#E8655A) only for risk/emphasis,
|
||||
Muted Teal (#5FA8A8) only for positive/solution states
|
||||
ELEMENTS: Left-to-right stage boxes with rounded-rect frames, wavy hand-drawn
|
||||
arrows between stages, simple stick-figure characters with role
|
||||
labels above (e.g., "ML Engineer", "Team Lead"), dashed-border box
|
||||
for future/empty stage, small doodle icons per stage
|
||||
STYLE: Hand-lettered titles (bold, oversized), handwritten stage labels and
|
||||
annotations, generous white space, bottom tagline summarizing takeaway
|
||||
```
|
||||
|
||||
### Comparison
|
||||
|
||||
```
|
||||
[Title] - Comparison View
|
||||
|
||||
LEFT SIDE - [Option A]:
|
||||
- [Point 1]
|
||||
- [Point 2]
|
||||
|
||||
RIGHT SIDE - [Option B]:
|
||||
- [Point 1]
|
||||
- [Point 2]
|
||||
|
||||
DIVIDER: [visual separator]
|
||||
STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
**Comparison + vector-illustration**:
|
||||
```
|
||||
Flat vector comparison with split layout. Clear visual separation.
|
||||
COLORS: Left side Coral (#E07A5F), Right side Mint (#81B29A), cream background
|
||||
ELEMENTS: Bold icons, black outlines, centered divider line
|
||||
```
|
||||
|
||||
**Comparison + vector-illustration + warm palette**:
|
||||
```
|
||||
Flat vector comparison with split layout. Clear visual separation.
|
||||
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
|
||||
```
|
||||
|
||||
**Comparison + ink-notes + mono-ink palette** (Before/After, Traditional vs New):
|
||||
```
|
||||
Professional hand-drawn sketchnote comparison on pure white. Black ink line work
|
||||
with slight wobble, à la Mike Rohde sketchnoting.
|
||||
PALETTE: mono-ink — black ink dominant, sparse semantic accents
|
||||
COLORS: Pure White background (#FFFFFF), Near Black (#1A1A1A) for all outlines,
|
||||
text, figures, arrows; Coral Red (#E8655A) reserved for risks/gaps
|
||||
(left/Before side); Muted Teal (#5FA8A8) reserved for positives
|
||||
(right/After side). Color accents under 10% of canvas.
|
||||
LAYOUT: Left | Right split with vertical hand-drawn divider. Hand-lettered
|
||||
"Before" label (top-left) and "After" label (top-right).
|
||||
LEFT SIDE: Stick figure(s) with role label above, speech bubble showing the
|
||||
pain point, bulleted pain-point list in handwritten text.
|
||||
RIGHT SIDE: Stick figure(s) showing the new state, bulleted improvement list,
|
||||
small positive-action icons.
|
||||
BRIDGE: Curved hand-drawn "mindset shift" arrow bridging left → right with
|
||||
small inline label describing the shift.
|
||||
BOTTOM: Single-line hand-lettered tagline summarizing the takeaway.
|
||||
STYLE: Hand-lettered headings (bold, oversized), handwritten body annotations,
|
||||
generous white space, no computer fonts, no gradients, no shadows.
|
||||
```
|
||||
|
||||
### Framework
|
||||
|
||||
```
|
||||
[Title] - Conceptual Framework
|
||||
|
||||
STRUCTURE: [hierarchical/network/matrix]
|
||||
|
||||
NODES:
|
||||
- [Concept 1] - [role]
|
||||
- [Concept 2] - [role]
|
||||
|
||||
RELATIONSHIPS: [how nodes connect]
|
||||
STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
**Framework + vector-illustration**:
|
||||
```
|
||||
Flat vector framework diagram with geometric nodes and bold connectors.
|
||||
COLORS: Cream background (#F5F0E6), nodes in Coral/Mint/Mustard/Blue, black outlines
|
||||
ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
|
||||
```
|
||||
|
||||
**Framework + vector-illustration + warm palette**:
|
||||
```
|
||||
Flat vector framework diagram with geometric nodes and bold connectors.
|
||||
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
|
||||
```
|
||||
|
||||
**Framework + ink-notes + mono-ink palette** (command center, OS analogy):
|
||||
```
|
||||
Professional hand-drawn sketchnote framework on pure white. Black ink line work
|
||||
with slight wobble, à la Mike Rohde sketchnoting.
|
||||
PALETTE: mono-ink — black ink dominant, sparse semantic accents
|
||||
COLORS: Pure White background (#FFFFFF), Near Black (#1A1A1A) for all lines,
|
||||
text, figures; Dusty Lavender (#9B8AB5) for neutral category tags only;
|
||||
Coral Red (#E8655A) for emphasis sparingly. Color accents under 10%.
|
||||
STRUCTURE: Central rounded-rectangle frame as "the system" with hand-lettered
|
||||
title inside. Inner layer of labeled sub-components (node labels
|
||||
above each). Outer layer of feeder arrows from stick-figure
|
||||
operators/users with role labels.
|
||||
ELEMENTS: Stick figures at the edges with role tags ("Team Lead", "Operator"),
|
||||
wavy hand-drawn connector arrows with small inline labels, small
|
||||
doodle icons per component, dashed-border placeholder(s) for
|
||||
future/empty capabilities.
|
||||
BOTTOM: Single-line hand-lettered tagline.
|
||||
STYLE: Hand-lettered headings, handwritten annotations, generous white space,
|
||||
no computer fonts, no gradients.
|
||||
```
|
||||
|
||||
### Timeline
|
||||
|
||||
```
|
||||
[Title] - Chronological View
|
||||
|
||||
DIRECTION: [horizontal/vertical]
|
||||
|
||||
EVENTS:
|
||||
- [Date/Period 1]: [milestone]
|
||||
- [Date/Period 2]: [milestone]
|
||||
|
||||
MARKERS: [visual indicators]
|
||||
STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
### Screen-Print Style Override
|
||||
|
||||
When `style: screen-print`, replace standard style instructions with:
|
||||
|
||||
```
|
||||
Screen print / silkscreen poster art. Flat color blocks, NO gradients.
|
||||
COLORS: 2-5 colors maximum. [Choose from style palette or duotone pair]
|
||||
TEXTURE: Halftone dot patterns, slight color layer misregistration, paper grain
|
||||
COMPOSITION: Bold silhouettes, geometric framing, negative space as storytelling element
|
||||
FIGURES: Silhouettes only, no detailed faces, stencil-cut edges
|
||||
TYPOGRAPHY: Bold condensed sans-serif integrated into composition (not overlaid)
|
||||
```
|
||||
|
||||
**Scene + screen-print**:
|
||||
```
|
||||
Conceptual poster scene. Single symbolic focal point, NOT literal illustration.
|
||||
COLORS: Duotone pair (e.g., Burnt Orange #E8751A + Deep Teal #0A6E6E) on Off-Black #121212
|
||||
COMPOSITION: Centered silhouette or geometric frame, 60%+ negative space
|
||||
TEXTURE: Halftone dots, paper grain, slight print misregistration
|
||||
```
|
||||
|
||||
**Comparison + screen-print**:
|
||||
```
|
||||
Split poster composition. Each side dominated by one color from duotone pair.
|
||||
LEFT: [Color A] side with silhouette/icon for [Option A]
|
||||
RIGHT: [Color B] side with silhouette/icon for [Option B]
|
||||
DIVIDER: Geometric shape or negative space boundary
|
||||
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")
|
||||
- Literal metaphor illustrations
|
||||
- Missing concrete labels/annotations
|
||||
- Generic decorative elements
|
||||
|
||||
## Watermark Integration (optional)
|
||||
|
||||
If the user asks for a watermark, append:
|
||||
|
||||
```
|
||||
Include a subtle watermark "[content]" positioned at [position].
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
# Style Presets
|
||||
|
||||
A preset expands to a type + style + optional palette combination. Users can override any dimension in their request.
|
||||
|
||||
## By Category
|
||||
|
||||
### Technical & Engineering
|
||||
|
||||
| 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 | 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 |
|
||||
| `ink-notes-compare` | `comparison` | `ink-notes` | `mono-ink` | Before/After essays, Traditional vs New, OS-style comparisons, mindset-shift narratives |
|
||||
| `ink-notes-flow` | `flowchart` | `ink-notes` | `mono-ink` | Professional process explainers, workforce pipelines, hand-drawn technical walkthroughs |
|
||||
| `ink-notes-framework` | `framework` | `ink-notes` | `mono-ink` | System analogies, command-center diagrams, architecture-as-metaphor, tech manifestos |
|
||||
|
||||
### Data & Analysis
|
||||
|
||||
| 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 | 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 | 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
|
||||
|
||||
Use this table during Step 3 to recommend presets based on Step 2 content analysis:
|
||||
|
||||
| Content Type (Step 2) | Primary Preset | Alternatives |
|
||||
|------------------------|----------------|--------------|
|
||||
| Technical | `tech-explainer` | `system-design`, `architecture` |
|
||||
| Tutorial | `tutorial` | `process-flow`, `knowledge-base`, `edu-visual` |
|
||||
| Methodology / Framework | `system-design` | `architecture`, `process-flow` |
|
||||
| Data / Metrics | `data-report` | `versus`, `tech-explainer` |
|
||||
| Comparison / Review | `versus` | `business-compare`, `editorial-poster`, `ink-notes-compare` |
|
||||
| Manifesto / Mindset shift / Professional visual note | `ink-notes-compare` | `ink-notes-framework`, `ink-notes-flow` |
|
||||
| Narrative / Personal | `storytelling` | `lifestyle`, `evolution` |
|
||||
| Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` |
|
||||
| Historical / Timeline | `history` | `evolution` |
|
||||
| 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
|
||||
|
||||
- "use the tech-explainer preset but swap the style for notion" = infographic type with notion style
|
||||
- "storytelling preset with timeline type" = timeline type with warm style
|
||||
|
||||
Explicit type/style/palette mentions in the user's request always override preset values.
|
||||
@@ -0,0 +1,224 @@
|
||||
# Style Reference
|
||||
|
||||
## Core Styles
|
||||
|
||||
Simplified style tier for quick selection:
|
||||
|
||||
| Core Style | Maps To | Best For |
|
||||
|------------|---------|----------|
|
||||
| `vector` | vector-illustration | Knowledge articles, tutorials, tech content |
|
||||
| `minimal-flat` | notion | General, knowledge sharing, SaaS |
|
||||
| `sci-fi` | blueprint | AI, frontier tech, system design |
|
||||
| `hand-drawn` | sketch/warm | Relaxed, reflective, casual content |
|
||||
| `editorial` | editorial | Processes, data, journalism |
|
||||
| `scene` | warm/watercolor | Narratives, emotional, lifestyle |
|
||||
| `poster` | screen-print | Opinion, editorial, cultural, cinematic |
|
||||
|
||||
Use Core Styles for most cases. See full Style Gallery below for granular control.
|
||||
|
||||
---
|
||||
|
||||
## Style Gallery
|
||||
|
||||
| Style | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
| `vector-illustration` | Clean flat vector art with bold shapes | Knowledge articles, tutorials, tech content |
|
||||
| `notion` | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
|
||||
| `elegant` | Refined, sophisticated | Business, thought leadership |
|
||||
| `warm` | Friendly, approachable | Personal growth, lifestyle, education |
|
||||
| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism, core concepts |
|
||||
| `blueprint` | Technical schematics | Architecture, system design, engineering |
|
||||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
||||
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||
| `scientific` | Academic precise diagrams | Biology, chemistry, technical research |
|
||||
| `chalkboard` | Classroom chalk drawing style | Education, teaching, explanations |
|
||||
| `fantasy-animation` | Ghibli/Disney-inspired hand-drawn | Storybook, magical, emotional |
|
||||
| `flat` | Modern bold geometric shapes | Modern digital, contemporary |
|
||||
| `flat-doodle` | Cute flat with bold outlines | Cute, friendly, approachable |
|
||||
| `intuition-machine` | Technical briefing with aged paper | Technical briefings, academic |
|
||||
| `nature` | Organic earthy illustration | Environmental, wellness |
|
||||
| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, retro tech |
|
||||
| `playful` | Whimsical pastel doodles | Fun, casual, educational |
|
||||
| `retro` | 80s/90s neon geometric | 80s/90s nostalgic, bold |
|
||||
| `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 |
|
||||
| `ink-notes` | Black ink on pure white, sparse semantic accents, hand-lettered (à la Mike Rohde's sketchnoting) | Before/After essays, tech manifestos, framework analogies |
|
||||
| `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 |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ |
|
||||
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
## Auto Selection by Type
|
||||
|
||||
| Type | Primary Style | Secondary Styles |
|
||||
|------|---------------|------------------|
|
||||
| infographic | vector-illustration | notion, blueprint, editorial |
|
||||
| scene | warm | watercolor, elegant |
|
||||
| flowchart | vector-illustration | notion, blueprint |
|
||||
| comparison | vector-illustration | notion, elegant |
|
||||
| framework | blueprint | vector-illustration, notion |
|
||||
| timeline | elegant | warm, editorial |
|
||||
|
||||
## Auto Selection by Content Signals
|
||||
|
||||
| Content Signals | Recommended Type | Recommended Style |
|
||||
|-----------------|------------------|-------------------|
|
||||
| API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration |
|
||||
| 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 |
|
||||
| vs, pros/cons, before/after, alternatives | comparison | vector-illustration, notion |
|
||||
| Manifesto, mindset shift, workforce, OS, whiteboard, professional visual note | comparison / framework | ink-notes |
|
||||
| Story, emotion, journey, experience, personal | scene | warm, watercolor |
|
||||
| History, timeline, progress, evolution | timeline | elegant, warm |
|
||||
| Productivity, SaaS, tool, app, software | infographic | notion, vector-illustration |
|
||||
| Business, professional, strategy, corporate | framework | elegant |
|
||||
| Opinion, editorial, culture, philosophy, cinematic, dramatic, poster | scene | screen-print |
|
||||
| Biology, chemistry, medical, scientific | infographic | scientific |
|
||||
| Explainer, journalism, magazine, investigation | infographic | editorial |
|
||||
|
||||
## Style Characteristics by Type
|
||||
|
||||
### infographic + vector-illustration
|
||||
- Clean flat vector shapes, bold geometric forms
|
||||
- Vibrant but harmonious color palette
|
||||
- Clear visual hierarchy with icons and labels
|
||||
- Modern, professional, highly readable
|
||||
- Perfect for knowledge articles and tutorials
|
||||
|
||||
### flowchart + vector-illustration
|
||||
- Bold arrows and connectors
|
||||
- Distinct step containers with icons
|
||||
- Clean progression flow
|
||||
- High contrast for readability
|
||||
|
||||
### comparison + vector-illustration
|
||||
- Split layout with clear visual separation
|
||||
- Bold iconography for each side
|
||||
- Color-coded distinctions
|
||||
- Easy at-a-glance comparison
|
||||
|
||||
### framework + vector-illustration
|
||||
- Geometric node representations
|
||||
- Clear hierarchical structure
|
||||
- Bold connecting lines
|
||||
- Modern system diagram aesthetic
|
||||
|
||||
### infographic + blueprint
|
||||
- Technical precision, schematic lines
|
||||
- Grid-based layout, clear zones
|
||||
- Monospace labels, data-focused
|
||||
- Blue/white color scheme
|
||||
|
||||
### infographic + notion
|
||||
- Hand-drawn feel, approachable
|
||||
- Soft icons, rounded elements
|
||||
- Neutral palette, clean backgrounds
|
||||
- Perfect for SaaS/productivity
|
||||
|
||||
### scene + warm
|
||||
- Golden hour lighting, cozy atmosphere
|
||||
- Soft gradients, natural textures
|
||||
- Inviting, personal feeling
|
||||
- Great for storytelling
|
||||
|
||||
### scene + watercolor
|
||||
- Artistic, painterly effect
|
||||
- Soft edges, color bleeding
|
||||
- Dreamy, creative mood
|
||||
- Best for lifestyle/travel
|
||||
|
||||
### flowchart + notion
|
||||
- Clear step indicators
|
||||
- Simple arrow connections
|
||||
- Minimal decoration
|
||||
- Focus on process clarity
|
||||
|
||||
### flowchart + blueprint
|
||||
- Technical precision
|
||||
- Detailed connection points
|
||||
- Engineering aesthetic
|
||||
- For complex systems
|
||||
|
||||
### comparison + elegant
|
||||
- Refined dividers
|
||||
- Balanced typography
|
||||
- Professional appearance
|
||||
- Business comparisons
|
||||
|
||||
### framework + blueprint
|
||||
- Precise node connections
|
||||
- Hierarchical clarity
|
||||
- System architecture feel
|
||||
- Technical frameworks
|
||||
|
||||
### timeline + elegant
|
||||
- Sophisticated markers
|
||||
- Refined typography
|
||||
- Historical gravitas
|
||||
- Professional presentations
|
||||
|
||||
### timeline + warm
|
||||
- Friendly progression
|
||||
- Organic flow
|
||||
- Personal journey feel
|
||||
- Growth narratives
|
||||
|
||||
### scene + screen-print
|
||||
- Bold silhouettes, symbolic compositions
|
||||
- 2-5 flat colors with halftone textures
|
||||
- Figure-ground inversion (negative space tells secondary story)
|
||||
- Vintage poster aesthetic, conceptual not literal
|
||||
- Great for opinion pieces and cultural commentary
|
||||
|
||||
### comparison + screen-print
|
||||
- Split duotone composition (one color per side)
|
||||
- Bold geometric dividers
|
||||
- Symbolic icons over detailed rendering
|
||||
- High contrast, immediate visual impact
|
||||
|
||||
### framework + screen-print
|
||||
- Geometric node representations with stencil-cut edges
|
||||
- Limited color coding (one color per concept level)
|
||||
- Clean silhouette-based iconography
|
||||
- Poster-style hierarchy with bold typography
|
||||
|
||||
---
|
||||
|
||||
## Palette Gallery
|
||||
|
||||
Palettes override a style's default colors. Combine any style with any palette (e.g. `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 |
|
||||
| `mono-ink` | Black ink on pure white with sparse semantic accents (coral red, muted teal, dusty lavender) | Professional visual notes, Before/After, manifestos |
|
||||
|
||||
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
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
# blueprint
|
||||
|
||||
Precise technical blueprint style with engineering precision
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Clean, structured visual metaphors using blueprints, diagrams, and schematics. Precise, analytical and aesthetically refined. Information presented in grid-based layouts with engineering precision. Technical drawing quality with professional polish.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Blueprint Off-White (#FAF8F5)
|
||||
- Texture: Subtle grid overlay, engineering paper feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Blueprint Paper | #FAF8F5 | Primary background |
|
||||
| Grid | Light Gray | #E5E5E5 | Background grid lines |
|
||||
| Primary Text | Deep Slate | #334155 | Headlines, body |
|
||||
| Primary Accent | Engineering Blue | #2563EB | Key elements |
|
||||
| Secondary Accent | Navy Blue | #1E3A5F | Supporting elements |
|
||||
| Tertiary | Light Blue | #BFDBFE | Fills, backgrounds |
|
||||
| Warning | Amber | #F59E0B | Warnings, emphasis |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Precise lines with consistent stroke weights
|
||||
- Technical schematics and clean vector graphics
|
||||
- Thin line work in technical drawing style
|
||||
- Connection lines: straight or 90-degree angles only
|
||||
- Data visualization with minimal charts
|
||||
- Dimension lines and measurement indicators
|
||||
- Cross-section style diagrams
|
||||
- Isometric or orthographic projections
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain consistent line weights
|
||||
- Use grid alignment for all elements
|
||||
- Keep color palette restrained
|
||||
- Create clear visual hierarchy through scale
|
||||
- Use geometric precision for all shapes
|
||||
|
||||
### Don't
|
||||
|
||||
- Use hand-drawn or organic shapes
|
||||
- Add decorative flourishes
|
||||
- Use curved connection lines
|
||||
- Include photographic elements
|
||||
- Add unnecessary embellishments
|
||||
|
||||
## Best For
|
||||
|
||||
Technical architecture, system design, data analysis, engineering documentation, process flows, infrastructure articles
|
||||
@@ -0,0 +1,62 @@
|
||||
# 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
|
||||
|
||||
Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
|
||||
|
||||
## 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
|
||||
- Make it look computerized
|
||||
|
||||
## Best For
|
||||
|
||||
Educational articles, tutorials, teaching content, workshops, informal learning, knowledge sharing, how-to guides, classroom-style explanations
|
||||
@@ -0,0 +1,59 @@
|
||||
# editorial
|
||||
|
||||
Magazine-style editorial infographic for professional content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
High-quality magazine explainer aesthetic. Clear visual storytelling with structured layouts and professional typography. Think Wired, The Verge, or quality science publications. Complex information made digestible.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF) or Light Gray (#F8F9FA)
|
||||
- Texture: None or subtle paper grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Pure White | #FFFFFF | Primary background |
|
||||
| Alt Background | Light Gray | #F8F9FA | Section backgrounds |
|
||||
| Primary Text | Near Black | #1A1A1A | Headlines, body |
|
||||
| Secondary Text | Dark Gray | #4A5568 | Captions |
|
||||
| Accent 1 | Editorial Blue | #2563EB | Primary accent |
|
||||
| Accent 2 | Coral | #F97316 | Secondary accent |
|
||||
| Accent 3 | Emerald | #10B981 | Positive elements |
|
||||
| Accent 4 | Amber | #F59E0B | Attention points |
|
||||
| Dividers | Medium Gray | #D1D5DB | Section dividers |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Clean flat illustrations
|
||||
- Structured multi-section layouts
|
||||
- Callout boxes for insights
|
||||
- Icon-based visualizations
|
||||
- Visual metaphors for concepts
|
||||
- Flow diagrams with hierarchy
|
||||
- Pull quotes and highlights
|
||||
- Clear section dividers
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Create clear narrative flow
|
||||
- Use structured layouts
|
||||
- Include callout boxes
|
||||
- Design visual metaphors
|
||||
- Maintain magazine polish
|
||||
|
||||
### Don't
|
||||
|
||||
- Use photographic imagery
|
||||
- Create cluttered layouts
|
||||
- Mix too many styles
|
||||
- Add purposeless decoration
|
||||
- Compromise clarity for style
|
||||
|
||||
## Best For
|
||||
|
||||
Technology explainers, science communication, research articles, policy analysis, investigative pieces, thought leadership, long-form journalism
|
||||
@@ -0,0 +1,56 @@
|
||||
# elegant
|
||||
|
||||
Refined, sophisticated illustration style for professional content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Elegant and refined visual approach with sophisticated color palette. Professional polish with subtle artistic touches. Emphasizes clarity and thoughtful composition. Conveys authority and trustworthiness without being cold or clinical.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Cream (#F5F0E6) or Soft Beige (#FAF6F0)
|
||||
- Texture: Subtle paper texture, very light grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Cream | #F5F0E6 | Primary background |
|
||||
| Primary | Soft Coral | #E8A598 | Main accent color |
|
||||
| Secondary | Muted Teal | #5B8A8A | Supporting elements |
|
||||
| Tertiary | Dusty Rose | #D4A5A5 | Subtle highlights |
|
||||
| Accent | Gold | #C9A962 | Premium touches |
|
||||
| Alt Accent | Copper | #B87333 | Warm metallic notes |
|
||||
| Text | Charcoal | #3D3D3D | Text and outlines |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Delicate line work with refined strokes
|
||||
- Subtle icons with balanced weight
|
||||
- Graceful curves and flowing compositions
|
||||
- Soft gradients with smooth transitions
|
||||
- Balanced whitespace and breathing room
|
||||
- Thin borders and elegant dividers
|
||||
- Subtle drop shadows for depth
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use refined color combinations
|
||||
- Create balanced, harmonious compositions
|
||||
- Keep elements light and airy
|
||||
- Use subtle gradients sparingly
|
||||
- Maintain generous margins
|
||||
|
||||
### Don't
|
||||
|
||||
- Use harsh contrasts
|
||||
- Overcrowd the composition
|
||||
- Add playful or casual elements
|
||||
- Use neon or overly bright colors
|
||||
- Create busy or cluttered layouts
|
||||
|
||||
## Best For
|
||||
|
||||
Professional articles, thought leadership pieces, business topics, executive communications, corporate blogs, strategy discussions, industry analysis
|
||||
@@ -0,0 +1,58 @@
|
||||
# fantasy-animation
|
||||
|
||||
Whimsical hand-drawn animation style inspired by Ghibli/Disney
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Charming hand-drawn animation aesthetic reminiscent of classic Disney, Studio Ghibli, or European storybook illustration. Soft, painterly textures with warm, inviting colors. Friendly characters, magical elements, and storybook feel. Enchanting, nostalgic, and emotionally engaging.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Soft Sky Blue (#E8F4FC) or Warm Cream (#FFF8E7)
|
||||
- Texture: Subtle watercolor wash, soft brush strokes
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Soft Sky Blue | #E8F4FC | Primary background |
|
||||
| Alt Background | Warm Cream | #FFF8E7 | Secondary areas |
|
||||
| Primary Text | Deep Forest | #2D5A3D | Headlines |
|
||||
| Body Text | Warm Brown | #5D4E37 | Content |
|
||||
| Accent 1 | Golden Yellow | #F4D03F | Magic, highlights |
|
||||
| Accent 2 | Rose Pink | #E8A0BF | Warmth, charm |
|
||||
| Accent 3 | Sage Green | #87A96B | Nature elements |
|
||||
| Accent 4 | Sky Blue | #7EC8E3 | Air, water, dreams |
|
||||
| Accent 5 | Coral | #F08080 | Emphasis, life |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Central illustrated character (friendly, expressive)
|
||||
- Small companion creatures (animals, magical beings)
|
||||
- Storybook-style environment backgrounds
|
||||
- Magical floating objects (books, orbs, sparkles)
|
||||
- Decorative elements: stars, flowers, leaves
|
||||
- Soft shadows and gentle highlights
|
||||
- Layered depth with foreground/background
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Create warm, inviting compositions
|
||||
- Use soft edges and painterly textures
|
||||
- Include charming character illustrations
|
||||
- Add magical decorative touches
|
||||
- Maintain storybook narrative feel
|
||||
|
||||
### Don't
|
||||
|
||||
- Use harsh geometric shapes
|
||||
- Create dark or intimidating imagery
|
||||
- Add photorealistic elements
|
||||
- Use cold color palettes
|
||||
- Make it look digital/computerized
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, children's articles, storytelling, creative topics, fantasy/gaming, inspirational pieces, family-friendly content
|
||||
@@ -0,0 +1,61 @@
|
||||
# flat-doodle
|
||||
|
||||
Cute flat doodle illustration style with bold outlines
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Cheerful and approachable visual style combining flat design with doodle charm. Features bold black outlines around simple shapes. Bright pastel colors with no gradients or shading. Cute rounded proportions that feel friendly. Clean white backgrounds create focus and clarity.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Clean White (#FFFFFF)
|
||||
- Texture: None - pure white isolated background
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Primary | Pastel Pink | #FFB6C1 | Main elements |
|
||||
| Secondary | Mint | #98D8C8 | Supporting elements |
|
||||
| Tertiary | Lavender | #C8A2C8 | Accent elements |
|
||||
| Accent 1 | Butter Yellow | #FFFACD | Highlight pop |
|
||||
| Accent 2 | Sky Blue | #87CEEB | Cool accent |
|
||||
| Accent 3 | Soft Coral | #F88379 | Warm accent |
|
||||
| Outline | Bold Black | #000000 | All outlines |
|
||||
| Text | Black | #1A1A1A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold black outlines around all shapes
|
||||
- Simple flat color fills
|
||||
- Cute rounded proportions
|
||||
- Minimal geometric shapes
|
||||
- Productivity icons (laptops, calendars, checkmarks)
|
||||
- Isolated elements on white
|
||||
- No shading or gradients
|
||||
- Hand-drawn quality with clean edges
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use bold black outlines consistently
|
||||
- Keep shapes simple and rounded
|
||||
- Use bright pastel palette
|
||||
- Isolate elements on white background
|
||||
- Maintain cute proportions
|
||||
- Keep minimal shading
|
||||
|
||||
### Don't
|
||||
|
||||
- Add shadows or depth effects
|
||||
- Use gradients or textures
|
||||
- Create complex detailed illustrations
|
||||
- Overlap too many elements
|
||||
- Use dark or moody backgrounds
|
||||
- Add realistic proportions
|
||||
|
||||
## Best For
|
||||
|
||||
Productivity articles, SaaS and app content, workflow tutorials, beginner guides, casual business content, tool introductions, lifestyle productivity
|
||||
@@ -0,0 +1,59 @@
|
||||
# flat
|
||||
|
||||
Modern flat vector illustration style for contemporary content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Contemporary flat design aesthetic with bold shapes and limited depth. Clean geometric forms with no gradients or shadows. Modern, accessible, and highly readable. Optimized for digital consumption with scalable vector quality.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: White (#FFFFFF) or Soft Gray (#F5F5F5)
|
||||
- Texture: None - clean solid backgrounds
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Alt Background | Soft Gray | #F5F5F5 | Accent areas |
|
||||
| Primary | Vibrant Blue | #3B82F6 | Main elements |
|
||||
| Secondary | Coral | #F97316 | Supporting elements |
|
||||
| Tertiary | Emerald | #10B981 | Accent elements |
|
||||
| Accent 1 | Purple | #8B5CF6 | Additional accent |
|
||||
| Accent 2 | Amber | #F59E0B | Highlight |
|
||||
| Text | Dark Slate | #1E293B | Text elements |
|
||||
| Light | Light Gray | #E5E7EB | Subtle elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold geometric shapes
|
||||
- Flat color fills with no gradients
|
||||
- Simple character illustrations
|
||||
- Clean icon designs
|
||||
- Minimal line work
|
||||
- Overlapping shape compositions
|
||||
- Abstract concept visualizations
|
||||
- Consistent stroke weights
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use flat solid colors
|
||||
- Create clean geometric shapes
|
||||
- Keep elements simple
|
||||
- Maintain consistent styling
|
||||
- Use bold color combinations
|
||||
|
||||
### Don't
|
||||
|
||||
- Add shadows or depth
|
||||
- Use gradients or textures
|
||||
- Create realistic illustrations
|
||||
- Add unnecessary details
|
||||
- Use photographic elements
|
||||
|
||||
## Best For
|
||||
|
||||
Modern articles, app and product content, startup stories, digital topics, contemporary business, tech company blogs, social media content
|
||||
@@ -0,0 +1,90 @@
|
||||
# ink-notes
|
||||
|
||||
Professional black-ink visual notes on pure white, in the tradition of Mike Rohde's sketchnoting
|
||||
|
||||
## Compared to sketch-notes
|
||||
|
||||
`ink-notes` and `sketch-notes` are distinct styles. Pick the right one:
|
||||
|
||||
| | `sketch-notes` | `ink-notes` |
|
||||
|---|---|---|
|
||||
| Background | Warm Off-White #FAF8F0 with paper grain | Pure White #FFFFFF, clean, no texture |
|
||||
| Palette | Soft warm accents (orange, mustard, sage, light blue) | Black ink dominant + sparse semantic accents |
|
||||
| Feel | Soft, warm, educational, approachable | Professional, structured, whiteboard-presentation |
|
||||
| Best For | Friendly tutorials, onboarding, casual explainers | Before/After essays, tech manifestos, framework analogies |
|
||||
|
||||
When in doubt: warm & friendly → `sketch-notes`. Disciplined & professional → `ink-notes`.
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Disciplined hand-drawn visual note. Confident black ink line work with slight wobble, hand-lettered typography, and sparse color accents used only for semantic emphasis. Feels like a skilled visual notetaker's whiteboard presentation — clean, structured, intentionally hand-drawn rather than decorative.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF)
|
||||
- Texture: Clean, no grain, no tint
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Pure White | #FFFFFF | Canvas |
|
||||
| Primary Ink | Near Black | #1A1A1A | All lines, text, figures, arrows |
|
||||
| Accent Warm | Coral Red | #E8655A | Risk, problem, gap, emphasis |
|
||||
| Accent Cool | Muted Teal | #5FA8A8 | Positive, solution, "after" state |
|
||||
| Accent Neutral | Dusty Lavender | #9B8AB5 | Neutral tags, category labels |
|
||||
| Soft Fill | Pale Gray | #F0F0F0 | Subtle zone backgrounds (optional) |
|
||||
|
||||
Color accents must remain under 10% of canvas area and only carry semantic meaning. Black ink does the structural work.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Black ink line work with intentional slight wobble on all strokes
|
||||
- Hand-lettered titles (bold, oversized) and handwritten body annotations
|
||||
- Simple stick-figure characters with expressive poses (pointing, thinking, walking)
|
||||
- Role labels above characters (e.g., "Tech Lead", "Compliance Officer")
|
||||
- Thought bubbles and speech bubbles with hand-drawn outlines
|
||||
- Rounded-rectangle frames for content groupings
|
||||
- Dashed-border rectangles for placeholder, "coming next", or empty states
|
||||
- Curvy hand-drawn arrows with small inline labels
|
||||
- Vertical or horizontal dividers between comparison zones ("Before" | "After")
|
||||
- "Mindset shift" curved arrow bridging two zones
|
||||
- Bottom tagline: single-line hand-lettered conclusion that points the takeaway
|
||||
- Stars, asterisks, underlines for emphasis — used sparingly
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Keep background pure white with no texture or tint
|
||||
- Let black ink dominate outlines, text, and figures
|
||||
- Use accent colors only for semantic highlighting
|
||||
- Keep all type hand-lettered — no computer-generated fonts
|
||||
- Maintain confident line quality (wobble, not mess)
|
||||
- Include a bottom tagline summarizing the main takeaway
|
||||
- Structure content into clear zones with visible dividers
|
||||
- Use dashed boxes for future, empty, or placeholder states
|
||||
|
||||
### Don't
|
||||
|
||||
- Use warm off-white or paper-textured backgrounds (that is sketch-notes' territory)
|
||||
- Fill large zones with color blocks
|
||||
- Use more than 3 accent colors per image
|
||||
- Use perfect geometric shapes — preserve hand-drawn wobble
|
||||
- Clutter with decorative doodles; every element must carry meaning
|
||||
- Use gradients, shadows, or computer-generated fonts
|
||||
|
||||
## Type Compatibility
|
||||
|
||||
| Type | Rating | Notes |
|
||||
|------|--------|-------|
|
||||
| comparison | ✓✓ | Best fit — Before/After, Traditional vs New, side-by-side contrasts |
|
||||
| framework | ✓✓ | OS-style command centers, layered architectures, organizational models |
|
||||
| flowchart | ✓✓ | Process explainers with labeled stages, workforce pipelines |
|
||||
| infographic | ✓ | Multi-zone technical summaries, manifesto-style posters |
|
||||
| timeline | ✓ | Hand-drawn horizontal arrow with era markers and milestones |
|
||||
| scene | ✗ | Not recommended — lacks scenic space |
|
||||
|
||||
## Best For
|
||||
|
||||
Product and engineering essays, tech manifestos, framework introductions, Before/After narratives, OS-level comparisons, workforce and organizational analogies, visual summaries of talks, thought-leadership articles
|
||||
@@ -0,0 +1,57 @@
|
||||
# intuition-machine
|
||||
|
||||
Technical briefing infographic style with aged paper and bilingual labels
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Academic/technical briefing style with clean 2D or isometric technical illustrations. Information-dense but organized with clear visual hierarchy. Vintage blueprint aesthetic with modern clarity. Multiple explanatory elements with bilingual callouts.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Aged Cream (#F5F0E6)
|
||||
- Texture: Subtle paper texture with light creases, vintage technical print feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Aged Cream | #F5F0E6 | Primary background |
|
||||
| Paper Texture | Warm White | #F5F0E1 | Blueprint effect |
|
||||
| Primary Text | Dark Maroon | #5D3A3A | Headlines, titles |
|
||||
| Body Text | Near Black | #1A1A1A | Content text |
|
||||
| Accent 1 | Teal | #2F7373 | Primary illustrations |
|
||||
| Accent 2 | Warm Brown | #8B7355 | Secondary elements |
|
||||
| Accent 3 | Maroon | #722F37 | Emphasis |
|
||||
| Outline | Deep Charcoal | #2D2D2D | Element outlines |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Isometric 3D or flat 2D technical diagrams
|
||||
- Explanatory text boxes with labeled content
|
||||
- Bilingual callout labels (English + Chinese)
|
||||
- Faded thematic background patterns
|
||||
- Clean black outlines on elements
|
||||
- Split or triptych layouts
|
||||
- Key insight boxes
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Include multiple text boxes with content
|
||||
- Use bilingual labels for key elements
|
||||
- Add faded thematic background patterns
|
||||
- Maintain aged paper texture
|
||||
- Create clear visual hierarchy
|
||||
|
||||
### Don't
|
||||
|
||||
- Create photorealistic 3D renders
|
||||
- Leave illustrations without explanatory text
|
||||
- Add stamps or watermarks in corners
|
||||
- Use gradients or glossy effects
|
||||
- Make it look too modern/digital
|
||||
|
||||
## Best For
|
||||
|
||||
Technical explanations, concept breakdowns, academic content, research summaries, bilingual audiences, knowledge documentation
|
||||
@@ -0,0 +1,58 @@
|
||||
# minimal
|
||||
|
||||
Ultra-clean, zen-like illustration style for focused content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Maximum simplicity with purposeful restraint. Every element serves a function. Zen-like calm and focus through extensive negative space. Single focal point approach that guides attention naturally. Quiet elegance through reduction.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF) or Off-White (#FAFAFA)
|
||||
- Texture: None - clean solid backgrounds
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Alt Background | Off-White | #FAFAFA | Subtle variation |
|
||||
| Primary | Pure Black | #000000 | Main elements |
|
||||
| Accent | Content-Derived | varies | Single accent color |
|
||||
| Text | Black | #000000 | Text elements |
|
||||
| Alt Text | Medium Gray | #6B6B6B | Secondary text |
|
||||
|
||||
Note: Accent color is derived from content context. Use sparingly.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Single focal element per illustration
|
||||
- Maximum negative space
|
||||
- Thin, precise lines
|
||||
- Simple geometric forms
|
||||
- Subtle shadows if any
|
||||
- Typography as primary element
|
||||
- Strategic use of single accent
|
||||
- Clean, uncluttered compositions
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Embrace empty space
|
||||
- Use single focal points
|
||||
- Keep lines thin and precise
|
||||
- Let content breathe
|
||||
- Question every element
|
||||
|
||||
### Don't
|
||||
|
||||
- Add decorative elements
|
||||
- Use multiple accent colors
|
||||
- Fill available space
|
||||
- Add textures or patterns
|
||||
- Create visual complexity
|
||||
|
||||
## Best For
|
||||
|
||||
Philosophy articles, minimalism content, focused explanations, meditation and mindfulness, essential concepts, clarity-focused writing
|
||||
@@ -0,0 +1,58 @@
|
||||
# nature
|
||||
|
||||
Organic, earthy illustration style for environmental and wellness content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Natural and organic visual approach inspired by the outdoors. Earth tones and natural textures that evoke calm and connection to nature. Flowing lines and organic shapes. Creates a sense of tranquility and environmental awareness.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Sand Beige (#F5E6D3) or Sky Blue wash (#E0F2FE)
|
||||
- Texture: Natural paper texture with organic feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Sand Beige | #F5E6D3 | Primary background |
|
||||
| Alt Background | Sky Blue | #E0F2FE | Alternative canvas |
|
||||
| Primary | Forest Green | #276749 | Main natural color |
|
||||
| Secondary | Sage | #9AE6B4 | Supporting green |
|
||||
| Tertiary | Earth Brown | #744210 | Grounding element |
|
||||
| Accent 1 | Sunset Orange | #ED8936 | Warm accent |
|
||||
| Accent 2 | Water Blue | #63B3ED | Cool accent |
|
||||
| Text | Deep Brown | #5D4E3C | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Leaf and plant motifs
|
||||
- Tree and branch silhouettes
|
||||
- Mountain and landscape shapes
|
||||
- Organic flowing lines
|
||||
- Natural textures (wood grain, stone)
|
||||
- Water and wave patterns
|
||||
- Animal silhouettes
|
||||
- Sun and moon symbols
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use earth-inspired colors
|
||||
- Create organic, flowing shapes
|
||||
- Include nature elements
|
||||
- Evoke outdoor atmosphere
|
||||
- Maintain calm and balance
|
||||
|
||||
### Don't
|
||||
|
||||
- Use synthetic or neon colors
|
||||
- Create rigid geometric shapes
|
||||
- Add tech or digital elements
|
||||
- Use stark contrasts
|
||||
- Overcomplicate compositions
|
||||
|
||||
## Best For
|
||||
|
||||
Sustainability articles, wellness content, outdoor topics, slow living, environmental issues, health and fitness, gardening, travel nature pieces
|
||||
@@ -0,0 +1,58 @@
|
||||
# notion
|
||||
|
||||
Minimalist hand-drawn line art style for knowledge content (Default)
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Clean, minimalist hand-drawn line art with intellectual feel. Simple doodle-style illustrations with intentional wobble. Maximum whitespace with single concept focus. Notion-like aesthetic that feels thoughtful and organized.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Pure White (#FFFFFF) or Off-White (#FAFAFA)
|
||||
- Texture: None - clean solid backgrounds
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | White | #FFFFFF | Primary background |
|
||||
| Alt Background | Off-White | #FAFAFA | Subtle variation |
|
||||
| Primary | Black | #1A1A1A | Main outlines |
|
||||
| Secondary | Dark Gray | #4A4A4A | Supporting lines |
|
||||
| Accent 1 | Pastel Blue | #A8D4F0 | Soft highlight |
|
||||
| Accent 2 | Pastel Yellow | #F9E79F | Warm highlight |
|
||||
| Accent 3 | Pastel Pink | #FADBD8 | Gentle accent |
|
||||
| Text | Near Black | #1A1A1A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Simple line doodles
|
||||
- Hand-drawn wobble effect
|
||||
- Basic geometric shapes
|
||||
- Stick figures for people
|
||||
- Conceptual icons
|
||||
- Clean hand-drawn lettering
|
||||
- Minimal decorative elements
|
||||
- Single-weight line work
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use maximum whitespace
|
||||
- Keep illustrations simple
|
||||
- Add slight hand-drawn wobble
|
||||
- Focus on single concepts
|
||||
- Use pastel accents sparingly
|
||||
|
||||
### Don't
|
||||
|
||||
- Create complex illustrations
|
||||
- Use many colors at once
|
||||
- Add detailed textures
|
||||
- Make precise geometric shapes
|
||||
- Overcrowd the composition
|
||||
|
||||
## Best For
|
||||
|
||||
Knowledge sharing, concept explanations, SaaS content, productivity articles, educational posts, how-to guides, professional blogs
|
||||
@@ -0,0 +1,57 @@
|
||||
# pixel-art
|
||||
|
||||
Retro 8-bit pixel art aesthetic with nostalgic gaming style
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Pixelated retro aesthetic reminiscent of classic 8-bit and 16-bit era games. Chunky pixels, limited color palettes, and nostalgic gaming references. Simple geometric shapes rendered in blocky pixel form. Fun, playful, and immediately recognizable retro tech aesthetic.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Light Blue (#87CEEB) or Soft Lavender (#E6E6FA)
|
||||
- Texture: Subtle pixel grid pattern, optional CRT scanline effect
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Light Blue | #87CEEB | Primary background |
|
||||
| Alt Background | Soft Lavender | #E6E6FA | Secondary backgrounds |
|
||||
| Primary Text | Dark Navy | #1A1A2E | Main elements |
|
||||
| Accent 1 | Pixel Green | #00FF00 | Success, highlights |
|
||||
| Accent 2 | Pixel Red | #FF0000 | Alerts, emphasis |
|
||||
| Accent 3 | Pixel Yellow | #FFFF00 | Warnings, energy |
|
||||
| Accent 4 | Pixel Cyan | #00FFFF | Info, tech elements |
|
||||
| Accent 5 | Pixel Magenta | #FF00FF | Special elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- All elements rendered with visible pixel structure
|
||||
- Simple iconography: notepad, checkboxes, gears, rockets
|
||||
- Text bubbles with pixel borders
|
||||
- 8-bit decorations: stars, hearts, arrows
|
||||
- Progress bars with chunky pixel segments
|
||||
- Dithering patterns for color transitions
|
||||
- Limited 16-32 color palette
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain consistent pixel grid throughout
|
||||
- Use limited color palette (16-32 colors max)
|
||||
- Create blocky, geometric shapes
|
||||
- Add nostalgic gaming references
|
||||
- Use dithering for color transitions
|
||||
|
||||
### Don't
|
||||
|
||||
- Use smooth gradients or anti-aliasing
|
||||
- Create photorealistic elements
|
||||
- Use thin lines or fine details
|
||||
- Add modern glossy effects
|
||||
- Break the pixel grid alignment
|
||||
|
||||
## Best For
|
||||
|
||||
Gaming articles, tech tutorials, nostalgic content, developer topics, retro-themed pieces, creative tech content
|
||||
@@ -0,0 +1,59 @@
|
||||
# playful
|
||||
|
||||
Fun, creative illustration style for casual and educational content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Whimsical and entertaining visual approach that sparks joy. Pastel colors with bright pops of energy. Doodle-like quality that feels approachable and fun. Creates a sense of play and discovery. Encourages engagement through visual delight.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Light Cream (#FFFBEB) or Soft White (#FFF)
|
||||
- Texture: Subtle, playful pattern or clean
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Light Cream | #FFFBEB | Primary background |
|
||||
| Primary | Pastel Pink | #FED7E2 | Soft warmth |
|
||||
| Secondary | Mint | #C6F6D5 | Fresh energy |
|
||||
| Tertiary | Lavender | #E9D8FD | Dreamy touch |
|
||||
| Accent 1 | Sky Blue | #BEE3F8 | Calm brightness |
|
||||
| Accent 2 | Bright Yellow | #FBBF24 | Energy pop |
|
||||
| Accent 3 | Coral | #F6AD55 | Warm pop |
|
||||
| Accent 4 | Turquoise | #38B2AC | Cool pop |
|
||||
| Text | Soft Charcoal | #4A4A4A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Doodles and sketchy lines
|
||||
- Star and sparkle decorations
|
||||
- Swirls and curvy elements
|
||||
- Cute character illustrations
|
||||
- Speech bubbles and callouts
|
||||
- Emoji-style icons
|
||||
- Confetti and celebration marks
|
||||
- Playful hand-lettering
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use varied pastel palette
|
||||
- Add whimsical decorations
|
||||
- Create friendly characters
|
||||
- Include playful details
|
||||
- Keep energy high and positive
|
||||
|
||||
### Don't
|
||||
|
||||
- Use dark or moody colors
|
||||
- Create serious compositions
|
||||
- Add corporate elements
|
||||
- Use rigid geometric shapes
|
||||
- Make it feel professional
|
||||
|
||||
## Best For
|
||||
|
||||
Tutorials and guides, beginner-friendly content, casual articles, fun topics, children's content, hobby-related posts, entertaining explanations
|
||||
@@ -0,0 +1,59 @@
|
||||
# retro
|
||||
|
||||
80s/90s nostalgic aesthetic with vibrant colors and geometric patterns
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Nostalgic retro aesthetic inspired by 80s and 90s design trends. Vibrant neon colors, geometric patterns, and Memphis design influence. Energetic, fun, and unapologetically bold. Perfect for content that embraces nostalgia or playful energy.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Deep Purple (#2D1B4E) or Dark Teal (#0F4C5C)
|
||||
- Texture: Subtle grid patterns or geometric shapes
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Deep Purple | #2D1B4E | Primary background |
|
||||
| Alt Background | Dark Teal | #0F4C5C | Alternative |
|
||||
| Primary | Hot Pink | #FF1493 | Main accent |
|
||||
| Secondary | Electric Cyan | #00FFFF | Supporting |
|
||||
| Tertiary | Neon Yellow | #FFFF00 | Highlights |
|
||||
| Accent 1 | Lime Green | #32CD32 | Energy |
|
||||
| Accent 2 | Orange | #FF6B35 | Warmth |
|
||||
| Text | White | #FFFFFF | Text elements |
|
||||
| Grid | Light Purple | #9D8EC0 | Grid lines |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Geometric patterns (triangles, circles)
|
||||
- Grid backgrounds and lines
|
||||
- Neon glow effects
|
||||
- Memphis design shapes
|
||||
- Zigzag and wavy patterns
|
||||
- Retro computer graphics
|
||||
- Bold outline strokes
|
||||
- Gradient sunsets
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use bold neon colors
|
||||
- Create geometric patterns
|
||||
- Add retro typography
|
||||
- Include Memphis-style shapes
|
||||
- Embrace maximalism
|
||||
|
||||
### Don't
|
||||
|
||||
- Use muted or subtle colors
|
||||
- Create minimal compositions
|
||||
- Add modern flat design
|
||||
- Make it look contemporary
|
||||
- Use understated elements
|
||||
|
||||
## Best For
|
||||
|
||||
Pop culture articles, gaming content, music and entertainment, nostalgia pieces, youth-focused content, creative industry, party and event content
|
||||
@@ -0,0 +1,59 @@
|
||||
# scientific
|
||||
|
||||
Academic scientific illustration style for technical diagrams and processes
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Academic scientific illustration aesthetic for biological, chemical, and technical diagrams. Clean, precise diagrams with proper labeling and clear visual flow. Educational clarity with professional polish. Textbook quality illustrations.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Off-White (#FAFAFA) or Light Blue-Gray (#F0F4F8)
|
||||
- Texture: None or subtle paper grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Off-White | #FAFAFA | Primary background |
|
||||
| Primary Text | Dark Slate | #1E293B | Labels, headers |
|
||||
| Label Text | Medium Gray | #475569 | Annotations |
|
||||
| Pathway 1 | Teal | #0D9488 | Primary pathway |
|
||||
| Pathway 2 | Blue | #3B82F6 | Secondary pathway |
|
||||
| Pathway 3 | Purple | #8B5CF6 | Tertiary pathway |
|
||||
| Structure | Amber | #F59E0B | Membranes, structures |
|
||||
| Alert | Red | #EF4444 | Key elements |
|
||||
| Positive | Green | #22C55E | Products, outputs |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Precise labeled diagrams
|
||||
- Flow arrows showing direction
|
||||
- Modular components with colors
|
||||
- Chemical formulas and notation
|
||||
- Cross-section views
|
||||
- Numbered step sequences
|
||||
- Molecule and cell representations
|
||||
- Process summary boxes
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use precise consistent lines
|
||||
- Label all components clearly
|
||||
- Show directional flow
|
||||
- Include technical notation
|
||||
- Create clear numbered sequences
|
||||
|
||||
### Don't
|
||||
|
||||
- Use decorative elements
|
||||
- Create imprecise diagrams
|
||||
- Omit important labels
|
||||
- Use inconsistent styling
|
||||
- Add artistic flourishes
|
||||
|
||||
## Best For
|
||||
|
||||
Biology articles, chemistry explanations, medical content, research summaries, academic writing, technical documentation, process explanations
|
||||
@@ -0,0 +1,70 @@
|
||||
# screen-print
|
||||
|
||||
Bold poster art with limited colors, halftone textures, and symbolic storytelling
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Screen print / silkscreen aesthetic inspired by Mondo limited-edition posters and vintage concert prints. Flat color blocks, halftone dot patterns, bold silhouettes, and deliberate print imperfections. Conceptual and symbolic rather than literal — one iconic image tells the whole story. Perfect for opinion pieces, cultural commentary, and editorial content.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Off-Black (#121212) or Warm Cream (#F5E6D0)
|
||||
- Texture: Paper grain with subtle halftone dot overlay
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Off-Black | #121212 | Dark compositions |
|
||||
| Background Alt | Warm Cream | #F5E6D0 | Light compositions |
|
||||
| Primary | Burnt Orange | #E8751A | Main accent |
|
||||
| Secondary | Deep Teal | #0A6E6E | Contrast accent |
|
||||
| Tertiary | Crimson | #C0392B | Bold emphasis |
|
||||
| Highlight | Amber | #F4A623 | Small accents |
|
||||
| Text | Cream White | #FAF3E0 | On dark backgrounds |
|
||||
|
||||
**Duotone Pairs** (choose ONE pair for high-impact compositions):
|
||||
|
||||
| Pair | Color A | Color B | Feel |
|
||||
|------|---------|---------|------|
|
||||
| Orange + Teal | #E8751A | #0A6E6E | Cinematic, action |
|
||||
| Red + Cream | #C0392B | #F5E6D0 | Bold, classic |
|
||||
| Blue + Gold | #1A3A5C | #D4A843 | Prestigious, premium |
|
||||
| Crimson + Navy | #DC143C | #0D1B2A | Dramatic, noir |
|
||||
|
||||
**Rule**: Use 2-5 colors maximum. Fewer colors = stronger impact.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold silhouettes and symbolic shapes
|
||||
- Halftone dot patterns within color fills
|
||||
- Slight color layer misregistration (print offset effect)
|
||||
- Geometric framing (circles, arches, triangles)
|
||||
- Figure-ground inversion (negative space forms secondary image)
|
||||
- Stencil-cut edges, no outlines — shapes defined by color boundaries
|
||||
- Typography integrated as design element, not overlay
|
||||
- Vintage poster border treatments
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Limit to 2-5 flat colors
|
||||
- Use bold silhouettes over detailed rendering
|
||||
- Let negative space tell part of the story
|
||||
- Add halftone texture for authenticity
|
||||
- Use geometric composition (centered, symmetrical)
|
||||
- Reference vintage decades (60s/70s/80s) for era feel
|
||||
|
||||
### Don't
|
||||
|
||||
- Use photorealistic rendering or gradients
|
||||
- Add complex facial details (silhouettes preferred)
|
||||
- Mix too many visual elements (one focal point)
|
||||
- Use modern digital aesthetic
|
||||
- Create busy or cluttered compositions
|
||||
- Use more than 5 colors
|
||||
|
||||
## Best For
|
||||
|
||||
Opinion/editorial articles, cultural commentary, philosophy and strategy, dramatic narratives, cinematic storytelling, music and entertainment, event announcements, bold branding content
|
||||
@@ -0,0 +1,56 @@
|
||||
# sketch-notes
|
||||
|
||||
Soft hand-drawn illustration style with warm, educational feel
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Hand-drawn feel with soft, relaxed brush strokes. Fresh, refined style with minimalist editorial approach. Emphasis on precision, clarity and intelligent elegance while prioritizing warmth, approachability and friendliness.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Off-White (#FAF8F0)
|
||||
- Texture: Subtle paper grain, warm tone
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Off-White | #FAF8F0 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2C3E50 | Main elements |
|
||||
| Alt Text | Deep Brown | #4A4A4A | Secondary elements |
|
||||
| Accent 1 | Soft Orange | #F4A261 | Highlights, emphasis |
|
||||
| Accent 2 | Mustard Yellow | #E9C46A | Secondary highlights |
|
||||
| Accent 3 | Sage Green | #87A96B | Nature, growth concepts |
|
||||
| Accent 4 | Light Blue | #7EC8E3 | Tech, digital elements |
|
||||
| Accent 5 | Red Brown | #A0522D | Earthy elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Connection lines with hand-drawn wavy feel
|
||||
- Conceptual abstract icons illustrating ideas
|
||||
- Color fills don't completely fill outlines (hand-painted feel)
|
||||
- Simple geometric shapes with rounded corners
|
||||
- Arrows and pointers with sketchy style
|
||||
- Doodle decorations: stars, spirals, underlines
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Keep layouts open and well-structured
|
||||
- Emphasize information hierarchy
|
||||
- Use hand-drawn quality for all elements
|
||||
- Allow imperfection (slight wobbles add character)
|
||||
- Layer elements with subtle overlaps
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes
|
||||
- Create photorealistic elements
|
||||
- Overcrowd with too many elements
|
||||
- Use pure white backgrounds
|
||||
- Make it look computer-generated
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, technical explanations, tutorials, onboarding materials, friendly articles
|
||||
@@ -0,0 +1,57 @@
|
||||
# sketch
|
||||
|
||||
Raw, authentic notebook-style illustration for ideas and processes
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Hand-drawn sketch aesthetic that feels authentic and in-progress. Pencil-on-paper quality with intentional imperfection. Suggests thinking, brainstorming, and creative exploration. Raw and honest visual approach that invites collaboration.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Off-White Paper (#F7FAFC) or Cream (#FAFAFA)
|
||||
- Texture: Paper texture with visible grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Paper White | #F7FAFC | Primary background |
|
||||
| Primary | Pencil Gray | #4A5568 | Main sketch lines |
|
||||
| Secondary | Light Gray | #A0AEC0 | Shading, soft marks |
|
||||
| Highlight Blue | Note Blue | #3182CE | Highlight color |
|
||||
| Highlight Red | Mark Red | #E53E3E | Emphasis color |
|
||||
| Highlight Yellow | Marker Yellow | #F6E05E | Highlighter effect |
|
||||
| Text | Charcoal | #2D3748 | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Rough sketch lines with natural variation
|
||||
- Arrows and directional pointers
|
||||
- Handwritten labels and notes
|
||||
- Crossed-out marks and corrections
|
||||
- Underlines and emphasis marks
|
||||
- Simple diagram shapes
|
||||
- Margin notes style
|
||||
- Quick icon sketches
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use pencil-like line quality
|
||||
- Include natural imperfections
|
||||
- Add handwritten annotations
|
||||
- Create diagram-style layouts
|
||||
- Show thinking process
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes
|
||||
- Add polished or refined elements
|
||||
- Create colorful compositions
|
||||
- Use digital effects
|
||||
- Make it look finished
|
||||
|
||||
## Best For
|
||||
|
||||
Ideas in progress, brainstorming articles, thought processes, concept exploration, draft-stage thinking, planning content, problem-solving pieces
|
||||
@@ -0,0 +1,57 @@
|
||||
# vector-illustration
|
||||
|
||||
Flat vector illustration style with clear black outlines and retro soft colors
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Flat vector illustration with no gradients or 3D effects. Clear, uniform-thickness black outlines on all elements. Geometric simplification reducing complex objects to basic shapes. Toy model aesthetic that's cute, playful, and approachable. Coloring book style with closed outlines.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Cream Off-White (#F5F0E6)
|
||||
- Texture: Subtle paper texture, warm nostalgic feel
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Cream Off-White | #F5F0E6 | Primary background |
|
||||
| Outlines | Deep Charcoal | #2D2D2D | All element outlines |
|
||||
| Primary | Coral Red | #E07A5F | Primary accent, warmth |
|
||||
| Secondary | Mint Green | #81B29A | Nature, growth |
|
||||
| Tertiary | Mustard Yellow | #F2CC8F | Highlights, energy |
|
||||
| Accent 1 | Burnt Orange | #D4764A | Warm accents |
|
||||
| Accent 2 | Rock Blue | #577590 | Cool balance |
|
||||
| Text | Black | #1A1A1A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- All objects have closed black outlines (coloring book style)
|
||||
- Rounded line endings, avoid sharp corners
|
||||
- Trees simplified to lollipop or triangle shapes
|
||||
- Buildings as rectangular blocks with grid windows
|
||||
- Depth through layering and overlap
|
||||
- Decorative elements: sunbursts, pill-shaped clouds, dots, stars
|
||||
- People as simple geometric figures
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain consistent outline thickness
|
||||
- Use soft, vintage color palette
|
||||
- Simplify objects to basic geometric shapes
|
||||
- Create depth through layering
|
||||
- Add playful decorative elements
|
||||
|
||||
### Don't
|
||||
|
||||
- Use gradients or realistic shading
|
||||
- Create photorealistic elements
|
||||
- Use thin or varying line weights
|
||||
- Include complex detailed illustrations
|
||||
- Add textures inside shapes
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, creative articles, children's content, brand showcases, explainer pieces, warm approachable topics
|
||||
@@ -0,0 +1,59 @@
|
||||
# vintage
|
||||
|
||||
Nostalgic aged-paper aesthetic for historical and heritage content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Nostalgic vintage aesthetic with aged paper textures and historical document styling. Explorer's journal and antique map quality. Rich warm tones with weathered textures. Evokes discovery, heritage, and timeless knowledge.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Aged Parchment (#F5E6D3) or Sepia Cream (#FFF8DC)
|
||||
- Texture: Heavy aged paper texture with subtle stains and worn edges
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Aged Parchment | #F5E6D3 | Primary background |
|
||||
| Alt Background | Sepia Cream | #FFF8DC | Secondary areas |
|
||||
| Primary Text | Dark Brown | #3D2914 | Main elements |
|
||||
| Secondary | Medium Brown | #6B4423 | Supporting details |
|
||||
| Accent 1 | Forest Green | #2D5A3D | Nature, maps |
|
||||
| Accent 2 | Navy Blue | #1E3A5F | Ocean, lines |
|
||||
| Accent 3 | Burgundy | #722F37 | Emphasis |
|
||||
| Accent 4 | Gold | #C9A227 | Highlights |
|
||||
| Ink | Sepia Black | #3D3D3D | Fine details |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Antique map styling with route lines
|
||||
- Compass roses and navigation elements
|
||||
- Specimen-style drawings
|
||||
- Handwritten annotations
|
||||
- Rope, leather, brass decorative motifs
|
||||
- Vintage photograph frames
|
||||
- Aged paper edge effects
|
||||
- Historical document styling
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Apply consistent aged texture
|
||||
- Use period-appropriate styling
|
||||
- Include map and journey elements
|
||||
- Create layered compositions
|
||||
- Maintain warm sepia tones
|
||||
|
||||
### Don't
|
||||
|
||||
- Use modern digital styling
|
||||
- Create crisp clean edges
|
||||
- Use cold or bright colors
|
||||
- Add contemporary elements
|
||||
- Make it look new or fresh
|
||||
|
||||
## Best For
|
||||
|
||||
Historical articles, travel and exploration, biography pieces, heritage stories, scientific discovery narratives, museum-style content, classic literature references
|
||||
@@ -0,0 +1,58 @@
|
||||
# warm
|
||||
|
||||
Friendly, approachable illustration style for human-centered content
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Warm and inviting visual approach that feels personal and approachable. Soft, friendly colors that evoke comfort and connection. Emphasizes human elements and emotional resonance. Creates an atmosphere of trust and openness.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Cream (#FFFAF0) or Soft Peach (#FED7AA)
|
||||
- Texture: Soft paper texture with warm undertones
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Cream | #FFFAF0 | Primary background |
|
||||
| Alt Background | Soft Peach | #FED7AA | Accent sections |
|
||||
| Primary | Warm Orange | #ED8936 | Main accent color |
|
||||
| Secondary | Golden Yellow | #F6AD55 | Supporting warmth |
|
||||
| Tertiary | Terracotta | #C05621 | Earthy depth |
|
||||
| Accent | Deep Brown | #744210 | Grounding elements |
|
||||
| Alt Accent | Soft Red | #E53E3E | Emotional touches |
|
||||
| Text | Warm Charcoal | #4A4A4A | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Rounded shapes and soft corners
|
||||
- Friendly character illustrations
|
||||
- Sun rays and warm light motifs
|
||||
- Heart symbols and care icons
|
||||
- Cozy lighting effects
|
||||
- Gentle gradients with warmth
|
||||
- Soft shadows without harsh edges
|
||||
- Hand-drawn quality touches
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use warm, inviting colors
|
||||
- Create rounded, friendly shapes
|
||||
- Include human-centered elements
|
||||
- Evoke feelings of comfort
|
||||
- Maintain soft, gentle contrasts
|
||||
|
||||
### Don't
|
||||
|
||||
- Use cold or stark colors
|
||||
- Create sharp, aggressive shapes
|
||||
- Add technical or clinical elements
|
||||
- Use dark, moody backgrounds
|
||||
- Create sterile compositions
|
||||
|
||||
## Best For
|
||||
|
||||
Personal growth articles, lifestyle content, education, human interest stories, wellness topics, relationship advice, self-help content, community building
|
||||
@@ -0,0 +1,58 @@
|
||||
# watercolor
|
||||
|
||||
Soft, artistic watercolor illustration style with natural warmth
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Gentle watercolor aesthetic with visible brush strokes and natural color bleeding. Hand-painted feel with soft edges and organic shapes. Warm, approachable, and artistically refined. Combines artistic expression with clear visual communication.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Off-White (#FAF8F0) or Soft Cream (#FFF9E6)
|
||||
- Texture: Subtle watercolor paper texture with visible grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Off-White | #FAF8F0 | Primary background |
|
||||
| Primary | Soft Coral | #F4A261 | Primary warmth |
|
||||
| Secondary | Dusty Rose | #E8A0A0 | Secondary warmth |
|
||||
| Tertiary | Sage Green | #87A96B | Nature, growth |
|
||||
| Accent 1 | Sky Blue | #7EC8E3 | Water, calm |
|
||||
| Accent 2 | Soft Lavender | #C5B4E3 | Accent, creativity |
|
||||
| Wash | Pale Yellow | #FFF3C4 | Background washes |
|
||||
| Text | Warm Charcoal | #3D3D3D | Text elements |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Watercolor washes as backgrounds
|
||||
- Illustrated elements with visible brush strokes
|
||||
- Natural elements: leaves, flowers, bubbles
|
||||
- Color bleeds and soft edges
|
||||
- Hand-drawn arrows and lines
|
||||
- Layered wash effects
|
||||
- Soft gradients through water
|
||||
- Expressive character illustrations
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Allow color to bleed beyond edges
|
||||
- Use visible brush stroke textures
|
||||
- Create soft, organic shapes
|
||||
- Include hand-drawn quality
|
||||
- Maintain warm color palette
|
||||
|
||||
### Don't
|
||||
|
||||
- Use sharp geometric shapes
|
||||
- Create hard digital edges
|
||||
- Use cold or stark colors
|
||||
- Add photographic elements
|
||||
- Create overly precise illustrations
|
||||
|
||||
## Best For
|
||||
|
||||
Lifestyle articles, wellness content, travel pieces, food and cooking, personal stories, creative topics, artistic portfolios, warm educational content
|
||||
@@ -0,0 +1,50 @@
|
||||
# Usage
|
||||
|
||||
This skill is triggered by natural language in Hermes — no slash command or CLI flags.
|
||||
|
||||
## Trigger Phrases
|
||||
|
||||
- "Illustrate this article" / "为文章配图"
|
||||
- "Add images to this post"
|
||||
- "Generate illustrations for [path/to/article.md]"
|
||||
|
||||
## Input Modes
|
||||
|
||||
| Mode | How to trigger | Output Directory |
|
||||
|------|----------------|------------------|
|
||||
| File path | Mention an article path (`path/to/article.md`) | `{article-dir}/imgs/` (default) |
|
||||
| Pasted content | Paste the article text in the conversation | `illustrations/{topic-slug}/` (cwd) |
|
||||
|
||||
## Specifying Options in Natural Language
|
||||
|
||||
The user can specify any of the following directly in their request. If not specified, the skill asks via the `clarify` tool.
|
||||
|
||||
| Option | Example phrasing |
|
||||
|--------|------------------|
|
||||
| Type | "as an infographic", "as a flowchart", "as scenes" |
|
||||
| Style | "in blueprint style", "use notion style", "用 watercolor 风格" |
|
||||
| Preset | "use the tech-explainer preset", "storytelling preset" |
|
||||
| Palette | "with macaron palette", "warm colors only" |
|
||||
| Density | "minimal images", "one per section", "rich illustrations" |
|
||||
| Language | "images in English" / "图片文字用中文" |
|
||||
| Output | "save images alongside the article" / "put them in `illustrations/`" |
|
||||
|
||||
## Examples
|
||||
|
||||
**Technical article with data**:
|
||||
> 帮我为 api-design.md 配图，用 infographic + blueprint 风格
|
||||
|
||||
**Preset shortcut**:
|
||||
> Illustrate api-design.md with the tech-explainer preset
|
||||
|
||||
**Personal story**:
|
||||
> Illustrate journey.md using the storytelling preset
|
||||
|
||||
**Tutorial with rich images**:
|
||||
> Generate illustrations for how-to-deploy.md — tutorial preset, rich density
|
||||
|
||||
**Opinion article**:
|
||||
> Illustrate opinion.md with the opinion-piece preset
|
||||
|
||||
**Preset with style override**:
|
||||
> Use the tech-explainer preset for article.md but swap the style for notion
|
||||
@@ -0,0 +1,332 @@
|
||||
# Detailed Workflow Procedures
|
||||
|
||||
## Step 1: Detect Reference Images
|
||||
|
||||
If the user provides reference images (local path or URL), the goal is to produce **textual descriptions** that can be embedded in prompts — `image_generate` doesn't accept reference-image inputs, and Hermes' text file tools can't read or write binaries.
|
||||
|
||||
**Tool rules**:
|
||||
|
||||
| Task | Tool | Notes |
|
||||
|------|------|-------|
|
||||
| Analyze a reference image | `vision_analyze` | Accepts URL or local path. Ask for style, palette, composition, subject. |
|
||||
| Write the text description | `write_file` | Sidecar `.md` files only — never try to `write_file` a PNG/JPG. |
|
||||
| (Optional) Keep a local copy of the binary | `terminal` | `cp "$src" "{output-dir}/references/NN-ref-{slug}.{ext}"` — purely for the record; the skill itself doesn't read the binary. |
|
||||
|
||||
| Input Type | Action |
|
||||
|------------|--------|
|
||||
| Image file path provided | `vision_analyze` → write sidecar `.md`. Optional `terminal cp` for a local record. |
|
||||
| Image URL provided | `vision_analyze` with the URL → write sidecar `.md`. |
|
||||
| Image in conversation (no path, no URL) | Ask via `clarify` for a path or URL, or for a verbal description. |
|
||||
| User can't provide either | Extract style/palette verbally from the user → write `references/extracted-style.md`. Do NOT add `references:` to prompt frontmatter. |
|
||||
|
||||
**Procedure** (when a path/URL is available):
|
||||
|
||||
1. Call `vision_analyze(image_url=..., question="Describe the style, color palette (with hex approximations), composition, and subject so this can be used as a style/palette reference for another illustration.")`.
|
||||
2. Write `{output-dir}/references/NN-ref-{slug}.md` via `write_file` with the description.
|
||||
3. (Optional) Run `terminal` with `cp` (or `curl -sSL -o ...` for URLs) to keep a local binary copy. Not required by the skill.
|
||||
4. Mark the reference in the outline with usage `direct` / `style` / `palette`. In Step 5.1 the description gets appended to the prompt body.
|
||||
|
||||
**Sidecar File Format**:
|
||||
```yaml
|
||||
---
|
||||
ref_id: NN
|
||||
source: "<original path or URL>"
|
||||
local_copy: "NN-ref-{slug}.png" # omit if no copy made
|
||||
usage_hint: style # direct | style | palette
|
||||
---
|
||||
[vision_analyze description — colors, style, composition, subject]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Analyze
|
||||
|
||||
### 2.1 Determine Output Directory
|
||||
|
||||
| Input | Output Directory | Source-save path |
|
||||
|-------|------------------|------------------|
|
||||
| Article file path | `{article-dir}/imgs/` (default) | — (read article via `read_file`) |
|
||||
| Pasted content | `illustrations/{topic-slug}/` (cwd) | `source-{slug}.{ext}` (save via `write_file`) |
|
||||
|
||||
If the user explicitly asked for a different layout (e.g., images in the article's folder, or an `illustrations/` subdirectory), honor that.
|
||||
|
||||
### 2.2 Analyze Content
|
||||
|
||||
| Analysis | Description |
|
||||
|----------|-------------|
|
||||
| Content type | Technical / Tutorial / Methodology / Narrative |
|
||||
| Illustration purpose | information / visualization / imagination |
|
||||
| Core arguments | 2-5 main points to visualize |
|
||||
| Visual opportunities | Positions where illustrations add value |
|
||||
| Recommended type | Based on content signals and purpose |
|
||||
| Recommended density | Based on length and complexity |
|
||||
|
||||
Save analysis to `{output-dir}/analysis.md` using `write_file`.
|
||||
|
||||
### 2.3 Extract Core Arguments
|
||||
|
||||
- Main thesis
|
||||
- Key concepts reader needs
|
||||
- Comparisons/contrasts
|
||||
- Framework/model proposed
|
||||
|
||||
**CRITICAL**: If the article uses metaphors (e.g., "电锯切西瓜"), do NOT illustrate literally. Visualize the **underlying concept**.
|
||||
|
||||
### 2.4 Identify Positions
|
||||
|
||||
**Illustrate**:
|
||||
- Core arguments (REQUIRED)
|
||||
- Abstract concepts
|
||||
- Data comparisons
|
||||
- Processes, workflows
|
||||
|
||||
**Do NOT Illustrate**:
|
||||
- Metaphors literally
|
||||
- Decorative scenes
|
||||
- Generic illustrations
|
||||
|
||||
### 2.5 Plan Reference Image Usage (if analyzed in Step 1)
|
||||
|
||||
For each reference image (use the `vision_analyze` description from Step 1):
|
||||
|
||||
| Analysis | Description |
|
||||
|----------|-------------|
|
||||
| Visual characteristics | Style, colors, composition |
|
||||
| Content/subject | What the reference depicts |
|
||||
| Suitable positions | Which sections match this reference |
|
||||
| Style match | Which illustration types/styles align |
|
||||
| Usage recommendation | `direct` / `style` / `palette` |
|
||||
|
||||
| Usage | When to Use | How it's applied in Step 5.1 |
|
||||
|-------|-------------|------------------------------|
|
||||
| `direct` | Reference matches desired output closely | Paste the description (composition + subject + style + palette) into the prompt body |
|
||||
| `style` | Extract visual style characteristics only | Append style traits to prompt body |
|
||||
| `palette` | Extract color scheme only | Append extracted hex colors to prompt body |
|
||||
|
||||
Note: `image_generate` does not accept reference-image inputs under any usage type. Everything is mediated through the `vision_analyze` description.
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Confirm Settings
|
||||
|
||||
Use the `clarify` tool. Since `clarify` handles one question at a time, ask the most important question first. Skip any question the user already answered in their request.
|
||||
|
||||
### Q1: Preset or Type (highest priority)
|
||||
|
||||
Based on Step 2 content analysis, recommend a preset first (sets both type & style). Look up [style-presets.md](style-presets.md) "Content Type → Preset Recommendations" table.
|
||||
|
||||
- [Recommended preset] — [brief: type + style + why]
|
||||
- [Alternative preset] — [brief]
|
||||
- Or choose type manually: infographic / scene / flowchart / comparison / framework / timeline / mixed
|
||||
|
||||
**If user picks a preset → skip Q3** (type & style both resolved).
|
||||
**If user picks a type → Q3 is required.**
|
||||
|
||||
### Q2: Density
|
||||
|
||||
- minimal (1-2) — Core concepts only
|
||||
- balanced (3-5) — Major sections
|
||||
- per-section — At least 1 per section/chapter (Recommended)
|
||||
- rich (6+) — Comprehensive coverage
|
||||
|
||||
### Q3: Style (skip if preset chosen in Q1)
|
||||
|
||||
Present Core Styles first:
|
||||
|
||||
- [Best compatible core style] (Recommended)
|
||||
- [Other compatible core style 1]
|
||||
- [Other compatible core style 2]
|
||||
- Other (see full Style Gallery)
|
||||
|
||||
**Core Styles** (simplified selection):
|
||||
|
||||
| Core Style | Maps To | Best For |
|
||||
|------------|---------|----------|
|
||||
| `minimal-flat` | notion | General, knowledge sharing, SaaS |
|
||||
| `sci-fi` | blueprint | AI, frontier tech, system design |
|
||||
| `hand-drawn` | sketch/warm | Relaxed, reflective, casual |
|
||||
| `editorial` | editorial | Processes, data, journalism |
|
||||
| `scene` | warm/watercolor | Narratives, emotional, lifestyle |
|
||||
| `poster` | screen-print | Opinion, editorial, cultural, cinematic |
|
||||
|
||||
Style selection based on Type × Style compatibility matrix ([styles.md](styles.md)).
|
||||
**In Step 5**, read `styles/<style>.md` for visual elements and rendering rules.
|
||||
|
||||
### Q4: Palette (optional)
|
||||
|
||||
If the preset did not specify a palette, offer:
|
||||
|
||||
- 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 user specified a palette in the request.
|
||||
|
||||
See Palette Gallery in [styles.md](styles.md#palette-gallery) and full specs in `palettes/<palette>.md`.
|
||||
|
||||
### Q5: Image Text Language (only when ambiguous)
|
||||
|
||||
If the article language is different from the user's conversational language, ask which to use:
|
||||
- Article language (match article content) (Recommended)
|
||||
- User's conversational language
|
||||
|
||||
**Skip if**: languages match, or the user already specified in the request.
|
||||
|
||||
### Display Reference Usage (if references saved in Step 1)
|
||||
|
||||
When presenting the outline preview to the user, show reference assignments:
|
||||
|
||||
```
|
||||
Reference Images:
|
||||
| Ref | Filename | Recommended Usage |
|
||||
|-----|----------|-------------------|
|
||||
| 01 | 01-ref-diagram.png | direct → Illustration 1, 3 |
|
||||
| 02 | 02-ref-chart.png | palette → Illustration 2 |
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Generate Outline
|
||||
|
||||
Save as `{output-dir}/outline.md` using `write_file`:
|
||||
|
||||
```yaml
|
||||
---
|
||||
type: infographic
|
||||
density: balanced
|
||||
style: blueprint
|
||||
image_count: 4
|
||||
references: # Only if references provided
|
||||
- ref_id: 01
|
||||
filename: 01-ref-diagram.png
|
||||
description: "Technical diagram showing system architecture"
|
||||
- ref_id: 02
|
||||
filename: 02-ref-chart.png
|
||||
description: "Color chart with brand palette"
|
||||
---
|
||||
|
||||
## Illustration 1
|
||||
|
||||
**Position**: [section] / [paragraph]
|
||||
**Purpose**: [why this helps]
|
||||
**Visual Content**: [what to show]
|
||||
**Type Application**: [how type applies]
|
||||
**References**: [01] # Optional: list ref_ids used
|
||||
**Reference Usage**: direct # direct | style | palette
|
||||
**Filename**: 01-infographic-concept-name.png
|
||||
|
||||
## Illustration 2
|
||||
...
|
||||
```
|
||||
|
||||
**Backup rule**: If `outline.md` exists, rename to `outline-backup-YYYYMMDD-HHMMSS.md` before writing.
|
||||
|
||||
**Requirements**:
|
||||
- Each position justified by content needs
|
||||
- Type applied consistently
|
||||
- Style reflected in descriptions
|
||||
- Count matches density
|
||||
- References assigned based on Step 2.5 analysis
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Generate Prompts
|
||||
|
||||
**BLOCKING**: Every illustration must have a saved prompt file before any image is generated.
|
||||
|
||||
For each illustration in the outline:
|
||||
|
||||
1. **Create prompt file**: `{output-dir}/prompts/NN-{type}-{slug}.md` via `write_file`
|
||||
2. **Include YAML frontmatter**:
|
||||
```yaml
|
||||
---
|
||||
illustration_id: 01
|
||||
type: infographic
|
||||
style: custom-flat-vector
|
||||
---
|
||||
```
|
||||
3. **Load style specs**: Read `styles/<style>.md` (via `read_file`) 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 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`)
|
||||
7. **Apply defaults**: composition requirements, character rendering, text guidelines
|
||||
8. **Backup rule**: If a prompt file exists, rename to `prompts/NN-{type}-{slug}-backup-YYYYMMDD-HHMMSS.md`
|
||||
|
||||
**CRITICAL - References in Frontmatter**:
|
||||
- Only add `references` field if a sidecar `.md` description exists in `{output-dir}/references/`
|
||||
- If style/palette was extracted verbally (no description file), append info to prompt BODY only
|
||||
- Before writing frontmatter, confirm the sidecar exists (try `read_file` on the `.md`)
|
||||
|
||||
### 5.1 Process References (if analyzed in Step 1)
|
||||
|
||||
Read the `vision_analyze` description from the sidecar `references/NN-ref-{slug}.md` (via `read_file`) and embed it in the prompt body. `image_generate` never receives the binary.
|
||||
|
||||
| Usage | Action |
|
||||
|-------|--------|
|
||||
| `direct` | Paste the full reference description (composition, subject, style, palette) into the prompt body |
|
||||
| `style` | Append only the style traits: "Style: clean lines, gradient backgrounds..." |
|
||||
| `palette` | Append only the hex colors: "Colors: #E8756D coral, #7ECFC0 mint..." |
|
||||
|
||||
---
|
||||
|
||||
## Step 6: Generate Images
|
||||
|
||||
`image_generate` returns a JSON blob with a URL (`{"success": true, "image": "<url>"}`). It does NOT save a local file, does NOT accept an output path, and does NOT let the agent pick a backend/model. Treat the URL as a temporary artifact and download it explicitly.
|
||||
|
||||
For each prompt file:
|
||||
|
||||
1. Read the prompt file (via `read_file`) and extract the assembled prompt
|
||||
2. Map the prompt's `ASPECT` to `image_generate`'s enum: `16:9` → `landscape`, `9:16` → `portrait`, `1:1` → `square`. Custom ratios → nearest named aspect.
|
||||
3. Call `image_generate(prompt=<assembled>, aspect_ratio=<enum>)` and extract the `image` URL from the returned JSON.
|
||||
4. **Backup rule**: If `{output-dir}/NN-{type}-{slug}.png` already exists, rename it via `terminal` (`mv "{output-dir}/NN-{type}-{slug}.png" "{output-dir}/NN-{type}-{slug}-backup-YYYYMMDD-HHMMSS.png"`) before writing.
|
||||
5. Download the URL via `terminal`:
|
||||
```bash
|
||||
curl -sSL -o "{output-dir}/NN-{type}-{slug}.png" "{image_url}"
|
||||
```
|
||||
If `curl` is unavailable, fall back to `wget -qO "{output-dir}/NN-{type}-{slug}.png" "{image_url}"`.
|
||||
6. Verify the file exists and has non-zero size (`terminal`: `test -s "{path}" && echo ok`).
|
||||
7. On generation failure, retry `image_generate` once. On download failure, retry `curl` once with a longer timeout. Then log and continue.
|
||||
8. After each generation, report "Generated X/N".
|
||||
|
||||
---
|
||||
|
||||
## Step 7: Finalize
|
||||
|
||||
### 7.1 Update Article
|
||||
|
||||
Insert after the corresponding paragraph, using the path relative to the article file:
|
||||
|
||||
| Input | Insert Path |
|
||||
|-------|-------------|
|
||||
| Article file path (default `imgs-subdir`) | `` |
|
||||
| Article file path (images alongside) | `` |
|
||||
| Article file path (`illustrations/` subdirectory) | `` |
|
||||
| Pasted content | `` (relative to cwd) |
|
||||
|
||||
Alt text: concise description in the article's language.
|
||||
|
||||
### 7.2 Output Summary
|
||||
|
||||
```
|
||||
Article Illustration Complete!
|
||||
|
||||
Article: [path]
|
||||
Type: [type] | Density: [level] | Style: [style]
|
||||
Location: [directory]
|
||||
Images: X/N generated
|
||||
|
||||
Positions:
|
||||
- 01-xxx.png → After "[Section]"
|
||||
- 02-yyy.png → After "[Section]"
|
||||
|
||||
[If failures]
|
||||
Failed:
|
||||
- NN-zzz.png: [reason]
|
||||
```
|
||||
Reference in New Issue
Block a user