AI 如何生成网页和 PPT？open-design 本地设计工具教程

搜 AI 如何生成网页和 PPT，open-design 的思路不是“让模型随便出图”，而是把 Codex、Claude Code 这类 coding agent 接进一个本地设计工作台。官方 README 把它定位成 open-source Claude Design alternative，可以做 web prototype、desktop/mobile prototype、dashboards、decks、images、video，再导出 HTML、PDF、PPTX、MP4 等文件。

open-design 怎么生成网页？

先把需求写成一个小网页任务，例如 landing page、产品介绍页或文章页。Open Design 的 Studio 会生成 index.html 这类文件，右侧可以切到 Preview 和 Code，看页面是否可用。先做一屏，不要一次让 Agent 写完整站点。封面、导航、首屏文案和按钮都对了，再继续补后面的区块。

• 写清页面类型、品牌调性、桌面或移动端比例。
• 指定可用素材，logo、截图、图表要保真嵌入。
• 预览后再改 prompt，不要直接改坏生成文件。

PPT 生成和网页有什么不同？

PPT 先看 slide arc。官方示例里的 pitch deck 是 7 页，左侧列 Cover、Problem、Solution、How it works 等结构，右侧预览封面。网页重交互和滚动节奏，PPT 重页数、比例和叙事顺序。让 Claude Code 或 Codex 先产出 1 页封面，再扩到 7 页，比一次塞满内容更少返工。

本地工具怎么验收？

Open Design 是 local-first 工具，适合想把设计文件留在本机和代码库里的开发者。开始前确认模型 API key、Agent MCP 配置、DESIGN.md 或 SKILL.md 规则都写清楚；密钥不要放进业务项目根目录。生成后看 Git Diff，只保留必要的 HTML、PPTX、PDF 或素材目录变化。

它适合做官网首屏、产品介绍、周报和方案演示；不适合完全不检查素材授权、排版和导出文件的人。先让它完成一页，再交代更多页面。

交付前检查什么？

1. 网页能在 Preview 打开，移动端不要横向溢出。
2. PPT 能翻页，标题、页码和图片比例不乱。
3. PDF 能打印预览，分页没有截断。
4. 发给同事前，先用一页小样验收。

不适合的情况也很明确：只想套模板、完全不看预览、或不能配置本地 Agent，就别把它当成一键成稿工具。它更像一套 AI 编程规范进入设计产物的工作台。