如何使用Claude Cowork创建Web应用【实操视频】

借助Claude协同工具和现代托管平台，将脑海中的想法付诸实践，在几分钟内上线互联网，从未如此便捷。无论是开发网络应用还是搭建网站，你都能轻松实现。如今，真的没有任何借口再拖延了。

所以，在本视频中，我将一步步教你如何在一小时内搭建起自己的网站或网络应用。整个过程主要分为两个步骤：首先，你需要创建网站或网络应用本身，并完成代码编写；其次……

其次，你需要将其发布到互联网上。首先，你应该使用你已经在用的任何AI工具，无论是Claude、Gemini还是ChatGPT。

就我个人而言，我会选择使用Claude协同工作来完成这个任务，因为我认为这是获取最佳成果、并以最快最高效方式完成设置的最佳途径之一。首先，让我们打开Claude协同工作，并开始一个新项目。

合作，我们将启动一个新项目。这样，你的整个网站创建过程就能完全融入该项目中。未来如需进行任何修改，你可以轻松返回并作出调整。因此，请确保你已做好准备。

所以，请确保你位于顶部的协作工作区内，点击左侧标有“项目”的位置，我们将开始一个新项目，从零开始。现在你可以为此命名。

如果你知道要创建的网站名称或项目名称，可以直接命名；如果不知道，可以暂时称之为网站创建或类似名称。目前我们先不填写具体说明。

然后你需要为文件夹选择一个位置，这个文件夹将由Claude为你创建，用于存放网站的所有组件。

所以，我要把这个放进我的iCloud文件夹，这样万一将来我的电脑出问题，它就有备份了。很好，一切设置就绪，点击创建。现在我们有了新的网站创建项目。

为了让你尽可能轻松上手，我特意准备了一个提示词来帮你入门。你可以在下方描述栏的链接网站中找到它，然后复制并粘贴到这里。

在下方，您可以看到可以选择使用哪个模型。对于大多数使用场景，我建议使用Sonnet。如果遇到问题需要更强大的功能，再切换到Opus。

我不会全职使用Opus，因为它会快速消耗你的使用额度。所以我总是从Sonnet开始。选中后，点击“开始吧”。接着协作功能会开始询问你想要构建哪种类型的网站。我给你的这个提示就是用来引导它的。

我给你的这个提示是让它构建。我给你的这个提示是让它通过这些问题来了解你的需求，然后根据这些需求，为你构建出包含所有必要文件的网站，以确保其正常运行。

所以第一个问题是：这个网络应用的主要用途是什么？它是一个工具，还是工具的展示页面，或是像作品集或仪表盘那样的内容展示页面？

所以，我会告诉它我想要一个网页应用，让我能轻松分享我在YouTube视频中使用的所有提示。然后，它会问我一些更具体的问题，比如它现在问我希望如何组织这些提示。我会告诉它按视频来组织。

现在，在提问过程中的某个环节，它会询问你网站所需的视觉风格。你可以直接描述，或者发送你喜欢的其他网站截图作为灵感参考。

一旦完成对你的访谈，它会为你勾勒出蓝图。这能保护你，以防它出现错误。在你实际批准这份蓝图之前，它不会构建整个网站。所以，请仔细阅读这份蓝图，并确认。

所以，请仔细审阅，确保结构、设计和技术细节完全符合你的预期。如果确认无误，就告诉它看起来不错并开始创建。但如果你想要进行任何调整，现在正是时候。对我来说，这看起来非常出色。因此，我将继续推进这个项目。

现在，在右侧，我们可以看到它开始工作了。它为自己创建了一个待办事项列表，并且已经完成了一些任务，还为我们创建了额外的文件。这些都是网站所必需的文件。

那么，我们开始为网站做必要的准备。给它几分钟来处理这个，给它几分钟来处理这个，给它几分钟来处理这个并完成它，然后我们会回来完成它，然后我们会回来完成它，然后我们会回来看看创建了什么。好的。回来看看创建了什么。好的。回来看看创建了什么。好的。一旦完成，你会注意到它一旦完成，你会注意到它一旦完成，你会注意到它在这里为你创建了三个不同的文件在这里为你创建了三个不同的文件在这里为你创建了三个不同的文件：Package、server和index。你在这里。Package、server和index。你在这里。Package、server和index。

你可以通过点击文件夹中的“显示”来查看这些内容。在这里，你可以看到所有文件。这些就是我们即将上传到网上，用以实际发布我们网站的内容。现在，这听起来可能有点困难和抽象，但我向你保证，这一点都不难。

我保证这一点都不难。那么，现在让我们切换到我的浏览器界面。这里就是你需要访问的地方——github.com。通过github，你可以将所有文件上传至网络。如果你已有账户，请直接登录；若尚未注册，只需点击页面顶部的注册按钮即可。

如果没有，请点击右上角的“注册”按钮，就在这儿，写着“注册”的地方，点击注册并创建一个账户。这是完全免费的。我不会一步步带你操作，因为过程非常简单直接。一旦你拥有了一个GitHub账户，就会进入控制面板。在左上角，你需要创建一个仓库。点击“创建仓库”。

点击想要创建一个仓库。点击这里的新建。你需要为此命名。这可以是你的名字，也可以是你创建的网站名称。我将这个命名为提示库。我们还会给它添加一个描述：提示库。

然后在底部这里，你可以选择公开或私密。这完全取决于你创建的内容。如果这是一个面向公众的网站，不包含任何类似AI的API元素，你可以保持公开。我就是这么做的。

这就是我可以设为公开的原因。我打算这么做。但有些情况下你可能希望设为私有。我选择公开。我不需要更改下面的任何其他设置。然后我会点击创建仓库。

现在，一旦你进入这个页面，别担心所有这些内容及其含义。你只需点击这里写着“上传现有文件”的地方。所以我们需要上传那些刚刚由Claude为我们创建的文件。现在这里有点奇怪。

现在这里有个奇怪的小问题，如果你点击“选择文件”，它实际上不会让你上传文件夹，而这正是你原本应该做的。所以，你可以直接拖放文件。我这里打开了Finder，这三个文件就在这里。

它为我们创建了这三个文件，分别是包、公共和服务器。我可以全选公共和服务器。我可以全选公共和服务器。我可以选中这三个，然后删除这三个。我可以看到它们现在都在这里了。我可以看到它们现在都在这里了。我可以看到它们现在都在这里了，然后点击提交更改。所以现在我们的然后点击提交更改。所以现在我们的然后点击提交更改。

现在我们的文件由GitHub存储，但它无法实际运行应用程序，也无法将其发布到网络上。为此，你需要一个托管服务，这就引出了今天视频的赞助商——Hostinger。Hostinger长期以来一直帮助人们创建网站。

并且花时间帮助人们创建网站。随着人工智能的新热潮，他们一直站在人们利用AI进行创作的前沿，并尽可能简化流程，让人们能够轻松地将他们喜欢的项目，比如网站或网络应用，发布到互联网上。

所以，我已经将它们发布到网上。所以，我已经将它们发布到网上。所以，我已经将它们发布到网上。我在下方描述中为你提供了一个链接，我在下方描述中为你提供了一个链接，我在下方描述中为你提供了一个链接，点击它将带你进入这个页面，点击它将带你进入这个页面，点击它将带你进入这个页面，在那里你可以注册合适的套餐，在那里你可以注册合适的套餐，在那里你可以注册合适的套餐，通过Hostinger来部署你的，通过Hostinger来部署你的，通过Hostinger来部署你的网络应用。你可以直接点击这里，网络应用。你可以直接点击这里，网络应用。你可以直接点击这里，那里写着“查看套餐”。目前有两种，那里写着“查看套餐”。目前有两种，那里写着“查看套餐”。

这里有两个选项。实际上，我会选择更便宜的那个，也就是商业版。这正是你所需要的。所以，点击商业版下方的“选择方案”。这是你的购物车。如果你选择订阅周期，可以在1个月到48个月之间选择。但周期越长越划算。

但签约时间越长，按月计算就越便宜。所以，如果你希望月费更划算，就选择更长的签约期。另外，我还有一个优惠码给你，能帮你额外省点钱。点击获取吧。

点击右侧显示“有优惠券”的位置，输入优惠码“Paul J. Lipsky”。下方也会提供链接方便你复制，点击“应用”即可额外再享10%折扣。在此阶段，你还可以为网站选择一个免费域名。接下来，我将搜索你的网站。

那么，我来搜索一下你们的网站。我会在这里四处看看，试试能不能找到些好东西。我确信提示库已经被占用了，没错，确实如此。所以，我们试试保罗的吧。好的，我想我找到了一个我喜欢的，是pauldai.com。这个域名是可用的。那么，我就选它了。

你看，这个第一年是免费的，包含域名隐私保护。然后我可以点击继续。这里你需要创建一个账户，并完成所有账单信息的填写。我会跳过这部分，因为它非常直接明了。

这非常简单，你不需要看那些内容。所以，完全不需要看那些。所以，完全不需要看那些。所以，暂停这个，注册，完成暂停这个，注册，完成暂停这个，注册，完成支付，然后我们支付界面见。然后我们支付界面见。然后我们支付界面见。接下来，在设置过程中，你可能会看到一些类似这样的内容。直接跳过所有这些。直接跳过所有这些。直接跳过所有这些。你要确保最终到达这个界面。你要确保最终到达这个界面。

你需要确保进入一个看起来像这样的页面。然后是一个看起来像这样的页面。接着是另一个看起来像这样的页面。接着点击左上角写着“主页”的地方。现在你就进入了H面板。主页。现在你就在H面板上了。主页。现在你就在H面板上了。H面板是你一站式完成所有操作的地方。你不需要分开登录。我们可以创建网站，无需单独登录。

我们可以创建网站，购买域名，设置邮箱，所有这些操作都可以在您的Hostinger账户内一站式完成。这样一来，管理一切变得非常简便。现在，要将我们的网站接入Hostinger，请点击标有“网站”的地方。随后您会看到相关界面。

然后你会看到这边有一个紫色的按钮，上面写着“设置”。你的界面可能看起来不一样，可能显示的是“个人”。你可能只看到一个这样的按钮，但无论如何，这里应该会有一个写着“设置”的按钮。所以，点击它。接着我们会回答这些问题。这个网站是为我自己准备的。

这个网站是为我个人问题设立的，所以它适用于我自己或我的业务。接着点击创建个人或业务网站。然后点击创建新站点。接下来，在下方我们只需点击标有“跳过问题”的地方，因为这里默认你是从零开始，而我们并非如此。同样地，我们可以跳过这一步。

同样地，我们可以跳过这些步骤，因为我们即将部署一个Node.js Web应用。你只需点击“Web应用”即可开始。具体操作是，在显示“部署你的Node.js Web应用”的位置点击。接下来，在这里选择Node.js Web应用，并挑选你希望使用的域名。如果尚未购买域名，现在正是时候进行购买。

我已经知道现在是时候行动了。我已经创建或选择了我的，所以它已经为我预留了。我可以在这里选择它，然后点击下一步。现在，我们将把Hostinger与GitHub连接起来，以便它能从我们在GitHub上创建的仓库中提取信息。

要实现此操作，请点击显示“连接”的位置，点击显示“连接”的位置，点击显示“连接GitHub”的位置。接下来，您需要登录GitHub账户。然后，您需要选择刚刚设置好的仓库。由于我有多个仓库，因此我将仅选择特定仓库，并选中提示仓库。

我将选择提示库。我会选择我刚创建的提示库一。然后选择我刚创建的提示库一。接着选择我刚创建的提示库一。然后点击安装并授权。所以，这里点击安装并授权。所以，这里点击安装并授权。所以，这里正在拉取你所有的仓库。正在拉取你所有的仓库。正在拉取你所有的仓库。你可能只有一个。所以，选择你可能只有一个。所以，选择你可能只有一个。所以，选择那个并点击继续。选择那个并点击继续。选择那个并点击继续。最棒的是，Hostinger会处理剩下的所有事情。最棒的是，Hostinger会处理剩下的所有事情。最棒的是，Hostinger会处理剩下的所有事情。

所有设置都已妥善处理。您在此处看到的所有配置均由Hostinger优化完成。因此，一切均已按照您的期望精确设置。若您无需调整，无需在此处进行任何更改。接着点击部署按钮。现在显示已完成。我们可以点击前往查看。

所以，我们可以点击进入仪表盘，然后新建一个仪表盘，接着打开一个新标签页，输入我们的网址，看看我们的网站是什么样子。看，这就是我的网站，看起来还不错。作为初次尝试，这已经很好了。域名正常运作，托管稳定，加载速度也很快。从用户界面来看，我觉得它加载得非常迅速。

我认为在用户界面方面，它的加载速度确实很快。但界面设计上还有改进空间。所以，我们回到Claude进行修改。回到Claude后，我详细说明了希望网站做出的调整，甚至发送了另一个我非常喜欢并希望借鉴其设计灵感的网站截图。

所以，这一切都是为了激发灵感。所以，这一切都是为了激发灵感。所以，这一切都已完成并更新了文件。现在，更新并完成了文件。现在，更新并完成了文件。现在，在GitHub内部进行更新非常简单。你在GitHub内部进行更新非常简单。你在GitHub内部进行更新非常简单。你想来到这个页面。所以，让我回到主页，这样你就知道如何导航了。一旦你进入导航界面。一旦你进入导航界面。

进入仪表盘后，点击左侧的代码库，这是我们正在操作的"提示库"。接着在此处选择"添加文件并上传文件"，直接拖入所有相同文件即可——这些文件应当已在您的电脑中更新完毕。

那么，在你的电脑上打开更新。所以，打开我的查找器，它们又出现了。打开我的查找器，它们又出现了。打开我的查找器，它们又出现了。我只需要把这三个文件拖放回这里。系统足够智能，能够识别这是一个更新。点击确认更改，就完成了。你不需要在Hostinger上做任何操作。

它会自动从GitHub拉取数据。你只需等待几分钟让它更新，这不是瞬间完成的。然后你就能看到你的新网站是什么样子了。好了，我觉得现在看起来好多了。所以，现在显示的是……

所以，这里显示的是提示词对应的实际视频，实际视频，实际视频，以及它的标题。然后这里列出了所有的标题。然后这里列出了所有的提示词。它的响应速度非常快。这个提示词。它的响应速度非常快。这个提示词。它的响应速度非常快。这个是你正在观看的当前视频，你正在观看的当前视频，你正在观看的当前视频。所以，我现在还没有这个视频。所以，我现在还没有这个视频。所以，显然我还没有这个视频。嗯，我真的很喜欢这个视频呈现出来的效果。

因此，如果你在设计过程中遇到困难，难以达到理想的效果，不妨借鉴其他网站的截图作为灵感来源，这个方法非常有效。我认为这招很完美。我会在下方附上链接，方便你查看。

此外，这是你可以查看的内容。还有，这就是我之前在视频中提到的那个提示词，你可以在这里找到它并复制使用。就是这样。这就是如何利用Claude创建出色的网站，并通过Hostinger轻松托管它们。

如果你想轻松使用Hostinger。如果你想亲自尝试Hostinger，我会在下方描述中附上链接。告诉我你用它搭建了什么样的网站。另外，如果你喜欢这个视频，别忘了点赞并订阅频道。

那我这就去订阅频道。下个视频里再见，先告辞了。