article-sketchnote-editorial

Featured

把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节

Web & Frontend 7,666 stars 745 forks Updated 4 days ago Apache-2.0

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

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
2 months ago
Last Updated
4 days ago
Language
HTML
License
Apache-2.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category