Editorial Sketchnote

Editorial Sketchnote is a Frontend skill for Claude Code, published by nexu-io in html-anything.

8.3K stars810 forkson nexu-io/html-anythingAdded 2026/08/15+1% in starsRepository updated 2026/08/11

agent-skillsagenticai-agentsai-designai-editorbyokclaudeclaude-codeclaude-skillscoding-agentsgenerative-aihtmlhtml-editorhyperframeslocal-firstmarkdownnextjsvibe-codingwechatxiaohongshu

Install in seconds

Install Editorial Sketchnote

Copy Editorial Sketchnote into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/article-sketchnote-editorial ~/.claude/skills/article-sketchnote-editorial

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/nexu-io/html-anything.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md in nexu-io/html-anything
Installs to: ~/.claude/skills/article-sketchnote-editorial
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Editorial Sketchnote does

Editorial Sketchnote turns a concept into a magazine-style visual dossier with six layout patterns, four font families, and archive details. Use it to create HTML editorial sketchnotes where narrative and layout drive the reader's arc.

Editorial Sketchnote is cataloged under Frontend on DirSkills. Editorial Sketchnote comes from a repository tagged agent-skills, agentic, ai-agents, ai-design and ai-editor.

Documentation

README

Excerpt

【模板: 编辑式视觉笔记（Editorial Sketchnote）】

【灵魂】把一个概念铸成一份编辑式图文档案。读者翻它像翻一本期刊专题——从真问题（专题刊头）→ 失败的尝试（便签批注、档案标签）→ 一句"等等——"的转折（跨栏大标题）→ 看见那个东西（Hero 对开页）→ 名字（Closing 名牌）。

不是博物馆陈列, 是杂志栏目。不是教科书定义, 是探案档案。 视觉与叙事一起负责, 让读者自己经历"卡住—走不通—翻过去—看见了"的弧线。文字克制, 不点题。

【六条公理 — 任一不过, 重做】

有真问题在前 — 起点是具体的、可触摸的、卡住的问题。不是「什么是 X」, 是「当时的人们用 A、B、C 都不够」。问题必须有裂缝。
必须有失败 — 路径中至少一次失败（或走偏、半对了）。线性"由此可得"会杀掉张力。
顿悟在前、命名在后 — 读者先「看到」, 再被告诉「这叫……」。标题不能出现概念名。
「现在」视角 — 每一站是「他/她那一刻能看到什么」, 不是「我们站在 100 年后回望」。后世评价不进画面。
文字克制, 不点题 — 禁用「你以为你刚才学到了一个概念」「你重新分娩了它」之类的元自指。让叙事张力自己产生发明感。允许诗意余韵（"于是, 你看见了山"）。
中文母语表达 — 不要翻译腔。动词驱动 / 具体物件 / 口语节奏。禁忌："被 X""进行 X""在...的背景下""随着 X 的发展""该方法在多个维度上展现优势"。

【六个 layout 模具 — 节奏锁死】

每站必须用不同的 layout, 节奏才出现：

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Editorial Sketchnote

What else does nexu-io publish alongside Editorial Sketchnote?
Editorial Sketchnote is one of 25 skills that DirSkills catalogs from nexu-io/html-anything, the repository it ships in. Its siblings there include Article Magazine, Blog Post and Competitive Teardown. Each one is a separate skill with its own page in this directory, installs the same way Editorial Sketchnote does, and is maintained by nexu-io in that same repository. The rest of the collection is listed on the nexu-io/html-anything page.
How does Editorial Sketchnote compare to other Frontend skills?
Editorial Sketchnote ranks #107 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Editorial Sketchnote against them. Open each page to compare what they document and how they install.