Skill
Content
Skill
/deck-ljg-present
把 outline 1:1 铸成色块大字宣言 deck, 原文不动只做美化。三档主题 black / red / yellow
Install
$ npx -y skills add nexu-io/html-anything --skill deck-ljg-present --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/deck-ljg-present
Context preview
The summary Claude sees to decide when to auto-load this skill.
把 outline 1:1 铸成色块大字宣言 deck, 原文不动只做美化。三档主题 black / red / yellow
SKILL.md
deck-ljg-present.SKILL.mdname: 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` 数组、`<title>`、`{{SUBTITLE}}`、`body[data-theme]` 填好即可。**不要外链 CDN, 不要外部资源**。
SLIDES 数组每项形态：
// 默认 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）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!-- 文档标题 --></title>
<style>
:root {
--c-black: #1A1A1A; --c-red: #E63956; --c-yellow: #FFD400;
--c-white: #FFFFFF; --c-gold: #FFE082;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%;
font-family: "Helvetica Neue", "Arial Black", "Inter", "PingFang SC", "Heiti SC", "STHeiti", -apple-system, sans-serif;
font-weight: 900; overflow: hidden;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.05em;
}
body[data-theme="black"] { --bg: var(--c-black); --fg: var(--c-white); --acc-bg: var(--c-red); --acc-fg: var(--c-white); --hl: var(--c-red); }
body[data-theme="red"] { --bg: var(--c-red); --fg: var(--c-white); --acc-bg: var(--c-black); --acc-fg: var(--c-white); --hl: var(--c-gold); }
body[data-theme="yellow"] { --bg: var(--c-yellow); --fg: var(--c-black); --acc-bg: var(--c-black); --acc-fg: var(--c-white); --hl: var(--c-red); }
body { background: var(--bg); }
.stage { position: fixed; inset: 0; }
.slide {
position: absolute; inset: 0; display: none;
flex-direction: column; justify-content: center; align-items: center;
padding: 6vmin 7vmin;
background: var(--bg); color: var(--fg);
}
.slide.active { display: flex; }
.slide[data-emphasis="true"] { background: var(--acc-bg); color: var(--acc-fg); }
.slide .hl { color: var(--hl); }
.slide[data-emphasis="true"] .hl { color: inherit; }
.lines { display: flex; flex-direction: column; gap: 0.15em; line-height: 1.05; max-width: 100%; align-items: flex-start; }
.line { white-space: nowrap; text-align: left; }
.line[data-indent="0"] { padding-left: 0; }
.line[data-indent="1"] { padding-left: 7vmin; }
.line[data-indent="2"] { padding-left: 16vmin; }
.slide[data-len="single"] .lines { font-size: clamp(320px, 80vmin, 1100px); }
.slide[data-len="short"] .lines { font-size: clamp(240px, 55vmin, 780px); }
.slide[data-len="medium"] .lines { font-size: clamp(150px, 35vmin, 480px); }
.slide[data-len="long"] .lines { font-size: clamp(100px, 22vmin, 320px); }
.slide[data-len="xlong"] .lines { font-size: clamp(64px, 14vmin, 200px); }
.pager, .subtitle {
positRead more
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` 数组、`<title>`、`{{SUBTITLE}}`、`body[data-theme]` 填好即可。**不要外链 CDN, 不要外部资源**。
SLIDES 数组每项形态：
// 默认 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）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!-- 文档标题 --></title>
<style>
:root {
--c-black: #1A1A1A; --c-red: #E63956; --c-yellow: #FFD400;
--c-white: #FFFFFF; --c-gold: #FFE082;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%;
font-family: "Helvetica Neue", "Arial Black", "Inter", "PingFang SC", "Heiti SC", "STHeiti", -apple-system, sans-serif;
font-weight: 900; overflow: hidden;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.05em;
}
body[data-theme="black"] { --bg: var(--c-black); --fg: var(--c-white); --acc-bg: var(--c-red); --acc-fg: var(--c-white); --hl: var(--c-red); }
body[data-theme="red"] { --bg: var(--c-red); --fg: var(--c-white); --acc-bg: var(--c-black); --acc-fg: var(--c-white); --hl: var(--c-gold); }
body[data-theme="yellow"] { --bg: var(--c-yellow); --fg: var(--c-black); --acc-bg: var(--c-black); --acc-fg: var(--c-white); --hl: var(--c-red); }
body { background: var(--bg); }
.stage { position: fixed; inset: 0; }
.slide {
position: absolute; inset: 0; display: none;
flex-direction: column; justify-content: center; align-items: center;
padding: 6vmin 7vmin;
background: var(--bg); color: var(--fg);
}
.slide.active { display: flex; }
.slide[data-emphasis="true"] { background: var(--acc-bg); color: var(--acc-fg); }
.slide .hl { color: var(--hl); }
.slide[data-emphasis="true"] .hl { color: inherit; }
.lines { display: flex; flex-direction: column; gap: 0.15em; line-height: 1.05; max-width: 100%; align-items: flex-start; }
.line { white-space: nowrap; text-align: left; }
.line[data-indent="0"] { padding-left: 0; }
.line[data-indent="1"] { padding-left: 7vmin; }
.line[data-indent="2"] { padding-left: 16vmin; }
.slide[data-len="single"] .lines { font-size: clamp(320px, 80vmin, 1100px); }
.slide[data-len="short"] .lines { font-size: clamp(240px, 55vmin, 780px); }
.slide[data-len="medium"] .lines { font-size: clamp(150px, 35vmin, 480px); }
.slide[data-len="long"] .lines { font-size: clamp(100px, 22vmin, 320px); }
.slide[data-len="xlong"] .lines { font-size: clamp(64px, 14vmin, 200px); }
.pager, .subtitle {
posit Ships withhtml-anything
From the team behind Open Design — 40k★ · 200+ contributors, production-grade and iterating faster. html-anything is the focused agent-era HTML editor; if it clicks for you, Open Design is where the same team ships at scale.
Get the whole plugin
Stats
8,827
Stars
857
Forks
Active
Maintenance
HTML
Language
Apache-2.0
License
2d ago
Last commit
4mo ago
Created
Repo: nexu-io/html-anything
Other skills on html-anything.
Skill
article-sketchnote-edi…
把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
@nexu-ioView SkillSkill
Skill
Skill