怎么用 AI 开发一款提示词助手
在使用 AI 生成图片的过程中，我经常遇到两个场景：
- 看到一张精美的图片后，想提取为提示词并稍作修改，生成相似风格的新图片。
- 输入简单的元素描述（如"兔子、圣诞节、雪、街角、灯光"），让 AI 扩展成完整的创意提示词。
每次和 AI 对话都要重复输入"你是一名专业的XXX，请帮我构思……"类似的提示，生成后还要修改提示词，效率低下。
因此，我决定开发一款提示词助手，用 AI 来解决这个问题，自动化这些重复性工作。
现在，这款工具已上线：提示词助手。解决了我自己的问题，也免费分享给有需要的朋友使用。
核心功能：
- 分析图片特征，转换为提示词
- 输入关键词，设置参数，生成提示词
需求梳理和界面设计
功能相对简单，我快速梳理需求后直接在 Figma 中设计 UI。
由于提示词助手将集成到现有 Blog 项目中，可直接复用已有的组件样式与设计风格，因此我在 Figma 中并未绘制过于精细的 UI，而是让 AI 后续直接调用或参考这些现有组件。先实现核心功能，细节留待后续迭代。
若从零开始构建产品，建议采用成熟的组件库，效率更高。
Figma 设计时，为图层添加自动布局，并使用"container"、"list"、"card"、"item"等语义化命名，便于 AI 识别。
设计完成后，将设计图发给 AI，让它梳理需求并在项目根目录生成需求文档，再手动检查是否有遗漏。
技术架构
在需求文档中明确技术架构，便于 AI 按照指定方案实现。本项目采用 Next.js 15 + React 19 + Tailwind CSS，数据存储使用 IndexedDB，支持自定义 API 配置，可接入不同的 AI 服务。
所有数据存储在用户本地，我无法访问用户上传的图片或提示词。用户内容仅发送给 API 端点，目前使用第三方公益站点提供的服务。
项目支持自定义 API 端点，你可以使用 OpenRouter 等平台的 API。没有 API 密钥的用户可使用我提供的免费端点。
AI 还原设计图
开发工具采用 Cursor + Roocode 组合。Cursor 配合 Opus 4.5 模型处理复杂需求，Roocode 配合 Sonnet 4.5 模型处理简单需求。[^1]
以"图片分析"功能为例：在 Figma Dev 模式下，选择画板并点击「Copy example prompt」复制提示词，粘贴到 Cursor 生成代码。先确保功能正常运行，再调整样式和优化交互。[^2]
功能实现
工具采用单页面应用架构，通过 Tab 组件切换图片分析和创意生成两种功能。每个功能拥有独立的状态管理和数据存储，确保功能隔离的同时共享 API 配置和使用统计。
核心架构设计
- 组件分层：将共享组件（Tab切换器、API配置弹窗）与业务组件（上传器、参数选择器、历史记录）分离，提高代码复用性。
- 状态管理：使用 Zustand 实现轻量级状态管理，分别维护两个功能各自独立的 store。
- API 配置：支持默认端点和自定义配置两种模式。内置多个免费 API 端点，实现负载均衡和故障转移。用户也可配置自己的 API 密钥。
图片分析
图片分析模块实现了完整的图片转提示词流程：
- 多样化上传：支持点击选择、拖拽上传、剪贴板粘贴三种方式。拖拽时显示上传区域高亮，提升交互体验。
- 智能识别：上传后自动压缩图片并转换为 Base64 格式，调用 AI 视觉模型分析图片内容、风格、构图等要素。
- 风格选择：提供多种分析风格（通用、即梦、Liblib、Midjourney），满足不同创作需求。
创意生成
创意生成模块提供了丰富的参数配置体系：
- 基础参数：快速访问常用设置，包括宽高比、艺术风格、色彩、光线和构图，通过标签形式直观展示。
- 扩展参数：点击"更多"打开参数弹窗，包含20多个分类（设计用途、色调、摄影角度、艺术流派、材质纹理等），每个分类下有10-20个具体选项，总计300多个参数。
- 智能标签：生成的提示词以可编辑标签形式展示。支持点击修改、拖拽排序、智能联想。输入文本时自动匹配参数库，实现快速转换。
- 参数管理：开发了独立的参数管理后台，支持分类和参数的增删改、排序。每个参数配有预览图，帮助用户直观理解效果。
参数配置基于小红书用户黄白整理的《提示词攻略手册》。原计划自动抓取飞书文档中的图片，但因技术限制最终手动上传了300张左右的配图。
历史记录与交互优化
两个模块都配备了完善的历史记录功能：
- 侧边栏展示：将历史记录渲染到页面右侧，不影响主界面布局。支持展开/收起，自动保存状态。
- 详情查看：点击历史项打开详情弹窗，显示完整的输入参数和生成结果。支持编辑草稿、删除记录、参数复用。
- 智能排序：历史记录按时间倒序排列，最新的显示在最前。支持搜索过滤，快速定位目标记录。
- 性能优化：使用虚拟滚动技术处理大量历史记录，保证界面流畅。IndexedDB 异步操作避免阻塞主线程。
数据存储与隐私
采用 IndexedDB 本地存储方案，所有历史记录、配置信息均保存在用户浏览器中。每个功能模块维护独立的数据表，支持历史记录查看和参数复用。
用户数据完全本地化，开发者无法访问。API 调用直接从浏览器发起，确保数据安全。支持自定义 API 端点配置，用户可使用自己的 API 密钥或选择免费公益服务。
[^1]: 我现在使用的 AGENTS.MD 提示词：暴躁 linus 提示词 [^2]: 需先安装 Figma MCP 并登录，确保连接状态正常。参见 Figma MCP 使用指南
