用Cursor5分钟快速完成一个简单的支付页面【附快捷键表格】

最近,看大家都在说Cursor,一开始也就以为是一个代码编辑器加上了LLM的加持,不以为然。结果在亲自测试了之后,结果出乎意料,5分钟不到完全通过自然语言完成了一个支付功能的页面(以下文中附有制作的详细过程)。这不禁让我想起李彦宏经常说的:“人人都是开发者”的时代真的要到来了吗?
01 Cursor是什么?
Cursor,是一个集成了claude-3.5-sonnet、GPT-4等多个模型的编辑器,Cursor国内可以直接使用,同时支持多种语言:python,java,C#等等语言,也同样支持在多平台安装。可以用于聊天,辅助写代码,辅助写作等等功能,能更好的为开发者服务。

Cursor在LLM的加持下,有点像GitHub的Copilot 、百度的文心快码,现在Cursor的亮点,主打的就是:
1.继承了vscode的强大功能和用户界面,几乎一模一样,还深度集成了gpt等大模型,无缝融入了包括 IntelliJ IDEA、Visual Studio Code 和 GitHub 在内的主流开发环境和代码库中。
2.体量小,启动快,编程效率高。
现在,Cursor的Anysphere公司客户群已经拓展到像OpenAI、Midjourney、Perplexity等等知名大企业,进一步印证了Cursor产品的价值和实用性。

同时,被备受全球开发者喜爱,收获一系列好评。

价格方面,Cursor目前提供了3种订阅模式:
免费模式(Hobby 计划):用户可以免费体验两周,享受每月 2000 个代码补全、50 个慢速优先的高级请求和 200 次使用 cursor-small 模型的数。
付费模式(Pro 计划): 用户每月支付 20 美元则可以获得更多的 GPT-4 使用次数和无限次的代码补全。
企业专业模式(Business 计划):每月收取 40 美元,提供额外的数据保留等服务。

02 用Cursor简单创建一个支付页面
按下快捷键:`Ctrl + K` 唤醒Edit功能,输入:
#创建一个简单的支付页面,包括姓名、手机号、支付方式、支付金额,支付方式包含微信支付和支付宝支付,简洁、高级,用乔布斯的风格设计

就能直接生成支付页面的代码:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>支付页面</title><style>body {font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f5f5f7;color: #1d1d1f;}.payment-form {background-color: white;padding: 40px;border-radius: 18px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);width: 320px;display: flex;flex-direction: column;align-items: center;}h2 {font-size: 28px;font-weight: 600;margin-bottom: 30px;text-align: center;}form {width: 100%;display: flex;flex-direction: column;align-items: center;}input,select,button {display: block;width: 100%;margin-bottom: 20px;padding: 12px;border: none;border-radius: 8px;font-size: 16px;box-sizing: border-box;/ 添加这一行}input,select {background-color: #f5f5f7;-webkit-appearance: none;/ 添加这一行 -moz-appearance: none;/ 添加这一行 appearance: none;/ 添加这一行}select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;padding-right: 30px; // 为下拉箭头留出空间}button {background-color: #0071e3;color: white;cursor: pointer;font-weight: 600;transition: background-color 0.3s ease;}button:hover {background-color: #0077ed;}</style></head><body><div class="payment-form"><h2>支付</h2><form><input type="text" placeholder="姓名" required><input type="tel" placeholder="手机号码" required><select required><option value="">选择支付方式</option><option value="wechat">微信支付</option><option value="alipay">支付宝支付</option></select><input type="number" placeholder="支付金额" required><button type="submit">确认支付</button></form></div></body></html>
效果非常不错,出乎意料的强,设计品味也在线,看着确实不错。


如果生成的效果你觉得可以,就可以继续在原有的基础上修改、优化、增加新功能等等,有看不懂的代码也可以在chat对话框直接提问。

一番体验下来,多种适配性体验还是蛮不错的,在自动补全代码、光标位置预测和多行编辑等功能表现挺出色,尤其是前端能力十分突出、设计风格也不错,主要还是人家集成了目前代码能力最强大的claude-3.5-sonnet,间接免费试用Claude还是很爽的。更多强大的能力还需要继续探索。
Cursor 键盘快捷键:

注意:在 Windows/Linux 上, 使用 Ctrl 键代替 ⌘ (Command) 键。
03 一家致力于改变世界的公司

在他们的博客文章中,看到了他们的满怀壮志:
在未来几年,我们要打造一款前所未有的 IDE。我们希望 Cursor 是一个让编程变得更加轻松、愉悦和有趣的工具。我们距离这个目标还有很长的路要走。要实现它,需要攻克很多棘手的工程问题、技术难点,以及聪明的产品思维。尽管如此,这是可能的,而且这是历史上第一次有这样的可能性。如果我们成功了,我们将重新定义编程的意义,并帮助全世界的开发者专注于更大的问题。
为了将这个愿景变为现实,我们正在组建一支由极具天赋的技术专家、研究人员和工程师组成的小团队。你将加入一个从中学时代就开始编程,对工程和人工智能充满热情的团队。你将解决这些棘手的问题,并进入一个令人兴奋的环境,在这里,你将获得自主权,去完成你一生中最好的工作。
这股创业公司的那劲儿马上涌现出来,这也是创业公司存在的意义,怀揣着一个比天高的梦想,然后脚踏实地的干。
最后,我想用乔布斯的话来致敬他们,也致敬在创业路上的我们,“他们用与众不同的眼光看待事物,他们不喜欢墨守成规,他们也不愿安于现状。你可以赞美他们,引用他们,反对他们,质疑他们,颂扬或是诋毁他们,但唯独不能漠视他们。”
Last but not least
Cursor已经被全球的很多开发者验证过了,能力无可厚非,尤其是对刚学代码不久的小白非常友好,可以直接用自然语言就代码进行创建、优化等等,这恰恰是在提醒我们,未来我们不是不再需要编程代码,也不像大家所说的未来码农将要被AI取代,而是更要加强我们的编程思维、基础知识,而不是执着于跟代码较劲。
Cursor business 5000次高级模型请求
Cursor Pro会员帐号独享合租
欢迎联系aigeek2024 加入AI开发者交流群
更多推荐



所有评论(0)