BeClaude

orange-line-illustration

New
28GitHub TrendingGeneralby orange2ai

Generate New Yorker-style minimalist editorial illustrations — thin black ink lines on white, vast negative space, a single orange accent (#F97316) — for articles, principles, covers, and concept visuals. Use when the user asks for 配图, 插图, 封面图, editorial illustrations, concept/metaphor illustrations, article covers, 公众号配图, principle/maxim illustrations, or mentions "橙线风格" / "orange line style" / "纽约客风格插图". Works with any image generation tool that accepts text prompts.

Community PluginView Source

Overview

Orange Line Illustration · 橙线插画

A complete style system for generating elegant, conceptual editorial illustrations. Born from a real workflow: illustrating "六条与 AI 一起做产品 的原则" (Six Principles for Building Products with AI). The style's soul: one idea, one accent, lots of silence.

The Style (non-negotiable core)

Every image follows these rules. They are what make a set of images feel like one voice — consistency is the whole point.

  • Line: thin black ink lines, hand-drawn editorial feel (think New

Yorker single-panel cartoons). No shading, no gradients, no fills except the accent.

  • Background: pure white. Generous negative space — emptiness is part

of the composition, not wasted space.

  • Accent: exactly ONE color — warm orange #F97316. Use it on the

single most meaningful element (the thing the viewer should understand). If everything is orange, nothing is.

  • Figures: TINY. The human is always small — dwarfed by the object,

the wall, the staircase, the line. Enlarge the thing, shrink the person: this scale contrast is the signature drama of the style (a tiny figure facing an enormous wall of buttons says more than a medium figure beside a medium wall). If a figure fills more than roughly a tenth of the frame, it is too big — say "tiny" explicitly in the prompt, image models love to inflate people.

  • Mood: witty, restrained, intelligent. The image should make the

viewer think for one second, then smile.

Designing the Metaphor (do this before any generation)

The metaphor is the product; the rendering is just execution. Spend the thinking here.

  1. Extract the tension. Good concept illustrations express a pair of

opposites: many vs. one, hollow vs. warm, generated vs. judged. Find the tension in the content first.

  1. Prefer action scenes over abstract symbols. A person handing a cup

of warm tea beats floating speech bubbles. A figure tripping on one inconsistent stair beats a row of doors with one odd handle. Field-tested: abstract juxtapositions confuse readers; small human actions land instantly. If the metaphor needs explaining, it failed.

  1. One idea per image. If the sketch needs two sentences to describe

its point, cut one.

  1. Place the orange deliberately. The orange element answers: "what is

this image about?" — the kept button, the warm steam, the inconsistent step, the refined line.

  1. Exaggerate the scale gap. Make the object monumental and the person

tiny. The disproportion is what makes the viewer feel the idea — a small human against a vast generated world is, after all, the subject of the whole genre.

Prompt Template

Compose prompts from this skeleton (adjust the scene, keep everything else):

code
New Yorker magazine style editorial illustration, single-panel conceptual
metaphor. Minimalist thin black ink line drawing on pure white background,
generous negative space, no shading, no gradients, only one accent color:
warm orange #F97316. Scene: [YOUR SCENE — describe the action, the
characters, what is orange and why]. Witty, restrained, intelligent.
[CAPTION BLOCK — see below]. No other text anywhere.

Scene-writing tips learned the hard way:

  • Always write "a TINY human figure" / "a tiny figure dwarfed by ..." —

and describe the object as large ("an enormous wall", "a vast circle"). State the scale contrast twice (once on the figure, once on the object) or the model will even them out.

  • Describe who does what to whom with spatial directions (left/right/

middle). Vague spatial relations produce split, disconnected scenes.

  • Add explicit negative constraints when geometry matters: "plain side

view, NOT Escher-like, no impossible geometry" — image models love to get creative with stairs and architecture.

  • For continuous lines: "one single CONTINUOUS unbroken smooth line, never

breaking" — otherwise lines fracture.

Caption & Title System

Interior images (3:2 landscape) carry a quiet signature in the bottom-left corner:

code
In the bottom-left corner: a short horizontal orange line, and below it
one small light-gray Chinese caption in a clean sans-serif font:
"[THE PRINCIPLE / KEY SENTENCE]" — small, quiet, unobtrusive, perfectly
legible.

Same corner, same style, every image — the signature position itself demonstrates consistency.

Covers (21:9 ultra-wide) make the title the anchor:

code
The Chinese title "[TITLE]" in clean dark-gray sans-serif typography,
placed in the [upper-left / centered upper] area, medium size, elegant,
perfectly legible.

Keep the illustration in the lower portion, breathing room around the title.

Workflow: 抽卡, not 检查 (gacha, not QA)

Generation is cheap; AI self-inspection is expensive and adds little. The human's taste is the quality gate.

  1. Design metaphor candidates — for covers, prepare ~5 distinct directions

in one batch.

  1. Generate all candidates in parallel. One generation per metaphor.
  2. Present everything to the human. Let them pick. Do not pre-filter with

image analysis unless the human explicitly asks.

  1. When the human says "this metaphor but not quite" — regenerate with a

sharpened prompt (add the missing spatial/negative constraints), don't abandon the metaphor.

  1. Rename outputs descriptively (e.g. 01-放大器.png, 封面E-走过草稿.png)

so the set stays navigable.

Reference: a field-tested set

The style was proven on six principle illustrations + one cover. The chosen cover metaphor ("walking through the draft": a figure walks along a line — ahead of them messy black scribble, behind them the same line refined into clean orange) captures the spirit of the whole style: human judgment walking through AI's rough output, leaving refinement behind.

Metaphors that worked: erasing a wall of buttons down to one; a conveyor of identical bottles with one hand-painted; completing the last arc of a nearly-finished circle; tripping on the one inconsistent stair.

Metaphors that failed (and why): ornate empty speech bubbles (too abstract), a row of doors with one odd handle (no action, no consequence), Escher staircases (model over-creativity — constrain geometry explicitly).

Renderings that failed (and why): figures drawn at half the frame height — metaphor fine, drama gone. The style lives on tiny people in big scenes; oversized figures turn a poster into a comic panel.

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/orange-line-illustration.md https://raw.githubusercontent.com/orange2ai/orange-line-illustration/main/SKILL.md
3
Invoke in Claude Code
/orange-line-illustration
View source on GitHub

Frequently Asked Questions

What is orange-line-illustration?

Generate New Yorker-style minimalist editorial illustrations — thin black ink lines on white, vast negative space, a single orange accent (#F97316) — for articles, principles, covers, and concept visuals. Use when the user asks for 配图, 插图, 封面图, editorial illustrations, concept/metaphor illustrations, article covers, 公众号配图, principle/maxim illustrations, or mentions "橙线风格" / "orange line style" / "纽约客风格插图". Works with any image generation tool that accepts text prompts.

How to install orange-line-illustration?

To install orange-line-illustration, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /orange-line-illustration.

What is orange-line-illustration best for?

orange-line-illustration is a community categorized under General. Created by orange2ai.