Lieflat HTML Design

倾心打造的 HTML 视觉设计 Skill 合集💗 让你的 Agent 生成有设计感的 PPT、小红书长文竖图和小红书封面首图。

12 组 PPT 模板、11 组小红书模板，从严肃技术分析、融资路演、咨询报告，到品牌手册、杂志风、webgl 设计，甚至还有 Y2K, html 不再千篇一律！

包含内容

4 个可安装 skill：总入口、HTML deck、小红书长文、小红书封面

lieflat-html-deck：12 组 PPT / 演示视觉风格，每组都包含中文和英文版本

lieflat-xhs-longform：11 组小红书长文模板，默认中文，适合导出 3:5 竖图

lieflat-xhs-cover：11 组小红书封面模板，默认中文，适合导出 3:4 首图

每个生产 skill 都有自己的 assets/catalog.json、模板、风格理解文件和截图脚本

模板示例

第一类：审美与情绪

第二类：冷静分析

第三类：整点薯条！

每一套都中英双语。是的我知道这很卷。

小红书封面模板

根据以上 12 种风格，我又做了小红书排版！除了最后两种真的不适合作为小红书排版的风格，其他 10 种都根据小红书重新调试了，而且还加了一种 terminal 的风格。最后不只输出 html 文件，还会贴心地帮你截好图，拿着图直接发布！

小红书长文模板

同上，也是有 11 种风格，agent 会根据生成 html 帮你贴心生成1200×2000 PNG，直接发布！

安装

无痛安装

最简单的方式：把这个仓库链接丢给你的 Codex / Claude Code / Moxt / 其他本地 Agent，让它帮你安装。

帮我安装 Lieflat HTML Design：
https://github.com/larashero3-dotcom/lieflat-html-design

请把仓库里的 4 个 skills 安装到我的用户级 skills 目录，并验证这几个文件都存在：
- lieflat-html-design/SKILL.md
- lieflat-html-deck/SKILL.md
- lieflat-xhs-longform/SKILL.md
- lieflat-xhs-cover/SKILL.md

手动安装

如果你想自己动手，可以 clone 后一次性复制 4 个 skills。

安装到 Codex 用户级目录：

git clone https://github.com/larashero3-dotcom/lieflat-html-design
cd lieflat-html-design
mkdir -p ~/.codex/skills
cp -R skills/lieflat-html-design skills/lieflat-html-deck skills/lieflat-xhs-longform skills/lieflat-xhs-cover ~/.codex/skills/

安装到 Codex 项目级目录：

mkdir -p .agents/skills
cp -R skills/lieflat-html-design skills/lieflat-html-deck skills/lieflat-xhs-longform skills/lieflat-xhs-cover .agents/skills/

安装到 Claude Code 用户级目录：

mkdir -p ~/.claude/skills
cp -R skills/lieflat-html-design skills/lieflat-html-deck skills/lieflat-xhs-longform skills/lieflat-xhs-cover ~/.claude/skills/

安装到 Claude Code 项目级目录：

mkdir -p .claude/skills
cp -R skills/lieflat-html-design skills/lieflat-html-deck skills/lieflat-xhs-longform skills/lieflat-xhs-cover .claude/skills/

使用方式

安装后，这组 skills 也可以在 Moxt.ai 等支持读取项目文件或自定义技能的 Agent 工作区中使用。

可以这样要求你的 Agent：

用 lieflat-html-deck 做一份面向公司内部的中文战略演示。

用 lieflat-html-deck 做一份创作者品牌手册，请根据内容选择最合适的视觉风格。

用 lieflat-html-deck 做一份图片主导的产品作品集，我会提供可用图片。

用 lieflat-xhs-longform 做一张小红书长文图，风格用日光，内容是测评一个 AI 产品。

用 lieflat-xhs-cover 做一张小红书封面，风格用点阵编辑风，主题是 AI 系统观察。

如果还不确定要做哪种形态，可以直接说：

用 lieflat-html-design 帮我把这段内容做成适合发布的 HTML 视觉稿。

Agent 会先路由到对应 skill，再读取该 skill 的 assets/catalog.json 和 references/style-understanding.md，选择合适模板，复制到目标项目，重组内容、调整版式，并运行截图检查。

指定风格

如果已经有想要的视觉方向，可以直接在提示词里写中文风格名：

用点阵编辑风，做一份中文技术分析 PPT。
用咨询报告风格，做一份图表较多的 AI Agent 行业研究。
用故事集风格，做一份图片叙事型项目复盘。

可选演示模板包括：Y2K 手册、镭射网格、作品集、极客风格、黑底闪光、点阵编辑风、简约测评、杂志风、咨询报告、日光、雨天手记、故事集。

咨询报告风格只建议用于图表、表格、指标、市场/行业证据比较多的调研分析、竞品分析、投资人/管理层汇报。文字多、观点多但证据图表少的内容，优先考虑杂志风、简约测评、极客风格、雨天手记或日光。

小红书长文模板包括：雨天手记、杂志风、极客风格、终端风、点阵浅色、简约测评、黑底闪光、故事集、镭射网格、日光、咨询报告。

小红书封面模板包括：简约测评、杂志风、点阵编辑风、咨询报告、雨天手记、黑底闪光、日光、极客风格、终端风、故事集、镭射网格。

如果要在脚本里精确指定模板，再查看对应 skill 的 assets/catalog.json 里的模板 ID。

本地脚本

在对应 skill 目录中运行：

# 横向 HTML 演示
cd skills/lieflat-html-deck
node scripts/list-templates.mjs
node scripts/audit-languages.mjs
node scripts/capture-template-previews.mjs --lang zh --out ../../previews/zh
node scripts/capture-template-previews.mjs --lang en --out ../../previews/en
node scripts/create-design.mjs --template editorial --lang zh --out output/editorial-demo.html
node scripts/audit-assets.mjs output/editorial-demo.html
node scripts/capture-screenshots.mjs --url http://localhost:8765/output/editorial-demo.html --count 8 --out screenshots

# 小红书长文
cd ../lieflat-xhs-longform
node scripts/create-design.mjs --template xhs-sunrise --lang zh --out output/xhs-demo.html
node scripts/capture-xhs-card.mjs --html output/xhs-demo.html --out output/xhs-demo-card.png

# 小红书封面
cd ../lieflat-xhs-cover
node scripts/create-design.mjs --template xhs-cover-dot-matrix --lang zh --out output/xhs-cover-demo.html
node scripts/capture-xhs-card.mjs --html output/xhs-cover-demo.html --out output/xhs-cover-demo.png

如果要强制要求 lieflat-html-deck 中每个演示模板都有 en 和 zh 两个版本，运行：

node scripts/audit-languages.mjs --strict-bilingual

也可以在仓库根目录直接运行：

npm run list
npm run audit:languages
npm run preview:capture
npm run preview:capture:longform
npm run preview:capture:cover

许可证

MIT。