前言
我们做任何一个项目，心里至少应该有一个雏形，然后通过cursor或者kimi再丰富自己的项目。最终形成一份项目描述，本次我就以生成一个chrome插件为例子，为大家演示。里面的文档都是以markdown格式编写的
项目配置
- 在cursorrules文件中增加以下内容
# Readme每一次会话请求结束后进行会话总结,无论生成新文件还是修改又已有文件都需要做总结并将总结内容Append写入到Readme文件中(说明文件中的内容是累积增加的)总结内容应包括:会话的主要目的完成的主要任务关键决策和解决方案使用的技术栈修改了哪些文件# 代码生成每次生成的代码，都形成新的文件，如果是修改原有的文件，则直接覆盖项目描述
# 项目这是一个谷歌浏览器的插件# 功能1.翻译2.文本总结# 交互1.点击插件图标，显示翻译和总结的按钮和文本框2.粘贴文本到文本框,点击翻译按钮,显示翻译结果,点击总结按钮,显示总结结果3.选中网页内的文字,悬浮显示翻译和总结的按钮,点击后显示翻译和总结的文本框# 样式样式尽可能简洁 易用设计方案
- agent:请根据文档描述帮我生成设计方案输出结果
# 设计方案## 一、功能设计### 1. 主功能- **翻译**：支持用户输入或选中网页文本后进行翻译，显示翻译结果。仅支持中英翻译.- **文本总结**：支持用户输入或选中网页文本后进行自动摘要，显示总结内容。### 2. 交互方式- **插件弹窗**：点击浏览器插件图标，弹出窗口，包含： - 文本输入框 - "翻译"按钮 - "总结"按钮 - 结果展示区域- **网页悬浮按钮**：用户选中文本后，鼠标附近自动弹出悬浮操作按钮： - "翻译"按钮 - "总结"按钮 - 点击后弹出小浮窗，展示结果---## 二、界面设计### 1. 插件弹窗- **布局**：纵向排列，简洁明了 - 顶部：输入框（多行，支持粘贴） - 中部：两个按钮（翻译、总结），并排或上下排列 - 底部：结果展示区（只读文本框或div）- **样式**：极简风格，留白充足，按钮和输入框圆角，主色调可选蓝色或绿色### 2. 网页悬浮按钮- **触发**：选中文本后显示- **样式**：小型圆角按钮，带简洁图标（如翻译、总结）- **浮窗**：点击后在附近弹出，展示结果，带关闭按钮---## 三、技术方案### 1. 技术栈- **前端**：HTML、CSS（可用Tailwind或原生）、JavaScript（或TypeScript）- **插件API**：Chrome Extension Manifest V3- **后端/接口**：调用Kimi的API### 2. 主要模块- **background script**：管理插件生命周期、与content script通信- **popup页面**：插件弹窗UI与逻辑- **content script**：注入网页，实现选中文本、悬浮按钮、浮窗- **API模块**：封装翻译和总结的接口请求---## 四、用户体验- **简洁易用**：界面元素少，操作路径短- **响应迅速**：API请求有loading提示，错误友好提示- **无打扰**：悬浮按钮不遮挡内容，自动消失---## 五、权限与Manifest配置- 需要声明： - activeTab（访问当前页面内容） - contextMenus（如需右键菜单） - storage（如需本地存储历史） - host_permissions（如需跨域API）---## 六、可扩展性- 后续可增加：多语言支持、历史记录、快捷键操作、更多AI能力---如需详细UI原型或代码结构建议，可进一步说明！ 我们生成了设计方案后，根据自己的特定需求修改设计方案，比如技术栈，第三方api，如果第三方api有接口文档的话可以接入doc文档。
UI示意图
- agent:帮我生成详细UI示意图，并形成文档输出
# UI原型设计## 一、插件弹窗（Popup）### 1. 整体布局- 宽度：350px- 高度：自动（内容撑开，最大不超过600px，超出可滚动）- 主色调：蓝色或绿色，极简风格### 2. 结构分区1. 顶部Logo与标题 - 左侧小Logo（可用插件图标） - 右侧为"AI助手"或"翻译与总结"标题2. 输入区 - 多行文本输入框（placeholder: "请输入或粘贴需要处理的文本..."） - 支持粘贴、输入、自动换行3. 操作按钮区 - 两个主按钮并排或上下排列 - "翻译"按钮（主色，带翻译图标） - "总结"按钮（次色，带摘要图标） - 按钮下方可有loading动画（如请求中）4. 结果展示区 - 只读文本框或div，显示翻译/总结结果 - 右上角有"复制"按钮 - 错误时显示红色提示5. 底部说明 - 小字提示：如"仅支持中英互译，数据由Kimi API提供"### 3. 交互细节- 输入内容为空时，按钮禁用- 点击按钮后，按钮loading，结果区显示"处理中..."- 结果可一键复制- 错误时弹出提示---## 二、网页悬浮按钮与浮窗### 1. 悬浮按钮- 触发：用户选中文本后，鼠标右下方弹出- 样式： - 圆角矩形，白底阴影 - 两个小按钮（翻译、总结），带icon - 悬浮时高亮- 位置：紧贴选中文本右下角，避免遮挡内容### 2. 浮窗- 触发：点击悬浮按钮后出现- 样式： - 白底圆角卡片，阴影 - 顶部：操作类型（如"翻译结果"/"总结结果"），右上角关闭按钮 - 中部：结果内容（可滚动） - 底部：复制按钮- 交互： - 点击关闭按钮或页面其他区域自动关闭 - 结果可复制 - loading时显示"处理中..." - 错误时显示红色提示---## 三、UI草图（文字版）┌──────────────────────────────┐│ [Logo] AI助手 │├──────────────────────────────┤│ [ 多行文本输入框 ]││ 请输入或粘贴需要处理的文本… │├──────────────────────────────┤│ [翻译] [总结] ││ (loading...) │├──────────────────────────────┤│ 结果： ││ [ 只读文本框/结果内容 ]││ [复制] ││ (错误提示) │├──────────────────────────────┤│ 仅支持中英互译，数据由Kimi ││ API提供 │└──────────────────────────────┘### 悬浮按钮[翻译] [总结]（鼠标选中文本后弹出，按钮带icon）### 浮窗┌─────────────┐│翻译结果 × │├─────────────┤│ 结果内容 ││ ││ [复制] │└─────────────┘---如需Figma、Sketch等可视化原型文件，可进一步说明！如果需要具体的HTML/CSS代码结构建议，也可以告知。 Figma原型搭建说明
- 我们拿到UI示意图文档后，可以交给豆包，并输入，【提供详细的Figma原型搭建说明和组件布局建议】基于以上描述，帮我生成一张图片
至此，我们就知道了我们从应用做出来是什么样子，然后我们将豆包生成的【Figma原型搭建说明和组件布局建议】保存成文档，命名为UI具体描述.md
生成代码
- agent:请基于文档需求生成插件代码,代码形成文档，然后就会生成项目代码
