Baoyu Article Illustrator
Generate hand-drawn 16:9 infographic illustrations for blog posts and articles without leaving your agent workflow.
Overview
baoyu-article-illustrator is an agent skill most often used in Grow (also Build docs, Launch distribution) that generates hand-drawn 16:9 infographic illustrations from article content.
Install
npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-article-illustratorWhat is this skill?
- 16:9 landscape hand-drawn infographic spec—no photographic or realistic elements
- Mono-ink palette: pure white canvas, near-black primary lines, coral accent for risk/emphasis
- Concise keyword-focused layout with whitespace and clear visual hierarchy
- Text must match source language and hand-drawn lettering style only
- Sensitive or copyrighted figures handled via stylistic alternatives rather than refusing generation
- 16:9 landscape aspect ratio
- 3-role mono-ink color table (background, primary, accent)
Adoption & trust: 23.8k installs on skills.sh; 20.9k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have solid article copy but no fast, on-style infographic that summarizes key ideas for readers and social previews.
Who is it for?
Indie bloggers, newsletter writers, and doc authors who want repeatable infographic art direction from markdown or draft text.
Skip if: Teams needing photoreal product shots, interactive charts, or brand systems that require licensed celebrity likenesses without stylistic substitution.
When should I use this skill?
You need a cartoon-style infographic for article or doc content with hand-drawn text and layout rules.
What do I get? / Deliverables
You get a spec-compliant hand-drawn landscape infographic aligned to your content language and accent rules, ready to embed in posts or hand to an image generator step.
- Infographic generation brief aligned to mono-ink and hand-drawn rules
- Rendered or prompt-ready 16:9 illustration asset
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Article visuals are most often produced while scaling content and lifecycle marketing in Grow. Content subphase covers long-form posts, newsletters, and docs that need scannable infographic assets.
Where it fits
Turn a shipped feature announcement into a scannable infographic for the company blog.
Add a conceptual diagram to README or docs explaining architecture at a glance.
Produce a shareable visual for Product Hunt or social threads summarizing the offer.
Illustrate value props on a waitlist landing narrative before full design assets exist.
How it compares
Use for illustrated article heroes instead of dumping raw prompts into a generic image tab without layout or typography rules.
Common Questions / FAQ
Who is baoyu-article-illustrator for?
Solo and indie builders who publish articles or docs and want agent-guided infographic specs and generation prompts without a separate design tool workflow.
When should I use baoyu-article-illustrator?
During Grow content pushes, Build documentation polish, or Launch distribution when you need a 16:9 hand-drawn summary visual; also when refreshing evergreen posts with new diagrams.
Is baoyu-article-illustrator safe to install?
Review the Security Audits panel on this skill’s Prism page before enabling network or shell permissions in your agent; image skills may call external generators you configure.
SKILL.md
READMESKILL.md - Baoyu Article Illustrator
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 --- Please use nano banana pro to generate the illustration based on the content provided below: # 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 # 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 rende