GitHub Copilot 已迅速成为我构建方式不可或缺的一部分。无论我是在探索新想法还是构建整个页面，在我的 IDE 中使用 Copilot 的代理模式都可以帮助我更快、更自信地完成开发过程的每个步骤。
GitHub Copilot 代理模式是内置于 IDE 中的交互式聊天体验，可将 Copilot 转变为开发工作流程的积极参与者。在您发出提示后，代理模式通过自主迭代自己的代码、识别和修复错误、建议和执行终端命令以及使用自我修复功能解决运行时问题来简化复杂的编码任务。
这是最好的部分：您可以附加图像、参考文件并给出自然语言指令，Copilot 将直接在您的项目中生成和修改代码！
在本文中，我将向您介绍如何使用 GitHub Copilot 代理模式和 Claude 3.5 Sonnet 模型构建以开发人员为中心的登录页面（从产品要求到代码）。如果我自己完成所有工作，这种构建很容易需要几个小时。但是有了 Copilot，我在 30 分钟内就得到了一个工作原型！您将看到我如何使用设计工件、内联聊天和 Copilot 对上下文的感知，以最小的摩擦从想法→设计→代码。
您还可以在上面的视频中观看完整的构建！
使用 AI 进行设计：从 PRD 到 UI
在编写一行代码之前，我需要一个基本的产品愿景。我首先使用 GitHub.com 上的 GitHub Copilot 使用 GPT-4o 生成轻量级产品需求文档 （PRD）。这是我的提示：
> “用简单的术语描述面向开发人员的登陆页面。”
Copilot 为以开发人员为中心的登录页面返回了一个结构化但简单的 PRD 大纲。然后，我将这个 PRD 传递到 Claude 3.5 Sonnet 中，并要求它根据该提示生成一个设计。
Claude 为我提供了一个干净、有序的布局，其中包含常见的登录页面部分：英雄、功能列表、API 示例、仪表板预览等。这对我来说已经绰绰有余了。
您可以在这里探索 Claude 构建的完整设计;这很酷。
设置项目
对于技术堆栈，我选择 Astro 是因为它的性能和灵活性。我将它与 Tailwind CSS 和 React 配对，用于样式和组件架构。我从一个空白目录开始并运行以下命令：
npm create astro@latest
npx astro add react
npx astro add tailwind我初始化了项目，配置了 Tailwind，并在启用了 GitHub Copilot 代理模式的情况下在 VS Code 中打开它（通过我们的文档了解如何启用它！服务器运行后，我就可以开始构建了。
使用 Copilot 代理模式逐节构建
在将视觉设计转换为生产就绪代码时，Copilot 代理模式确实大放异彩，因为它可以理解项目中的图像和代码上下文。通过附加屏幕截图并指定要编辑的文件，我可以提示它构建新组件、更新布局结构，甚至应用 Tailwind 样式，所有这些都无需切换选项卡或手动编写样板。
对于我们这里的项目，这意味着我可以从 Claude 的设计中截取每个部分的屏幕截图，并将它们直接拖放到 Copilot 的上下文窗口中。
| 💡 专业提示：从这样的可视化设计构建时，我建议一次处理一个部分。这不仅可以保持模型的上下文可管理，而且如果出现问题，还可以更轻松地进行调试。你会确切地知道该往哪里看！ |
|---|
创建 hero 和 navigation 部分
我打开，附上设计截图，然后输入以下提示：index.astro
> “更新 index.astro 以反映附加的设计。添加新的导航栏和 hero 部分以启动登录页面。
然后，Copilot 代理模式返回以下内容：
- Created 和
Navbar.astroHero.astro - 更新以呈现它们
index.astro - 基于视觉布局应用的 Tailwind 样式
这是我得到的：
现在，这太漂亮了！虽然根据设计，它没有在右侧显示图像，但它在完成初始设计方面做得非常好。我们稍后会回来更新该部分，使其完全符合我们的需求。
尽早并经常提交
| 💡 专业提示：使用 AI 工具进行构建时，请尽早并经常提交。我见过太多人在提示出现偏差时失去进度。 |
|---|
如果您不知道，GitHub Copilot 也可以在这里提供帮助。在 Source Control 面板中暂存更改后，单击 ✨ sparkles 图标以自动生成提交消息。这是一个小步骤，可以为您节省大量时间（和心痛）。
使用 Copilot 自定义指令提高准确性
提高 GitHub Copilot 建议质量的最佳方法之一（尤其是在多文件项目中）是为其提供自定义说明。这些是简短的结构化说明，用于描述您的技术堆栈、项目结构以及您正在使用的任何约定或工具。
您可以在存储库中创建一个文件，自动为您添加此信息，而不是重复将此上下文详细信息添加到您的聊天问题中。其他信息不会显示在聊天中，但可供 Copilot 使用，从而使其能够生成更高质量的响应。
为了给 Copilot 提供更好的上下文，我创建了一个描述我的技术堆栈的文件：CopilotInstructions.md
- Astro v5 版本
- 顺风 CSS v4
- 反应
- TypeScript （类型脚本）
当 Copilot 代理模式在提出建议时引用此文件时，我注意到结果变得更加准确并与我的设置保持一致。
下面是一些文件的样子：
# GitHub Copilot Project Instructions
## Project Overview
This is an Astro project that uses React components and Tailwind CSS for styling. When making suggestions, please consider the following framework-specific details and conventions.
## Tech Stack
- Astro v5.x
- React as UI library
- Tailwind CSS for styling (v4.x)
- TypeScript for type safety
## Project Structure├── src/
│ ├── components/ # React and Astro components
│ ├── layouts/ # Astro layout components
│ ├── pages/ # Astro pages and routes
│ ├── styles/ # Global styles
│ └── utils/ # Utility functions
├── public/ # Static assets
└── astro.config.mjs # Astro configuration
## Component Conventions
### Astro Components
- Use .astro extension
- Follow kebab-case for filenames
- Example structure:
```astro
---
// Imports and props
interface Props {
title: string;
}
const { title } = Astro.props;
---
{title}
/* Scoped styles if needed */
您可以在[我的存储库中](https://github.com/LadyKerr/devflow-landing/blob/main/.github/copilot-instructions.md)浏览完整的说明文件，以及完整的代码、设置说明和指向已部署登录页面的链接。
## 通过提示 Copilot 迭代您的设计
然后，我重复相同的过程来构建每个新部分。这是实际作中的样子：
### “由开发人员构建”部分
*> “向登录页面添加一个名为'By Developers'的新部分，并按照附加的设计进行作。”*
Copilot 生成了一个可重用的组件，其中包含以 Tailwind 样式网格结构的功能卡。
### “API 开发”部分
*> “根据设计添加 API 开发部分”。*
本部分在选项卡中提供交互式代码示例。Copilot 从屏幕截图中解释了这一点，并添加了 UI 逻辑以在示例之间切换 - *无需我询问。*
### [Dashboard preview] 部分
*> “现在根据设计在登录页面上添加仪表板管理部分。”*
我以占位符图像的形式上传了编辑器的屏幕截图，Copilot 将其无缝添加到新组件中。
我们构建这个着陆页的速度真是太神奇了。看看我们已经取得的进展！
## 智能建议，快速出结果
即使有“Trusted by Developers”和“Try it Yourself”等部分，Copilot 也创建了占位符图像，添加了语义 HTML，并应用了 Tailwind 样式——所有这些都基于单个图像和提示。 🤯
当我更新最后一个 hero 部分以更紧密地匹配布局时，Copilot 在没有提示的情况下标记并修复了 TypeScript 问题。
这听起来可能很小，但**其实很重要**。这意味着 Copilot 代理模式不仅仅是接受指令，而是主动理解我的代码库、查看我的终端、发现问题并**实时解决它们。**这减少了我对上下文切换的需求，因此我可以专注于交付！
这不仅仅是一系列生成的组件。它是一个**完全结构化的登录页面**，内置了现代最佳实践。而且我不必独自构建它！
## 结束语：
通过 GitHub Copilot 代理模式和 Claude 的协同工作，我能够：
- 使用单个提示生成可用的 PRD 和设计模型
- 在不到 30 分钟的时间内构建一个响应式基于 Astro 的登录页面
- 以最少的手动编码对每个部分进行基架、测试和迭代
- 在我的发展过程中，使用自然语言保持流畅
## 下一步是什么？
为了完成这个项目，我更新了 README，使其具有清晰的项目结构，添加了入门说明，并暂存了它以进行部署。在这里，您可以：
- 使用 GitHub Pages、Netlify 或您选择的主机进行部署
- 为 CI/CD 设置 GitHub Actions
- 添加单元测试或辅助功能检查
- 将占位符内容替换为真实数据（如徽标、控制面板和个人资料图片）
- 根据导航栏添加新页面
想亲自探索吗？
- [查看存储库](https://github.com/LadyKerr/devflow-landing)
- [观看现场演示](https://ladykerr.github.io/devflow-landing/)
## 随身携带
GitHub Copilot 代理模式等 AI 工具正在改变我们的构建方式，但与任何工具一样，它们的强大功能取决于我们如何使用它们。添加上下文、明确和提交通常可以使构建此网页顺利和成功。
如果您正在考虑使用 GitHub Copilot 进行构建，请尝试以下工作流程：
1. 从 PRD 开始，使用 GitHub.com 上的 Copilot
2. 使用 Claude 从 PRD 生成设计
3. 在 IDE 中使用 Copilot Agent 逐步对其进行编码。
下次再见，编码愉快！