Claude Artifacts 编程经历感悟

我决定分享这个个人故事有两个原因：

• 对于那些可能不知道他们已经可以使用这些 AI 工具创建和发布小型 Web 应用程序的 ChatGPT 或 Claude 用户来说，它将很有用。事实上，即使是那些没有编程经验的人也可以在短短几个小时内完成这样的项目。
• 这个故事还说明了基于实践的学习的某些原则。虽然我认为自己对自主学习很了解（查看我关于这个主题的博客文章），但使用 AI 编程让我对学习原则有了新的见解。

TL;DR

生成式 AI 使我们能够通过多次迭代而不是一次性尝试来解决问题。这些短周期不仅可以产生更高质量的解决方案，而且还在此过程中提供新的见解和技能发展。特别是，AI 使得在开发应用程序的同时学习新技术成为可能，从而节省了传统学习所需的大量时间。

你可以跳过我关于构建这个简单的 Web 应用程序的故事，详细了解这些结论。

1、故事第一部分：快速取胜

两周前，我正在撰写一篇文章，介绍如果 AI 知道一个人喜欢的学习方式，它如何有效地充当老师，这基于 Kolb 的体验式学习模型。我正在寻找一个可以识别学习风格的免费在线测试，旨在为读者提供一个实用的工具。使用“Kolb 的学习风格”等搜索词，我很快发现可用的测试是付费的（35 美元），甚至这些测试的 120 页技术手册也不包含实际的问题措辞。

因此，我简单地要求 AI 生成问题以确定学习风格：

Generate 12 questions (statements) to determine my learning style based on Kolb's experiential learning model. 
They must assume 2 answers: Agree or Disagree to the statement. 
3 questions must align with each of the 4 elements of Kolb's model: 
Concrete Experience, Abstract Conceptualization, Reflective Observation, Active Experimentation.

Output the questions as CSV table: column 1 - statement, 
column 2 - one of the four elements, 
column 3 - a brief explanation why you relate the statement with this element. 
All cell values must be quoted. Put the CSV into the code block.

在这个提示中，只有一种提示工程技术值得注意：我要求 AI 在单独的列中解释每一行。如果没有这个步骤，测试问题的质量会降低。

1.1 关于 Kolb 循环的注释

如果你有兴趣提高自己的学习效率，但不熟悉上述提示中提到的“四个要素”，我建议你阅读这篇文章或简单地查看此图表：

1.2 比较不同 LLM 的内容

我决定仔细选择 AI 生成的测试问题。这种方法不仅可以提高 AI 为读者生成的测试的质量，还可以让我探索不同 LLM 之间的质量差异。

因此，我不仅使用广泛使用的 gpt-4o 模型测试了提示，还使用：

• o1-preview 模型，它可以进行更深入的推理并可以生成更精心设计的测试。
• Claude 3.5 Sonnet 模型，该模型在不同的数据集上进行训练，因此可能产生与 OpenAI 模型明显不同的结果。

o1 模型的推理能力并没有提高测试问题的质量；事实上，它甚至可能造成干扰。我发现 Claude 的问题最有效，因为它们与 Kolb 的模型元素更直接相关，而 o1 和 GPT-4o 中的一些问题有些模糊。

我在使用 AI 聊天机器人时也得出了类似的结论（请参阅我的小型研究示例）：

对于定义明确的任务，Claude 往往比 ChatGPT 更少偏离指令和事实。相比之下，OpenAI 模型在更具创造性的任务和为用户“填写”详细信息方面优于 Anthropic 模型（这在许多情况下很有用，但对于手头的情况则不然）。

1.3 在 Claude Artifacts 中创建应用程序

在查看了来自三个 LLM 的 36 个问题的表格后，我选择了 20 个条目。但是，仅仅展示一个问题表对于我的文章读者来说是不够的——我需要创建一个交互式在线测试。

我听说 Claude Artifacts 可能有助于完成这样的任务。因此，我快速概述了基于 Web 的测试应用程序的要求（大约 300 个纯文本），并将其连同 20 个问题的表格一起提交给了 Claude。

Claude 第一次尝试就成功了，创建了完全符合我要求的内容：在线测试 Claude Artifact。“第一次尝试”的意思是，在提交初始要求后，我不需要写一个字。

最初，生成的代码无法显示在 Claude.ai 用户界面中（环境缺少 shadcn 库中的“表格”组件），但 Claude 告知了我这一点，并建议按下按钮来修复它。它看起来是这样的：

此外，Claude 将测试及其结果设计得非常吸引人，尽管我没有指定任何关于视觉布局或设计的说明（除了注释“如果语句没有选择选项，请用红色标记”）。

我认为这次“第一次尝试”的成功是一个重要的里程碑。现在，像我这样的普通用户（不是程序员）可以简单地概述他们的功能需求（不是技术需求！），AI 将提供一个具有复杂逻辑和体面外观的可运行应用程序。

1.4 在 OpenAI Canvas 中创建应用程序

我也向新发布的 GPT-4o with Canvas 模型发送了同样的要求。我听说它便于迭代编辑文本和代码。事实证明确实如此——Canvas 比 Artifacts 具有某些可用性优势。

然而，出现了两个主要问题：

• 首先，我无法让 GPT-4o 创建我想要的测试。ChatGPT 始终只使用我 20 行表中的前 5 行，自行即兴创作其余 15 行。

• 其次，ChatGPT 创建的测试应用程序看起来相当不吸引人（测试结果页面更糟）。例如，根本没有侧边距。虽然 GPT 按照我的要求添加了行距（见上面的屏幕截图），但这显然不足以满足现代用户的期望。

在这方面，Anthropic 团队似乎做出了一个聪明的举动，他们专门训练他们的模型，使用 React 和 Tailwind CSS 等框架来制作设计精良的 UI。与此同时，OpenAI 尚未向其用户提供此功能，因此 GPT-4o 仅使用最少的 CSS 样式生成基本 HTML。

如果你和我一样，不精通 CSS 或不熟悉前端框架，ChatGPT 仍然无法帮助你创建一个精致的应用程序，让你有信心与他人分享。

2、故事第二部分：更大、更可靠的测试

如果你只是为了 AI 技巧而阅读这篇文章，你可以直接进入下一部分。

AI 生成的测试内容很快，但不是特别可靠。这类似于在网上找到一个随机的心理学测试，并希望它有一些心理科学基础（通常没有）。经过进一步研究，我发现 Honey 和 Mumford 的学习风格与 Kolb 的模型非常相似，只是名称更实用：激进主义者而不是发散者，反思者而不是同化者，理论家而不是收敛者，实用主义者而不是随和者。

最重要的是，与专有的 Kolb 学习风格清单 (LSI) 不同，Honey 和 Mumford 学习风格问卷是开放的。然而，原始问卷对非英语母语人士来说具有挑战性，因为它包含十几个习语，如“不遗余力”和“九霄云外的猜测”。我找到了 Honey 和 Mumford 问卷的简化版：一份 PDF 文件，包含 80 个问题，语言更清晰，与四种学习风格相关，并附有对每种风格的详尽解释。

我将所有这些都纳入了我的应用的第二个版本（下面的在线测试）。

2.1 代码不完整问题

为了让 Claude 构建一个新应用程序，我使用了第一个提示，但根据我在创建和测试第一个在线测试时发现的小问题对其进行了修改。这导致了第二个提示。

Claude 对此提示的回应可以在这里找到。它不是一个完整的产品，因为只添加了 80 条语句中的两条，并且只包含了 4 种风格中的一种（Activist）。

这种不完整的代码不是一个错误——而是一个功能。生成如此大量的文本，如 80 条语句和 4 个冗长的风格描述（程序代码之上大约 15,000 个字符）将代价高昂。因此，LLM 经过培训，建议用户自己处理这个问题。

这次，我求助于 ChatGPT 来格式化上面的数据。它在第一次尝试时成功添加了所有 4 种风格，尽管它确实需要我额外提醒才能包含所有 80 条语句：

正如我之前提到的，OpenAI 模型往往过于有创意。在这种情况下，GPT-4o 从我的文件中取出了前 19 个问题，并自行发明了其余 61 个问题。

因此，请务必仔细检查输出的准确性，即使 ChatGPT 用“我已经从提供的文档中添加了所有问题”（就像它对我做的那样）之类的话来安慰你。ChatGPT 只是重复给出的指令，而不一定是它实际执行的工作。它看起来像是作弊，但它只是缺乏自我意识。你的提醒通常会有所帮助。

2.2 关于 LLM 快速发展的说明

如上所述，与较小的 20 个问题测试不同，Claude 拒绝创建包含 80 个问题的工件。这仅仅是由于令牌限制：代码变得太长而无法容纳在单个工件中。但是，此限制仅适用于一周前最新的 LLM 的特定版本：claude-3–5-sonnet-20240620。

最新版本 claude-3–5-sonnet-20241022 表现更好：

• 它询问用户是否要包含所有 80 个问题，
• 如果用户确认，它会成功以正确的格式生成所有 80 个问题。

但是，Claude 并没有将这些问题合并到应用程序代码中，这意味着我仍然需要手动组合两个 Claude 工件来创建一个有效的在线测试。因此，仍然无法通过 claude.ai 直接分享测试。然而，使用这个更新版本的 Claude，我不需要提供额外的指令来重新格式化测试内容。

因此，上周的 Claude 更新减少了我完成任务所需的手动步骤数量。同时，正是对这种额外的手动步骤（尤其是额外的思考）的需求，仍然限制了我们将 AI 应用于更广泛任务的能力。

因此，不要丢弃你使用 AI 的提示和算法，即使它们目前看起来没有效率。明天，我们可能会发现我们不需要采取任何额外的步骤或进行任何调整。有了同样的提示，我们可能会立即获得结果。

即使 AI 以前无法解决你的任务（尽管你多次提示），新的 LLM 版本也可以轻松处理它，这是我在经验中多次观察到的。

考虑到这一点，我建议以一种方式组织你的任务提示，以便以后在发布新的 LLM 或 AI 工具时可以轻松找到它们。尤其是，许多人对基于多个 AI 代理编排的工具抱有很高的期望。这些工具旨在自主实现最终目标，无需人工参与。

2.3 按照 Kolb 的循环创建应用程序

这个故事的最后一步是在线部署 Web 应用程序。但在开始之前，让我们先通过 Kolb 的循环来看看整个故事。总结一下，Kolb 的模型将我们的学习和解决问题的行为分为四个要素：具体体验、反思观察、抽象概念化（思考）和主动实验。

以下是迄今为止的故事摘要：

迭代 0：

• 体验：我试图找到一个关于 Kolb 学习风格的免费在线测试
• 观察：我花了很多时间搜索，但失败了
• 思考：我可以用 AI 创建类似的测试吗？哪个 AI 可以提供帮助？
• 实验：我将尝试使用 Claude Artifacts 进行此操作

迭代 1：

• 经验：我尝试使用 Claude Artifacts 创建在线测试（内容和应用程序）
• 观察：应用程序已发布，但测试内容并不理想，并且未经科学验证。
• 思考：是否有其他选择？
• 实验：我将尝试查找内容可在线获取的类似测试。如果成功，我可以像最近一样将内容转换为应用程序。

迭代 2：

• 经验：我找到了 Honey 和 Mumford 的测试，并创建了应用程序的工作代码，但此代码太大，无法作为 Claude Artifact 发布。我需要一种方法将其发布到其他地方。

我们现在就到了这一点。让我们通过 Kolb 循环的视角看看故事的结局。

2.4 故事的结局：死胡同和解决方案

经验：发布应用程序的代码。

我之前从未运行过 React 应用，一开始也不确定在哪里可以发布。Google 建议使用 GitHub Pages，所以我找到了分步指南，并在那里成功发布了一个空应用。然后我将 Claude 的代码添加到应用中，并修复了一些有关 Tailwind 和 shadcn 库初始化的小错误。但是，应用一直无法编译，错误为 找不到模块：错误：无法解析‘@/components/ui/button’。尽管尝试了 Google 提供的多种解决方案，但问题仍然存在。最后，我发现根本原因可能与最新版本的 shadcn-ui 库的问题有关。我尝试切换到较早的版本，但失败了。

反思：

我花了太多时间修复错误，开始感到沮丧。

思考：

也许我应该尝试不同的方法来让我的应用上线。

实验：

我将尝试通过向 Claude 提供相同的提示以及在没有 shadcn 库的情况下执行此操作的要求来摆脱代码中缺少的组件。

迭代 3：

经验：

最初，Claude 使用了另一个库，这让事情变得更加复杂。我请求了一个替代解决方案，将其添加到我的项目中，并最终发布了测试。

反思：

在成功的迭代 3 中，我花费的时间比失败的迭代 2 要少得多。我只是写了几句话，按照部署说明进行操作，并最终得到了这个完全符合我对测试期望的交互式 GitHub 页面。

顺便说一句，如果你有兴趣发现自己的个人学习风格，我建议你参加这个快速测试（5-10 分钟）。主要结果如下：

3、一般要点

现在让我们从高层次来看一下整个解决问题的过程。关于人工智能如何影响自我学习和解决问题的方法，出现了一些一般性的见解。

结论 1：引人入胜的问题 + 人工智能 = 解决方案 + 新技能

当你处理真正吸引你的现实问题时，它为学习工具和方法提供了理想的环境。与问题本身不同，这些工具和方法本身可能看起来并不吸引人，但对于解决未来其他有趣的问题很有用。

就其本身而言，这个想法与人工智能并没有内在联系。然而，在生成人工智能时代之前，在解决现实问题的同时“即时”学习几乎是不可能的。如果没有人工智能助手，在解决问题的过程中试图掌握不熟悉的工具太耗时了，因为现实生活中的问题总是有最后期限的。除此之外，不熟悉的方法往往令人望而生畏，所以几乎肯定会拖延。这就是为什么我们通常依赖熟悉的方法和工具，而不是探索新的方法和工具。

人工智能解决了这两个障碍。一旦我们向它提供需求，人工智能就会快速生成中间结果；而审查人工智能生成的输出要轻松得多（肯定比从头开始要轻松得多）。这是学习新工具或方法的宝贵第一步，有助于克服拖延症。

因此，人工智能不仅能让你更快地解决现实世界的问题，还能让你在这一过程中获得技能，而如果没有人工智能的帮助，你可能会犹豫不决。

回到我的故事：我不再对 React、Tailwind CSS 或 shadcn/ui 感到畏惧，因为它们成为了解决我感兴趣的项目的工具——开发一个关于学习风格的在线测试。整个过程只花了我大约 4 个小时（大部分时间都花在了死胡同迭代 2 上）。这只是在没有人工智能帮助的情况下使用这些不熟悉的技术构建相同应用程序所需时间的一小部分。

同样令人欣慰的是，这 4 个小时中的大部分时间都用于自学和获得新见解，而不是简单地解决问题。例如，我意识到 shadcn/ui 仍然是一个不成熟的库，作为一名非程序员，我最好在它更稳定之前避开它。如果没有人工智能，我可能需要大约两天的时间才能意识到这一点。

当然，我不能说我在短短三个小时内就从头“学会”了 React、Tailwind CSS 和 shadcn/ui，但这不是我的目标。我获得的主要技能是在 AI 的支持下快速开发和部署基于现代技术的应用程序的能力。目前，这项技能仅适用于简单的应用程序，但迈出第一步——最难、最令人生畏的一步——才是最重要的。既然我已经迈出了这一步，我感觉已经准备好开发更复杂的应用程序了。

结论 2：AI 为多次迭代提供了时间

AI 在解决问题时实现多次迭代的能力至关重要，尤其是在不熟悉的领域。它不仅可以带来更好的解决方案，还可以为自学和获得新见解提供更大的机会。

在使用 AI 获得第一个快速结果后，值得思考如何改进第二次迭代。在我的故事中，这导致我在 GitHub Pages 上部署了应用程序，从学习的角度来看，这更有价值。我的意思是：

• 第一次迭代的结果是一个由 AI 生成的问题组成的可立即使用的在线测试。这只花了大约两个小时，在此期间，问题选择过程帮助我更好地掌握了理论，测试揭示了此类测试的局限性。
• 不慌不忙，有了新的视角，我能够考虑，“我如何才能免费提供更准确、更专业开发的测试，而不是 AI 版本？” 半小时内，我整理出了一个包含 80 个经过验证的问题的表格。
• 将这些问题转换为公开的在线测试比 20 个问题更具挑战性（洞察：大小对于 AI 辅助编程确实很重要！）。最初，它让我走进了死胡同。我花了三个小时开发一个无法部署的应用程序（迭代 2），又花了半个小时最终确定了一个可行的解决方案（迭代 3）。然而，与“成功”的第一次迭代相比，“死胡同”的第二次迭代教会了我更多新技能（见上文）和见解（见下文）。

这个故事是 David Kolb 描述的一个例子：

• 对于成年人，学习通常始于他们发现自己处于陌生的境地并获得经验（通常是负面经验，这会激发进一步学习的动力）。
• 接下来是对经验的反思，从而产生有助于从经验中形成连贯画面的理论知识。这里的一个关键工具是信息搜索，无论是通过谷歌还是通过 ChatGPT 或 Perplexity 等人工智能辅助工具。
• 通过运用这些知识来解决重新定义的问题，我们获得了新的经验和见解。

因此，如果你陷入了死胡同，这实际上对你的学习是有益的。关键是借助人工智能的帮助迅速走出困境，进入下一次迭代。

通过 shadcn 库走出死胡同，我得到了两个关键的认识：

• 有了 Claude 或 ChatGPT 这样的工具，是时候重新思考传统的解决问题的方法了。现在，用不同的技术重写代码比费力修复现有代码中的错误或解决云中的部署问题更快。
• 我现在不太倾向于“无论如何”寻找他人的解决方案。虽然我仍然相信这样的解决方案存在，但找到并适应我的需求所需的努力可能是巨大的。相反，我会问自己：“用人工智能创造自己的解决方案不是更快吗？”

总之，人工智能使某些以前看似不切实际的解决问题的方法在速度和质量方面达到最佳。增加迭代次数就是这样一种方法，现在非常有意义。

结论 3：人工智能的快速进步使不可能成为可能

上述切换到更新的 Claude 模型的示例在微观层面上说明了这一点：昨天运行不佳的提示今天可能会完美运行。

可以在宏观层面上得出更重要的见解：

人工智能使我们能够进行职业转型。人工智能使我们能够从事我们渴望但无法从事的工作——无论是由于缺乏教育、时间还是其他限制。这种转变最常见的例子之一是“我是我自己的程序员”。

作为一名程序员，我从未开发过商业产品。然而，在这个故事之后，我有信心，我可以用人工智能构建这样的产品，而无需专业的软件开发人员。顺便说一句，Sam Altman 说，许多人已经开始完全用自然语言编程。

如果你以前从未编程过，另一个例子可能会引起更多共鸣。我有一位同事曾经是软件项目经理，但直到 2024 年才编写任何代码。现在，由于他的人工智能高级用户技能，他独立处理 Python 中相当复杂的任务，以实现我们公司的内部自动化。

因此，人工智能不仅可以加快我们的工作速度，还可以实现全新类型的活动。

4、总结

让我总结一下故事中提到的 AI 技巧：

• 现在，Claude 在遵循要求和生成 Web UI 方面的表现优于 GPT-4o 和 o1-preview。
• 如果代码相对较短（Claude 最多约 10,000 个字符，ChatGPT 最多约 5,000 个字符），您可以期望 AI 生成应用程序的完整代码。否则，您必须从 AI 生成的几个部分构建您的应用程序。
• Claude Artifacts 功能对于非程序员来说是一个改变游戏规则的功能，因为您不必考虑生成的应用程序的部署。
• 始终检查 AI 生成的数据的完整性。不要依赖“我已经添加了所有……”之类的陈述而不进行验证。如果某些部分缺失或不符合您的要求，只需重新运行任务；AI 很可能在第二次尝试时按要求完成。在这方面，Claude 比 ChatGPT 更可靠。
• 最好以有组织的方式存储用于解决任务的提示，以便在发布新的 LLM 或 AI 工具时轻松找到它们。随着时间的推移，相同的提示往往会表现得更好甚至超出预期。

一般要点总结：

• 过去，在解决实际问题时往往没有足够的时间学习新工具。现在，AI 使我们能够更快地解决问题并在过程中获得新技能。
• 由于 AI 可以快速重建早期版本的内容（尤其是代码），现在有更多的时间进行多次迭代解决问题；迭代通常与 Kolb 的学习周期一致。例如，如果初始软件库出现重大问题，现在使用不同的软件库重写代码会更快。
• 这种迭代解决问题的过程不仅提供了更多的学习机会，而且还在相同的时间内产生了更高质量的解决方案。

• 人工智能不仅能帮助我们更快、更高质量地工作，还能为我们开辟新的角色。在本文中，我分享了我“在长时间休息后重新找回程序员角色”的个人经历，这要归功于人工智能。我相信任何技术熟练的人，有应用想法的人应该尝试担任应用开发人员（“自然语言程序员”）的角色。
• 人工智能与互联网搜索竞争不仅是因为 Perplexity 和 ChatGPT Search 等工具往往比谷歌更方便。人工智能还意味着创建自己的解决方案（例如应用程序）有时比在线搜索现有解决方案更有效率。这可以更快，更符合你的需求。

原文链接：My First Programming Experience with Claude Artifacts — and Gaining Broader Insights into AI

汇智网翻译整理，转载请标明出处