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、模板、风格理解文件和截图脚本

模板示例

第一类：审美与情绪

模板	一句话
Editorial · 杂志风	杂志式标题、留白克制，看起来像经过排版的（其实也确实是）
Sunrise · 日光	暖色留白，给分析一点温度
Rain Notes · 雨天手记	纸感、安静、有点忧郁，适合写"我用了三个月的 XX"
Story Field · 故事集	故事视角，适合有图片的叙事，略显文艺（图片好不好看很影响效果）

杂志风 · Editorial	日光 · Sunrise
雨天手记 · Rain Notes	故事集 · Story Field

第二类：冷静分析

模板	一句话
Geek Report · 极客风格	终端纸面感。写技术观点不油腻
Pixel Report · 黑底闪光	暗色网格 + 像素 HUD，技术指标拆解
Dot Matrix · 点阵编辑风	点阵场，明暗变体，信号感拉满
Clean Review · 简约测评	很极简，很现代，很清晰，startup 做做 deck 很适合
Shiny Tiles · 镭射网格	黑底银色玻璃卡，冷光科技感。
Consulting Report · 咨询报告	图表和证据多的市场/行业研究。看起来很贵，其实不要钱

极客风格 · Geek Report	黑底闪光 · Pixel Report
点阵编辑风 · Dot Matrix	简约测评 · Clean Review
镭射网格 · Shiny Tiles	咨询报告 · Consulting Report

第三类：整点薯条！

模板	一句话
Y2K Manual · Y2K 手册	千禧网页、金属字、像素窗口。看到这个还在皱眉的，咱俩可能不是一代人
Studio Photo · 作品集	你图片多、图片足够酷的话用这个，照片少强行用就很尴尬

Y2K 手册 · Y2K Manual

作品集 · Studio Photo

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

小红书封面模板

根据以上 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。