一个专为 AI 绘画（GPT、Nano Banana 等）设计的结构化提示词生成工具。通过可视化的"填空"交互方式，帮助用户快速构建、管理和迭代复杂的 Prompt。
-
🧩 智能词库管理：
- 分类管理：支持自定义词库分类（如人物、动作、画面、物品等），并通过颜色区分，视觉更清晰。
- 双向同步：在右侧预览填空时，可直接添加"自定义选项"，自动反向同步到左侧词库中，无需来回切换。
- 分类编辑器：内置分类管理器，支持增删改分类及其颜色配置（12种预设颜色）。
- 响应式布局：词库列表支持瀑布流式多列布局，空间利用更高效。
-
📝 多模版系统：
- 支持创建多个独立的 Prompt 模版（如"角色概念分解图"、"3x3 摄影网格"）。
- 独立状态：每个模版的变量选择（Selection）互不干扰。
- 副本克隆：支持一键创建模版副本，方便进行 A/B 测试或微调。
-
🖱️ 可视化交互：
- 所见即所得编辑：编辑模式下变量根据分类颜色高亮显示，支持直接文本编辑与结构调整。
- 拖拽插入：直接将左侧词库卡片拖入编辑区域，即可快速插入变量。
- 预览模式：模版中的变量（
{{role}}）会自动渲染为可点击的下拉菜单。 - 独立实例：同一变量在模版中出现多次（如
{{color}}），可分别选择不同的值（支持color-0,color-1独立索引）。
-
💾 自动持久化：
- 利用 LocalStorage 自动保存所有修改（模版、词库、分类配置）。
- 刷新页面或关闭浏览器后，数据不会丢失。
-
🖼️ 图像管理：
- 预览图展示：每个模版支持关联预览图，显示在模版标题区域，视觉效果更丰富。
- 自定义上传：支持上传自定义图片替换默认预览图（支持 jpg、png、webp 等格式）。
- 图片操作：悬停在图片上时显示操作按钮：查看大图、上传新图、重置默认图。
- 大图预览：点击查看大图按钮，可在 Lightbox 模式下全屏浏览图片。
- 装饰背景：预览图会作为模糊背景显示在模版顶部，营造沉浸式氛围。
-
📋 导出与分享：
- 一键复制：复制最终生成的纯净 Prompt 文本。
- 保存长图：支持将当前填好内容的 Prompt 模版导出为高清图片，方便分享与存档。
- 构建工具: Vite
- 前端框架: React
- 样式库: Tailwind CSS
- 图标库: Lucide React
- 导出工具: html2canvas
确保您的环境已安装 Node.js (推荐 v18+)。
-
克隆项目
git clone https://github.com/TanShilongMario/PromptFill.git cd PromptFill -
安装依赖
npm install
-
启动开发服务器
npm run dev
会自动打开浏览器访问
http://localhost:5173。 -
构建生产版本
npm run build
项目根目录下提供了快捷脚本，双击即可一键启动服务并打开浏览器：
- macOS:
start.command - Windows:
start.bat
- 点击左侧面板顶部的"管理分类"按钮。
- 在此处您可以添加新分类、修改现有分类名称或颜色（支持12种预设颜色），以及删除不需要的分类。
- 每个分类都有独特的颜色标识，帮助您在编辑和预览时快速识别不同类型的变量。
- 点击"创建新变量组"添加新的变量词库，并为其指定分类。
- 在词库卡片中添加具体选项：
- 单个添加：直接输入选项并按回车。
- 批量添加：输入多个选项（一行一个），系统会自动分割添加。
- 词库支持拖拽功能，可直接拖入编辑器快速插入变量。
- 点击右上角的"编辑模版"按钮进入可视化编辑模式。
- 拖拽插入：按住左侧的词库卡片，拖入编辑器即可插入变量（如
{{weather}}）。 - 手动输入：也可以直接在编辑器中输入
{{变量名}}，系统会自动识别并渲染。 - 编辑器中的变量会根据其所属分类显示对应颜色，方便识别和管理。
- 支持撤销/重做功能，随时调整模版结构。
- 切换回"预览交互"模式。
- 点击彩色的变量词，从下拉菜单中选择选项。
- 自定义选项：如果选项不存在，点击下拉菜单底部的"+ 添加自定义选项"，输入并回车即可直接选用并自动保存到词库。
- 多实例支持：同一变量在模版中出现多次时（如
{{color}}），每个实例可以独立选择不同的值。
- 查看预览图：如果模版关联了预览图，会显示在模版标题右上角，同时作为模糊背景装饰顶部区域。
- 上传自定义图片：
- 将鼠标悬停在预览图上，会显示三个操作按钮。
- 点击中间的"上传图片"按钮（图片图标）。
- 选择本地图片文件（支持 jpg、png、gif、webp 等格式）。
- 图片会自动上传并替换当前预览图。
- 查看大图：点击左侧的"查看大图"按钮（放大图标），可在全屏模式下浏览图片细节。
- 重置图片：点击右侧的"重置默认图片"按钮（撤销图标），可恢复模版的默认预览图。
- 复制结果：点击右上角的"复制结果"按钮，一键复制最终生成的纯净 Prompt 文本，可直接粘贴到 AI 绘画工具中使用。
- 保存长图：点击"保存长图"按钮，将当前填好的 Prompt 模版（包括预览图）导出为高清图片（PNG格式），方便分享、存档或作为参考。导出前会等待封面图加载并进行 Base64 预取，避免出现空白封面。
- 导入 / 导出（Beta）：支持导入/导出模版与词库为 JSON。导入前建议手动备份，导入后系统模版将自动合并、用户数据保留。
- 批量创建词库：在添加选项时，可以一次性输入多行文本，系统会自动按行分割成多个选项。
- 模版副本功能：在测试不同 Prompt 效果时，使用"创建副本"功能可以保留原模版，方便对比。
- 颜色编码系统：为不同类型的变量设置不同颜色，可以让复杂的模版结构更加清晰易读。
- 多实例独立选择：当同一个变量在模版中出现多次时，系统会自动为它们分配独立的索引（如
color-0,color-1），每个位置可以选择不同的值。 - 自定义预览图：为模版上传有代表性的参考图片，可以帮助快速识别不同模版的用途，也让导出的长图更具视觉吸引力。
- 图片尺寸建议：上传的预览图建议尺寸为 300x300px 左右的正方形或竖图，这样能在界面中获得最佳显示效果。
- 本地数据安全：所有数据（包括上传的图片）都存储在浏览器本地，定期导出备份可以避免数据丢失。
- 标签化检索：为模版打标签后，可在列表中按标签筛选快速定位。
- 瀑布流浏览：模版列表支持瀑布流展示，多张封面浏览更高效。
- 导入/导出（Beta）：可一键导出全部模版/词库为 JSON，或导入他人配置；导入前建议先手动备份。
- 多源图片上传：新建或编辑模版时，支持本地文件与图片 URL；如需最佳导出效果，推荐使用同源的
public/内图片路径。 - 本地化存储：默认使用浏览器本地存储保存模版、词库及图片；如需跨设备同步，请配合导入/导出。
- 导出功能优化：
- 导出格式改为 JPG（92% 质量），文件大小减少 60-70%
- 添加模糊背景框，从模板图片自动提取颜色，视觉效果更高级
- 重构导出布局：图片移至顶部（限高 300px），标题简洁（移除版本号和标签），正文不重复标题，底部统一显示版本号和二维码
- 导出按钮支持加载状态显示（"导出中..."），防止重复点击
- 网址字体与整体风格统一协调
- 优化导出尺寸：降低 scale（3.0 → 2.5），减小内边距，整体图片尺寸减少 30-40%
- 移动端体验提升：
- 导入模板使用 Toast 通知替代 alert，更友好
- 完整备份导入显示详细确认对话框（模板数量、词库数量、分类数量）
- 添加导入加载状态和进度反馈
- 修复手机端导入文件后无反馈的问题
- 细节改进：
- 导出图片中的变量胶囊添加轻微阴影，更立体
- 版本号动态获取，支持持续升级
- 底部水印优化，移除冗余标签
- 模版体验：新增瀑布流展示、标签过滤；支持导入/导出（Beta）；新建模版可上传本地或 URL 图片。
- 数据存储：默认本地化保存模版与词库，支持一键刷新系统模版/词库并保留用户自定义。
- 导出改进：长图导出等待图片加载并进行 Base64 预取，避免封面空白。
- 新模版/词库：新增“经典场景微缩复刻”“可视化企业成长之路”等模版；补充公司、画幅比例、渲染风格（3D 像素）等词库。
- 工程与启动：
start.bat与启动脚本兼容性修复；浏览器自动打开逻辑优化。
- UI 优化：
- 优化"新建模版"按钮样式，采用统一的 Premium Button 设计语言，提升整体视觉一致性
- 按钮增加悬停渐变效果和阴影动画，交互体验更加流畅
- 功能说明：
- 完善图像上传和展示功能的文档说明
- 支持自定义上传模版预览图
- 图片悬停操作：查看大图、上传新图、重置默认图
- Lightbox 全屏图片预览模式
- 文档完善：
- 重构使用指南，采用分步骤的结构化说明
- 新增"使用技巧"章节，提供最佳实践建议（包括图片使用建议）
- 新增更新日志，记录版本迭代历史
- 补充图像管理功能的详细说明
- 增加模版导出长图功能
- 支持自定义分类颜色配置
- 优化响应式布局体验
- 修复多个已知问题
- 初始版本发布
- 基础的模版管理功能
- 词库创建与编辑功能
- 变量填空交互系统
欢迎提交 Issue 或 Pull Request 来改进这个项目！
如果您有任何建议或发现了 Bug，请随时在 GitHub Issues 中告诉我们。
本项目采用 MIT 许可证。
Made with ❤️ by 角落工作室