以前的前后端开发泾渭分明，各自术业有专攻，自从有了先进的AI工具，开发者角色就变为了掌舵者、审阅者，配合AI开发工具，可以快速搭建后端+前端的项目，随着AI理解的深度和开发者技巧和驾驭理念升级，两者逐渐达到人剑合一的境界后，更会碰撞出更强的火花和更容易完成高质量的项目。本篇随笔抽取界面的一个案例，介绍使用Cursor实现管理系统登录界面的快速开发的过程。
Cursor 是一款基于 VS Code 内核、AI 原生集成的代码编辑器，由 Anysphere 公司开发，主打 “AI 结对编程” 体验，可理解整个代码库并自动生成 / 修改 / 调试代码。
Cursor 的智能代码补全不是普通 IDE 那种简单关键词补全，而是基于大模型、理解你整个项目上下文、跨文件语义级的 AI 代码自动补全。
简单说：你写开头，AI 帮你写完整段、整个函数、甚至整个逻辑，支持单行、多行、整函数、循环、条件、接口、组件一键补全。
它会读取你当前项目的：变量定义、导入包、已有函数、数据结构、接口字段、项目架构，不是只看当前一行代码，补全出来的代码完全适配你现有项目规范。
Cursor 开发工具是一个锋利的刀剑，我们如果把它利用好，可以事半功倍。
我们可以从已有项目开始对项目完善和重构优化，也可以从一个空白的目录开始白手起家。我们这里以一个登录界面开始介绍如何创建一个起步的项目基础。
首先，我希望通过一个效果比较好的截图（可以很容易从网上获取到），甚至可以通过一个网址让它分析结构进行开发界面，都可以做的很丝滑。
例如我系统通过一个界面来开始设计一个项目的技术路线，我喜欢的路线是：界面采用Vue3+TypeScript+ElementPlus 技术路线。
首先我们从Cursor导入空白的项目目录，在文件夹中放入一个【登录界面效果.png】图片，并创建一个md文件来描述一下我们需要的大致技术路线和界面效果，如下图所示准备好图片和相关的介绍。
我们通过Cursor来逐步创建，后续通过命令cursor继续完善界面效果，达到我们的要求即可。
我要模仿的界面效果初始图如下所示。
通过把界面效果图片和cursor.md文件拖入agent对话框中，回车执行即可，过程如下所示。
通过执行上面的指令，最终Cursor会完成项目的基础搭建工作，并通过npm 安装相关的引用文件，如我们可以查看到项目结构如下所示。
我们查看编译后运行的界面效果，如下所示。
这样的界面，Cursor弄出来的和我们实际的预想有所偏差，为了较正它，我们继续输入命令修改。
要想Cursor弄出我们的预想，有时候就需要进行一定的提示修正，如下面所示。
最终调整的界面效果如下所示。
这个就是我预想的效果，这个是一个根据不同设备响应式的界面效果，如果我们切换到手机显示模式，界面效果如下所示
而且界面的代码部分，除了按照Vue3+ElementPlus+TypeScript的特点来做外，也按照我们要求的UnoCss的样式风格，非常符合要求。
界面的开发是逐步递进，如我们完成一个登录页后，可以让它继续完成注册用户、忘记密码，重置密码等界面设计。
以上就是通过一个简单的登录界面效果来试试Cusor的威力，实际上，我们开发很多就是构建不同的界面，构建不同的前后端对接实现的，一步步往完善的项目方向狂奔即可。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。