Aippt

Name: Aippt
Author: ceeon

ceeon/aippt2

10 installs
83 repo stars
Updated January 6, 2026
ceeon/aippt2

Turns article content into a finished slide deck by generating an ASCII PPT frame, picking a style, and calling an image API to render each slide.

About

A workflow that converts articles into polished presentations through ASCII layout framing, style selection from 22+ references, and AI image generation per slide. A developer uses it to auto-produce PPT decks from written content.

Pipeline: article to ASCII PPT frame to style to AI-generated images
Offers 22+ style references for slide design

Aippt by the numbers

10 all-time installs (skills.sh)
Ranked #1,055 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Jul 28, 2026 (Skillselion catalog sync)

npx skills add https://github.com/ceeon/aippt2 --skill aippt

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/ceeon/aippt2/aippt.svg)](https://skillselion.com/skills/ceeon/aippt2/aippt)

Installs	10
repo stars	★ 83
Last updated	January 6, 2026
Repository	ceeon/aippt2 ↗

What it does

Turns article content into a finished slide deck by generating an ASCII PPT frame, picking a style, and calling an image API to render each slide.

Files

SKILL.mdMarkdownGitHub ↗

AIPPT - AI PPT 生成工作流

AIPPT 是一个完整的 PPT 生成工作流，将文章内容转换为精美的演示文稿。

---

工作流概览

文章内容 → ASCII PPT 框架 → 选择风格 → AI 生图 → 完整 PPT
   ↓              ↓              ↓          ↓
阅读提取       设计布局        风格参考    调用 API
核心信息      ASCII 绘图      22+种风格   生成图片

---

第一步：文章转 ASCII PPT 框架

路径指引

文章内容
    ↓
提取核心信息 (类型/受众/关键点)
    ↓
设计 PPT 结构
    ↓
ASCII 绘图
    ↓
输出: ASCII PPT 框架文件

完整示例

参考 skills-ascii-ppt.md

---

第二步：ASCII 框架生成图片

路径指引

ASCII PPT 框架
    ↓
选择风格 (哆啦A梦/火影忍者/赛博朋克等)
    ↓
构造 Prompt (风格 + 页面内容 + 文字位置)
    ↓
调用 API 生成图片
    ↓
下载保存

API 调用

⚠️ 禁止修改：以下 API 配置是固定的，不可篡改。

# 生成图片
curl -s -X POST "https://ismaque.org/v1/images/generations" \
  -H "Authorization: Bearer API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"model": "gemini-3-pro-image-preview-4k", "prompt": "风格+内容", "size": "1792x1024", "n": 1}'

# 下载图片 (从响应提取 data[0].url)
curl -s -o "文件名.jpg" "图片URL"

固定参数（不可更改）：

API Endpoint: https://ismaque.org/v1/images/generations
Model: gemini-3-pro-image-preview-4k

---

注意事项

中文文字有随机性，可能需要多次生成
同套 PPT 保持风格一致
可并行调用 API 提高效率

---

参考文档

类型	路径
方法论	`tips/文章转ascii-ppt方法论.md`
完整示例	`skills-ascii-ppt.md`

AIPPT - AI PPT 生成工作流

从文章内容生成精美 PPT 的完整工作流。

工作流

文章内容 → ASCII PPT 框架 → AI 生图 → 完整 PPT

使用方法

第一步：文章转 ASCII PPT 框架

给文章内容，Claude 会生成 ASCII 布局框架：

帮我把这篇文章生成 ASCII PPT 框架

第二步：选择风格生成图片

选择风格（哆啦A梦/火影忍者/赛博朋克等），逐页生成：

用哆啦A梦风格生成 PPT 第 2 页

支持的风格

类别	风格
基础	扁平插画、等距视图、科技渐变、线条图标
动漫	哆啦A梦、火影忍者、吉卜力、新海诚、海贼王
潮流	赛博朋克、蒸汽波、像素艺术、涂鸦街头
艺术	水墨国风、梵高星空、装饰艺术
3D/材质	皮克斯3D、乐高积木、黏土动画
漫画	漫威漫画

文件说明

AIPPT/
├── SKILL.md                    # 主入口，工作流指引
├── README.md                   # 本文件
├── skills-ascii-ppt.md         # 完整示例
└── tips/
    └── 文章转ascii-ppt方法论.md  # 详细方法论

API 配置

生图使用 Gemini Image API，需配置 API Key：

1. 访问 ismaque.org/register 2. 获取 API Key 3. 调用时传入 Key

4K 高清化

将低分辨率图片增强为 4K 超清图片。

完整流程

1. 上传图片获取 URL

优先使用 PicGo：

curl -s -X POST "http://127.0.0.1:36677/upload" \
  -H "Content-Type: application/json" \
  -d '{"list":["/绝对路径/image.png"]}'

2. 调用 4K 模型生成

curl -s -X POST "https://ismaque.org/v1/images/generations" \
  -H "Authorization: Bearer API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "gemini-3-pro-image-preview-4k",
    "prompt": "图片URL 4K增强",
    "size": "3:4",
    "n": 1
  }'

3. 下载保存

从响应中提取 data[0].url，下载到本地：

curl -s -o "output_4k.png" "生成的图片URL"

尺寸选择

根据原图比例选择合适的 size：

原图比例	size 参数	输出分辨率
竖版（手机截图）	`3:4`	3584 × 4800
横版	`4:3`	4800 × 3584
正方形	`1:1`	4096 × 4096
宽屏	`16:9`	4800 × 2704

批量处理

可以并行处理多张图片： 1. 先批量上传所有图片到图床 2. 并行调用 API 生成 4K 版本 3. 批量下载结果

提示词技巧

简洁有效：4K增强
保持内容：4K超清增强，保持内容不变
如需修改文字，参考 chinese-text.md

中文文字处理技巧

AI 图像生成对中文文字的处理有局限性，以下技巧可提高准确率。

提示词技巧

技巧	示例	说明
明确指出具体文字	把「肥」字改成「爬」字	比"修正错别字"效果好
使用引号标注	将「又要肥楼了」改为「又要爬楼了」	清晰标注原文和目标
强调只改一处	只改这一个字，图片其他部分完全不动	避免整体被重绘
一次只改一处	不要同时要求修改多处文字	降低复杂度

注意事项

1. 多次尝试：同样的提示词可能需要 2-3 次才成功，AI 生成有随机性 2. 检查结果：每次生成后务必检查文字是否正确 3. 原图质量：原图文字越清晰，AI 越容易识别和保持 4. 简化指令：复杂的多处修改拆分成多次单独修改

图片上传（图生图必需）

本地图片需先上传到图床获取 URL，才能用于图生图。

图床对比

图床	有效期	稳定性	备注
freeimage.host	永久	高	推荐首选
litterbox	1小时	中	部分网络不可用
catbox	永久	中	部分网络不可用
sm.ms	永久	高	需要登录
imgbb	永久	高	需要注册获取 API Key

使用方式

1. 上传图片，获取返回的 URL 2. 将 URL 放在 prompt 开头，后面跟描述文字

示例：

https://iili.io/xxxxx.png 将这张图片进行4K增强，保持原有内容不变

PPT 生图方法论

基于 ASCII PPT 框架 + Gemini 生图的实践经验。

核心流程

ASCII 框架 → 提取文字+布局 → 构造 prompt → Gemini 生图

风格选择

风格	适用场景	prompt 关键词
扁平插画风	封面、痛点页、场景示意	`Flat design, clean vectors, soft pastel colors, minimal shadows, 2D style`
等距视图风	文件结构图、流程图	`Isometric 3D illustration, soft gradients, clean geometric shapes`
科技渐变风	封面、章节分隔页背景	`Abstract technology background, gradient, flowing lines, subtle glow effects`
卡通人物风	痛点表情、状态展示	`Cute cartoon character, chibi style, simple expressions, pastel colors`
线条图标风	步骤示意、功能对比	`Minimal line art icons, thin stroke, monochrome with accent color`

让文字正确的技巧

AI 生图文字容易出错，以下技巧可提高准确率：

1. 用引号包裹具体文字

❌ 写上标题和副标题
✅ Center large title text "Skills" in bold white font

2. 明确指定位置

❌ 文字在图中
✅ Center / below / bottom right corner / top left

3. 明确指定样式

❌ 大标题小标题
✅ bold white font / smaller white text / 48px

4. 完整示例

Center large title text "Skills" in bold white font,
subtitle below "像管理笔记一样管理提示词" in smaller white text,
bottom right corner small text "成峰 / 2025.12"

Prompt 模板

封面页 (cover)

Flat design presentation cover slide, clean minimalist vector style,
[背景描述] background with [装饰元素].
Center large title text "[主标题]" in bold white font,
subtitle below "[副标题]" in smaller white text,
bottom right corner small text "[署名]",
modern tech aesthetic, 16:9 ratio

章节分隔页 (section)

[风格] presentation section divider,
[背景色] gradient background,
large centered text "[章节号]" and "[章节标题]",
clean minimalist design, no other elements, 16:9 ratio

内容页配图 (content)

[风格] illustration, [主题描述],
[颜色方案] color palette,
no text, suitable for presentation slide,
clean background, 4:3 ratio

金句页 (quote)

[风格] presentation quote slide,
[背景描述] background,
centered text "[金句内容]" in elegant white font,
inspirational atmosphere, 16:9 ratio

注意事项

1. 中文文字有随机性 - 同样的 prompt 可能需要 2-3 次才正确 2. 复杂文字建议后期加 - 只让 AI 生成背景，文字用设计软件 3. 检查生成结果 - 每次都要核对文字是否正确 4. 保持风格统一 - 同一套 PPT 使用相同的风格关键词

案例参考

见 案例/ 文件夹。

文章转 ASCII PPT 方法论

将文章内容转换为 ASCII PPT 框架，为 AI 生图提供精确布局指导

---

核心流程

阅读文章 → 提取信息 → 设计结构 → ASCII 绘图 → 补充说明

---

第一步：阅读文章，提取核心信息

1.1 快速浏览，把握整体

文章类型：教程 / 产品介绍 / 观点论述 / 技术分享
目标受众：开发者 / 产品经理 / 普通用户
核心信息：作者想传递的1-3个关键点

1.2 标注关键段落

阅读时标记：

痛点/问题：用户遇到的困扰
解决方案：产品/方法的核心价值
优势/特点：3-5个关键卖点
章节：文章的自然分段

---

第二步：设计 PPT 结构

2.1 标准 PPT 模板（21页）

页码	类型	内容	用途
1	cover	封面	吸引注意力
2-3	content	痛点引入	引发共鸣
4-6	content	解决方案/优势	展示价值
7	section	章节分隔 01	结构清晰
8-10	content	判断标准/使用场景	实用信息
11	section	章节分隔 02	继续推进
12-14	content	核心概念/原理	深入讲解
15	section	章节分隔 03	保持节奏
16-18	content	实战案例/步骤	可操作性
19	section	章节分隔 04	收尾准备
20	content	总结	强化记忆
21	end	结束页	行动召唤

2.2 根据文章调整

短文章（<1500字）：10-15 页，减少章节分隔
长文章（>3000字）：25-30 页，增加案例和细节
教程类：增加步骤演示页
观点类：增加金句页

---

第三步：ASCII 绘图

3.1 基础画框

# 标准全屏框
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│                    内容区域                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

# 上下分割（标题+内容）
┌─────────────────────────────────────────────────────────────┐
│  标题区域                                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│                    内容区域                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

# 左右分割（图+文）
┌─────────────────────────────────────────────────────────────┐
│                   │                                         │
│   左侧（图片）    │      右侧（文字列表）                    │
│                   │                                         │
└─────────────────────────────────────────────────────────────┘

3.2 常用模板

封面页 (cover)

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│              [主标题]                                        │
│         [副标题/一句话描述]                                  │
│                                                             │
│                                            [署名/日期]     │
└─────────────────────────────────────────────────────────────┘

痛点引入 (content)

┌─────────────────────────────────────────────────────────────┐
│  [大标题]                                                    │
├───────────────────┬─────────────────────────────────────────┤
│                   │  ❌ [痛点1]                              │
│   [表情插图]      │  ❌ [痛点2]                              │
│                   │  ❌ [痛点3]                              │
│                   │                                         │
│                   │  [总结语/感叹]                           │
└───────────────────┴─────────────────────────────────────────┘

三大优势 (content)

┌─────────────────────────────────────────────────────────────┐
│  [标题]                                                    │
├───────────────────┬─────────────────────────────────────────┤
│                   │  ✅ [优势1]                              │
│   [对比图/流程图] │  ✅ [优势2]                              │
│                   │  ✅ [优势3]                              │
└───────────────────┴─────────────────────────────────────────┘

章节分隔页 (section)

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│              [章节号，如 01、02]                            │
│         [章节标题]                                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

金句页 (quote)

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│     [核心金句/定义，大字号]                                  │
│                                                             │
│                    [补充说明]                                │
│                                                             │
└─────────────────────────────────────────────────────────────┘

列表页 (content)

┌─────────────────────────────────────────────────────────────┐
│  [标题]                                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ✅ [项目1]        [简短说明]                               │
│  ✅ [项目2]        [简短说明]                               │
│  ✅ [项目3]        [简短说明]                               │
│  ❌ [不适合项1]    [简短说明]                               │
│  ❌ [不适合项2]    [简短说明]                               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

流程页 (content)

┌─────────────────────────────────────────────────────────────┐
│  [标题]                                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ① [步骤1]                                                  │
│         ↓                                                   │
│  ② [步骤2]                                                  │
│         ↓                                                   │
│  ③ [步骤3]                                                  │
│         ↓                                                   │
│  ④ [步骤4]                                                  │
│                                                             │
│         [总结数据/对比]                                      │
└─────────────────────────────────────────────────────────────┘

---

第四步：补充说明

4.1 配图建议

每页 ASCII 框架后，添加一行配图建议：

**配图建议**: 背景使用渐变色或科技感图案
**配图建议**: 左侧放置抓狂/无奈的表情插图
**配图建议**: 使用流程图样式，箭头用动画依次出现

4.2 设计建议

针对特殊页面，添加设计建议：

**设计建议**: 大字号章节号，背景使用醒目颜色
**设计建议**: 问题部分使用大字号强调
**设计建议**: 使用对比色区分适合/不适合

4.3 AI 生图提示词（可选）

如果需要直接生图，在最后添加 Prompt 模板：

---

## AI 生图提示词参考

### 封面背景

Abstract technology background with gradient colors (purple to blue), clean and modern style, suitable for presentation cover, 4:3 ratio


### 烦恼表情

Cartoon character looking frustrated and stressed, surrounded by floating documents and chat windows, simple flat design style

---

实战案例

案例 1：技术教程类文章

原文结构： 1. 介绍问题背景 2. 传统方案的痛点 3. 新方案介绍 4. 核心原理 5. 使用步骤 6. 实战案例 7. 总结

转换思路：

PPT1: 封面（技术标题 + 副标题）
PPT2-3: 痛点页（传统方案的问题）
PPT4-6: 新方案优势（对比展示）
PPT7: 章节"原理篇"
PPT8-10: 核心原理讲解
PPT11: 章节"实践篇"
PPT12-15: 使用步骤
PPT16-18: 实战案例
PPT19: 总结
PPT20: 结束页

案例 2：产品介绍类文章

原文结构： 1. 用户场景描述 2. 现有解决方案不足 3. 产品介绍 4. 核心功能 5. 使用场景 6. 成功案例

转换思路：

PPT1: 封面
PPT2: 场景引入（引发共鸣）
PPT3: 现有方案痛点
PPT4-6: 产品介绍 + 核心功能
PPT7: 章节"适用场景"
PPT8-10: 详细使用场景
PPT11: 章节"成功案例"
PPT12-15: 案例展示
PPT16: 总结页
PPT17: 结束页

---

统计信息（放在文末）

---

## 统计信息

| 模板类型 | 用途 | 数量 |
|---------|------|-----|
| cover | 封面页 | 1 |
| content | 正文页 | 13 |
| section | 章节分隔页 | 6 |
| quote | 金句页 | 2 |
| end | 结束页 | 1 |
| **总计** | | **21** |

---

注意事项

内容精简

一页一观点：每页只讲清楚一个核心信息
文字极简：PPT 上只放关键词和短句，不要大段文字
用图标：用 ✅❌→↓ 等符号替代文字说明

视觉节奏

章节分隔：每 3-5 页内容后加一个章节页
风格变化：封面、章节页、结束页用醒目设计
内容页：保持统一风格，避免视觉疲劳

ASCII 绘图技巧

对齐优先：使用等宽字体，确保所有线条对齐
适度留白：不要填满整个框架，留出视觉呼吸空间
符号统一：统一使用 │─┌┐└┘├┤ 等线条符号

---

快速模板

复制这个模板开始：

# [文章标题] - ASCII PPT 设计

---

## PPT 1: 封面页 (cover)

┌─────────────────────────────────────────────────────────────┐ │ │ │ [主标题] │ │ [副标题/一句话描述] │ │ │ │ [署名/日期] │ └─────────────────────────────────────────────────────────────┘


**配图建议**: 背景使用渐变色或科技感图案

---

## PPT 2: 痛点引入 (content)

┌─────────────────────────────────────────────────────────────┐ │ 每次都要面对的问题 │ ├───────────────────┬─────────────────────────────────────────┤ │ │ ❌ [痛点1] │ │ [烦恼表情图] │ ❌ [痛点2] │ │ │ ❌ [痛点3] │ └───────────────────┴─────────────────────────────────────────┘


**配图建议**: 左侧放置抓狂/烦恼的表情插图

---

（继续添加更多页面...）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gemini 图像生成 - 案例展示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 40px;
            font-size: 1.1em;
        }
        .section {
            margin-bottom: 60px;
        }
        .section-title {
            font-size: 1.8em;
            color: #333;
            border-left: 5px solid #667eea;
            padding-left: 15px;
            margin-bottom: 25px;
        }
        .style-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }
        .style-card {
            background: #f8f9fa;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }
        .style-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .style-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .style-name {
            padding: 15px;
            text-align: center;
            font-weight: 600;
            color: #333;
        }
        .ppt-section {
            margin-bottom: 50px;
        }
        .ppt-title {
            font-size: 1.3em;
            color: #555;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .ppt-title .icon {
            margin-right: 10px;
        }
        .ppt-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }
        .ppt-slide {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        .ppt-slide:hover {
            transform: scale(1.02);
        }
        .ppt-slide img {
            width: 100%;
            height: auto;
            display: block;
        }
        .ppt-slide-name {
            padding: 10px;
            text-align: center;
            font-size: 0.9em;
            color: #666;
            background: #f8f9fa;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            color: #888;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .modal.active {
            display: flex;
        }
        .modal-content {
            max-width: 90%;
            max-height: 90%;
            background: transparent;
            border-radius: 10px;
            position: relative;
        }
        .modal-content img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 10px;
        }
        .modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: #fff;
            font-size: 30px;
            cursor: pointer;
            background: none;
            border: none;
        }
        .tag {
            display: inline-block;
            background: #667eea;
            color: #fff;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.75em;
            margin-left: 10px;
        }
        .stats {
            text-align: center;
            margin-bottom: 40px;
            display: flex;
            justify-content: center;
            gap: 40px;
        }
        .stat-item {
            text-align: center;
        }
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #667eea;
        }
        .stat-label {
            color: #666;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 Gemini 图像生成案例库</h1>
        <p class="subtitle">精选风格参考 | PPT 实战案例 | 一键预览</p>

        <div class="stats">
            <div class="stat-item">
                <div class="stat-number">18</div>
                <div class="stat-label">风格参考</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">3</div>
                <div class="stat-label">PPT 案例</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">25</div>
                <div class="stat-label">幻灯片</div>
            </div>
        </div>

        <!-- 风格参考区 -->
        <div class="section">
            <h2 class="section-title">📚 风格参考图库</h2>
            <p style="color: #666; margin-bottom: 20px;">点击图片放大预览，可用于图生图参考</p>
            <div class="style-grid">
                <div class="style-card" onclick="openModal('乐高积木风格.jpg')">
                    <img src="乐高积木风格.jpg" alt="乐高积木风格">
                    <div class="style-name">乐高积木风格</div>
                </div>
                <div class="style-card" onclick="openModal('像素艺术风格.jpg')">
                    <img src="像素艺术风格.jpg" alt="像素艺术风格">
                    <div class="style-name">像素艺术风格</div>
                </div>
                <div class="style-card" onclick="openModal('卡通人物风.jpg')">
                    <img src="卡通人物风.jpg" alt="卡通人物风">
                    <div class="style-name">卡通人物风</div>
                </div>
                <div class="style-card" onclick="openModal('吉卜力风格.jpg')">
                    <img src="吉卜力风格.jpg" alt="吉卜力风格">
                    <div class="style-name">吉卜力风格</div>
                </div>
                <div class="style-card" onclick="openModal('哆啦A梦风格.jpg')">
                    <img src="哆啦A梦风格.jpg" alt="哆啦A梦风格">
                    <div class="style-name">哆啦A梦风格</div>
                </div>
                <div class="style-card" onclick="openModal('新海诚风格.jpg')">
                    <img src="新海诚风格.jpg" alt="新海诚风格">
                    <div class="style-name">新海诚风格</div>
                </div>
                <div class="style-card" onclick="openModal('梵高星空风格.jpg')">
                    <img src="梵高星空风格.jpg" alt="梵高星空风格">
                    <div class="style-name">梵高星空风格</div>
                </div>
                <div class="style-card" onclick="openModal('水墨国风.jpg')">
                    <img src="水墨国风.jpg" alt="水墨国风">
                    <div class="style-name">水墨国风</div>
                </div>
                <div class="style-card" onclick="openModal('浮世绘风格.jpg')">
                    <img src="浮世绘风格.jpg" alt="浮世绘风格">
                    <div class="style-name">浮世绘风格</div>
                </div>
                <div class="style-card" onclick="openModal('海贼王风格.jpg')">
                    <img src="海贼王风格.jpg" alt="海贼王风格">
                    <div class="style-name">海贼王风格</div>
                </div>
                <div class="style-card" onclick="openModal('涂鸦街头风格.jpg')">
                    <img src="涂鸦街头风格.jpg" alt="涂鸦街头风格">
                    <div class="style-name">涂鸦街头风格</div>
                </div>
                <div class="style-card" onclick="openModal('漫威漫画风格.jpg')">
                    <img src="漫威漫画风格.jpg" alt="漫威漫画风格">
                    <div class="style-name">漫威漫画风格</div>
                </div>
                <div class="style-card" onclick="openModal('火影忍者风格.jpg')">
                    <img src="火影忍者风格.jpg" alt="火影忍者风格">
                    <div class="style-name">火影忍者风格</div>
                </div>
                <div class="style-card" onclick="openModal('皮克斯3D风格.jpg')">
                    <img src="皮克斯3D风格.jpg" alt="皮克斯3D风格">
                    <div class="style-name">皮克斯3D风格</div>
                </div>
                <div class="style-card" onclick="openModal('蒸汽波风格.jpg')">
                    <img src="蒸汽波风格.jpg" alt="蒸汽波风格">
                    <div class="style-name">蒸汽波风格</div>
                </div>
                <div class="style-card" onclick="openModal('装饰艺术风格.jpg')">
                    <img src="装饰艺术风格.jpg" alt="装饰艺术风格">
                    <div class="style-name">装饰艺术风格</div>
                </div>
                <div class="style-card" onclick="openModal('赛博朋克风格.jpg')">
                    <img src="赛博朋克风格.jpg" alt="赛博朋克风格">
                    <div class="style-name">赛博朋克风格</div>
                </div>
                <div class="style-card" onclick="openModal('黏土动画风格.jpg')">
                    <img src="黏土动画风格.jpg" alt="黏土动画风格">
                    <div class="style-name">黏土动画风格</div>
                </div>
            </div>
        </div>

        <!-- PPT 案例区 -->
        <div class="section">
            <h2 class="section-title">📊 PPT 实战案例</h2>

            <div class="ppt-section">
                <h3 class="ppt-title">
                    <span class="icon">🤖</span>
                    哆啦A梦风格 PPT <span class="tag">16页</span>
                </h3>
                <div class="ppt-grid">
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-目录.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-目录.jpg" alt="目录">
                        <div class="ppt-slide-name">目录</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-对比.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-对比.jpg" alt="对比">
                        <div class="ppt-slide-name">对比</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-数据图表.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-数据图表.jpg" alt="数据图表">
                        <div class="ppt-slide-name">数据图表</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-时间轴.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-时间轴.jpg" alt="时间轴">
                        <div class="ppt-slide-name">时间轴</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-代码展示.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-代码展示.jpg" alt="代码展示">
                        <div class="ppt-slide-name">代码展示</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-案例卡片.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-案例卡片.jpg" alt="案例卡片">
                        <div class="ppt-slide-name">案例卡片</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-团队介绍.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-团队介绍.jpg" alt="团队介绍">
                        <div class="ppt-slide-name">团队介绍</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-联系方式.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-联系方式.jpg" alt="联系方式">
                        <div class="ppt-slide-name">联系方式</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-架构图.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-架构图.jpg" alt="架构图">
                        <div class="ppt-slide-name">架构图</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT-流程图.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT-流程图.jpg" alt="流程图">
                        <div class="ppt-slide-name">流程图</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT2-痛点引入.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT2-痛点引入.jpg" alt="痛点引入">
                        <div class="ppt-slide-name">痛点引入</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT3-三大优势.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT3-三大优势.jpg" alt="三大优势">
                        <div class="ppt-slide-name">三大优势</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT4-章节分隔.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT4-章节分隔.jpg" alt="章节分隔">
                        <div class="ppt-slide-name">章节分隔</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT5-判断标准.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT5-判断标准.jpg" alt="判断标准">
                        <div class="ppt-slide-name">判断标准</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-哆啦A梦/PPT6-适用场景.jpg')">
                        <img src="skills-ppt-哆啦A梦/PPT6-适用场景.jpg" alt="适用场景">
                        <div class="ppt-slide-name">适用场景</div>
                    </div>
                </div>
            </div>

            <div class="ppt-section">
                <h3 class="ppt-title">
                    <span class="icon">🌌</span>
                    梵高星空风格 PPT <span class="tag">5页</span>
                </h3>
                <div class="ppt-grid">
                    <div class="ppt-slide" onclick="openModal('skills-ppt-梵高星空/第1页-痛点引入.jpg')">
                        <img src="skills-ppt-梵高星空/第1页-痛点引入.jpg" alt="痛点引入">
                        <div class="ppt-slide-name">痛点引入</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-梵高星空/第2页-Skills三大优势.jpg')">
                        <img src="skills-ppt-梵高星空/第2页-Skills三大优势.jpg" alt="三大优势">
                        <div class="ppt-slide-name">三大优势</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-梵高星空/第3页-章节页.jpg')">
                        <img src="skills-ppt-梵高星空/第3页-章节页.jpg" alt="章节页">
                        <div class="ppt-slide-name">章节页</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-梵高星空/第4页-判断标准.jpg')">
                        <img src="skills-ppt-梵高星空/第4页-判断标准.jpg" alt="判断标准">
                        <div class="ppt-slide-name">判断标准</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-梵高星空/第5页-常见适用场景.jpg')">
                        <img src="skills-ppt-梵高星空/第5页-常见适用场景.jpg" alt="常见适用场景">
                        <div class="ppt-slide-name">常见适用场景</div>
                    </div>
                </div>
            </div>

            <div class="ppt-section">
                <h3 class="ppt-title">
                    <span class="icon">🍃</span>
                    火影忍者风格 PPT <span class="tag">5页</span>
                </h3>
                <div class="ppt-grid">
                    <div class="ppt-slide" onclick="openModal('skills-ppt-火影忍者/PPT2-痛点引入.jpg')">
                        <img src="skills-ppt-火影忍者/PPT2-痛点引入.jpg" alt="痛点引入">
                        <div class="ppt-slide-name">痛点引入</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-火影忍者/PPT3-三大优势.jpg')">
                        <img src="skills-ppt-火影忍者/PPT3-三大优势.jpg" alt="三大优势">
                        <div class="ppt-slide-name">三大优势</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-火影忍者/PPT4-章节分隔.jpg')">
                        <img src="skills-ppt-火影忍者/PPT4-章节分隔.jpg" alt="章节分隔">
                        <div class="ppt-slide-name">章节分隔</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-火影忍者/PPT5-判断标准.jpg')">
                        <img src="skills-ppt-火影忍者/PPT5-判断标准.jpg" alt="判断标准">
                        <div class="ppt-slide-name">判断标准</div>
                    </div>
                    <div class="ppt-slide" onclick="openModal('skills-ppt-火影忍者/PPT6-适用场景.jpg')">
                        <img src="skills-ppt-火影忍者/PPT6-适用场景.jpg" alt="适用场景">
                        <div class="ppt-slide-name">适用场景</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>💡 提示：点击图片可放大查看 | 使用风格参考图时，将图片 URL 放在 prompt 开头进行图生图</p>
            <p style="margin-top: 10px;">🎨 Powered by Gemini Image API | Skills 图像生成技能</p>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div class="modal" id="modal" onclick="closeModal(event)">
        <button class="modal-close" onclick="closeModal(event)">×</button>
        <div class="modal-content" onclick="event.stopPropagation()">
            <img id="modalImg" src="" alt="预览图">
        </div>
    </div>

    <script>
        function openModal(imagePath) {
            const modal = document.getElementById('modal');
            const modalImg = document.getElementById('modalImg');
            modalImg.src = imagePath;
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeModal(event) {
            if (event.target.id === 'modal' || event.target.classList.contains('modal-close')) {
                const modal = document.getElementById('modal');
                modal.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        }

        // ESC 键关闭模态框
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const modal = document.getElementById('modal');
                if (modal.classList.contains('active')) {
                    modal.classList.remove('active');
                    document.body.style.overflow = 'auto';
                }
            }
        });
    </script>
</body>
</html>

Related skills

Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k

Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665

Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665

Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665

Remotion RenderRender videos programmatically using React components and Remotion framework441k665

Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665

Generative Mediauibranding

About

Aippt by the numbers

Add your badge

What it does

Files

AIPPT - AI PPT 生成工作流

工作流概览

第一步：文章转 ASCII PPT 框架

路径指引

完整示例

第二步：ASCII 框架生成图片

路径指引

API 调用

注意事项

参考文档

API 密钥配置

使用步骤：

1. 复制此文件为 secrets.md

2. 将下方 <YOUR_API_KEY> 替换为你的真实 API Key

3. API Key 获取地址：https://ismaque.org/register?aff=npk7

AIPPT - AI PPT 生成工作流

工作流

使用方法

第一步：文章转 ASCII PPT 框架

第二步：选择风格生成图片

支持的风格

文件说明

API 配置

4K 高清化

完整流程

1. 上传图片获取 URL

2. 调用 4K 模型生成

3. 下载保存

尺寸选择

批量处理

提示词技巧

中文文字处理技巧

提示词技巧

推荐提示词模板

注意事项

图片上传（图生图必需）

推荐图床

freeimage.host（推荐，永久存储）

Litterbox（临时，1小时有效）

Catbox（永久）

图床对比

使用方式

PPT 生图方法论

核心流程

风格选择

让文字正确的技巧

1. 用引号包裹具体文字

2. 明确指定位置

3. 明确指定样式

4. 完整示例

Prompt 模板

封面页 (cover)

章节分隔页 (section)

内容页配图 (content)

金句页 (quote)

注意事项

案例参考

文章转 ASCII PPT 方法论

核心流程

第一步：阅读文章，提取核心信息

1.1 快速浏览，把握整体

1.2 标注关键段落

第二步：设计 PPT 结构

2.1 标准 PPT 模板（21页）

2.2 根据文章调整

第三步：ASCII 绘图

3.1 基础画框

3.2 常用模板

封面页 (cover)

痛点引入 (content)

三大优势 (content)

章节分隔页 (section)

金句页 (quote)

列表页 (content)

流程页 (content)