唤起AI对话框

接下来我们就要进入到程序开发流程啦，这时，我们并不需要自己去写代码，而是唤起 Cursor 里的 Composer ，让它来帮助我们写代码。

方式一：使用界面按钮

• 找到右上角工具栏
• 点击第三个按钮（像对话框的图标）

方式二：使用快捷键

• Mac用户：按下​Command + I​
• Windows用户：按下​Ctrl + I​

建议熟记这个快捷键，会大大提高开发效率。

建议大家用快捷键的方式来打开，会大大提高开发效率。

唤起成功后你们会看到如下图的对话框，我们选中 Composer。

需求分析

唤起AI对话框后，接下来就是考虑怎么跟AI对话，让它能做出我们想要的程序？

下一步就是梳理和整理你的需求，用文字表达出来。

什么是九宫格切图工具？

九宫格切图工具是一个可以将一张完整的图片自动切割成九个小方块的工具。这样的图片布局常常被用在社交媒体上，比如在朋友圈中发布，形成一种新的视觉体验。

我们先想想我们需要这个工具实现什么功能：例如需要

图片上传：支持PNG、JPG等主流格式；
智能切割：自动将图片分割成等比例的九宫格；
实时预览：同时展示原图和切割效果；
参数展示：显示原图和切割后的文件大小；
批量下载：一键打包所有切割后的图片。

我们尝试对需求再进行更详细的拆解。

我们从三个方面来考虑。

1.功能需求

1.1 图片上传功能：

• 支持多种格式：工具需要能支持上传各种常见的图片格式（如PNG、JPG），工具需要灵活处理不同文件类型。这不仅增加了工具的实用性，也提升了用户体验。
• 文件大小限制：工具应该提示用户上传的图片不应过大，以免处理变慢。提供可提示的文件大小限制功能，防止用户上传过大文件导致加载缓慢或页面崩溃。
• 拖拽上传：我们希望用户可以轻松地在工具里上传他们的图片。这个工具应该允许用户直接拖动图片文件到软件里，无需复杂操作，简化用户操作流程，提高使用便利性。

1.2 切割功能：

• 自动分割：工具需要能智能地将图片均匀分割为九个部分，同时保持原始比例。这个功能尤其对于用户希望快速生成九宫格模式图片至关重要。
• 切割质量：优质的切割质量确保每个分割部分都能满足用户的精度要求，避免失真。

1.3 预览功能：

• 实时预览：能够在图片上传后立即展示原始图和九宫格效果，方便用户进行即刻的视觉校验和调整。
• 尺寸信息展示：提供每张切割后图片的尺寸信息，可以帮助用户对图片进行进一步处理或筛选。

1.4 下载功能：

• 单张和批量下载：用户应该能方便地下载每一小张图片，或者一次性下载所有分割完成的图片。支持单张下载满足个性化需求，而一键打包下载则提高了效率。
• 自动命名：为切割后的图片自动生成命名，减少用户后续整理图片的负担。

2.界面要求

2.1 用户友好性：

整个界面的设计要简单、易用。用户进入软件后，就能很容易地找到上传和下载按钮。

2.2 操作提示：

不需太多讲解，软件就应该指导用户完成操作，比如“拖动图片到这里”或“确认下载”等提示。合适的提示能够引导用户，从而避免操作失误。

2.3 浏览器兼容性：

适配主流浏览器以确保广泛的用户覆盖面和统一的操作体验。

3.技术要求

3.1 HTML5和响应式设计：

使用最新的Web技术，确保在不同设备上都有良好的表现，适应多种屏幕尺寸。

3.2 代码质量和性能：

高效的代码能快速响应用户操作，同时确保工具保持长期的可维护性和扩展性。

💡这个工具我们选择以网页来展示功能，所以采用“web技术”来实现，对于一个完全不懂编程的人来说，这点可能不知道怎么描述。

这边有一个小技巧：可以让AI工具帮你归纳和总结。（豆包、Kimi等AI工具都能实现）

再根据你的具体需求调整就可以了。

比如：
💬我要做一个简单的网页版的九宫格切图工具，请从功能需求、界面要求、技术要求3个方面帮我简洁归纳和总结一下需求要点。

需求整理

根据上述的三个方面，我们对需求再进行简要的归纳和整理，如下。

你是一名专业的前端开发工程师，请帮我开发一个"九宫格图片切割"网站，具体需求如下：
1. 核心功能需求：
 - 图片上传功能：
 * 支持PNG、JPG等常见图片格式
 * 添加文件大小限制提示
 * 支持拖拽上传
 - 切割功能：
 * 自动将图片均分为9份
 * 保持图片原有比例
 * 确保切割质量
 - 预览功能：
 * 显示原始图片预览
 * 实时展示9张切割后的图片
 * 显示每张图片的尺寸信息
 - 下载功能：
 * 支持单张图片下载
 * 提供一键打包下载
 * 自动命名切割后的图片
2. 界面要求：
 - 整体布局清晰，视觉效果专业
 - 操作流程符合用户习惯
 - 添加必要的操作提示
 - 适配主流浏览器
3. 技术要求：
 - 使用HTML5最新特性
 - 采用响应式设计
 - 确保代码质量和性能

💡 需求的表达没有标准答案，可以根据你的需求不断调优，直至Cursor能输出你想要的结果。

在对话框中表达你的需求

前面我们说到，唤起 Cursor 里的 Composer ，让它来帮助我们写代码。

这时，在对话框中，我们输入需求。

当我们发送完毕后，Cursor将会立即开始干活写代码了。

稍作等待，Cursor便会告诉你它已经将功能实现了，下一步我们需要去验收Cursor的成果啦。