mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-08-08 09:53:02 +08:00
feat: add baoyu-diagram skill and baoyu-article-illustrator ink-notes style (v1.99.0)
- baoyu-diagram: new skill for generating publication-ready SVG diagrams (flowchart, structural, illustrative) with embedded styles and auto dark-mode - baoyu-article-illustrator: add ink-notes style and mono-ink palette with presets for before/after, manifesto, and framework diagrams
This commit is contained in:
Jim Liu 宝玉
@@ -0,0 +1,38 @@
|
||||
# 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.
|
||||
|
||||
## 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
|
||||
@@ -193,6 +193,22 @@ ELEMENTS: Rounded cards with dashed/solid borders, wavy hand-drawn arrows with l
|
||||
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
|
||||
|
||||
```
|
||||
@@ -227,6 +243,28 @@ COLORS: Left side Warm Orange (#ED8936), Right side Terracotta (#C05621),
|
||||
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
|
||||
|
||||
```
|
||||
@@ -259,6 +297,27 @@ COLORS: Soft Peach background (#FFECD2), nodes in Warm Orange (#ED8936),
|
||||
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
|
||||
|
||||
```
|
||||
|
||||
@@ -24,6 +24,9 @@
|
||||
| `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
|
||||
|
||||
@@ -60,7 +63,8 @@ Use this table during Step 3 to recommend presets based on Step 2 content analys
|
||||
| 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` |
|
||||
| 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` |
|
||||
|
||||
@@ -43,6 +43,7 @@ Use Core Styles for most cases. See full Style Gallery below for granular contro
|
||||
| `sketch` | Raw pencil notebook style | Brainstorming, creative exploration |
|
||||
| `screen-print` | Bold poster art, halftone textures, limited colors | Opinion, editorial, cultural, cinematic |
|
||||
| `sketch-notes` | Soft hand-drawn warm notes | Educational, warm notes |
|
||||
| `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`
|
||||
@@ -81,6 +82,7 @@ Full specifications: `references/styles/<style>.md`
|
||||
| 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 |
|
||||
@@ -206,6 +208,7 @@ Palettes override a style's default colors. Combine any style with any palette:
|
||||
| `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`
|
||||
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user