WAN 2.2 - BRKN AI Prompt Generator

由 NUVoize 开发的 WAN 2.2 - BRKN AI Prompt Generator 是一个基于 React 与 Google Gemini AI 构建的开源提示生成工具，专注于帮助用户快速生成高质量、多格式适用于WAN 2.2模型的提示词（prompt），适用于图像、视频、结构化数据等多种场景。

它不是简单的文本拼接器，而是一个交互式、可扩展、面向实际应用的提示工程辅助系统。

核心功能：不止是“写提示”

WAN 2.2 的设计目标是降低使用 AI 生成内容时的提示编写门槛，同时保留足够的灵活性以满足进阶需求。主要功能包括：

✅ 多格式提示生成

支持五类常用内容类型的提示生成：

• 🖼️ 图像提示：为文生图模型生成详细描述
• 🎬 视频提示：构建动态画面、镜头语言和节奏建议
• 🎞️ 拍板场景：输出电影级场景描写，适合剧本创作或分镜设计
• 📄 JSON 数据：生成结构化数据模板，可用于 mock 数据或 API 测试
• 💡 自定义创意：自由设定主题，获得通用创意建议

所有提示均由 Gemini AI 驱动，确保语义合理、表达自然。

✅ 实时响应 + 加载反馈

输入关键词后，系统即时调用 AI 接口并展示加载状态，生成过程透明流畅，用户体验更佳。

✅ 可配置 AI 参数

用户可通过设置调整生成行为，例如：

• 温度（temperature）
• 最大输出长度（max tokens）
• 回复风格（创意型 / 精确型）

便于在“灵感激发”与“精准控制”之间找到平衡。

✅ 响应式现代界面

采用 Radix UI 构建组件，结合 Tailwind CSS 实现高度定制化的视觉体验，适配桌面与移动端，操作体验一致。

⚙️ 技术栈一览

项目整体轻量、现代，构建速度快，适合二次开发与集成。

📦 快速上手指南

1. 克隆项目

git clone https://github.com/NUVoize/wan22-brkn-prompt-helper.git
cd wan22-brkn-prompt-helper

2. 安装依赖

bun install

项目使用 Bun 作为包管理器，启动速度显著优于 npm/yarn。

3. 配置 API 密钥

在项目根目录创建 .env.local 文件：

GEMINI_API_KEY=your_gemini_api_key_here

Gemini API 密钥可通过 Google AI Studio 免费获取。

4. 启动开发服务器

bun run dev

访问 http://localhost:8080 即可使用。

🗂️ 项目结构说明

src/
├── components/          # 通用 UI 组件
│   ├── ui/             # Radix UI 封装组件
│   ├── icons/          # SVG 图标组件（Lucide 风格）
│   ├── Header.tsx      # 页面头部
│   ├── Footer.tsx      # 页面底部
│   └── ...
├── pages/              # 页面路由组件
│   ├── Index.tsx       # 主页
│   └── NotFound.tsx    # 404 页面
├── services/           # 核心服务模块
│   └── geminiService.ts # 封装 Gemini API 调用
├── hooks/              # 自定义 Hook（如 usePromptGenerator）
├── lib/utils.ts        # 工具函数（格式化、校验等）
└── styles/             # 全局样式与主题配置

结构清晰，职责分明，便于维护与扩展。

🎯 支持的提示类型

每种类型均可通过提示工程优化输出质量，未来可通过插件化方式扩展新类型。

🚀 构建与部署

构建命令

# 开发模式
bun run dev

# 生产构建
bun run build

# 预览生产环境
bun run preview

# 代码检查
bun run lint

部署选项

构建后输出位于 dist/ 目录，支持一键部署至主流平台：

• Vercel：推荐方案，自动 CI/CD
• Netlify：上传 dist 文件夹即可
• GitHub Pages / Cloudflare Pages：同样兼容

已配置正确路由回退，支持 SPA 模式。

🔧 开发者扩展指南

如何添加新的提示类型？

1. 在 src/components/icons/ 中创建图标组件
2. 更新主界面 UI，添加新入口按钮
3. 在 geminiService.ts 中定义对应的 prompt template
4. 添加参数映射与错误处理
5. 本地测试生成效果

整个流程模块化，易于协作。

设计与编码规范

• 使用 Tailwind CSS 编写原子类样式，避免冗余 CSS
• 所有组件遵循一致的设计语言
• 保证移动端触控友好与屏幕适配
• 注重可访问性（ARIA 标签、语义化结构）
• TypeScript 类型严格，减少运行时错误