article-sketchnote-editorial

[Template: Editorial Sketchnote]

[Soul] Forge aconceptinto an editorial illustrated dossier. Readers flip through it like a journal feature—from the real problem (feature masthead) → failed attempts (sticky-note annotations, archive labels) → a "wait—" turning point (cross-column headline) → seeing that thing (Hero spread) → the name (Closing nameplate).

Not a museum display, but a magazine column. Not a textbook definition, but a detective dossier. Visuals and narrative share the work, letting readers experience the arc of "stuck—dead end—turn the page—saw it" for themselves. Text is restrained, never spelling out the point.

[Six axioms — fail any one, redo it]

1. A real problem comes first — The starting point is a concrete, tangible, stuck problem. Not "what is X", but "the people then tried A, B, C and none were enough". The problem must have a crack in it.
2. There must be failure — At least one failure along the path (or a detour, or a half-right attempt). A linear "from this we get" kills the tension.
3. Epiphany first, naming after — Readers first "see" it, then are told "this is called...".The title must not contain the concept name。
4. "Now" perspective — Each stop is "what he/she could see at that moment", not "we looking back from 100 years later". Later evaluations do not enter the frame.
5. Text is restrained, never spelling out the point — Ban meta self-reference like "you think you just learned a concept" or "you have given birth to it again". Let the narrative tension itself produce the sense of invention. Poetic lingering is allowed ("and so, you saw the mountain").
6. Native Chinese expression — No translationese. Verb-driven / concrete objects / colloquial rhythm. Taboos: "被 X" "进行 X" "在...的背景下" "随着 X 的发展" "该方法在多个维度上展现优势".

[Six layout molds — rhythm locked down]

Each stop must use adifferent layout, so that rhythm emerges:

No.	Stop	class	Visual features
01	Start / Feature	.feature	Beige background + grid 6fr/6fr, large SVG on the left / text on the right; kicker + Serif large headline + italic lead + drop-cap body
02	Failure one / Note	.note	Two-column grid (left sidekick doodle area + right 540px sticky note); sticky note slightly rotated 0.5deg + dashed perforation at top + red-pen strikethrough + scribble + footnote ¹
03	Failure two / Archive	.archive	Full width + black stamp (168px, with large ✕) + right-column body + SVG grid diagram + verdict in red italic
04	Turning point / Cross	.cross	Full width + Serif 200px turning-point explosion determined by the content(no stock "wait") + amber highlight + two columns
05	Epiphany / Hero	.hero	Blue top edge 4px + grid 7fr/5fr; large SVG on the left / pull-quote + drop-cap body on the right
06	Naming / Closing	.closing	Beige background + double-line top edge + center symmetry + huge Serif name + byline with thin lines above and below + epilogue

Iron law of rhythm: Open (feature) → tight (note misaligned) → tight (archive horizontal long) → burst (cross 200px) → open (hero) → still (closing centrally symmetric). Not evenly spread out, it has breathing—open and compact alternate, a big bang at the turn, and finally returns to central symmetry.

Forbidden zone: all 6 sections are evenly spaced with 60-80px margin-top = gallery display, not comic panels, redo.

【Typeface contrast — all four must be used simultaneously】

• Serif (Noto Serif SC): magazine main title, mega-name, italic lead, pull-quote
• Sans (Noto Sans SC): body body-sans, failed station head, text after kicker
• Mono (JetBrains Mono / SF Mono): number num, kicker label, byline, footnote ¹, stamp
• Hand (Caveat / kaiti): handwritten annotation scribble, ask question, caption

Any one absent = the visuals return to the uniformity of AI's single typeface, the soul collapses。

【Color system — ≤4 primary colors】

--bg:          #FAF7EF   /* 暖米白底 */
--paper:       #F5F1E5   /* 米色卡（feature/closing 底）*/
--ink-strong:  #0F0F0F   /* 重要文字, 避免 #000 */
--ink:         #1F1F1F   /* body */
--ink-light:   #6B6B6B   /* kicker, caption */
--red:         #B23A2C   /* 错误、批注、强调 */
--blue-deep:   #3D5A80   /* 顿悟视觉 */
--amber:       #BB8A2B   /* 转折提示 */
--amber-soft:  #D7A85A   /* 高亮底色 */

Forbidden #000 pure black. ≤ 4 primary colors (red + blue + amber + neutral).

【Required decorative structural elements】

kicker / drop-cap / byline / stamp is a mandatory structural item. Others are used as needed:

• kicker — site number + type small text: Mono uppercase 13px + white text on black num square + 36px short dash
• drop-cap — body first letter:::first-letter float left, 96px Serif
• lead — feature lead: italic 23px Serif + red left rule 2px
• pull-quote — hero key line: italic 38px Serif + blue rule 4px + floating \201C large quote mark 100px
• strike — failed body strikethrough keyword:text-decoration: line-through red 2.5px
• scribble — note red-pen annotation: Caveat 24px + 6deg rotation + red + dashed red border
• stamp — archive failure stamp: white text on black 12px Mono + ✕ Serif 64px
• verdict — archive closing remark: italic 19px Serif red + top dashed divider
• footnote — note footnote: Mono 13px + ¹ superscript
• byline — closing source: Mono 14px uppercase + letter-spacing 0.18em + thin black rules above and below
• mega — cross turning-point burst: Serif 200px + amber gradient highlight (1-3 core characters)
• epilogue — closing afterglow: italic 26px Serif + — red em dash prefix

【sidekick doodle area — the note template's left column must not be empty】

Three ways to fill it (choose by content, do not pile it full):

• SVG sketch — the essence of failure can be drawn with 1-2 graphic gestures → <svg viewBox="0 0 280 220"> simple line drawing + red-pen annotation
• Handwritten formula (.formula) — the essence of failure can be compressed into a 1-3 line textual relationship → Caveat 22px + dashed left rule + slight rotation -1deg
• Arrow annotation (.arrow) — single-point emphasis → Caveat 26px + slight rotation 6deg + red

Constraint: sidekick is a footnote and must not steal the scene / doodle feel over refinement (tilt, dashed lines, leave gaps) / restrained colors (black-gray + red) / low content density (prefer less over cramming in three graphics).

【HTML skeleton (agent reuses the structure, content is determined by the narrative arc)】

<div class="magazine-head">
  <div class="top-bar">
    <div class="left"><span class="badge">№ 01</span><span>[领域 · 年份]</span></div>
    <div class="right">[ENGLISH CATEGORY]</div>
  </div>
  <h1>[不剧透标题]<br>[第二行可选]</h1>
  <p class="deck">[italic 引言: 暗示问题但不揭示答案]</p>
</div>

<section class="feature">
  <div class="visual"><svg>[SVG 大图, max-width 540]</svg></div>
  <div class="meta">
    <div class="kicker"><span class="num">01</span><span class="rule"></span>起点 · [时空锚点]</div>
    <h2 class="head-serif">[卡住的问题]</h2>
    <p class="lead">[一句简洁领题]</p>
    <div class="body-sans drop-cap"><p>[具体例子]</p><p>[关键转折用 <em></em> 强调]</p><span class="ask">[开放设问？]</span></div>
  </div>
</section>

<aside class="note">
  <div class="sidekick">
    <!-- 三选一: SVG / .formula / .arrow + 可选 .doodle-caption -->
  </div>
  <div class="paper">
    <div class="kicker"><span class="num">02</span>第一次尝试</div>
    <h3 class="head-sans">[动作名]</h3>
    <div class="body-serif"><p>[思路]</p><p>失败用 <span class="strike">删除线</span></p></div>
    <div class="footnote"><span class="mark">¹</span><span>[根本原因]</span></div>
    <div class="scribble">[一句红笔批注]</div>
  </div>
</aside>

<section class="archive">
  <div class="stamp"><div class="label">EX-02</div><div class="x">✕</div><div class="case">Failed</div></div>
  <div class="body-area">
    <div class="kicker"><span>第二次尝试</span></div>
    <h3 class="head-sans">[动作名]</h3>
    <div class="visual"><svg>[失败示意]</svg></div>
    <div class="body-serif"><p>[思路 + 失败]</p></div>
    <div class="verdict">[结案语]</div>
  </div>
</section>

<section class="cross">
  <h2 class="mega"><span class="em">[转折爆点 1-3 字]</span>[可选后缀]</h2>
  <div class="grid">
    <div class="left">
      <div class="kicker"><span class="num">04</span>转折</div>
      <div class="body-serif"><p>[反向陈述]</p></div>
      <span class="ask">[转折设问？]</span>
    </div>
    <div class="right"><svg>[反向姿态]</svg><p class="caption">[caption]</p></div>
  </div>
</section>

<section class="hero">
  <div class="layout">
    <div class="visual"><svg>[大幅 hero 图]</svg><p class="caption">[caption]</p></div>
    <div class="text">
      <div class="kicker"><span class="num">05</span>顿悟</div>
      <h2 class="head-serif">[姿态名, 不出现概念名]</h2>
      <div class="pull-quote">[核心句子]</div>
      <div class="body-serif drop-cap"><p>[洞察的具体表述]</p></div>
    </div>
  </div>
</section>

<section class="closing">
  <p class="approach">[这种 X 的研究对象, 叫——]</p>
  <h1 class="mega-name">[中文概念名]</h1>
  <div class="en-name">[English Name]</div>
  <div class="byline"><span><strong>[人名]</strong></span><span class="sep">·</span><span>[年份]</span><span class="sep">·</span><span>[文献]</span></div>
  <div class="closing-body"><p>[它打开了什么]</p><p>[它换了什么眼睛]</p></div>
  <p class="epilogue">[诗意余韵, 不元自指]</p>
</section>

Font size and rhythm padding reference：

section	padding top / bottom	margin-top	whitespace scale
feature	38 / 44	—	medium
note	22 / 22	24	small
archive	22 / 24	24	small
cross	64 / 60	30	large
hero	52 / 48	32	medium-small
closing	60 / 64	32	large

For the complete reference CSS see the same directory example.html(every class is already implemented).

[Output Contract]

OutputSingle-file HTML, inline CSS + Google Fonts CDN (Noto Serif SC / Noto Sans SC / Caveat / JetBrains Mono). No JS, static long image. Container width 1080px, height adaptive.

[Self-check 6 items — if any fails, redo]

1. Problem station: the title does not present the concept name / the problem is concretely touchable / "the moment he/she" perspective
2. Failure station: at least 1 failure / the failure has clues (strikethrough / verdict / footnote)
3. Name after, before the epiphany: naming only in closing / hero title does not spoil
4. Restrained text: no "you thought you just..." self-referential sentence pattern
5. Native Chinese: no translationese such as "被 X", "进行 X", "随着 X 的发展"
6. Uneven rhythm: not all 6 sections have equal margin-top / whitespace concentrated in cross and closing

[Forbidden zones]

• The title cannot contain the concept name (spoiler)
• Do not use icons / emoji as decoration
• Do not use #000 pure black
• Do not center all titles (feature/note/archive left-aligned / only cross/closing centered)
• Do not make all 6 sections have consistent padding
• Do not use the Inter font
• No meta self-reference that states the theme
• sidekick cannot be empty

[Acknowledgements] This skill is adapted from lijigang/ljg-skills · ljg-card -v sketchnote(v2.3.0). The original version outputs PNG (playwright screenshot), while the html-anything version directly outputs single-file HTML, with 6 axioms + 6 layouts + 4 font families + rhythm consistent with the original.