
Orange Line Illustration
- 30 installs
- 385 repo stars
- Updated June 15, 2026
- orange2ai/orange-line-illustration
Helps with ai & agent building tasks.
About
orange-line-illustration is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.
- orange-line-illustration
- AI & Agent Building
- AI-coding skill
Orange Line Illustration by the numbers
- 30 all-time installs (skills.sh)
- Ranked #9,316 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/orange2ai/orange-line-illustration --skill orange-line-illustrationAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 30 |
|---|---|
| repo stars | ★ 385 |
| Last updated | June 15, 2026 |
| Repository | orange2ai/orange-line-illustration ↗ |
What it does
Helps with ai & agent building tasks.
Files
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. 2. 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. 3. One idea per image. If the sketch needs two sentences to describe its point, cut one. 4. 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. 5. 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):
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:
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:
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.
小橙 IP (default character)
The default recurring character is 小橙 — a tiny line-drawn figure with a single orange dot on its chest. Read references/xiao-orange-ip.md for the full character definition and references/xiao-orange-prompt-template.md for the generation prompt template.
Key traits (quick reference):
- Circle head (outline only, not filled), two black dot eyes, no mouth.
- Narrow rectangular body (outline only), thin stick arms and legs.
- ONE small solid orange dot (#F97316) on the chest — this IS the accent.
- Tiny relative to scene objects. Geometric, hand-drawn, not cute.
- Must participate in the core action, not decorate.
When using 小橙, the orange accent rule changes slightly: the accent is always the chest dot (the character itself), not a separate scene element. All other objects remain black line art on white.
If the user requests a different figure style for a specific set, fall back to the generic character consistency flow below.
Character Consistency (for multi-image sets)
When producing a set of illustrations that will be viewed together (a PPT deck, an article series, a multi-panel explainer) and the user does NOT want 小橙, establish the human figure style before generating any scene illustrations.
Generate a single image with 4 candidate figures side by side — each with a distinct style (e.g. rounder head, angular torso, different arm/hand treatment, varying expressiveness). Label them A / B / C / D below each. Ask the user to pick one, or describe tweaks.
Once confirmed, write a concise character prompt block (20–40 words) and reuse it verbatim in every subsequent prompt for that set. The block should pin: head shape, eye style, mouth treatment, torso shape, arm/hand style, leg style, fill vs. outline.
For single standalone illustrations with 小橙, use the prompt template directly — no character selection step needed.
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. 2. Generate all candidates in parallel. One generation per metaphor. 3. Present everything to the human. Let them pick. Do not pre-filter with image analysis unless the human explicitly asks. 4. 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. 5. 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.
PPT Workflow (illustrated slide decks)
When the user wants to turn an article or talk into an HTML slide deck with orange-line illustrations, read references/ppt-workflow.md for the complete step-by-step process.
Key differences from standalone illustrations:
- PPT illustrations depict actual story scenes, not abstract metaphors.
- Use 小橙 as the default recurring character across all slides.
- Confirm outline before generating; rename files before building HTML.
- Output is a self-contained HTML file with navigation + progress bar.
References
All reference files live in references/:
xiao-orange-ip.md— 小橙 IP definition (default character)xiao-orange-prompt-template.md— 小橙 generation prompt templatexianren-ip.md— 线人 (abstract human figure)xianmao-ip.md— 线猫 (minimal cat character)ppt-workflow.md— Full PPT slide deck workflow
Orange Line Illustration — License
Copyright (c) 2026 橘子 (Orange)
Dual License
1. Free License (Open-Source & Personal Use)
This skill (including its style specification, prompt templates, and workflow documentation) is free to use, copy, modify, and redistribute for:
- Personal, non-commercial use
- Educational use
- Any project whose source code / content is publicly available under an
OSI-approved open-source license or a Creative Commons license
- Illustrations published in freely accessible articles, blogs, and
open publications
Attribution is appreciated but not required.
2. Commercial License (Closed-Source / Proprietary Use)
If you use this skill (or derivative style systems based on it) to produce assets for closed-source software, proprietary products, or paid commercial deliverables — including but not limited to: commercial app UI assets, paid courseware, client work delivered under NDA, proprietary marketing materials — you must purchase a commercial license.
Contact the author for commercial licensing terms.
Notes
- "Use" covers both the skill text itself and the act of generating
illustrations by following its specification.
- Images you generate for open/free publications remain yours under the
Free License regardless of which AI image service rendered them.
- This license applies to the skill; it does not override the terms of
whatever image-generation service you use.
Orange Line Illustration · 橙线插画
中文 | English
Last week I wrote an article — "Six Principles of Building Products with AI" — and many friends loved the illustrations, asking how I made them. So I packaged it into a skill and open-sourced it.
On Saturday I gave a talk at a community event. The PPT was made with this same illustration style. Again, people loved it.
In a world flooded with AI infographics and HTML text blocks, maybe a drawing with lots of white space is what actually focuses attention. They say the best PPTs have just one sentence per slide.
So I spent the weekend iterating on this, making it more stable, more beautiful, more fun.
What I'm going for: you get it at a glance, and it makes you smile.
Two workflows:
- Single illustrations — conceptual editorial images for articles, principles, covers
- PPT slide decks — turn articles/outlines into illustrated HTML presentations
!Cover example
---
Demo: 20 Slices of "Inside DingTalk"
We used this skill to illustrate 20 key moments from a viral 75,000-word essay about product management at Alibaba's DingTalk. Each image captures one quote from the original text.
👉 **Full article (WeChat, Chinese)**
Selected examples:
| !Swift 300 days | !Greedy scale |
| "300+ days of non-stop flight" | "Want everything, get nothing" |
| !Sender power | !Flag overloaded |
| "Always on the sender's side" | "A flag gathers people — and too many things" |
| !Tech debt | !Kong Yiji |
| "AI must cut through legacy tech debt" | "DingTalk walks in like Kong Yiji" |
| !Constant in storm | !Context inequality |
| "Seek the constants, not the fluctuations" | "Intelligence is equal; context is not" |
| !Balloon tethered | !Empty table |
| "The opportunity is trapped in an old city" | "Only 3 people stayed longer than 3 months" |
---
Style Examples (General)
| !Amplifier | !Subtraction |
Notice the scale: people are always tiny, objects always monumental. This imbalance is the signature drama of the style.
---
Character IP System
Three reusable character IPs, each with a fixed visual form. They are not decoration — they must carry the core action.
小橙 / Xiao Cheng (default character)
A geometric line-drawn figure with an orange dot on its chest. Quiet, focused, does the work.
- Circle head (outline only) + two dot eyes + no mouth
- Narrow rectangular body outline + thin stick limbs
- Single orange dot
#F97316on chest = the entire image's accent color
| !Trophy weight | !Inbox overload |
| "Hardest to escape: not failure, but success" | "Dozens of group chats exploding with unread messages" |
线人 / Xian Ren (line-person)
Minimal abstract human — circle head + single arc body + single-line limbs. The fewest strokes that say "someone is here."
| Old City Wall |
|---|
|  |
"Standing at an attractive frontier — but it's in the middle of an old city."
线猫 / Xian Mao (line-cat)
A kitten drawn in 10–12 strokes — open arcs, two dot eyes, two ear-strokes. The viewer's brain fills in the rest.
| Schrödinger's User |
|---|
|  |
"And so we set off, carrying a box of Schrödinger's users."
---
Style Rules (quick reference)
- Line: thin black ink, hand-drawn wobble, not mechanical
- Background: pure white — no texture, no gradients, no shadows
- Accent: one warm orange
#F97316, placed on the single most meaningful element - Figures: TINY. Objects are monumental, people are small. This imbalance is the signature drama.
- Caption: bottom-right, light gray, quiet and readable
- Mood: witty, restrained, intelligent
See SKILL.md and references/ for the full specification.
---
Two Workflows
Workflow A: Single Concept Illustration
Generate a 16:9 editorial image for a judgment, principle, or metaphor in an article.
Generate three orange-line illustrations for this articleFlow: extract metaphor → design scene → generate candidates → human picks
Workflow B: PPT Slide Deck
Turn an article/outline into an illustrated HTML slide deck, one scene per slide.
Turn this article into an orange-line PPTFlow: read article → write slide outline → confirm → batch-generate illustrations → user picks → output HTML
See references/ppt-workflow.md for details.
---
What's Inside
.
├── SKILL.md # Main spec: style, metaphor method, prompt template
├── references/
│ ├── xiao-orange-ip.md # 小橙 character definition
│ ├── xiao-orange-prompt-template.md # 小橙 prompt template
│ ├── xianren-ip.md # 线人 character definition
│ ├── xianmao-ip.md # 线猫 character definition
│ └── ppt-workflow.md # PPT slide deck workflow
├── examples/ # Example images
├── LICENSE.md
└── README.mdInstallation
Works with any AI agent that supports the SKILL.md convention (Cola, Claude Code, Codex, etc.). Drop the directory into your agent's skills folder:
# Cola
~/.cola/skills/orange-line-illustration/
# Claude Code
~/.claude/skills/orange-line-illustration/Then tell your agent — "generate three orange-line illustrations for this article" or "turn this article into an orange-line PPT" — and it follows the spec.
License
Dual license: free for open-source & personal use; commercial license required for closed-source/proprietary use. See LICENSE.md.
橙线插画 · Orange Line Illustration
中文 | English
上周写了一篇文章,与 AI 一起做产品的六条原则,很多朋友都喜欢这套插图,问我怎么做,就把它做成 skill,开源发布。
周六的时候,去出海去的活动做了一次分享,分享的 PPT 也是这套插图做的,也有很多朋友喜欢。
在 AI 信息图和 HTML 文字块泛滥的今天,也许一张有空白的插画反而能让注意力聚焦在一点。据说 PPT 做到极致,每页就只有一句话。
于是周末这两天在家,都在持续迭代这个插图,目标是让它变得更稳定、更好看、更有趣。
我想要的效果是,让人一眼就懂,会心一笑。
支持两种工作流:
- 单张插图 — 为文章、原则、封面生成概念配图
- PPT 演讲稿 — 将文章/大纲变成带插图的 HTML 幻灯片
!封面示例
---
Demo:《置身钉内》20 个切片
用这套 skill 为 7.5 万字的阿里内网长文《置身钉内》生成了 20 张插图,每张配一句原文金句。完整效果:
以下是其中部分示例:
| !雨燕300天不落地 | !什么都想要什么都得不到 |
| "连续飞行三百多天不落地" | "什么都想要,容易什么都得不到" |
| !发信人立场 | !旗帜挂满 |
| "永远站在发信人立场" | "旗帜能聚拢人,也容易把太多东西挂上去" |
| !技术债 | !孔乙己进咸亨酒店 |
| "AI必须穿过旧系统的技术债" | "钉钉像孔乙己走进咸亨酒店" |
| !常数与变行 | !context不平权 |
| "凡历术在于常数,而不在于变行" | "智能是平权的,但context是不平权的" |
| !热气球被拴住 | !只剩3人 |
| "风口正处在一片旧城中央" | "在ONE超过3个月的产品只有3个人" |
---
风格示例(通用)
| !放大器 | !做减法 |
注意尺度:人永远极小,物永远宏大。这种失衡感正是这个风格的签名式戏剧性。
---
角色 IP 系统
三个可复用角色 IP,每个有固定形态定义。不是装饰,必须承担核心动作。
小橙(默认角色)
纯黑线条勾勒的几何小人,胸口一个橙色圆点。安静做事,不声张。
- 圆形头部(轮廓不填色)+ 两个黑点眼 + 无嘴
- 窄长方形身体轮廓 + 细线四肢
- 胸口唯一的橙色圆点
#F97316= 整张图的点缀色
| !成功压身 | !未读消息山 |
| "产品经理最难摆脱的不是失败,而是成功" | "面对几十个群里炸开的海量未读消息" |
线人
极简抽象人形——圆形头部 + 一根弧线身体 + 单线四肢。最少的笔画构成"有人在这里"。
| 旧城风口 |
|---|
|  |
「站在一个很有吸引力的风口,但风口正处在一片旧城中央」
线猫
10-12 笔画完的幼猫符号——不闭合的弧线、两个黑点眼、两撇耳朵。观者的大脑自动补全。
| 薛定谔的用户 |
|---|
|  |
「我们就这样,带着一盒薛定谔的用户出发了」
---
风格规范(快速一览)
- 线条:细黑墨线,手绘微抖,不机械
- 背景:纯白,不要纸纹、渐变、阴影
- 点缀色:唯一暖橙
#F97316,落在最有意义的那个元素上 - 人物:极小。物永远宏大,人永远渺小
- 金句标注:右下角灰色小字,安静、可读、不喧宾夺主
- 气质:witty, restrained, intelligent
详见 SKILL.md 和 references/ 目录下的完整规范。
---
两种工作流
工作流 A:单张概念插图
为文章中的某个判断、原则、隐喻生成一张 16:9 配图。
给这篇文章配三张橙线风格插图流程:提炼金句 → 设计具体场景 → 生成候选 → 人来挑选
工作流 B:PPT 演讲稿
将文章/大纲变成带插图的 HTML 幻灯片,每页一张场景插画。
把这篇文章做成橙线 PPT流程:读文章 → 写幻灯片大纲 → 确认 → 批量生成插图 → 用户选图 → 输出 HTML
详见 references/ppt-workflow.md。
---
目录结构
.
├── SKILL.md # 主规范:风格、隐喻方法、prompt 模板
├── references/
│ ├── xiao-orange-ip.md # 小橙 IP 定义
│ ├── xiao-orange-prompt-template.md # 小橙生图模板
│ ├── xianren-ip.md # 线人 IP 定义
│ ├── xianmao-ip.md # 线猫 IP 定义
│ └── ppt-workflow.md # PPT 演讲稿工作流
├── examples/ # 示例图片
├── LICENSE.md
└── README.md安装
适用于任何支持 SKILL.md 约定的 AI agent(Cola、Claude Code、Codex 等)。把目录放进你的 agent 的 skill 文件夹即可:
# Cola
~/.cola/skills/orange-line-illustration/
# Claude Code
~/.claude/skills/orange-line-illustration/然后直接对你的 agent 说——"给这篇文章配三张橙线风格插图"或"把这篇文章做成橙线 PPT"——它就会照着规范来。
协议
双许可:开源与个人使用免费;闭源/专有用途需购买商业授权。详见 LICENSE.md。
PPT Workflow · 橙线 PPT
Turn any article or talk outline into a polished HTML slide deck, each slide illustrated with an orange-line story scene.
The key difference from standalone illustrations: PPT illustrations depict the actual scenes described in the source text (a person at a computer, a team around a table, a broken spaceship), not abstract metaphors. The story is the illustration.
Workflow
Step 0 — Define the character style for this deck
Before generating any illustration, establish the human figure style that will be used consistently throughout this deck.
Default: 小橙. Unless the user requests a different style, use 小橙 as the recurring character. 小橙's prompt block:
Character design: 小橙, a tiny minimalist line-drawn figure. Circle head
(outline only, not filled), two small black dot eyes, no mouth. Narrow
rectangular body made of a few straight black lines (outline only, no
fill). Thin wobbly stick arms and stick legs. One small solid orange dot
(#F97316) on the chest like a badge — this is the ONLY color on the
character. Geometric, clean, hand-drawn. Not cute, not cartoon.When using 小橙, skip the candidate generation step and use this block verbatim in every illustration prompt.
Custom character: If the user wants a different figure style, generate a single image with 4 candidate figures side by side — each with a distinct style (e.g. rounder head, angular torso, different arm/hand treatment, varying expressiveness). Label them A / B / C / D with a short descriptor below each.
Present to the user and ask them to pick one — or describe tweaks. Once confirmed, write out a precise character prompt block (20–40 words) that will be copy-pasted verbatim in every subsequent illustration prompt.
Do not skip this step. A deck where figures look different on every slide feels amateurish — one confirmation pass here prevents many regeneration passes later.
Step 1 — Read the source
Read the article or outline carefully. Identify:
- The main narrative arc (what's the talk about, what's the conclusion)
- The individual story moments — specific events, people, conversations,
numbers, comparisons. These become slides.
- The total speaking time (target: 1.5–2 min per slide)
Step 2 — Write the outline, confirm before drawing
Produce a slide-by-slide outline in a table:
| # | Left-top title (big text) | What this slide says | Illustration scene |
|---|
Each illustration scene should describe a concrete, observable moment: who is doing what, where, with what objects. No abstract symbols.
Stop here and confirm with the user before generating any images. One round of outline feedback saves many rounds of image regeneration.
Step 3 — Rename images immediately after generation
This is the most important operational rule.
After every image generation call, immediately rename the output file to a descriptive name:
slide-01-cover.png
slide-02-forum-workarounds.png
slide-08-mrr-launch.pngDo this before writing any HTML. Cryptic generated filenames make it impossible to track which image belongs to which slide.
Step 4 — Generate illustrations in parallel
Generate all slides in one parallel batch. For each slide, generate 2 candidates (prompt A and prompt B with slightly different scene framing).
Follow the style rules:
- Thin black ink lines on pure white, generous negative space
- Single orange accent
#F97316on the most meaningful element - TINY human figures dwarfed by the scene
- Direct story scene, not a metaphor
After each batch completes, rename all files immediately (see Step 3).
Prompt template per slide:
New Yorker magazine style editorial illustration, single-panel.
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: [CONCRETE SCENE — who does what, what is orange and why,
spatial layout, scale contrast].
Witty, restrained, intelligent.
In the bottom-left corner: a short horizontal orange line, and below it
one small light-gray Chinese caption: "[KEY LINE]" — small, quiet,
perfectly legible. No other text anywhere.Use 16:9 ratio for all slides.
Step 5 — Let the user pick
Present each pair as:
场景N — [title]
NA !NA
NB !NB
Show all pairs at once. The user picks A or B for each scene. Do not pre-select for the user.
Step 6 — Build the HTML
After the user confirms their picks, build a single self-contained HTML file.
Layout per slide:
- Pure white background
- Top-left: large serif title (
Songti SC/STSong/SimSunfallback),
bold, ~3.8vw, padding ~3.5% top / 5% left
- Center area: illustration image,
object-fit: contain, fills remaining space - Cover slide: full-bleed image only (no separate title bar). Add an author
credit in small orange serif text, bottom-center, absolutely positioned: color: #F97316, font-size: ~1.4vw, letter-spacing: 0.12em.
- Thank You slide: centered serif text + orange underline, no image needed
Navigation (bottom-right corner):
- Pixel-style
◀/▶triangles,Courier Newmonospace - Orange
#F97316, no transparency, no circles or borders - Counter format:
01/17 - Keyboard: ← → ↑ ↓ arrow keys
- Mouse: click left half = back, click right half = forward
- Scroll wheel with 400ms debounce
- Touch swipe (horizontal and vertical)
Progress bar: 3px orange line at very bottom, width = progress %
Animation: subtle translateX fade on slide change (28ms, direction-aware)
Save the HTML alongside the images so relative src paths work directly.
Step 7 — Clean up
After the user confirms the final HTML, trash all unused candidate images. Keep only the images actually referenced in the HTML.
Slide structure recommendation
For a 25-minute talk (≈14 content slides):
1. Cover — article title, full-bleed image 2–N. One slide per story moment or key point Last. "Thank You" — white, large serif text, orange line below
Aim for 1.5–2 min per slide. If the source has many sections, group minor points onto one slide rather than making 30 slides.
Common mistakes to avoid
- Skipping the character style step — inconsistent figures across slides.
- Generating images before confirming the outline — expensive rework.
- Skipping the rename step — causes slide/image mismatches.
- Metaphor illustrations — PPT shows the story, not symbols.
- Showing images one pair at a time — show all pairs at once.
- Pre-selecting images for the user — the user has taste; let them choose.
线猫 IP
角色定义
线猫是橘子橙线插画风格的幼猫符号——几句话就能画完的极简线条。寥寥几笔,甚至不需要完全闭合的轮廓。观者的大脑会自动补完。
外形
- 极简到骨头:整只猫不超过 10-12 笔。每一笔都不可删除。
- 幼猫比例但用最少的线表达:大头、短腿、圆肚子的感觉来自笔画的放置,不来自精细描绘。
- 头部:一个不完全闭合的圆——开口的弧线就是头。两个小黑圆点眼睛放在弧线内。
- 耳朵:两笔小三角——就两笔。不要画完整的三角形,不要画耳廓细节。就是两小撇。
- 身体:一条弧线或两条短弧线——不闭合的轮廓,暗示圆胖的肚子。不是完整的椭圆。
- 腿:四条短线——前腿直,后腿微弯。不需要画爪子。
- 尾巴:一条弯线,末端微翘。
- 胡须:每边一两根极短线——甚至可省略。
- 线条是开放的、不完整的、有呼吸感的。像在纸上随手勾的。
- 全身约占画幅 1/10 到 1/8。
- 手绘抖动,速写感。
性格
好奇的幼猫。萌来自比例暗示,不来自细节描绘。
姿态
蹲坐(身体一团弧线)、伸爪拨球(前腿一条线延伸)、蜷睡(一个开口的圆)、歪头(头部弧线倾斜)。
禁止
- 不要完整闭合的轮廓——线条应该是开放的、有呼吸的。
- 不要画耳廓、瞳孔、爪垫、毛流——任何细节都删掉。
- 不要完整椭圆身体——身体是一两条暗示性的弧线。
- 不要超过 12 笔。
- 不要精致、不要工整、不要矢量感。
判断标准
1. 还能删吗:盯着图问自己「还能删哪一笔?」——如果还能删,就删。 2. 脑补测试:给一个没看过 IP 定义的人看,他能认出是猫吗?能 → 笔画够了。不能 → 少了关键的一两笔,补上。 3. 速写感:是像 20 秒随手勾的,还是像用心描的?前者对。
线人 IP
角色定义
线人是橘子橙线插画风格的抽象人形符号——圆形头部,单弧线身体,单线四肢。极简到不能再简。每一笔都不可删除。
外形
- 极简黑墨线条。必须极小——占画幅 1/12 到 1/10。
- 头部:一个简单的圆。不画五官(最多两个极小黑点暗示眼睛方向)。
- 身体:一根弧线——从颈部到腰部,一条微微弯曲的竖线。略微前倾或后仰的弧度暗示姿态。不是线框、不是双线、不是体块——就是一根弧线。这一笔就是整个躯干。
- 手臂:两根单线从弧线中上部伸出,肘部微弯,末端是简笔手形——几根短线概括的手指。
- 腿:两根单线从弧线下端伸出,膝盖微弯,末端是小椭圆脚的轮廓。
- 线条手绘抖动,粗细一致约 1-2px。
性格
一个安静的符号。不代表任何人,代表「有人在这里」。
姿态
弧线的曲度决定姿态:微前倾 = 行走,微后仰 = 仰望,笔直 = 站立。四肢的弯折角度决定动作。
禁止
- 不要线框躯干——身体就是一根弧线。
- 不要写实人脸——头部就是一个圆。
- 不要火柴棍单线全身——身体是弧线,四肢是单线,有区别。
- 不要画大。
判断标准
1. 一根弧线:身体是不是只有一条线?如果是两条以上就是错了。 2. 圆头:三张图头部是不是同一个圆? 3. 够不够小:如果不是「需要凑近看」→ 太大。
小橙 IP
角色定义
小橙是橘子橙线插画风格的固定视觉 IP。
默认每张图都可以出现小橙。小橙不是吉祥物,不是贴纸,不是可爱装饰,而是正在安静参与系统运转的线条小人。对应小黑的「荒诞工作者」,小橙是「安静的做事者」——不声张,不表演,只是认真地把手头的事做好。
外形
- 纯线条,不是实心填充。薄黑墨线勾勒,手绘微抖。
- 头部:一个圆形轮廓(outline only,不填色),略大于身体比例。
- 眼睛:两个小黑圆点,无瞳孔,无高光。位置居中偏上。
- 无嘴。所有情绪靠眼睛位置、头部倾斜和肢体表达。
- 身体:窄长方形轮廓(几条直线围成),几何感,像精简版的火柴人但有体块。
- 四肢:细线条胳膊和腿,火柴棍粗细,轻微手绘抖动。
- 标记:胸口一个小实心橙色圆点(#F97316),像一枚徽章或按钮。这是唯一的色彩,是小橙的身份标识。
- 整体比例偏几何、干净,像设计师在白纸上随手画的草图小人。
- 轮廓略微不规则,有手绘感,不能是完美的机械线条。
性格
- 安静,专注,不声张。
- 像一个默默把事情做好的人——不邀功,不表演。
- 有好奇心,偶尔会歪头观察。
- 有点笨拙但不蠢,偶尔够不到、搬不动、差一点点。
- 不冷幽默(区别于小黑),也不卖萌——是一种温和的认真。
- 像白板草图里那个负责某件事的小角色。
常见职责
让小橙承担核心动作:
- 站在巨大的物件旁边观察、思考。
- 踮脚去够高处的东西。
- 推一个比自己大很多的箱子。
- 拿着工具在搭建什么。
- 指着某个方向,像在指路或标记。
- 坐在什么东西上面思考(腿悬空)。
- 搬运东西,小心翼翼。
- 在流水线旁做自己的一步。
- 站在岔路口,正在做选择。
- 连接两个断开的东西(拉线、搭桥、递东西)。
- 蹲下来观察地面上的细节。
- 举着一个比自己大的牌子或标记。
禁止
- 不要给身体填充任何颜色(身体是线条轮廓,不是实心)。
- 不要把橙色圆点以外的地方涂橙色。
- 不要画成可爱卡通、表情包、Q 版、吉祥物风格。
- 不要给小橙加嘴巴、鼻子、眉毛或复杂五官。
- 不要让小橙只是站在角落旁观——必须参与核心动作。
- 不要把小橙画太大——保持小体型,被场景中的物件衬托。
- 不要画成精致商业插画风格。
- 不要画成真实人物比例(保持简笔几何感)。
判断标准
三条测试,不通过就重写 prompt:
1. 去掉小橙:如果去掉小橙,图的核心意思还能完全成立 → 小橙是装饰,重来。让小橙成为动作主体。 2. 辨识度:如果把小橙换成任意火柴人,图还一样 → 缺少标记。确认胸口橙色圆点清晰可见。 3. 安静感:如果小橙看起来在表演、搞笑、或刻意卖萌 → 太刻意。改成安静地做事。
小橙生图提示词模板
每张图单独生成。根据场景替换变量。
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.
Recurring IP character:
小橙, a tiny minimalist line-drawn figure. Circle head (OUTLINE only, not filled),
two small black dot eyes, no mouth. Narrow rectangular body made of a few straight
black lines (outline only, no fill). Thin wobbly stick arms and stick legs.
One small solid orange dot (#F97316) on the chest like a badge or pin — this is
the ONLY color on the character and the ONLY orange accent in the entire image.
Geometric, clean, like a designer's quick sketch on white paper. Slightly uneven
hand-drawn lines. Not a cute mascot, not a cartoon, not a realistic figure.
Scene: {场景描述——小橙在哪里、正在做什么、周围有什么物件}
Composition: {构图描述——物件的位置关系、大小对比、留白区域}
Color use:
- Black thin ink lines for ALL line art, outlines, objects, 小橙's body, arms, legs.
- Orange #F97316 ONLY on 小橙's chest dot — nowhere else.
- Pure white background everywhere else.
Scale: 小橙 should be TINY relative to the objects it interacts with —
if it's pushing a box, the box is 3-4× its size. The scale contrast
is the drama.
Constraints:
- 小橙's body is OUTLINE ONLY — no solid fill, no colored fill.
- The orange chest dot is the single point of color in the entire image.
- No shading, no gradients, no fills on any element.
- At least 40% empty white space.
- One idea only — if the scene needs two sentences to explain, cut one.
- Not a cute cartoon, not a children's illustration, not a PPT diagram.
- 16:9 horizontal format.