前言
最早一篇反响不错的文章《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 后端的你，是否需要停下来思考一下自己。