不懂代码的人也可以用Cursor,5分钟快速完成一个简单的支付页面

文摘   2024-08-30 16:47   广东  


最近,看大家都在说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(/cover?u=NmVMaWY3Rmc2T1BhN2RKanF5ZzYyZmNvM2FuaW9xd3FhbE9sbGtJTEUvcUp6bkh2OWVHVUlRdW0zNkpqaUI4UHp4amY2YW9aTGx1VFNmZHpYK1BZd1poYlcxcmpiWCtCNm9GVXlkRXU2cTA3eHQ5UHNaMEhaL3dvR3dmaEgzKzcxNkFtaWMzRTNLK1ZEQ2tGdzBGaWtkV1hKNnZ5d1lpVmx6S09SQUkvaVVla21lcXJkc2FhQmdtTm1FYTFlSVh1WStISXQ3QTNpbjZUUnlXSStHaWlIQktJUk1xQnF1VDE5a2orcXVPUm9Ub1hPQTBJRWlyaDRjY1BKY0srOHpxeGdScy9VM1hNQVFQMzdVMExWT3dSeXpIRGl6bWtVTVJSQ1RQU0VSTVVNUWR2QXBjcTZ2bm55OVV0M2R1dUhSTllWdU9kL1NuQ2ZJcmc3cGhNTWZLeVZnPT0=); 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取代,而是更要加强我们的编程思维、基础知识,而不是执着于跟代码较劲。

GeekSavvy
GeekSavvy是一个新世代AI极客社区,主要覆盖AI极客、创业者和投资人。我们会用Geek视角👉见识行业趋势、洞察AI产品和预见未来科技风向标🚀!
 最新文章