lieflat-html-design

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #machine-learning #rust #deep-learning #linux #kubernetes #vue #security #pytorch #ios #mcp

lieflat-html-design

(★ 77)

Agent-ready HTML design skill collection for decks and Xiaohongshu cards

lieflat-html-design 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

## 模板示例

### 第一类：审美与情绪

<table>
 <tr>
 <td width="50%"><img src="./previews/zh/editorial.png" alt="杂志风 Editorial 预览"> 杂志风 · Editorial</td>
 <td width="50%"><img src="./previews/zh/sunrise.png" alt="日光 Sunrise 预览"> 日光 · Sunrise</td>
 </tr>
 <tr>
 <td width="50%"><img src="./previews/zh/rain-notes.png" alt="雨天手记 Rain Notes 预览"> 雨天手记 · Rain Notes</td>
 <td width="50%"><img src="./previews/zh/story-field.png" alt="故事集 Story Field 预览"> 故事集 · Story Field</td>
 </tr>
</table>

### 第二类：冷静分析

<table>
 <tr>
 <td width="50%"><img src="./previews/zh/geek-report.png" alt="极客风格 Geek Report 预览"> 极客风格 · Geek Report</td>
 <td width="50%"><img src="./previews/zh/pixel-report.png" alt="黑底闪光 Pixel Report 预览"> 黑底闪光 · Pixel Report</td>
 </tr>
 <tr>
 <td width="50%"><img src="./previews/zh/dot-matrix-dark.png" alt="点阵编辑风 Dot Matrix 预览"> 点阵编辑风 · Dot Matrix</td>
 <td width="50%"><img src="./previews/zh/clean-review.png" alt="简约测评 Clean Review 预览"> 简约测评 · Clean Review</td>
 </tr>
 <tr>
 <td width="50%"><img src="./previews/zh/shiny-tiles.png" alt="镭射网格 Shiny Tiles 预览"> 镭射网格 · Shiny Tiles</td>
 <td width="50%"><img src="./previews/zh/consulting-report.png" alt="咨询报告 Consulting Report 预览"> 咨询报告 · Consulting Report</td>
 </tr>
</table>

### 第三类：整点薯条！

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

<table>
 <tr>
 <td width="50%"><img src="./previews/zh/y2k-brand.png" alt="Y2K 手册 Y2K Manual 预览"> Y2K 手册 · Y2K Manual</td>
 <td width="50%"><img src="./previews/zh/studio-photo.png" alt="作品集 Studio Photo 预览"> 作品集 · Studio Photo</td>
 </tr>
</table>

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

## 小红书封面模板

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

<table>
 <tr>
 <td width="25%"><img src="./previews/zh/xhs-cover-editorial.png" alt="小红书封面 杂志风 预览"> 杂志风</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-geek-report.png" alt="小红书封面 极客风格 预览"> 极客风格</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-consulting-report.png" alt="小红书封面 咨询报告 预览"> 咨询报告</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-sunrise.png" alt="小红书封面 日光 预览"> 日光</td>
 </tr>
 <tr>
 <td width="25%"><img src="./previews/zh/xhs-cover-clean-review.png" alt="小红书封面 简约测评 预览"> 简约测评</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-rain-notes.png" alt="小红书封面 雨天手记 预览"> 雨天手记</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-pixel-report.png" alt="小红书封面 黑底闪光 预览"> 黑底闪光</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-shiny-tiles.png" alt="小红书封面 镭射网格 预览"> 镭射网格</td>
 </tr>
 <tr>
 <td width="25%"><img src="./previews/zh/xhs-cover-dot-matrix.png" alt="小红书封面 点阵编辑风 预览"> 点阵编辑风</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-terminal.png" alt="小红书封面 终端风 预览"> 终端风</td>
 <td width="25%"><img src="./previews/zh/xhs-cover-story-field.png" alt="小红书封面 故事集 预览"> 故事集</td>
 <td width="25%"></td>
 </tr>
</table>

## 小红书长文模板

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

## 安装

### 无痛安装

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

```text
帮我安装 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 用户级目录：

```bash
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 项目级目录：

```bash
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 用户级目录：

```bash
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 项目级目录：

```bash
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：

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

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

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

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

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

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

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

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

## 指定风格

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

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

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

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

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

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

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

## 本地脚本

在对应 skill 目录中运行：

```bash
# 横向 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` 两个版本，运行：

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

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

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

## 许可证

MIT。

lieflat-html-design

lieflat-html-design 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

lieflat-html-design

lieflat-html-design 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README