用Devin自动化网站创建的3个步骤【面向初学者】
機械翻訳 / Machine-translated
A
AI Friends
2時間前・5分で読める
機械翻訳 / Machine-translated
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
本文你将了解到
Devin是由Cognition Labs开发的自主型AI软件工程师。与普通的AI聊天机器人不同，它不仅能编写代码，还能制定计划、进行测试，并最终构建出真正可运行的网站。即使是编程初学者，只需用中文告诉它"我想要这样的网站"，不需要掌握HTML或CSS等专业知识，也能创建出正式的网站。2026年4月，Devin推出了全新的定价方案，最低每月20美元即可使用，个人用户也可以轻松尝试。相比过去每月500美元的高昂价格，这是一个巨大的变化。由于自己编写代码的时间大幅减少，你可以将更多精力集中在设计和内容创作上，这是它最大的优势。
首先访问Devin的官方网站（cognition.com），创建账号。推荐使用GitHub账号登录，因为Devin会自动将它创建的代码保存到你的GitHub仓库（代码存储库）中。登录后，选择定价方案。初次使用的用户可以用免费版体验基本功能，但如果想正式使用，推荐选择Pro方案（每月20美元）。接下来进行GitHub关联设置，按照屏幕提示点击"Connect GitHub"按钮并授权即可。完成这一步后，Devin就能将代码保存到你的仓库，或者读取现有代码了。设置完成后，Devin的工作界面（工作区）将会显示出来。
工作区下方有一个聊天输入框。你可以在这里输入："请创建一个简单的个人介绍网站，包含个人资料、技能和联系方式三个版块。"关键在于，指令要尽量具体。指令模糊可能会导致结果与预期不符。例如，只说"做一个酷炫的网站"，Devin无法判断你对"酷炫"的定义，最好加上"以蓝色为主色调，风格简洁"这样具体的条件。输入后按下回车键，Devin会自动生成一个方案（工作计划）。借助2026年推出的新功能"Interactive Planning"，方案将在数秒内呈现。画面上会以列表形式显示"创建HTML文件""用CSS调整设计""验证运行效果"等步骤。如果对方案满意，点击"批准"按钮；如果需要修改，可以在聊天中追加指令，例如"让颜色更丰富一些"。
批准方案后，Devin将自主开始工作。屏幕右侧会实时显示Devin当前正在做什么，例如"正在创建index.html""正在编辑styles.css"等提示信息滚动显示。代码编辑器界面也可见，你可以随时查看实际编写的代码。工作完成后，Devin会通知你"请确认预览"。点击预览按钮，即可在浏览器中查看实际的网站效果。如果有不满意的地方，只需在聊天中输入"将页眉颜色改为绿色"，它会立即进行修改。满意后，输入"请部署（发布）网站"，Devin就会自动将代码上传至GitHub，并根据需要将网站发布到托管服务（如Vercel）上。这样，你的网站就能被全世界的人访问了。
以下介绍初学者容易遇到的三个问题。第一，指令过于模糊导致结果与预期不符。应对方法是尽量提供具体条件，例如"红色背景""三栏布局""必须适配手机"。第二，GitHub关联失败。这通常是因为GitHub访问权限不足，请在GitHub的"Settings"→"Applications"中重新确认Devin的权限设置。第三，Devin在工作过程中停止运行。这通常发生在指令过于复杂、难以处理的情况下。应对方法是将大任务拆分成小任务，逐步下达指令，例如"先只做首页""再添加联系表单"，这样会更顺畅。如果出现错误提示，直接将错误信息复制粘贴给Devin，说"请修复这个错误"，大多数情况下它都能自行解决。
熟悉基本操作后，可以尝试更便捷的使用方式。第一，善用"Devin Search"功能。针对现有代码库，用中文提问"登录功能在哪里？"，它会告诉你对应的文件和代码行，大幅节省在复杂项目中查找代码的时间。第二，善用"Devin Wiki"功能。这是Devin自动为项目生成文档的功能，只需输入"为这个项目创建wiki"，就会生成汇总各文件用途和使用方法的文档，在团队开发中非常实用。第三，保存常用指令模板。将常用的指令（例如："创建响应式设计、已完成SEO优化的落地页"）保存在记事本等工具中，下次即可轻松复制粘贴复用。此外，2026年2月之后的新功能还支持同时运行多个Devin实例，分工协作完成大型项目。
本文为 AI Friends 的转载文章。
