搭建你的第一个 Web 应用

为什么要亲手搭建，而不是用现成的？

Gamma、Beautiful.ai、Canva AI、秒出 PPT、WPS 灵犀…… 这些工具确实优秀。

但它们都有共同的问题：去水印要付费，模型只能用内置的，想接 Nanobanana Pro、GLM-Image 或自己微调的模型？没门。数据还得传到别人服务器，隐私没保障，提个定制需求更是遥遥无期。

用 Z Code 自己搭，15 分钟就能拥有一个完全属于你的、无限制的、可商业化的 AI 产品。

用 Z Code 搭建，你能得到什么？

• 流式输出 + 并发生成 — 边生成边显示，8 张图同时跑
• 自定义模型 — 接入任何你想用的模型：GLM、GPT、Claude、Gemini……你说了算
• 完全透明 — 每张图的 prompt 可见、可编辑、可优化
• 数据安全 — 本地处理，敏感信息不外泄
• 零限制 — 无水印、无付费墙、可商业化

Z Code 的 AI Agent 会帮你实现所有技术细节——流式解析、并发控制、全屏预览器。你只需要告诉它"我想要什么"。

接下来的 15 分钟，我们将一起用 Z Code 构建一个真正属于你的 AI PPT 生成器

你准备好了吗？让我们开始这段有趣的旅程。

15 分钟，3 步完成

这就是 Z Code 的能力。

传统开发中，一个带有流式输出、批量图片生成、专业预览器的完整产品，可能需要一个团队花费数周时间。而现在，你只需要 3 个提示词，Z Code 的 AI Agent 就能帮你：

• 自动搭建项目 — 从零初始化 Next.js 工程，配置完整依赖
• 生成上千行代码 — 前端组件、后端 API、业务逻辑一气呵成
• 完成复杂集成 — 流式输出、并发控制、文件导出全部就绪
• 打造专业界面 — 响应式设计、键盘快捷键、深色主题一应俱全

构建路线图

为什么选择这个项目

• 实用性强 — 这是一个真正能用的产品，不是教学演示
• 体验完整 — 涵盖前端、后端、AI 调用的全流程
• 成就感足 — 15 分钟后，你将拥有一个可以展示给朋友的作品

最终产品亮点

准备好了吗？让我们开始第一步。

第一步：搭建精美首页

预计用时 — 5 分钟

我们要实现什么

在这一步，我们要让 Z Code 帮我们搭建：

• 页面布局 — 创建导航栏组件、主体内容区、控制面板区域
• 主题输入组件 — 实现带占位符的大尺寸输入框，支持用户输入 PPT 主题
• 预设标签系统 — 创建可点击的场景标签，点击后自动填充到输入框
• 配置选择器 — 页数选择（6/8/10/12页）、文本模型选择、图片模型选择
• 路由跳转逻辑 — 实现 Start Forging 按钮的跳转，携带用户选择的参数
• 后端 API 接口 — 搭建文本生成和图片生成两个核心接口

推荐使用的模型

让我们开始

复制下面的提示词，发送给 Z Code。你可以点击"复制到 Z Code"按钮，一键搞定：

配置提示
在使用前，请将提示词中的 {BASE_URL} 和 {YOUR_API_KEY} 替换为实际值：

配置项	国内用户	国外用户
Base URL	https://open.bigmodel.cn/api/paas/v4	https://api.z.ai/v1
API Key	从智谱开放平台获取	从 Z.AI 获取

帮我做一个 AI PPT 生成器，Next.js 15 + TypeScript + Tailwind CSS。

首页 (src/app/page.tsx)

现代简约风格，浅色主题。包含：

1. 顶部导航栏，logo 写 "Z Code Slides"，右侧菜单：概览、功能、生成库、分享协作按钮
2. 大标题 "演示文稿，焕新而至"，副标题 "将你的创意，即刻化为专业演示"
3. 巨大圆角输入框（textarea），让用户输入 PPT 主题，右上角有"随机灵感"按钮
   有预设提示词按钮，两排布局，热门场景：
   - 第一排："规划"、"2026 全球科技趋势分析报告"、"Q4 季度营销复盘与规划"、"新能源解决方案路演"
   - 第二排："探索"、"ESG 可持续发展报告"、"跨境电商运营指南"、"团队协作效率提升"、"投资人路演"
4. 右侧控制面板：
   - 页数选择：6/8/10/12 页，格子按钮
   - 文本模型选择：GLM-4.7 / GLM-4.7-FlashX / GLM-4.7-Flash
   - 图片模型选择：GLM-Image
5. 蓝色"Start Forging"按钮，点击后跳转到 /generate 页面，
   URL 带参数 topic、pages、textModel、imageModel

API 路由 /api/chat (src/app/api/chat/route.ts)

调用智谱开放平台 API（国内）或 Z.AI API（国外）：
- 模型默认 glm-4.7-flash
- 支持流式输出 stream=true 时返回 SSE
- 转发 messages 到 {BASE_URL}/chat/completions
- Headers: Authorization Bearer {YOUR_API_KEY}

API 路由 /api/generate-image (src/app/api/generate-image/route.ts)

调用智谱图片生成模型：
- 模型默认 GLM-Image
- 请求体加 size: 1440x816（16:9 比例）
- 返回格式 data 数组包含 url 字段

发送后，刷新浏览器，首页就出现了！

第二步：让 AI 动起来

预计用时 — 7 分钟

这一步，我们要让 AI 真正动起来——输入主题，看着大纲一行行生成，再一键生成全部配图。

你会得到什么

完成这一步后，你的产品将拥有：

• 流式生成 — 大纲像打字一样逐行出现，体验非常流畅
• 批量配图 — 点一下「生成所有配图」，AI 同时处理多张图片
• 专业预览器 — 全屏查看每一页，随时调整提示词、重新生成

预览器的核心功能：

• AI 优化提示词 — 每张图的提示词可编辑，不满意随时调整
• 单图重新生成 — 点击「重新生成」，无需重跑整套
• 多格式导出 — PPT / PDF / 图片压缩包，一键下载

让我们继续

做生成页面 /generate (src/app/generate/GenerateContent.tsx)

核心功能

1. 从 URL searchParams 获取 topic, pages, textModel, imageModel
2. 页面加载时自动调用 /api/chat 生成 PPT 大纲

大纲生成

调用 /api/chat，stream: true，System Prompt 要求 AI：
- 输出 JSONL 格式，每行一个 JSON：
  page_number, title, content 数组, image_prompt
- 整套 PPT 风格统一，开头选择设计系统
- image_prompt 必须包含完整的文字内容描述

流式解析：
- 用 ReadableStream reader 读取
- 解析 SSE data 行
- 每解析完一个 JSON 行，添加一张卡片到 slides 数组
- UI 实时显示：页码徽章 + 标题（可编辑）+ 要点列表 + 图片描述

步骤指示器

顶部三步指示器：生成大纲 - 编辑内容 - 生成图片
当前步骤高亮，已完成步骤显示绿色勾

批量生成图片

新建 /api/generate-images 批量接口：
- 并发控制器，最多 3 并发
- 每个图片任务带重试（3 次），指数退避延迟
- 超时 120 秒
- 前端显示进度遮罩层："正在生成图片 x/y 张"

专业预览器

全屏弹窗（z-70），深色主题：
- 左侧：缩略图列表，16:9 比例
- 中间：大图预览，圆角阴影
- 右侧：编辑面板
  - 幻灯片信息、统计卡片
  - 图片描述 textarea（可编辑）
  - "AI 优化提示词"按钮
  - "重新生成图片"按钮
- 顶部工具栏：导出 PPT / PDF / 图片 按钮
- 底部快捷键提示：左右箭头切换，ESC 退出

导出 API

/api/export/ppt：用 pptxgenjs 生成 PPTX，图片作为全屏背景
/api/export/pdf：生成 PDF
/api/export/images：打包成 ZIP

这一步完成后，核心功能就全了。我们快到终点了！

第三步：让产品记住你

预计用时 — 3 分钟

为什么需要这个功能

想象一下：你花了十分钟生成了一份满意的 PPT，关掉浏览器去喝杯咖啡，回来发现……没了？

这太糟糕了。好产品要记住用户的心血：

• 作品库 — 下次打开，之前生成的作品都在
• 断点续作 — 点开就能继续编辑、导出

最后一步

复制下面的提示词发送给 Z Code，它会自动帮你实现：

加历史记录功能。

src/lib/historyStore.ts

接口 GenerationRecord：
- id: string (ppt_时间戳_随机字符)
- topic, createdAt, pageCount, textModel, imageModel
- slides 数组: page_number, title, content 数组, image_prompt, generated_image
- coverImage: 第一张图作为封面
- status: completed 或 partial

函数：
- getHistory(): 从 localStorage 读取，按时间倒序
- saveRecord(record): 保存时过滤掉 base64 图片，防止超出配额
- deleteRecord(id)
- formatDate(dateStr): 刚刚 / x分钟前 / x小时前 / x天前

首页展示

在首页底部加"生成库"区域：
- 标题 + 图标 + 记录数
- 网格卡片（最多显示 6 个）：封面图 + 状态标签 + 页数 + 主题 + 时间
- 查看按钮：跳转到 /generate 并恢复历史记录
- 删除按钮：确认后删除

生成完成后保存

在 generateAllImages 完成后调用 saveToHistory(updatedSlides)

🎉 太棒了，你做到了！

说真的，你刚才做了一件很厉害的事。

回顾一下这段旅程——用 3 个提示词，你从零构建了一个完整的 AI 产品：

15 分钟，一个真实可用的 AI 产品诞生了！

你构建了一款优秀实用的 AI 产品

这不是一个简单的 Demo——你刚才构建的是一款真正有价值的 AI 应用：

• 文本模型 + 图像模型深度融合 — 大纲由 AI 撰写，配图由 AI 生成，从创意到成品一气呵成
• 全程可编辑、可调整 — 生成的每一页都可以修改，提示词随时调整，不满意就重新生成
• 完整的产品体验 — 实时预览、多格式导出、作品持久化，用户想要的功能一个不少

这就是 AI 产品该有的样子：不是一次性的工具，而是一个可以反复使用、持续迭代的完整应用。

你证明了什么

很多人以为构建一个 AI 产品需要大团队、长周期、高成本。但你刚才用 15 分钟证明了：

• 一个人 + Z Code，就能完成原本需要一个团队做几周的工作
• 用自然语言描述需求，AI Agent 就能理解并实现
• 复杂的技术细节——流式解析、并发控制、文件导出——全部自动搞定

这不是运气，这是你踏出的第一步。

继续改进的方向

这个 PPT 生成器已经很棒了，但你还可以让它更强大：

试一试：告诉 Z Code「给这个项目加一个深色模式切换按钮」，看看它会怎么做。

现在，轮到你了

你已经证明了自己能做到。接下来：

• 继续打磨这个项目 — 加点新功能，改个样式，让它真正成为你的作品
• 用 Z Code 验证你的想法 — 那个一直想做的 Side Project？15 分钟就能看到雏形
• 探索更多可能 — MCP 服务、多 Agent 协作、复杂工作流……Z Code 还有很多能力等你解锁

别犹豫了——打开 Z Code，实现你的下一个想法。

你的下一个作品，正在等你创造。

获取完整源代码

想要深入研究这个项目的每一行代码？我们提供了完整的源代码供你下载学习。

继续探索