Menu
把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/nexu-io/html-anything --skill article-sketchnote-editorialThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| name | article-sketchnote-editorial |
| zh_name | 编辑式视觉笔记 |
| en_name | Editorial Sketchnote |
| emoji | 📒 |
| description | 把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节 |
| category | article |
| scenario | education |
| aspect_hint | 1080 × 自适应（竖向长图） |
| tags | ["sketchnote","magazine","editorial","档案","杂志","视觉笔记","narrative","叙事","concept-history","概念史"] |
| example_id | sample-sketchnote-emergence |
| example_name | 视觉笔记 · 涌现的命名 |
| example_format | markdown |
| example_tagline | 还原论失败 → Anderson 1972 |
| example_desc | 一段以「涌现」为终点的概念史专题, 6 个 layout 节奏 = 开阔→紧→紧→爆→开阔→静 |
| example_source_url | https://github.com/lijigang/ljg-skills/tree/master/skills/ljg-card |
| example_source_label | lijigang/ljg-skills · ljg-card |
【模板: 编辑式视觉笔记（Editorial Sketchnote）】
【灵魂】把一个概念铸成一份编辑式图文档案。读者翻它像翻一本期刊专题——从真问题（专题刊头）→ 失败的尝试（便签批注、档案标签）→ 一句"等等——"的转折（跨栏大标题）→ 看见那个东西（Hero 对开页）→ 名字（Closing 名牌）。
不是博物馆陈列, 是杂志栏目。不是教科书定义, 是探案档案。 视觉与叙事一起负责, 让读者自己经历"卡住—走不通—翻过去—看见了"的弧线。文字克制, 不点题。
【六条公理 — 任一不过, 重做】
【六个 layout 模具 — 节奏锁死】
每站必须用不同的 layout, 节奏才出现：
| 序 | 站点 | class | 视觉特征 |
|---|---|---|---|
| 01 | 起点 / Feature | .feature | 米色底 + grid 6fr/6fr, 左大 SVG 图 / 右文字; kicker + Serif 大标题 + italic lead + drop-cap body |
| 02 | 失败一 / Note | .note | 双栏 grid（左 sidekick 涂鸦区 + 右 540px 便签纸）; 便签微旋 0.5deg + 顶部虚线穿孔 + 红笔删除线 + scribble + footnote ¹ |
| 03 | 失败二 / Archive | .archive | 全宽 + 黑色印章 stamp（168px, 含 ✕ 大字）+ 右栏 body + SVG 网格图 + verdict 红色 italic |
| 04 | 转折 / Cross | .cross | 全宽 + Serif 200px 由内容决定的转折爆点（禁套「等等」）+ amber 高亮 + 二栏 |
| 05 | 顿悟 / Hero | .hero | 蓝色顶边 4px + grid 7fr/5fr; 左大 SVG / 右 pull-quote + drop-cap body |
| 06 | 命名 / Closing | .closing | 米色底 + 双线顶边 + 中心对称 + 巨大 Serif 名 + byline 上下细线 + epilogue |
节奏铁律: 开阔（feature）→ 紧（note 错位）→ 紧（archive 横长）→ 爆（cross 200px）→ 开阔（hero）→ 静（closing 中心对称）。不是均匀展开, 是有呼吸的——开阔与紧凑交替, 转折时大爆炸, 最后回到中心对称。
禁区：6 个节都是 60-80px margin-top 的均匀间距 = 画廊陈列, 不是漫画分镜, 重排。
【字族对比 — 必须四种同时使用】
Noto Serif SC)：杂志主标题、mega-name、italic lead、pull-quoteNoto Sans SC)：正文 body-sans、failed station head、kicker 后文字JetBrains Mono / SF Mono)：编号 num、kicker label、byline、footnote ¹、stampCaveat / 楷体)：手写批注 scribble、ask 设问、caption任一缺席 = 视觉回到 AI 单一字族的均质感, 灵魂崩。
【颜色系统 — ≤4 主色】
--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 /* 高亮底色 */
禁止 #000 纯黑。≤ 4 主色（红 + 蓝 + amber + 中性）。
【必备装饰结构件】
kicker / drop-cap / byline / stamp 是结构必须项。其它按需取用：
::first-letter float left, 96px Serif\201C 大引号 100pxtext-decoration: line-through 红色 2.5px— 红色破折号前缀【sidekick 涂鸦区 — note 模具左栏不能空】
三种填法（按内容选, 不要堆满）：
<svg viewBox="0 0 280 220"> 简笔画 + 红笔批注.formula) — 失败本质能压成 1-3 行文字关系 → Caveat 22px + 虚线左边线 + 微旋 -1deg.arrow) — 单点强调 → Caveat 26px + 微旋 6deg + 红色约束：sidekick 是注脚不抢戏 / 涂鸦感优先精致（歪斜、虚线、留缝隙）/ 颜色克制（黑灰 + 红）/ 内容密度低（宁可少不要塞三个图）。
【HTML 骨架（agent 复用结构, 内容由叙事弧线决定）】
<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>
字号与节奏 padding 对照：
| section | padding 上 / 下 | margin-top | 留白尺度 |
|---|---|---|---|
| feature | 38 / 44 | — | 中 |
| note | 22 / 22 | 24 | 小 |
| archive | 22 / 24 | 24 | 小 |
| cross | 64 / 60 | 30 | 大 |
| hero | 52 / 48 | 32 | 中偏小 |
| closing | 60 / 64 | 32 | 大 |
参考完整 CSS 见同目录 example.html（每个 class 都已实现）。
【输出契约】
输出单文件 HTML, inline CSS + Google Fonts CDN（Noto Serif SC / Noto Sans SC / Caveat / JetBrains Mono）。不写 JS, 静态长图。容器宽 1080px, 高度自适应。
【自检 6 项 — 任一不过, 重做】
【禁区】
【致谢】 本 skill 改编自 lijigang/ljg-skills · ljg-card -v sketchnote（v2.3.0）。原版输出 PNG（playwright 截图）, html-anything 版直接输出单文件 HTML, 6 公理 + 6 layout + 4 字族 + 节奏与原版一致。
Based on SOC occupation classification
