Prompt 工作流 - AI 提示词工作流工具

English | 简体中文

一个强大的 AI 提示词工作流管理工具，支持创建、编辑、运行多个 Prompt 工作流，集成 OpenAI API，支持变量替换、上下文传递、结果导出等功能。

特性

• 🚀 纯前端应用 - 无需后端服务器，直接在浏览器中运行
• 🔄 工作流管理 - 创建、编辑、删除、重命名多个工作流
• 📝 变量系统 - 支持在 Prompt 中使用 {{变量名}} 进行替换
• ⚡ 链式执行 - 支持将上一步输出作为下一步的上下文
• 💾 数据持久化 - 所有配置和工作流自动保存到浏览器本地存储
• 📤 导入/导出 - 支持工作流配置和运行结果的导入导出
• 🎯 实时流式输出 - 支持 OpenAI API 流式响应，实时显示生成内容
• 📊 多种导出格式 - 支持 JSON、Markdown、CSV 格式导出运行结果
• 🎨 Markdown 渲染 - 支持在渲染和原文之间切换
• 📱 响应式设计 - 完美支持桌面和移动设备

快速开始

1. 直接打开

将项目文件下载到本地，直接用浏览器打开 index.html 文件即可使用。

2. 使用 Web 服务器

# 使用 Python 内置服务器
python3 -m http.server 8000

# 或使用 Node.js 的 http-server
npx http-server -p 8000

# 然后访问 http://localhost:8000

# 或直接在浏览器中打开项目目录，选择 index.html 文件

3. 配置 API

1. 点击顶部导航栏的 ⚙️ 设置 标签
2. 输入你的 Base URL（默认：https://api.openai.com/v1）
3. 输入你的 API Key
4. 点击 🔄 刷新 按钮获取可用模型列表
5. 选择要使用的模型（如 gpt-4o-mini）
6. 配置会自动保存到浏览器本地存储

使用说明

创建工作流

1. 在 ✏️ 编辑 标签中，点击 ➕ 新建 按钮
2. 输入工作流名称
3. 工作流会自动创建并切换到新建的工作流

管理变量

1. 在工作流的 Variables 区域，点击 ➕ 新增变量
2. 输入变量名和值（如：name: 张三）
3. 在 Prompt 中使用 {{name}} 引用变量
4. 变量会在运行时自动替换

添加 Prompts

1. 在 Prompts 区域点击 ➕ 新增 按钮
2. 输入你的 Prompt 内容
3. 可以使用 上移、下移 调整顺序
4. 可以使用 删除 按钮移除不需要的 Prompt

运行工作流

1. 点击 ▶️ 运行全部 按钮（或切换到 ▶️ 运行 标签）
2. Prompts 会按顺序执行
3. 如果启用了 将上一步输出作为上下文，每一步的输出会传递给下一步
4. 实时查看运行结果和统计信息

导出结果

运行完成后，可以导出结果：

• JSON - 包含完整的运行数据和配置
• Markdown - 适合文档和分享
• CSV - 适合数据分析

工作流管理

• 导出工作流 - 将当前工作流的配置（Prompts + 变量）导出为 JSON 文件
• 导入工作流 - 从 JSON 文件导入工作流配置
• 重命名 - 修改工作流名称
• 删除 - 删除当前工作流（至少保留一个）

配置说明

API 设置

参数	说明	默认值
Base URL	OpenAI API 的基础 URL	https://api.openai.com/v1
API Key	你的 OpenAI API 密钥	无
Model	使用的模型	gpt-4o-mini
Temperature	生成文本的随机性（0-2）	1
Max Tokens	最大生成 token 数	100000
高级参数	额外的 JSON 参数（如 {"top_p":1}）	{}

运行选项

• 将上一步输出作为上下文 - 启用后，每个 Prompt 的输出会作为下一个 Prompt 的上下文传递，形成链式对话

快捷操作

• 📋 折叠/📖 显示 - 折叠或展开所有运行结果
• ⛶ 全屏 - 切换全屏模式
• 🗑️ 清屏 - 清空运行输出
• ⏹️ 停止 - 中止当前运行
• 📄 原文/</> 渲染 - 切换 Markdown 渲染视图
• 📋 复制 - 复制单个输出结果

数据安全

• ✅ 所有数据存储在浏览器本地（localStorage）
• ✅ 不上传到任何服务器
• ✅ API Key 仅用于直接调用 OpenAI API
• ⚠️ 清除浏览器数据会删除所有配置和工作流

浏览器兼容性

• ✅ Chrome/Edge (推荐)
• ✅ Firefox
• ✅ Safari
• ⚠️ 需要启用 JavaScript

常见问题

Q: 如何备份我的工作流？

A: 点击 💾 导出 按钮导出当前工作流为 JSON 文件。需要恢复时，点击 📥 导入 按钮选择该文件。

Q: 支持哪些 OpenAI API 兼容服务？

A: 支持所有符合 OpenAI API 规范的服务，只需修改 Base URL 即可，如：

• OpenAI 官方 API
• Azure OpenAI Service
• 其他兼容服务（如 LocalAI、FastChat 等）

Q: 为什么点击刷新模型没有反应？

A: 请确保已正确配置 Base URL 和 API Key，并检查网络连接和 API Key 权限。

Q: 如何重置所有配置？

A: 打开浏览器开发者工具（F12），在 Console 中执行：

localStorage.clear()
location.reload()

Q: 变量语法是什么？

A: 使用双花括号 {{变量名}}，例如：

变量设置：name = 张三
Prompt 中使用：你好，我是{{name}}
实际运行时：你好，我是张三

技术栈

• 纯 HTML5 + CSS3 + ES6+ JavaScript
• OpenAI JavaScript SDK (通过 CDN)
• markdown-it (Markdown 渲染)

项目结构

WebPromptWorkflow/
├── index.html      # 主应用文件（包含所有 HTML、CSS、JavaScript）
├── icon.svg        # 应用图标
└── README.md       # 项目说明文档

开发

本地开发

项目是单文件应用，直接编辑 index.html 即可。

自定义样式

所有样式都在 <style> 标签中，可根据需要修改 CSS 变量：

:root {
  --bg: #0f1117;          /* 背景色 */
  --fg: #e6edf3;          /* 前景色 */
  --accent: #5b9cff;      /* 强调色 */
  --border: #223041;      /* 边框色 */
  /* ... 更多变量 */
}

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

相关链接

• GitHub 仓库
• OpenAI API 文档

---

© 2025 Prompt 工作流 · 本地运行 · 数据隐私安全