소스 정보
- 저장소
- nexu-io/html-anything
- 최근 소스 활동
- 2026년 7월 3일 02:54
- 감지된 SKILL.md 언어
- 중국어
- 스타
- 8,339
- 포크
- 815
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/nexu-io/html-anything --skill deck-ljg-present명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 大字海报。
【铁律 — 全部违反必须重做】
【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) |
排版：
6vmin 7vmin, 让大字撑满边缘.lines 块在屏幕内水平居中, 但块内每行 left-aligned（消除右侧空白同时保 indent 错位）1.05, 行间 gap 0.15em01 / 08）+ 右下副标题, 13px monospace, opacity 0.5, uppercase, letter-spacing 0.12em--acc-bg, 字色换 --acc-fg, 行内 .hl 自动 color: inherit（emphasis 整页就是高亮）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 {
position: fixed; bottom: 2.5vmin;
font-family: "Menlo", "Monaco", monospace;
font-size: 13px; font-weight: 400; letter-spacing: 0.12em;
user-select: none; z-index: 10; text-transform: uppercase;
opacity: 0.5; color: var(--fg);
}
.pager { left: 3vmin; }
.subtitle { right: 3vmin; }
body[data-current="emphasis"] .pager,
body[data-current="emphasis"] .subtitle { color: var(--acc-fg); }
</style>
</head>
<body data-theme="red"><!-- black|red|yellow -->
<div class="stage" id="stage"></div>
<div class="pager" id="pager">01 / 01</div>
<div class="subtitle" id="subtitle"><!-- 副标题 / 品牌, 可空 --></div>
<script>
const SLIDES = [ /* 填入按 outline 映射出的 slides 数组 */ ];
const stage = document.getElementById('stage');
const pager = document.getElementById('pager');
const body = document.body;
function lineCharLen(chunks) {
const CJK = /[ -〿㐀-䶿一-鿿豈--]/;
return chunks.reduce((acc, c) => {
let len = 0;
for (const ch of (c.t || '')) len += CJK.test(ch) ? 1.8 : 1;
return acc + len;
}, 0);
}
function maxLineLen(lines) { return lines && lines.length ? Math.max(...lines.map(l => lineCharLen(l.chunks || []))) : 0; }
function lengthTier() {
adj = maxLen + .(, lineCount - ) * ;
(adj <= ) ;
(adj <= ) ;
(adj <= ) ;
(adj <= ) ;
;
}
() {
(s == ? : s)
.(, ).(, )
.(, ).(, ).(, );
}
.( {
el = .();
el. = ;
(s.) el.(, );
(s. && s..) {
el.(, ((s.), s..));
linesEl = .();
linesEl. = ;
s..( {
lineEl = .();
lineEl. = ;
lineEl.(, (line. || ));
lineEl. = (line. || []).( {
t = (c.);
c. ? + t + : t;
}).();
linesEl.(lineEl);
});
el.(linesEl);
}
stage.(el);
});
slides = stage.();
idx = ;
() {
(i < ) i = ; (i >= slides.) i = slides. - ;
slides[idx]..();
idx = i;
slides[idx]..();
pager. = (idx + ).(, ) + + (slides.).(, );
body.(, slides[idx].() === ? : );
}
() { (idx + ); }
() { (idx - ); }
.(, {
(e.) {
: : : : : e.(); (); ;
: : : e.(); (); ;
: e.(); (); ;
: e.(); (slides. - ); ;
: : e.(); . ? .?.() : ..?.(); ;
}
});
touchX = ;
.(, { touchX = e.[].; });
.(, {
(touchX == ) ;
dx = e.[]. - touchX;
(dx < -) (); (dx > ) ();
touchX = ;
});
.(, {
(e..()) ;
mid = . / ;
(e. > mid) (); ();
});
();
</script>
</body>
</html>
【调用流程 — agent 内部】
<title> / data-theme / <div id="subtitle"> 内容 / SLIDES 数组【品味准则】
**强调** 自动 hl【禁区】
【致谢】 本 skill 改编自 lijigang/ljg-skills · ljg-present（v3.0.0）。原版输出多主题包含 cyber-hacker 模式与 PNG 投影; html-anything 版只保留 3 主题 + 单文件 HTML 输出。审美灵感继续指向 Felipe Franco / BIG STUDIOS 的 manifesto 字体海报。