完全不会编程。我的第一次Vibe Coding实验竟然出奇地成功
AI 深度解读
AI正在解读中...

(图片来源:Zain bin Awais/PCMag Composite;Claude;Anthropic;membio/via Getty Images)目录如何选择一款合适的Vibe编码工具在您的电脑上安装 Claude Code选择项目:有哪些选择?尽情“编码”(或聊天)故障排除、改进和一大难题最后检查:信息是否正确?克劳德·科德甚至还帮我整理文件,让我得以撰写这个故事。

作为一个写过不少关于人工智能,特别是人工智能如何运作的文章的人,我认为……氛围编码既然有人说“感觉编程能让任何人变成程序员”,我决定亲自尝试一下。感觉编程真的像宣传的那样好吗?

我最感兴趣的工具就是 Claude Code,因为它……接受采访它的创始人,并追踪了它自六月以来的人气上升情况。首次亮相现在的人类呼叫它号称是“世界上最好的编码模型”,但这种说法很难站得住脚。此外,人工智能公司往往会使用夸张的语言,比如“最智能的”、“最好的”模型。

我联系了Anthropic公司的人,告诉他们我想用Claude Code独立完成一个小项目。他们很兴奋,但我们都觉得这可能有点难度。首先,Claude Code并没有面向非程序员的公开指南,教他们如何设置和使用。所以,Anthropic专门为我制作了一份,其中包含一些常见问题解答,比如“什么是终端?”——这虽然是所有程序员都知道的常识,但我却需要。

三天零几个小时后,我几乎没遇到什么问题就成功编写了一个定制网站。这真是一次令人大开眼界、乐趣无穷的经历。这个网站解决了我在纽约都会区找房子时遇到的一个问题——确定步行到公共交通站点的距离。以前我不得不不断地从 Zillow 或 Redfin 复制粘贴地址。谷歌地图配置路线,查看步行时间,然后重复。说得委婉点,就是枯燥乏味。

我的 Claude-Coded 网站从 Redfin 获取房源信息,并自动计算步行至最近火车站所需的时间。数据以简洁的界面显示,包含地图和每套房产的关键信息。以下是我的实现方法,以及如何开始创建您自己的项目。

如何选择一款合适的Vibe编码工具

几乎所有人工智能聊天机器人虽然可以生成代码片段,但一款优秀的 Vibe 编码工具能将编程提升到一个新的层次。许多 Vibe 工具可以直接访问你电脑上的文件,并查看整个代码库。这就是为什么专业工程师仍然是其主要用户群体。

除了 Claude Code 之外,该领域的一些知名人士还包括 OpenAI 的 Codex、GitHub Copilot 等。复制以及 Lovable 和 Windsurf,我们还采访了 Windsurf 的产品和营销副总裁。氛围编码解释器所有这些都需要一些技术知识才能设置。以下是我使用 Claude Code 进行设置的方法。

在您的电脑上安装 Claude Code

首先,克劳德·科德需要……订阅可以选择每月 17 美元的 Pro 套餐或每月 100 美元的 Max 套餐。你无法通过免费的网页版 Claude 聊天机器人访问此功能。Anthropic 为我设置了每月 100 美元的 Max 套餐以便我入门,但这可能有点过度了。我那简陋的房地产网站可能 17 美元的 Pro 套餐就足够了。

克劳德定价方案

在线注册后,后续步骤取决于您使用的是 Windows 还是 macOS 系统,但基本原理相同。我使用的是 Mac 系统,所以我会重点介绍 Mac 系统。(Anthropic 还提供适用于其他操作系统的基本指令。)

终端应用程序图标

首先,打开“终​​端”应用程序。Anthropic 的指南中写道:“终端是 Mac 上的内置应用程序,它允许你通过输入命令与电脑进行交互。你可以把它想象成一种与电脑‘对话’的更直接的控制方式。它也是访问 Claude Code 的主要界面。”

复制并粘贴以下命令到终端:curl -fsSL https://claude.ai/install.sh | bash。按回车键。你会看到一些文本,然后会显示一条消息,表明安装成功。但不要犯和我一样的错误,以为一切就此完成。在“成功”消息之前,你可能会看到一条黄色字体的小提示,其中包含一些需要运行的额外命令。请执行提示中的所有命令,然后关闭并重新打开终端。

安装过程可能显示“成功”,但请务必查看是否有其他设置说明。

在新打开的终端窗口中,输入claude并按回车键。系统会询问您是否要使用 Claude 帐户登录,还是通过专业版 API 登录。请使用键盘方向键(而非鼠标)选择,然后按回车键。我选择了下面的第一个选项,并将其关联到我的帐户,几秒钟后,一切就绪。

在登录界面,您可以选择订阅计划或 API 连接(面向专业人士)。

选择项目:有哪些选择?

现在我掌握了人工智能编程的精髓,但最大的问题是:我想做什么?我曾经采访过一位Windsurf的高管,他提到初学者也很容易创建游戏的自定义版本。词云我还考虑过创建一个活动邀请函生成器,例如用于节日或生日派对的邀请函,但 Claude 不具备图像生成功能。(考虑到 Claude 的功能,这与其竞争对手相比是一个显著的差异。)商品化程度不断提高(聊天机器人。)

但这两个选择似乎都不太实用,所以我开始反思过去一年遇到的、可以用科技解决的问题。找房子尤其费劲,因为我需要知道每套房源离最近的火车站有多远,这让找房变得更加复杂。Zillow 在这方面显然存在空白,所以我琢磨着或许可以自己解决这个问题。

这是我输入的提示,它开启了我的项目,使用的是附近的一个城镇(不是我当时正在寻找的地方),但这个城镇沿着同一种类型的铁路线延伸。

请创建一个网站,让我可以查看我所在地区符合特定条件的房源信息。我想要新泽西州蒙特克莱尔的独栋住宅,步行15分钟即可到达新泽西州公共交通火车站(可乘坐通勤列车前往纽约市)。房屋应至少有4间卧室和1.5个卫生间。

启动我的项目

尽情“编码”(或聊天)

从那以后,一切都变得简单自然,完全基于自然语言的聊天。不过,我运用了一些基本的技术知识,这有助于推进对话。例如,我知道网站需要数据来填充内容,而这些数据必须是公开的,我才能使用它们。我问克劳德的第一个问题就是Zillow是否有API可以公开房源数据,以及谷歌地图是否有类似的API,这样我就可以计算每个房源到车站的距离。

克劳德·科德想了几秒钟,然后告诉我Zillow确实有一个公共API,不仅免费,而且足以满足我的需求。太好了!但是谷歌的API要收费,所以它推荐了一个替代方案,我毫不犹豫地选择了它。

(Claude Code 总是会征求你的同意并提出建议,这很好,但像我这样的新手常常会忍不住不管怎样都说“是”,然后祈祷一切顺利。这样做后果自负!)

人工智能会在开始工作前把网站计划发给我。

这个工具还能自行查找大量信息。例如,它无需我手动输入,就找到了蒙特克莱尔镇所有新泽西州公共交通的火车站。它主动列出这些站点,方便我确认。它还自动设计了网站,无需我提供任何美学方面的意见,找到了API接口,并向我发送了注册说明。在我发送第一个输入指令后的10分钟内,它就为我创建了可以在电脑上运行的基本网站框架。

我在浏览器地址栏输入http://localhost:8000就看到了它。看起来很棒,或者至少完全够用。但请记住,这类网站只能在你的本地计算机上运行。你无法通过网页链接与朋友分享。这需要注册并购买域名,克劳德或许也能指导你完成这方面的操作。

最后一步是连接到这些API,并将数据填充到页面左右两侧,如下图所示。我的问题就出在这里。

网站第一版

故障排除、改进和一大难题

我打开了克劳德发给我的用于连接API的网站,并按照简单的说明操作:创建一个免费账户,在网站菜单中搜索API,然后将唯一的标识符粘贴回克劳德的系统中。我重复了两次,一次是连接Zillow,一次是连接地图。过程有点复杂,但最终我找到了标识符,克劳德也接受了它们。

我看到终端屏幕上显示着克劳德正在执行的工作,各种代码和文本不断涌现。最后,它显示“连接成功”,并提示我刷新网站查看数据。但结果却不如预期。页面上只显示了地图,却没有房源信息。而且,地图上显示的公交站点位置也不对。正如您在下方看到的,红色图标(公交站点)并不在贯穿图像中心的铁轨上。不过,我向克劳德指出了这个问题,它立即重新校准并修复了错误。

网站可以显示地图,但 Zillow API 加载失败。

所以,主要问题就只剩下:没有房源信息。网站显示 Zillow API 的 404 错误。我把错误信息粘贴到 Claude 里,问:“这是错误代码,怎么回事?”它说找到了问题所在,让我刷新页面,但我仍然看不到任何房源信息。这种情况发生了四次,包括在它建议我尝试的另一个浏览器上。我仔细检查了粘贴的标识符是否正确,Claude 也对与 Zillow 的连接进行了一些测试。

所有方法都无效。我们陷入了一个死循环:系统不断提出方案,我批准后,这些方案却始终无法在网站上生效。我最终忍无可忍,要求系统停止并重新思考方案。系统提出了三个解决方案,其中一个是尝试使用 Redfin 的数据。我选择了这个方案,系统开始处理。令人欣喜的是,再次刷新页面后,房源列表出现了!

(后来我问了一位程序员朋友为什么 Zillow 连接不上。他调查后很容易发现,公开免费的 Zillow API 已经停止服务了——克劳德忽略了一个重要细节。)

我对 Zillow 感到厌倦,于是与 Claude Code 对峙,我们重新制定了一个使用 Redfin 数据的新计划。

地图上现在显示了四个绿色图标,每个图标代表一个房源,图标内有房屋图案。但我看不到房源本身,它们应该显示在下图的右侧。

“为什么用户界面会出问题,列表显示不全?”我问克劳德。列表会闪一下,但只显示一瞬间。克劳德随后对前端做了一些修改,经过一番沟通,我们终于让它正常运行了。

地图上会显示房源信息,但网站右侧不会显示。

(当然,这些房子都不在我的预算之内!那套标价 650 万美元的房子原来是多户住宅,但房产经纪人把它作为独栋住宅上传到 Redfin 和 Zillow 时,数据里都显示了。)

房源信息终于显示出来了,网站也上线运行了。

最后检查:信息是否正确?

现在我可以看到房源列表了,可以开始检查数据质量了。我把数据和Redfin上的信息交叉比对,所有数据都正确——价格、位置、上市天数、卧室数量和浴室数量——但我最关心的数据点,步行时间,在我的Claude-Coded网站上始终比谷歌地图显示的要短三到五分钟。

我向克劳德指出了这个差异,他解释说我们使用的地图API计算的是直线距离时间,而不是实际步行时间。为了解决这个问题,他建议增加计算步行时间公式中的“环路系数”。

经过几轮增加绕路系数的尝试,并在谷歌地图上验证结果后,我网站上的步行时间几乎保持不变。但这也就意味着,符合我“步行到车站不超过15分钟”标准的房源只剩下两个,比之前的五个减少了不少。

最后,我要求它在网站上添加一个步行时间筛选器,以便我可以自行调整,查看稍远一些的房源。它生成了一个滑动条筛选器,我可以拖动它来增加或减少步行时间。想必它也能对价格、卧室数量、浴室数量以及你要求它从 Redfin(你专属的、根据你的需求定制的房屋搜索网站)提取的任何其他数据点进行同样的操作。

Claude 添加了步行时间筛选器。

克劳德·科德甚至还帮我整理文件,让我得以撰写这个故事。

我成功了!虽然花了三天时间,但每天只花一两个小时。而且我没写任何代码,只是跟聊天机器人对话而已。

最后,克劳德甚至还帮我整理了撰写这篇文章所需的资料。由于终端可以直接访问我的本地计算机,它比基于网页的聊天机器人与我的电脑集成得更紧密。它可以搜索、整理和修改我设备上的文件。我让它查看我所有自动保存到桌面的屏幕截图,并帮它们进行整理。

“你能找到所有 Claude Code 的截图,然后把它们放到我桌面上一个名为“Claude Code”的文件夹里吗?”我问它。“另外,把它们重命名为‘Terminal’,后面跟着一个从 1 开始的唯一数字,数字的顺序要根据时间戳来定,最早的截图从最早的开始。”

Claude Code 在我的桌面上创建了一个文件夹,里面有编号的终端屏幕截图,以及一些我自己添加的、它遗漏的屏幕截图。

大部分情况下都运行正常,不过我还是手动检查了一下,发现了一些遗漏。然后我让它对我们创建的 Montclair Homes 网站的截图进行同样的操作,并根据时间戳将它们命名为网站 1、2、3 等。我让它把它们放在新建的 Claude Code 文件夹下的一个子文件夹中。这个方法也奏效了,不过我还是得再清理一下。总的来说,这算是一个有用的起点,虽然并不完美。

最后,由于我对克劳德代码的具体功能了解甚少,所以我请求它提供一份概要说明,以确保我的描述准确无误。您可以自行阅读下文。

最终,这真是一次奇妙的体验。我能理解为什么软件工程师一旦开始使用人工智能编码助手,就会经常每天使用它。 盖洛普近期调查——远超普通大众对万能聊天机器人的依赖程度。他们已经上瘾了,我能理解为什么。

克劳德总结了他如何建立我的房屋搜索网站。

已显示 25%,查看完整内容需登录

您已阅读了文章的 25%,剩余 75% 内容需要登录后查看。

立即登录 注册账号

收藏
打赏
为什么萨姆·奥特曼不会为OpenAI的大规模支出承担责任
上一篇
固态硬盘太贵了,不能空着:为什么我总是把硬盘装满
下一篇

发表评论

注册不是必须的

个人中心
xuanzhang
509 文章
0 评论
6 收藏

扫码分享

微信支付
支付宝