article-sketchnote-editorial
Featured把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
Web & Frontend 8,450 stars
833 forks Updated 2 days ago Apache-2.0
Install
Quality Score: 99/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
【模板: 编辑式视觉笔记(Editorial Sketchnote)】
【灵魂】把一个**概念**铸成一份编辑式图文档案。读者翻它像翻一本期刊专题——从真问题(专题刊头)→ 失败的尝试(便签批注、档案标签)→ 一句"等等——"的转折(跨栏大标题)→ 看见那个东西(Hero 对开页)→ 名字(Closing 名牌)。
**不是博物馆陈列, 是杂志栏目。不是教科书定义, 是探案档案。** 视觉与叙事一起负责, 让读者自己经历"卡住—走不通—翻过去—看见了"的弧线。文字克制, 不点题。
【六条公理 — 任一不过, 重做】
1. **有真问题在前** — 起点是具体的、可触摸的、卡住的问题。不是「什么是 X」, 是「当时的人们用 A、B、C 都不够」。问题必须有裂缝。
2. **必须有失败** — 路径中至少一次失败(或走偏、半对了)。线性"由此可得"会杀掉张力。
3. **顿悟在前、命名在后** — 读者先「看到」, 再被告诉「这叫……」。**标题不能出现概念名**。
4. **「现在」视角** — 每一站是「他/她那一刻能看到什么」, 不是「我们站在 100 年后回望」。后世评价不进画面。
5. **文字克制, 不点题** — 禁用「你以为你刚才学到了一个概念」「你重新分娩了它」之类的元自指。让叙事张力自己产生发明感。允许诗意余韵("于是, 你看见了山")。
6. **中文母语表达** — 不要翻译腔。动词驱动 / 具体物件 / 口语节奏。禁忌:"被 X""进行 X""在...的背景下""随着 X 的发展""该方法在多个维度上展现优势"。
【六个 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 中心对称...
Details
- Author
- nexu-io
- Repository
- nexu-io/html-anything
- Created
- 3 months ago
- Last Updated
- 2 days ago
- Language
- HTML
- License
- Apache-2.0
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
Web & Frontend Featured
deck-guizang-editorial
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)
8,450 Updated 2 days ago
nexu-io AI & Automation Listed
image-text-cards
设计小红书/抖音/视频号图文笔记的卡片(图)和正文(description)。覆盖卡片与正文的分工、信息分层结构、对比驱动手法、去术语化原则和视觉规范。做图文卡片或改卡片可读性时调用。
0 Updated 5 days ago
xiaoshuai1024 AI & Automation Listed
linkly-quote-cards
Linkly 金句卡+极简 zine 风海报引擎(光形体自研)。当用户要把金句/一句话/主题/文章立意/情绪/参考照片变成"旧纸大留白+单一高饱和色锚+印刷质感"的竖版卡片或海报时使用。触发词:金句卡、出金句卡、金句卡 no.XX、zine 海报、极简海报、文艺海报、给文章/稿子配张 zine 风图。生图唯一走 ~/飞书/imagegen/gen.py(Seedream),不用任何其他生图渠道。
7 Updated 2 weeks ago
logog782-cmyk