Tooluck logoTooluck
SKILL.md

article-sketchnote-editorial

Agent skill fromnexu-io/html-anything

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

How to install article-sketchnote-editorial

install article-sketchnote-editorial
# install the html-anything pack with the skills CLI
npx skills add nexu-io/html-anything

# or add only this skill to Claude Code: copy the folder

next/src/lib/templates/skills/article-sketchnote-editorial/

# into

~/.claude/skills/article-sketchnote-editorial/ (all projects)

.claude/skills/article-sketchnote-editorial/ (one project)

next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md

Apache-2.0Full file
1【模板: 编辑式视觉笔记(Editorial Sketchnote)】
2
3【灵魂】把一个**概念**铸成一份编辑式图文档案。读者翻它像翻一本期刊专题——从真问题(专题刊头)→ 失败的尝试(便签批注、档案标签)→ 一句"等等——"的转折(跨栏大标题)→ 看见那个东西(Hero 对开页)→ 名字(Closing 名牌)。
4
5**不是博物馆陈列, 是杂志栏目。不是教科书定义, 是探案档案。** 视觉与叙事一起负责, 让读者自己经历"卡住—走不通—翻过去—看见了"的弧线。文字克制, 不点题。
6
7【六条公理 — 任一不过, 重做】
8
91. **有真问题在前** — 起点是具体的、可触摸的、卡住的问题。不是「什么是 X」, 是「当时的人们用 A、B、C 都不够」。问题必须有裂缝。
102. **必须有失败** — 路径中至少一次失败(或走偏、半对了)。线性"由此可得"会杀掉张力。
113. **顿悟在前、命名在后** — 读者先「看到」, 再被告诉「这叫……」。**标题不能出现概念名**。
124. **「现在」视角** — 每一站是「他/她那一刻能看到什么」, 不是「我们站在 100 年后回望」。后世评价不进画面。
135. **文字克制, 不点题** — 禁用「你以为你刚才学到了一个概念」「你重新分娩了它」之类的元自指。让叙事张力自己产生发明感。允许诗意余韵("于是, 你看见了山")。
146. **中文母语表达** — 不要翻译腔。动词驱动 / 具体物件 / 口语节奏。禁忌:"被 X""进行 X""在...的背景下""随着 X 的发展""该方法在多个维度上展现优势"。
15
16【六个 layout 模具 — 节奏锁死】
17
18每站必须用**不同的** layout, 节奏才出现:
19
20| 序 | 站点 | class | 视觉特征 |
21|---|---|---|---|
22| 01 | 起点 / Feature | `.feature` | 米色底 + grid 6fr/6fr, 左大 SVG 图 / 右文字; kicker + Serif 大标题 + italic lead + drop-cap body |
23| 02 | 失败一 / Note | `.note` | 双栏 grid(左 sidekick 涂鸦区 + 右 540px 便签纸); 便签微旋 0.5deg + 顶部虚线穿孔 + 红笔删除线 + scribble + footnote ¹ |
24| 03 | 失败二 / Archive | `.archive` | 全宽 + 黑色印章 stamp(168px, 含 ✕ 大字)+ 右栏 body + SVG 网格图 + verdict 红色 italic |
25| 04 | 转折 / Cross | `.cross` | 全宽 + Serif 200px **由内容决定的转折爆点**(禁套「等等」)+ amber 高亮 + 二栏 |
26| 05 | 顿悟 / Hero | `.hero` | 蓝色顶边 4px + grid 7fr/5fr; 左大 SVG / 右 pull-quote + drop-cap body |
27| 06 | 命名 / Closing | `.closing` | 米色底 + 双线顶边 + 中心对称 + 巨大 Serif 名 + byline 上下细线 + epilogue |
28…

Excerpt shown under the repository's Apache-2.0 license.

More skills in html-anything

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates