利用 Copilot 代理模式构建着陆页-aicoding

GitHub Copilot 已经敏捷成为我构建过程中的重要组成部分。无论是探索新想法还是搭建完备的页面，利用 IDE 中 Copilot 的代理模式都能帮助我更快、更自大地完成开发过程中的每一步。
   AI编程板块了解更多AI编程干货
  GitHub Copilot 代理模式是一种内置在 IDE 中的互动谈天体验，将 Copilot 转变为开发工作流程中的积极到场者。在你提供提示后，代理模式通过自主迭代自己的代码、辨认并修复错误、建议并执行终端命令以及通过自我修复能力解决运行时问题，简化复杂的编码使命。
  最棒的是：你可以上传图片、引用文件并给出自然语言指令，Copilot 将直接在你的项目中生成和修改代码！
  在本文中，我将带你了解我是怎样利用 GitHub Copilot 代理模式和 Claude 3.5 Sonnet 模型构建一个面向开发者的着陆页——从产品需求到代码。如果我独自完成这齐备，这种构建可能需要几个小时。但借助 Copilot，我仅在不到 30 分钟内就拥有了一个可用的原型！你将看到我是怎样利用设计草图、内置谈天和 Copilot 对上下文的意识，从想法到设计再到代码，实现无缝过渡。
  你也可以在上面的视频中观看整个构建过程！
  别担心——我们为你预备了一份指南，涵盖你需要了解的所有内容来开始利用（另外，另有其他 GitHub Copilot 功能的详细信息）。 了解更多>
  与 AI 设计：从 PRD 到 UI

  在我写一行代码之前，我需要一个根本的产品愿景。我从 在 GitHub.com 利用 GitHub Copilot 生成一个轻量级的产品需求文档（PRD）开始，利用的是 GPT-4o。这是我的提示：
  > “用简朴的话形貌一个面向开发者的着陆页。”
  Copilot 返回了一个结构简朴但有条理的 产品需求文档（PRD）大纲 ，供开发者利用。然后我将这个 PRD 输入到 Claude 3.5 Sonnet 中，并要求它根据这个提示生成一个设计。
  

  Claude 给我提供了一个干净、有组织的布局，包罗常见的着陆页部分：好汉部分、功能列表、API 示例、仪表板预览等。这已经富足让我开始利用了。
  你可以在这里检察克劳德设计的完备版： 点击这里 ；效果真的很酷。
  设置项目

  对于技能栈，我选择了 Astro，因为它具有高性能和机动性。我将其与 Tailwind CSS 和 React 联合利用，用于样式和组件架构。我从一个空白目次开始，并运行了以下命令：

1. npm create astro@latest
2. npx astro add react
3. npx astro add tailwind

复制代码

我初始化了项目，设置了 Tailwind，并在启用 GitHub Copilot 代理模式的 VS Code 中打开了它（ 了解怎样利用我们的文档启用它 ！）。一旦服务器启动，我就可以开始构建了。
  逐节构建页面，利用 Copilot 代理模式

  利用 Copilot 代理模式进行翻译时，它真的能够将视觉设计转化为生产就绪的代码，因为它理解项目中的图像和代码上下文。通过上传截图并指定要编辑的文件，我可以提示它生成新的组件、更新布局结构，甚至应用 Tailwind 样式——无需切换标签页或手动编写样板代码。
  对于我们的项目，这意味着我可以从 Claude 的设计中截取每个部分的屏幕截图，并直接将其拖放到 Copilot 的上下文窗口中。
  [table][tr]