AI Agent 设计工作流 - 宝可梦主题奶茶快闪店

项目简介

这是一个交互式的AI Agent设计工作流展示系统，用于演示宝可梦主题奶茶快闪店的完整设计流程。系统通过可视化的流程图展示从需求输入到最终输出的全过程，包含模型选择、提示词生成、设计执行、质量检测等环节。

功能特点

• 🎯 交互式流程图：点击节点查看详细设计内容
• 🎨 四大设计板块：奶茶杯设计、空间设计、海报设计、周边帽子设计
• 🤖 AI质检环节：每个设计都经过AI质量检测
• 📋 完整文档输出：自动生成设计策划方案文档
• 🖼️ 图片预览：支持设计效果图的大图查看

快速开始

克隆仓库

git clone http://123.60.55.248:3000/Duguay/agent.git
cd agent

安装依赖

npm install

启动项目

npm run dev

项目将在 http://127.0.0.1:5175 启动，并自动打开浏览器展示页面。

部署方式

方式一：使用 npm 脚本（推荐）

1. 确保已安装 Node.js（版本 >= 14.0.0）
2. 运行以下命令：

# 安装依赖
npm install

# 启动开发服务器（自动打开浏览器）
npm run dev

# 或者只启动服务器（不自动打开浏览器）
npm run serve

方式二：使用 Python 简单服务器

如果您的系统已安装 Python，可以使用以下命令：

# Python 3
python3 -m http.server 5175 --bind 127.0.0.1

# Python 2
python -m SimpleHTTPServer 5175

然后在浏览器中访问：http://127.0.0.1:5175/linear-workflow.html

方式三：直接打开 HTML 文件

由于项目使用了本地资源文件，建议使用本地服务器运行。但如果只需要查看基本功能，也可以：

1. 直接在浏览器中打开 linear-workflow.html 文件
2. 注意：部分图片资源可能无法正常加载

项目结构

agent/
├── linear-workflow.html     # 主页面文件
├── package.json            # 项目配置文件
├── README.md              # 说明文档
├── .gitignore            # Git忽略文件
└── public/               # 公共资源目录
    ├── images/          # 图片资源
    │   ├── 1.杯子设计/
    │   ├── 2.空间设计/
    │   ├── 3.海报设计/
    │   ├── 4.帽子设计/
    │   └── 5.ai质检后的图片/
    └── 输出/            # 输出文件
        └── *.md        # 设计文档

技术栈

• React 18：使用 CDN 版本，无需构建工具
• Babel Standalone：实时编译 JSX
• 原生 CSS3：动画和样式
• HTML5：页面结构

使用说明

1. 总览模式：默认展示完整的工作流程图
2. 详细模式：点击任意节点进入详细视图
3. 查看设计图：在设计节点中点击图片可放大查看
4. 导航切换：使用顶部切换按钮在总览和详细视图间切换

系统要求

• 现代浏览器（Chrome、Firefox、Safari、Edge）
• Node.js >= 14.0.0（如使用 npm 方式）
• 屏幕分辨率建议 1366x768 或更高

常见问题

Q: 为什么图片无法加载？ A: 请确保使用本地服务器运行项目，而不是直接打开 HTML 文件。

Q: 如何修改运行端口？ A: 编辑 package.json 中的 scripts 部分，修改 -p 5175 为您需要的端口。

Q: 支持哪些浏览器？ A: 支持所有现代浏览器，建议使用 Chrome 或 Firefox 的最新版本。

开发者信息

• 作者：Duguay
• 版本：1.0.0
• 许可：MIT

更新日志

v1.0.0 (2024-08-24)

• 初始版本发布
• 实现完整的工作流展示
• 支持宝可梦主题设计内容
• 添加交互式节点导航
• 集成图片预览功能

联系方式

如有问题或建议，请提交 Issue 到： http://123.60.55.248:3000/Duguay/agent/issues

---

© 2024 Duguay. All rights reserved.