diff --git a/next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md b/next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md new file mode 100644 index 0000000..93637a0 --- /dev/null +++ b/next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md @@ -0,0 +1,220 @@ +--- +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 名牌）。 + +**不是博物馆陈列, 是杂志栏目。不是教科书定义, 是探案档案。** 视觉与叙事一起负责, 让读者自己经历"卡住—走不通—翻过去—看见了"的弧线。文字克制, 不点题。 + +【六条公理 — 任一不过, 重做】 + +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 中心对称）。不是均匀展开, 是有呼吸的——开阔与紧凑交替, 转折时大爆炸, 最后回到中心对称。 + +**禁区**：6 个节都是 60-80px margin-top 的均匀间距 = 画廊陈列, 不是漫画分镜, 重排。 + +【字族对比 — 必须四种同时使用】 + +- **Serif** (`Noto Serif SC`)：杂志主标题、mega-name、italic lead、pull-quote +- **Sans** (`Noto Sans SC`)：正文 body-sans、failed station head、kicker 后文字 +- **Mono** (`JetBrains Mono` / `SF Mono`)：编号 num、kicker label、byline、footnote ¹、stamp +- **Hand** (`Caveat` / 楷体)：手写批注 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` 是结构必须项。其它按需取用： + +- **kicker** — 站点序号 + 类型小字：Mono uppercase 13px + 黑底白字 num 方块 + 36px 短横线 +- **drop-cap** — body 首字：`::first-letter` float left, 96px Serif +- **lead** — feature 引言：italic 23px Serif + 红色左边线 2px +- **pull-quote** — hero 关键句：italic 38px Serif + 蓝色边线 4px + 浮动 `\201C` 大引号 100px +- **strike** — failed body 删除关键词：`text-decoration: line-through` 红色 2.5px +- **scribble** — note 红笔批注：Caveat 24px + 6deg 旋转 + 红色 + 虚线红边框 +- **stamp** — archive 失败印章：黑底白字 12px Mono + ✕ Serif 64px +- **verdict** — archive 结案语：italic 19px Serif 红色 + 上虚线分隔 +- **footnote** — note 脚注：Mono 13px + ¹ 上标 +- **byline** — closing 出处：Mono 14px uppercase + letter-spacing 0.18em + 上下细黑线 +- **mega** — cross 转折爆点：Serif 200px + amber 渐变高亮（核心字 1-3 个） +- **epilogue** — closing 余韵：italic 26px Serif + `—` 红色破折号前缀 + +【sidekick 涂鸦区 — note 模具左栏不能空】 + +三种填法（按内容选, 不要堆满）： +- **SVG 速写** — 失败本质能用 1-2 个图形姿态画出来 → `` 简笔画 + 红笔批注 +- **手写公式** (`.formula`) — 失败本质能压成 1-3 行文字关系 → Caveat 22px + 虚线左边线 + 微旋 -1deg +- **箭头评注** (`.arrow`) — 单点强调 → Caveat 26px + 微旋 6deg + 红色 + +**约束**：sidekick 是注脚不抢戏 / 涂鸦感优先精致（歪斜、虚线、留缝隙）/ 颜色克制（黑灰 + 红）/ 内容密度低（宁可少不要塞三个图）。 + +【HTML 骨架（agent 复用结构, 内容由叙事弧线决定）】 + +```html +
+
+
№ 01[领域 · 年份]
+
[ENGLISH CATEGORY]
+
+

[不剧透标题]
[第二行可选]

+

[italic 引言: 暗示问题但不揭示答案]

+
+ +
+
[SVG 大图, max-width 540]
+
+
01起点 · [时空锚点]
+

[卡住的问题]

+

[一句简洁领题]

+

[具体例子]

[关键转折用 强调]

[开放设问？]
+
+
+ + + +
+
EX-02
✕
Failed
+
+
第二次尝试
+

[动作名]

+
[失败示意]
+

[思路 + 失败]

+
[结案语]
+
+
+ +
+

[转折爆点 1-3 字][可选后缀]

+
+
+
04转折
+

[反向陈述]

+ [转折设问？] +
+
[反向姿态]

[caption]

+
+
+ +
+
+
[大幅 hero 图]

[caption]

+
+
05顿悟
+

[姿态名, 不出现概念名]

+
[核心句子]
+

[洞察的具体表述]

+
+
+
+ +
+

[这种 X 的研究对象, 叫——]

+

[中文概念名]

+
[English Name]
+
[人名]·[年份]·[文献]
+

[它打开了什么]

[它换了什么眼睛]

+

[诗意余韵, 不元自指]

+
+``` + +**字号与节奏 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 项 — 任一不过, 重做】 + +1. **问题站**: 标题没出现概念名 / 问题具体可触摸 / "他/她那一刻"视角 +2. **失败站**: 至少 1 次失败 / 失败有线索（删除线 / verdict / footnote） +3. **顿悟前命名后**: 命名只在 closing / hero 标题不剧透 +4. **文字克制**: 没有"你以为你刚才……"自指句式 +5. **中文母语**: 没有"被 X""进行 X""随着 X 的发展"等翻译腔 +6. **节奏不均匀**: 6 节 margin-top 不全等 / 留白集中在 cross 与 closing + +【禁区】 +- 标题不能出现概念名（剧透） +- 不要把图标 / emoji 当装饰 +- 不要 #000 纯黑 +- 不要居中所有标题（feature/note/archive 左对齐 / cross/closing 才居中） +- 不要让 6 节 padding 一致 +- 不要 Inter 字体 +- 不要点题元自指 +- sidekick 不能空 + +【致谢】 +本 skill 改编自 [lijigang/ljg-skills · ljg-card -v sketchnote](https://github.com/lijigang/ljg-skills/tree/master/skills/ljg-card)（v2.3.0）。原版输出 PNG（playwright 截图）, html-anything 版直接输出单文件 HTML, 6 公理 + 6 layout + 4 字族 + 节奏与原版一致。 diff --git a/next/src/lib/templates/skills/article-sketchnote-editorial/example.html b/next/src/lib/templates/skills/article-sketchnote-editorial/example.html new file mode 100644 index 0000000..4a974f6 --- /dev/null +++ b/next/src/lib/templates/skills/article-sketchnote-editorial/example.html @@ -0,0 +1,674 @@ + + + + + +涌现的命名 · 复杂系统 1972 + + + + + + +
+
+ +
+
+
№ 01复杂系统 · 1972
+
COMPLEX SYSTEMS / SCIENCE
+
+

单看每一只蚂蚁，
都讲不出蚁群

+

他们以为只要把粒子讲清，整体就讲清了。直到他们发现——粒子是清楚的，整体仍然不清楚。

+
+ + +
+
+ + + + 原子 + + 分子 + + 物质 + + 万物 + + + + + + 越往下分， + 越像万能 — + 那蚁群呢？ + 那意识呢？ + + + + +
+
+
01起点 · 1950s 还原论的高光
+

把整体讲清，等于把每一颗粒子讲清吗？

+

那时的物理学相信——只要往下分，分到底，一切问题都会被解掉。

+
+

当时的逻辑很直接：水是 H₂O，气体是分子运动，固体是晶格。从原子层往上推，万物都是基础规则的累积。这条路把人类带到了原子弹、晶体管、半导体。它走得越远，越像万能。

+

所以下一个问题来得很自然——蚁群、神经网络、市场，也能这样推上去吗？

+ 把蚂蚁拆到原子，蚁群就出来了？ +
+
+
+ + + + + +
+
+
EX-02
+
✕
+
Failed
+
+
+
第二次尝试
+

把所有蚂蚁的行为相加

+
+ + + + + 个体 1 + 2 + 3 + … + N + + = + + 总体重 + 总步速 + 总觅食距离 + — 但「聪明」呢？ + + + + + + + +
+
+

既然单只不行，那就把所有蚂蚁的行为做加法。加起来的体重、加起来的步速、加起来的觅食路径——是的，全都加得出。但蚁群作为一个整体的"决策"呢？它的"聪明"呢？

+
+
「加得出体重，加不出意识。」
+
+
+ + +
+

整体——

+
+
+
04转折
+
+

那也许问题从一开始就错了。也许整体根本不是个体之和，而是另一个东西——一个只有在足够多个体之上才能出现，并且看不见个体的东西。

+
+ 那它是从哪一刻开始的？ +
+
+
+ + + + 一只 + 没有形状 + + + + + + + + + + + 一群 — 有形状 + +
+

同样的蚂蚁，多到一定数量，"形状"自己浮起来

+
+
+
+ + +
+
+
+ + + + + 个体数量 → + 整体性质 + + + + 临界点 + + + 跳了 — + 新性质冒出来 + + + +
跨过门槛的那一刻
+
+
+
05顿悟
+

多到一定程度，性质就跳了

+
在某个临界点，整体长出了它自己的性质——这性质不属于任何一个个体。
+
+

一只水分子谈不上"温度"，一群水分子也谈不上"水"。但 10²³ 个水分子一旦聚拢，温度出现了，相变出现了，流动出现了。这些性质在更小的尺度上根本不存在。它们是在"足够多"这个门槛被跨过的瞬间，从尺度本身里冒出来的。

+
+
+
+
+ + +
+

这种「由多生新」的现象，叫——

+

涌现

+
Emergence
+
+ Phil Anderson· + 1972· + More Is Different· + Science 177 +
+
+

它打开了一扇门：复杂系统不再被还原成它的零件。

+

它换了一双眼睛：看的不再是"什么构成了什么"，而是"什么时候开始不一样"。

+
+

于是，整体长出了自己的眼睛。

+
+ +
+
+ + diff --git a/next/src/lib/templates/skills/article-sketchnote-editorial/example.md b/next/src/lib/templates/skills/article-sketchnote-editorial/example.md new file mode 100644 index 0000000..51cc1a6 --- /dev/null +++ b/next/src/lib/templates/skills/article-sketchnote-editorial/example.md @@ -0,0 +1,23 @@ +# 涌现的命名 + +**Topic / 领域**：复杂系统 · 1972 +**English Category**：COMPLEX SYSTEMS / SCIENCE + +## 弧线 + +| 站 | 内容 | +|---|---| +| 01 起点 | 20 世纪中叶，物理学家相信「只要把每一颗粒子讲清，整体就讲清了」 | +| 02 失败一 | **还原论**：分到原子层逐个解释，结论：每个原子都不"聪明" | +| 03 失败二 | **加总**：把个体行为加起来，结论：加得出体重，加不出意识 | +| 04 转折 | **整体——** 整体不是个体之和 | +| 05 顿悟 | 在某个临界点，整体的新性质突然冒出来，单个个体根本看不见这一面 | +| 06 命名 | **涌现 / Emergence** — Phil Anderson, 1972, "More Is Different" | + +## 不剧透标题（feature 用） + +「单看每一只蚂蚁，都讲不出蚁群」 + +## 诗意余韵（epilogue） + +「于是，整体长出了自己的眼睛。」 diff --git a/next/src/lib/templates/skills/deck-ljg-present/SKILL.md b/next/src/lib/templates/skills/deck-ljg-present/SKILL.md new file mode 100644 index 0000000..e388d46 --- /dev/null +++ b/next/src/lib/templates/skills/deck-ljg-present/SKILL.md @@ -0,0 +1,288 @@ +--- +name: deck-ljg-present +zh_name: "宣言式演讲（Outline-Faithful）" +en_name: "Outline-Faithful Manifesto Deck" +emoji: "✊" +description: "把 outline 1:1 铸成色块大字宣言 deck, 原文不动只做美化。三档主题 black / red / yellow" +category: slides +scenario: creator +aspect_hint: "16:9 横向翻页" +tags: ["deck", "manifesto", "slogan", "outline", "宣言", "演讲", "色块", "大字", "ultra-bold"] +example_id: sample-ljg-present-ai +example_name: "宣言式演讲 · AI 革命" +example_format: markdown +example_tagline: "Red 宣言 · 错位大字 · 左对齐" +example_desc: "8 页 outline-faithful 演讲, 一级标题封面 + 列表错位 + 分隔符休止页 + 收束反问, 全程不重写原文" +example_source_url: "https://github.com/lijigang/ljg-skills/tree/md/skills/ljg-present" +example_source_label: "lijigang/ljg-skills · ljg-present" +--- + +【模板: 宣言式演讲（Outline-Faithful）】 + +【意图】把用户的 outline / markdown 1:1 视觉化为色块大字 manifesto deck。**不抽提、不重写、不重排、不浓缩**——只决定每一行/每一节渲染为哪一页。审美参考：Felipe Franco / BIG STUDIOS 的 manifesto 大字海报。 + +【铁律 — 全部违反必须重做】 +- 标题不改字, 段落不改字, 列表不改字, 顺序不重排 +- 唯一允许的"动"是**物理分页**（一段太长拆成多页） +- 不抽 manifesto / 不写新句子 / 不删内容 / 不放图片图标 / 不用过渡动画 +- 一篇只用一个主题色（black / red / yellow 三选一） + +【outline → 页面映射】 + +| 输入元素 | 输出页 | +|---|---| +| `# 一级标题` | 独占 **emphasis** 封面页（accent 底色, 通常单字/单短词） | +| `## 二级标题` | 独占 **theme** 页（大字标题独占一页） | +| `### 三级标题`+ | 独占 theme 页（字号自动降一档） | +| 段落（≤30字） | 单 theme 页 | +| 段落（30-80字, 多句号） | 每句一页（medium 档） | +| 段落（>80字） | 按 ~30 字一页拆, 末尾加 `⋯` | +| `- 列表项`（≤4） | 一页全展示, indent 按嵌套深度 0/1/2 | +| 列表 5-8 项 | 拆 2 页, 每页 3-4 项, 项数接近 | +| 列表 >8 项 | 拆多页, 每页 4 项 | +| 表格 ≤6 行 | 单页 | +| 表格 >6 行 | 拆多页, 每页保留表头 | +| `**强调**` / `` `code` `` | 自动 `hl: true` | +| `---` 分隔符 | 独立 **emphasis 休止页**（空 emphasis, 纯色块） | + +**首末页自动 emphasis**：文档首段（如已是 `#` 则合并）+ 文档末段 = emphasis 开场 / 收束页。一级标题就是天然的章节断点, 不要为了凑节奏强行加 emphasis。 + +【主题色推断 — 一篇只能一个】 + +| 文档调性 / 标签 | theme | 默认页 | emphasis 页 | hl 色（仅 theme 页生效） | +|---|---|---|---|---| +| 沉思 / 论证 / 笔记（默认） | **black** | 黑底白字 | 红底白字 | 红 `#E63956` | +| 宣言 / 号召 / 演讲（含 `share` / `manifesto` / `keynote` / `talk` 标签或语气） | **red** | 红底白字 | 黑底白字 | 柔金黄 `#FFE082` | +| 反讽 / 警觉 / 批判（含 `critique` / `warn` / `rant`） | **yellow** | 黄底黑字 | 黑底白字 | 红 `#E63956` | + +显式覆盖：用户写"用 red / 用 yellow / 用黑底"即按指令。无任何线索时默认 black。 + +【视觉规范 — 数值锁死】 + +色板（仅 4 色, 不许改 hex）： +``` +--c-black: #1A1A1A +--c-red: #E63956 +--c-yellow: #FFD400 +--c-white: #FFFFFF +--c-gold: #FFE082 +``` + +字体栈（必须用 ultra-bold 900, letter-spacing `-0.05em`）： +``` +"Helvetica Neue", "Arial Black", "Inter", "PingFang SC", "Heiti SC", "STHeiti", -apple-system, sans-serif +font-weight: 900 +``` + +字号档位（按本页**最长那一行**字符数, CJK 按 1.8 计权, 多行页降一档）： + +| 档位 | 字符数 | font-size | +|---|---|---| +| single | ≤2 | `clamp(320px, 80vmin, 1100px)` | +| short | 3-6 | `clamp(240px, 55vmin, 780px)` | +| medium | 7-14 | `clamp(150px, 35vmin, 480px)` | +| long | 15-26 | `clamp(100px, 22vmin, 320px)` | +| xlong | 27+ | `clamp(64px, 14vmin, 200px)` | + +排版： +- padding `6vmin 7vmin`, 让大字撑满边缘 +- `.lines` 块在屏幕内水平居中, 但块内每行 **left-aligned**（消除右侧空白同时保 indent 错位） +- line-height `1.05`, 行间 gap `0.15em` +- 内容垂直居中 +- 页脚：左下页码（`01 / 08`）+ 右下副标题, 13px monospace, opacity 0.5, uppercase, letter-spacing `0.12em` +- emphasis 页：背景换 `--acc-bg`, 字色换 `--acc-fg`, 行内 `.hl` 自动 `color: inherit`（emphasis 整页就是高亮） +- indent 档位：0 = `0`, 1 = `7vmin`, 2 = `16vmin` + +【输出契约】 + +输出**单文件 HTML**, 完全自包含, inline CSS + inline JS, 直接在 iframe sandbox 里能跑。骨架照下面这个模板, 把 `SLIDES` 数组、``、`{{SUBTITLE}}`、`body[data-theme]` 填好即可。**不要外链 CDN, 不要外部资源**。 + +SLIDES 数组每项形态： +```js +// 默认 theme 页 +{ lines: [ { indent: 0, chunks: [ {t: "前段"}, {t: "高亮词", hl: true}, {t: "后段"} ] } ] } +// emphasis 页（accent 底色, inline hl 自动忽略） +{ emphasis: true, lines: [ { indent: 0, chunks: [ {t: "AI"} ] } ] } +// 休止页 = emphasis + 空 lines +{ emphasis: true, lines: [] } +``` + +完整 HTML 骨架（agent 应**复用 CSS 与 JS 不要改**, 只填 SLIDES / title / subtitle / data-theme）： + +```html +<!DOCTYPE html> +<html lang="zh-CN"> +<head> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<title><!-- 文档标题 --> + + + +
+
01 / 01
+
+ + + +``` + +【调用流程 — agent 内部】 +1. 读用户内容（markdown / outline / 纯文本） +2. 按上面表格做 **outline → slides 数组** 映射, 不抽提不重写 +3. 推断 theme（标签 > 语气 > 默认 black） +4. 复用骨架, 替换 `` / `data-theme` / `<div id="subtitle">` 内容 / `SLIDES` 数组 +5. 一次性输出整个 HTML 文档 + +【品味准则】 +- outline 是真理, skill 是渲染器 +- 一级标题 = emphasis 封面（天然章节断点） +- 二级标题 = 独占 theme 页（给标题应有的重量） +- 列表错位靠 indent 0/1/2 体现嵌套深度 +- `**强调**` 自动 hl +- 拆页保持视觉一致性（同源块字号/缩进对齐） +- 左对齐不居中——这是 manifesto 美学的灵魂 + +【禁区】 +- 不抽 manifesto（不要"找钉子", 作者已经写好了 outline） +- 不写新句子、不重组顺序、不删内容 +- 不放图片 / 不放图标 / 不加过渡动画 +- 不在 emphasis 页用 inline hl（emphasis 整页就是高亮） +- 不混用多个 theme（一篇一个气质） +- 不擅自加 emphasis（只有一级标题 / 首末页 / 分隔符） + +【致谢】 +本 skill 改编自 [lijigang/ljg-skills · ljg-present](https://github.com/lijigang/ljg-skills/tree/md/skills/ljg-present)（v3.0.0）。原版输出多主题包含 cyber-hacker 模式与 PNG 投影; html-anything 版只保留 3 主题 + 单文件 HTML 输出。审美灵感继续指向 Felipe Franco / BIG STUDIOS 的 manifesto 字体海报。 diff --git a/next/src/lib/templates/skills/deck-ljg-present/example.html b/next/src/lib/templates/skills/deck-ljg-present/example.html new file mode 100644 index 0000000..940acab --- /dev/null +++ b/next/src/lib/templates/skills/deck-ljg-present/example.html @@ -0,0 +1,165 @@ +<!DOCTYPE html> +<html lang="zh-CN"> +<head> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<title>AI 革命 + + + +
+
01 / 01
+
HTML ANYTHING · SAMPLE
+ + + diff --git a/next/src/lib/templates/skills/deck-ljg-present/example.md b/next/src/lib/templates/skills/deck-ljg-present/example.md new file mode 100644 index 0000000..81b64bd --- /dev/null +++ b/next/src/lib/templates/skills/deck-ljg-present/example.md @@ -0,0 +1,19 @@ +# AI + +## 为什么说 AI 是一次革命？ + +人类革命：能力让渡的层级跃迁 + +- 「人之为人」重新定义 +- 社会组织重排 +- 知识工人的角色被换骨 + +## 三件该重做的事 + +- 写作的形式 +- 阅读的载体 +- 表达的速度 + +--- + +## 你只是一个观众吗？ diff --git a/next/src/lib/templates/skills/info-funnel/SKILL.md b/next/src/lib/templates/skills/info-funnel/SKILL.md new file mode 100644 index 0000000..0d1ec4b --- /dev/null +++ b/next/src/lib/templates/skills/info-funnel/SKILL.md @@ -0,0 +1,153 @@ +--- +name: info-funnel +zh_name: "漏斗信息图" +en_name: "Funnel Infographic" +emoji: "🪣" +description: "3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书" +category: data +scenario: marketing +aspect_hint: "1080×1920 (9:16) 竖屏" +tags: ["funnel", "conversion", "漏斗", "转化率", "marketing", "infographic", "social", "story"] +example_id: sample-info-funnel-saas +example_name: "漏斗信息图 · SaaS 注册转化" +example_format: markdown +example_tagline: "5 阶 · 米白 + Klein Blue · 大数字 + 转化率" +example_desc: "访客 → 注册 → 试用 → 付费 → 留存 5 步漏斗, 左侧绝对数右侧阶段转化率, 底部累计漏出洞察" +example_source_url: "https://github.com/JimLiu/baoyu-skills#baoyu-infographic" +example_source_label: "baoyu-skills · infographic/funnel" +--- + +【模板: 漏斗信息图（Funnel Infographic）】 + +【意图】把"从大到小"的转化 / 筛选 / 损耗过程一眼看清。**宽顶（输入）→ 窄底（结果）**, 每一阶有明确的"剩多少"和"漏多少"。典型场景：marketing funnel（曝光→点击→注册→付费）、招聘漏斗（投递→面试→录用→入职）、决策漏斗（候选→筛选→敲定）。 + +【数据形态】 + +输入应是有序的 **3-6 个阶段** + 每阶的绝对数值（人数 / 件数 / 金额）。可选每阶名称、说明、单位。若用户只给了百分比, 默认顶端 = 100% / 10000 人。 + +``` +阶段 1: 100,000 名访客 +阶段 2: 18,500 名注册（18.5%） +阶段 3: 6,200 名启动试用（33.5%） +阶段 4: 1,450 名转付费（23.4%） +阶段 5: 920 名 30 天留存（63.4%） +``` + +【布局规则】 + +| 区域 | 内容 | 占比 | +|---|---|---| +| **Hero 顶部**（约 15%） | 标题（≤ 20 字, 22-32px CJK）+ 副标题 / 时间窗口（灰色 14-16px） | 上 15% | +| **漏斗主体**（约 65%） | 3-6 个梯形 stage, 每段含：左大数字（48-72px tabular-nums）+ 右阶段名（18-22px bold）+ 右二行说明（13-15px 灰）+ 段间小箭头标转化率 | 中 65% | +| **底部 stat strip**（约 20%） | 累计转化率（最大字号 80-120px）+ 1-2 句洞察文本（漏出最严重的环节 / 关键提示） | 下 20% | + +【漏斗实现】 + +用 **CSS `clip-path: polygon()`** 切梯形, 不用 SVG： +- 每段 stage 是一个 `
`, 设固定 height（120-200px）+ 不同 clip-path +- clip-path 的左右收缩量 = 50% × `(1 - bottom_width_ratio)`, 累计每段比上一段窄 +- 每段背景色用同一 hue 不同 lightness, 顶端最饱和, 底端最深（accent → ink） +- 阶段之间有 4-8px gap, 让"流动"感更明显 +- 数字用 `font-variant-numeric: tabular-nums`, letter-spacing `-0.02em` + +【主题色 — 三选一, 不许混】 + +| 主题 | 适用 | 顶端 | 底端 | ink | paper | +|---|---|---|---|---|---| +| **klein-blue**（默认） | 商业 / SaaS / AI 产品 | `#4F7BD8` | `#002FA7` | `#0A0A0A` | `#FAFAF8` | +| **sunset-amber** | 零售 / 消费 / 餐饮 | `#FBB040` | `#C73E1D` | `#0A0A0A` | `#FFF8EC` | +| **deep-forest** | 招聘 / 教育 / 健康 | `#56A06E` | `#1F4D2E` | `#0A0A0A` | `#F4F0E6` | + +文字色： +- 漏斗内部数字与名字一律白色（`#FFFFFF`） +- 顶端 / 副标题 / 底部 strip 用 ink（`#0A0A0A`） +- 灰色辅助文字：`rgba(10,10,10,0.55)` + +【字体栈】 + +``` +"PingFang SC", "Heiti SC", "Helvetica Neue", "Arial", -apple-system, sans-serif +``` + +数字（tabular-nums 必须）： +``` +"SF Mono", "JetBrains Mono", "Menlo", "Roboto Mono", monospace +``` + +**禁用 Inter** —— 它太"AI 默认味"。优先 PingFang SC（CJK）+ Helvetica Neue（拉丁）。 + +【字号 / 间距锁死】 + +- 主标题：`clamp(28px, 2.8vw, 36px)` font-weight 800 letter-spacing `-0.02em` +- 副标题：`14-16px` font-weight 500 ink/0.6 +- 段内大数字：`clamp(48px, 5.5vw, 72px)` tabular-nums font-weight 900 white +- 段内阶段名：`20-22px` font-weight 700 white +- 段内说明：`13-15px` font-weight 400 white/0.85 +- 段间转化率徽章：`13px` font-weight 700, paper 底 ink 字, 圆角 6px, padding 2px 8px +- 底部累计大数字：`clamp(80px, 12vw, 120px)` font-weight 900 ink letter-spacing `-0.04em` +- 底部洞察：`16-18px` font-weight 500 ink/0.75 max-width 80% +- 整体 padding：`6vmin 7vmin` +- 段间 gap：`6px` +- Hero 与漏斗之间 gap：`32-48px` +- 漏斗与 strip 之间 gap：`48-64px` + +【输出契约】 + +输出**单文件 HTML**, inline CSS, **不写 JS**（静态图）。**不外链 CDN / 图标库 / 字体文件**。 +- 不放图标 / 不用 emoji 装饰（漏斗本身就是图） +- 不放图表（饼图 / 柱状图）—— 一篇一个漏斗 +- 不放公司 logo +- background 是 paper, 整张图占满 viewport +- 用 `aspect-ratio: 9 / 16` 锁定容器, 内容用 flex column 填充 + +【数据规范】 + +- 顶端数 = 100% 基准 +- 每阶转化率 = `当前段 / 上一段` +- 累计转化率 = `末段 / 顶段` +- 数字千分位用半角逗号（10,000 不要 10000） +- 百分比保留 1 位小数（18.5% 不要 18.50% 也不要 19%） +- 单位（人 / 件 / $）放在数字后, 13-15px 灰色 +- 编绝对数比写百分比更有说服力（"少了 81,500 人"比"漏掉 81.5%"更扎心） + +【洞察文本（底部 strip）】 + +写 **1-2 句**, 总长 ≤ 60 字： +- 第一句：累计数字 + 评价（"100,000 个访客中, 只剩 920 个真正留下"） +- 第二句（可选）：指出最大漏出环节（"最大流失在『访客→注册』, 81.5% 在第一步就走了"） + +禁止 AI 文案腔（"通过本图表可以看出"、"由此可见"、"综上所述"）。直接说事实。 + +【分阶段视觉宽度计算】 + +5 阶时, top_width=100%, bottom_width=30%（漏斗收口）。每段 bottom_width 比上一段窄 `(100-30)/5 = 14%`。例如： +- Stage 1: top 100% → bottom 86% +- Stage 2: top 86% → bottom 72% +- Stage 3: top 72% → bottom 58% +- Stage 4: top 58% → bottom 44% +- Stage 5: top 44% → bottom 30% + +clip-path 公式（每段独立 div）： +```css +clip-path: polygon( + {(100-top)/2}% 0%, + {100-(100-top)/2}% 0%, + {100-(100-bottom)/2}% 100%, + {(100-bottom)/2}% 100% +); +``` + +3-4 阶时收口可以放宽到 `40-45%`, 6 阶时压到 `22-25%`。 + +【禁区】 +- 不要在漏斗段内画图标 / 插画 +- 不要把数字放在段右、名字放在左（要左数字 / 右名字, 形成视觉重力） +- 不要让段高度跟数值挂钩（这是 funnel 不是 H-bar chart, 信息密度靠宽度收缩传达） +- 不要让漏斗居中悬浮——它该填满中段, 顶部贴 Hero, 底部贴 strip +- 不要超过 6 阶（信息过载, 拆成两张图） +- 不要 3D / 阴影 / 发光（platine 干净版式） +- 不要 Inter 字体（见上） +- 不要写"以下是漏斗"、"如下图所示"之类的 meta 文字 + +【致谢】 +本 skill 设计参考 [baoyu-skills · baoyu-infographic](https://github.com/JimLiu/baoyu-skills) 的 funnel layout 规范, 视觉补完 + HTML 实现由 html-anything 独立编写。 diff --git a/next/src/lib/templates/skills/info-funnel/example.html b/next/src/lib/templates/skills/info-funnel/example.html new file mode 100644 index 0000000..d0a0f54 --- /dev/null +++ b/next/src/lib/templates/skills/info-funnel/example.html @@ -0,0 +1,235 @@ + + + + + +SaaS 注册转化漏斗 · 2026 Q1 + + + +
+
+
FUNNEL · 2026 Q1 · 90D
+ +
+

SaaS 注册转化漏斗

+
B2B 协作工具 · 付费投放 + 自然搜索 · 90 天观测
+
+ +
+
+
100,000人
+
+
访客
+
付费投放 + 自然搜索登陆页
+
+
+
+
18,500人
+
+
注册 · 18.5%
+
留邮箱即算
+
+
+
+
6,200人
+
+
启动试用 · 33.5%
+
完成产品首跑
+
+
+
+
1,450人
+
+
转付费 · 23.4%
+
月付 $19 起
+
+
+
+
920人
+
+
30 天留存 · 63.4%
+
连续 30 天有效登录
+
+
+
+ + +
+
+ + diff --git a/next/src/lib/templates/skills/info-funnel/example.md b/next/src/lib/templates/skills/info-funnel/example.md new file mode 100644 index 0000000..f24b523 --- /dev/null +++ b/next/src/lib/templates/skills/info-funnel/example.md @@ -0,0 +1,20 @@ +# SaaS 注册转化漏斗 + +**时间窗口**：2026 Q1（90 天） +**产品**：B2B SaaS 协作工具 +**主题色**：klein-blue（默认） + +## 漏斗 5 阶 + +| 阶段 | 绝对人数 | 阶段转化率 | 说明 | +|---|---|---|---| +| 访客 | 100,000 | — | 来自付费投放 + 自然搜索 | +| 注册 | 18,500 | 18.5% | 留下邮箱即算注册 | +| 启动试用 | 6,200 | 33.5% | 完成产品首跑 | +| 转付费 | 1,450 | 23.4% | 月付 $19 起 | +| 30 天留存 | 920 | 63.4% | 连续 30 天有效登录 | + +## 底部洞察 + +- 累计转化率：920 / 100,000 = **0.92%** +- 最大流失在「访客 → 注册」，81.5% 的人在第一步就走了