推荐|Cursor实战：非前端人员实现工作台前端需求

前言

最早一篇反响不错的文章《Cursor：前端不会消失，但前端的你会消失 - 掘金》就是前端方面的，发布已经快两个月了。

这期间，我们团队原本需要前端人员处理的初级需求，已逐渐由后端人员借助AI直接完成。

同时，由于没有信息同步成本，单个开发者完成前后端工作的效率明显高于两名开发者协作的情况，所以，这个进程不可避免。

不要考虑前后端并行的问题，AI生成代码的性能比任何一端都快。

高级前端肯定依然吃香，但像我们这种不大的技术团队内，专职前端的空间已经越来越小了。

今天就再给大家分享一个“AI协同下非前端人员开发前端需求”的场景。

背景及任务

背景

我们正在搭建一个团队内部技术人员协同提效的平台，平台致力于尽可能多地将工作自动化、智能化，让技术人员释放更多时间从事更加重要的事情。

整个项目前端采用Vue2+Element UI实现。

任务

工作台主要通过聚合多模块信息、集成常用功能，提供高效的工作方式和良好的用户体验。

这次我们就和 Cursor 一起实现一个兼顾美观和实用的工作台。

结合我们平台的功能，工作台主要包括：

常用功能入口
待办
我参与的项目
日程

操作过程

直接进行开发实战。

本次采用的模型是Claude 3.7。

生成初版

打开 Cursor，选择 Composer 模式，0帧起手。

上下文：

需要生成代码的vue文件。

创建文件这种简单操作，不建议通过AI完成，没有必要。

提示词：


markdown
 代码解读
复制代码
帮我实现一个工作台，为系统登录后的首页。
该页面布局为左右布局，其中左侧占据三分之二，右侧占据三分之一，布局采用栅格方式实现。
左侧内部布局为上下布局，上部包括左上、右上，左上、右上各占一半宽度。
- 左上：功能快捷入口，仅展示图标和功能名称，一行4个，共计3行。
- 右上：我的待办，展示我的待办事项，每个事项包含事项名称、优先级、任务类型、截止时间，不要采用表格样式。
- 下部为参与项目列表，“参与项目列表”为表格样式，每个项目包含项目名称、项目类型（内部、产品、定制、合作）、项目负责人、当前阶段、项目结束日期、下个里程碑及里程碑日期，项目名称可点击跳转。
右侧内部为流式布局。
- 上部为个人头像、姓名、IP、当天天气，头像居左，其它信息在右侧，整体不要占据太大空间，背景选择蓝色渐变色，注意搭配整体风格。
- 然后是日程部分，日程通过element ui日历进行展示，且仅展示当前周一周的日期。如果某一天有日程，则增加小红点标识。点击日历中某一天，日历下方显示选中日期对应的待办列表，默认选中当前日期。

技术实现：
1. 基于vue+element+javascript，非element plus。
2. 图片通过upsplash api选择适合的图片。
3. 图标使用element ui自带图标。

设计要求：
1. 设计效果精致，使用现代化的 UI 元素，使其具有良好的视觉体验。
2. 使用恰当的颜色和图标点缀，避免过于单调。

需要注意的是布局部分，只有通过条理清晰地布局说明，才能生成符合预期的界面。

结果：

3.7的结果更加条理化，并且会增加markdown语法渲染。

效果：

界面效果方面，3.7也确实比3.5更好一些。

调整优化

主要集中在以下两点：

日程数据的日期生成不是正确的当前日期。
“功能快捷入口”与“我的待办”面板高度不协调。

日程数据日期问题

这个直接修改代码为当前日期。

当然，之后生成日期相关内容时，可以直接指定日期，不要让大模型再自己思考了。

与AI方便，与己方便~

高度不协调

提示词：


 代码解读
复制代码
调整功能快捷入口面板与待办面板高度一致

结果：

最终效果

3.7 VS 3.5

顺道帮大家测试了下 3.7 和 3.5 的具体差距，仅限于本次任务过程。

3.7 生成界面效果更佳，包括以下几点：
- 3.7 会在各个面板标题前面增加小图标点缀。
- 3.7 的色彩选择更加美观。
- 头像部分，3.5几乎无法 get 到我的思路，而 3.7 生成的效果和我想要的几乎一样。
- element ui 日历插件实现单周显示，基于我的提示词，3.5 是无法实现的。
- 日程部分的日期格式，3.7显示中文格式，3.5显示的英文格式。
微小调整，3.7 更加精准，比如上面的高度不协调问题。

3.5 修改会出现用力过猛，超过了的情况，或者硬性地设置两个色块高度一致。

3.7 则是通过调整内部间距或者内部项高度实现面板高度一致，同时考虑到待办数量会变动，设置了滚动条。

总结

这次实战，主要展示了最新的 Claude 3.7 在前端开发的实际效果，并顺道验证了几个 3.7 和 3.5 对比的地方，希望可以为大家提供一些参考和思路。

鉴于此，前端 or 后端的你，是否需要停下来思考一下自己。

前言