用Claude Code构建全栈应用:从CRUD到自主创业的AI编程实践

本文详细介绍了如何使用Claude Code进行全栈开发,包括构建SplitWise克隆应用、自主创业项目、真实生产环境迁移,以及作为文本编辑器的使用体验,展示了AI编程工具在实际开发中的强大能力。

Claude Code就是您所需的一切

我如何使用Claude Code进行工作、娱乐和作为文本编辑器

我在6月安装了Claude Code。之前尝试过Cursor、Cline、Zed等工具,但都感觉笨重,因为我习惯在原生vim和终端中完成几乎所有工作。Claude Code是第一个完美融入我工作流程的工具,而不是需要我适应新工具。

它运行得非常非常好。

我很快取消了GPT订阅,将每月20美元转投Anthropic。失去GPT高级语音模式、处理Claude桌面和移动应用的额外UI延迟和缺乏完善性需要一些调整,但终端工具足够有趣,我不在乎。

几天内我升级到每月100美元的MAX计划,尝试Opus并避免达到限制。

以下是我迄今为止使用它的一些项目描述。主要是好玩的东西,同时我摸索如何使用它,但我也开始越来越多地将其用于"真实"工作。

一些项目包括实验性的"自主创业构建器"、(一次性的)SplitWise替代品、AI海报制作器、评分HN评论的浏览器插件、基本的Trello替代品,以及一些组织良好的银行对账单。

主要收获

  1. 要有信心(始终使用’dangerously skip permissions’运行,即使在生产服务器和主要开发机器等重要资源上。如果您来自信息安全领域,可能想停止阅读——本文的其余部分不会让您更开心。如果决定继续,请将药物放在手边)

  2. 提供大量输入。输入越多,输出越好。这是一个神奇的工具,但您最好擅长沟通,无论是通过向文本文件或交互窗口输入数千字,还是使用TTS(我没有尝试过,因为我讨厌自己的声音,但其他人报告了很好的结果)

  3. 考虑到它主要是一个文本模型,它在UI设计方面出奇地好

让我们来些氛围编程

让我们尝试一些氛围编程。

我们将通过开发一个基本的SplitWise克隆来测试Claude Code的能力。很多人使用Trello或待办事项列表作为CRUD应用的基本示例。我喜欢使用Splitwise,因为它足够简单,但不太老套,可能没有在模型本身中嵌入得那么深。

从某些人的角度来看,构建基本的splitwise克隆仍然是" regurgitation",但它有一些有趣的边缘情况,人和模型往往会出错。特别是关于邀请新用户,但让之前的用户已经开始添加费用并将其分配给待定邀请的用户。

最简单的氛围编程形式是"一次性氛围编程",您希望模型在仅一个提示后生成完全工作的应用程序,无需提供任何关于修复、添加、删除或更改的进一步输入。

我有点作弊,因为我用来一次性完成此操作的提示基于早期尝试,其中模型做了我不想要的事情,但下面显示的和在smartsplit.verysmall.site上的应用程序是claude -p “Read the SPEC.md file and implement it"的输出。我的SPEC.md文件大约500字(稍后完整显示)。

两个氛围编程代码库的故事

让我们看看这两个项目和创建它们的提示。工作版本是一个900行的index.php文件,包含整个应用程序。损坏版本是一个分成客户端和服务器的NodeJS项目。就代码行数而言,它并不长——大约1000行非依赖代码分布在15个文件中。但在损坏版本上运行npm i后,它会拉取500MB(!!)的依赖项。

这是完整的SPEC.md。我给Claude Code的这个提示是一个SPEC.md文件。在两种情况下几乎相同,除了PHP版本我告诉它保持简单,远离框架,只编写原始SQL。在损坏版本中,我让它做任何想做的事情。

smartsplit-php [master+] $ cat SPEC.md SmartSplit是一个基本的CRUD应用程序,如SplitWise,让用户分摊费用并弄清楚谁需要向谁支付什么。

具体来说,它具有以下功能

  • 用户可以使用姓名、电子邮件地址和密码注册
  • 用户可以创建新的SmartSplit并为其命名
  • 用户可以添加具有名称、可选描述和金额的费用
  • 添加费用时,用户可以指定谁支付了费用,以及应该与谁分摊
  • 重要:用户可以指定其他用户是付款人,不仅仅是登录用户
  • 重要:用户可以添加其他用户作为付款人或分摊人,即使他们尚未加入
  • 对于尚未加入的用户,用户可以通过邀请的电子邮件地址选择他们
  • 邀请不通过电子邮件发送,没有电子邮件。它们仅用于管理访问的唯一用户名
  • 一旦他们加入并添加了姓名,应该在任何地方显示姓名而不是电子邮件地址
  • 添加新费用时,默认在所有用户(已加入和已邀请)之间分摊
  • 添加者可以删除一些用户,如果其中一些人没有参与该费用
  • 为简单起见,所有分摊始终均匀,在为该费用指定的所有人之间平均分配
  • 用户可以通过指定电子邮件地址邀请另一个用户加入SmartSplit
  • 每个SmartSplit获得一个唯一的8位字母数字代码,便于共享URL
  • 任何用户都可以创建新的smartsplit,或者如果使用被邀请的电子邮件地址登录,则可以加入现有的smartsplit
  • 即使该用户尚未在SmartSplit上拥有帐户,他们在注册后也将有权访问他们被添加到的任何SmartSplit(这一点很重要)。如果被邀请者添加了他们的电子邮件地址,他们应该自动拥有访问权限
  • 任何用户都可以在他们有权访问的SmartSplit中添加、删除或编辑任何费用
  • 任何用户都可以按下"结算”,这应该计算谁需要向谁支付什么以分摊所有费用

实现细节

  • 电子邮件地址是用户名,所有注册和登录仅使用电子邮件和密码完成
  • 密码被哈希处理,但没有应用额外的安全性,如长度或弱密码或确认密码
  • 用户注册后自动登录
  • 登录和注册流程相同,但如果用户没有帐户则注册,如果有则登录

技术细节

  • 对整个应用程序使用单个index.php脚本
  • 所有数据库功能使用SQLite
  • 无框架,仅使用原生javascript和css
  • 无ORM,使用原始SQL
  • 使用干净、简约、优雅的设计,移动响应式

最后五个要点是两个提示之间的唯一区别,因此在某种意义上,它们代表了将500MB的损坏代码转换为30KB的工作代码。

构建自主创业

关于Claude Code的事情是,它并不是真正的魔法模型。它仍然在底层使用Sonnet或Opus,这些都很棒,但它们不会做Claude Code能做的事情。Claude Code的魔法就像魔术师的技巧——看起来令人难以置信,但一旦看到它是如何完成的,就出奇地简单。

给机器人一个根VPS并说"去取"

我想到的第一件事是扩展那个循环——也许是无限地?如果给Claude Code一些资源,比如一个根VPS,和一些最小指令永远不终止并永远运行,它能走多远?

剧透:这是它构建的。您可以在claude.dwyer.co.za访问它构建的创业公司,或在github.com/sixhobbits/claude-experiments查看GitHub项目。

我在Hetzner上启动了一个便宜的VPS,安装并验证了Claude Code,并折腾了一会儿,试图让它编写自己的提示,关于构建自主创业公司及其自己的循环逻辑,以在没有我输入的情况下永远运行。

我遇到了一些问题,让它理解它不应该终止,所以我告诉它编写一个基本的bash脚本,每当检测到它没有运行时,就用-p标志和"please continue"调用claude。

这是脚本:

export IS_SANDBOX=1 && claude –dangerously-skip-permissions 非财务建议

它编写了自己的提示(链接)(我不记得我给它的确切提示来编写这个文件,但它短得多,只是概述了构建自主创业公司的基本目标),评估了一堆创业想法,对它们进行评级,并开始工作。

我通过查看GitHub上的新提交观看它编码了一会儿。我意识到我仍然需要一种方式在它编码时稍微引导它,而不给我任何运行应用程序的方式。我添加了HUMAN_INPUT文件的想法,它需要在每个循环中检查,并告诉它在继续更多功能开发之前确保应用程序可用且工作。

它提出的想法(服务器监控)完全没有意义,它从未意识到这一点。它是一个Web应用程序,所以它可以监控的唯一服务器是它正在运行的服务器,但从副本来看,它似乎认为它是一个SaaS工具,您可以注册并监控自己的服务器。您不能。

但这仍然是令人印象深刻的东西。它配置了一个完全工作的全栈Web应用程序,包括Nginx、证书等。它正在进行真实(如果被误导)的开发工作,几乎没有任何我的输入。

遇到障碍:模型构建者现在也是警察

大多数时候,我可以通过以下方式与我的创业构建器交互:

查看它对生产网站所做的更改 查看它在GitHub的各种注释文件中添加的输出以及它要求的人类帮助 向HUMAN_INPUT.md添加内容

在它停止工作之前,我从未需要SSH到VPS。在6小时没有提交后,我不得不登录检查发生了什么: [Fri 25 Jul 2025 02:29:41 AM UTC] Starting Claude process… API Error: Claude Code is unable to respond to this request, which appears to violate our Usage Policy (https://www.anthropic.com/legal/aup). Please double press esc to edit your last message or start a new session for Claude Code to assist with a different task. [Fri 25 Jul 2025 02:29:47 AM UTC] Claude process exited with status: 1 Waiting 3 hours before restart.. 哦哦。我们再次被阻止,我听说Anthropic有声誉,即使付费账户也很少或没有警告就关闭。

我阅读了用户政策,看到我最近的输入告诉它继续并向用户推销创业公司可能触发了一些老大哥开关。用户政策(显然我在注册时也读过。我总是在使用软件前阅读所有细则,您也应该这样做。但不知何故我忘记了这一点)指出自动发布的内容需要人工参与,而Claude试图在没有我批准的情况下在Hackernews上推广创业公司。(我不确定它是否有动机或能力实际创建HN帐户并开始发布,但它不愿意尝试。)

迁移真实生产项目

我第一次有机会在风险较高的项目上尝试Claude Code是当我在Slack上收到朋友Nic的DM时。

“你有地方托管Sboj吗?”

我最近从Nic那里接管了ZATech.co.za Slack社区。一个相关项目是Sboj - 一个反向工作板(稍微眯眼看名字),集成到Slack社区中进行招聘。

ZATech和Sboj,两个我接手的项目,正在努力找时间给予它们应有的关注。

这是一个Laravel/PHP应用程序,带有MySQL和一堆其他辅助东西,我几乎不熟悉(我通常选择Python和Postgres),它运行在一个昂贵的托管服务上,对于流量和用户量来说过度了。

Claude Code?请。

它在分析代码库和告诉我需要检查我是否有权访问的依赖项方面非常出色。

它列出了我期望的东西(如一些工作队列东西)和我不期望的东西(如我从未听说过的Cloudflare Turnstyle)。

我手动安装并授权Claude,克隆了仓库,并获得了数据库转储文件。然后我启动Claude并告诉它开始。 我说lfg。 命令未找到。哦是的,VPS,没有快捷方式。export IS_SANDBOX=1 && claude –dangerously-skip-permissions。

它设置了我需要的一切,并在临时域上运行了应用程序。同时,我必须在后台做一些老式的非AI工作,获取各种帐户的访问权限并将2FA切换到我。

它在恢复数据库时遇到了一些问题,我很高兴我现在更仔细地观看,因为它试图手动创建新的SQL转储文件,这些文件只是我给它实际转储的摘录,以绕过没有正确权限的问题。在告诉它不如给自己在SQL数据库上的超级管理员权限并从那里恢复转储后,它没问题。

您可以构建东西

这些只是我使用Claude Code以来构建的一些东西。其中大多数是实验性的,我读到一些报告说它在庞大的真实世界代码库上表现不佳,但根据我所看到的,如果有足够的指导,我会惊讶它在这些上下文中仍然没有用。我仍然惊讶于当给予大量上下文和输入时,它作为工具要好得多。

以下是我让它吐出的其他一些玩具项目——所有这些都是我几个月或几年来想构建但从未找到时间的东西。现在您可以在几分钟或几小时内完成这样的事情,而不是几天或几周。

构建HackerNews评论排名插件

我经常对HackerNews上的评论感到恼火,这些评论完全不是关于它们评论的文章。“比特币采用新的FlibbityGippity协议,现在可以每天处理2.3笔交易”,有人会评论说所有加密项目都是骗局之类的。请注意,我不关心评论的质量,或者我是否同意它,但我想要一种视觉方式来跳过根本不关于文章的"噪音"评论。

我之前尝试构建这个,但被更重要的东西分心,所以我想我会用Claude Code重新开始。

在它能够正确显示HN(相当简单)HTML结构中的徽章之前,它尝试了几次,但经过几轮"不,再试一次"或"添加更多调试,这样我可以将错误粘贴给您",它创建了几乎正是我设想的东西。

我对它的外观感到惊讶(比我正常的hacky前端好得多),以及它未经提示添加的细节(如非常好的设置页面,甚至向HN橙色主题致敬)。

实际排名(我使用OpenAI,不是Anthropic)不是那么好。它可能可以通过更好的提示和一些更多示例来改进,说明我认为什么是"1"评论或"5"评论,但它工作并且看起来至少方向准确。

构建海报制作器 - 一个最小的Canva替代品

AI在平面设计方面越来越好,我知道有人使用它生成基本海报。他们喜欢AI可以选择好的背景图像,并且通常使用大小合适的字体等使东西看起来不错,但他们感到沮丧的是,AI仍然只有80%擅长生成文本图像,并且经常有拼写错误或其他伪影。

我打算告诉他们使用Canva或Slides.new或其他替代品。我尝试了它们,这样我可以做一个关于如何使用它们的快速教程,并意识到它们都很糟糕。要么被糟蹋到死,要么缺乏基本的AI功能,要么对非技术人员来说太复杂。

LFG!

这个项目感觉比其他项目更像工程而不是氛围编程。我知道我想要什么:一个非常简单的界面来组合图像和文本并获得A4 PDF输出。我之前尝试构建类似的东西,并查看了不同的PDF创建库、HTML→PDF流程,并看到这不是最容易解决的问题。

上次我解决类似问题(2018年)时,我最终在Google Docs中黑客创建A4 PDF,但那更多的是模板问题,而Google Docs对于布局东西不是很好。

所以我构建了posters.dwyer.co.za - 它让您用AI生成背景图像(我使用Claude Code构建一切,但我告诉它使用GPT进行图像生成,因为那是我之前使用的,我认为它更好?我甚至不知道Anthropic是否有图像生成API,老实说,使用我知道的东西似乎更容易)。

这个项目花了几个小时来回。我对Claude的一些UI知识印象深刻(当我告诉它我想要什么时,它一次性完成了字体选择),并在其他方面看到了限制(它一直以非常不用户友好的方式叠加元素,侧边栏会隐藏和显示并移动所有东西,它显然不知道作为人类并使用这样的东西是什么感觉)。

但在告诉它确切放置元素的位置和它们应该做什么之后,我得到了或多或少正是我设想的东西。我对PDF导出在第6或第7次尝试空白文件或截断文件后工作得如此好感到惊讶——现在它似乎非常擅长给我一个与预览版本完全相同的PDF,对于任何非技术人员来说,这似乎是一个非常基本的功能,任何真正尝试过这样做的人都知道这就像XKCD鸟问题:

使用Claude Code进行管理

这不是我真正构建的项目,但我越来越多地使用Claude Code执行非编码相关任务。我需要为我的会计师上传银行对账单,但我(糟糕的)南非银行没有很好地命名文件。我可以从Web应用程序下载每个月,但它将它们全部称为"Unknown (5)“或任何没有扩展名的东西,所以正确命名它们很痛苦。

我要求Claude重命名所有文件,我可以去做其他事情,而它努力工作,读取文件并找出正确的名称。

然后我更进一步,告诉它将它们全部合并到一个CSV文件中(这也涉及从我银行提供的格式错误的XLSX文件中提取随机标题选项卡),并将所有费用分类为广泛和特定类别。我告诉它一些事情,如团队中特定人员的角色,我认为它也一次性完成了。我还不打算解雇我的簿记员,但如果我是簿记员,我肯定会确保现在用AI工具提升技能。

使用Claude Code作为我的文本编辑器

我是一个顽固的原生vim用户,用于所有写作、编码、配置和任何其他适合的事情。我尝试过几乎所有的IDE和文本编辑器,当我为AWS推送生产Java时,我当然很高兴有一个真正的IDE,但vim是我一直回来的东西。

切换到Claude Code打开了许多新的设计可能性。之前(我提到过我前端编码很烂吗),我仅限于静态站点生成器或pandoc模板产生的任何输出。现在我可以告诉Claude写

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计