BMAD-METHOD/bmad-core/tasks/generate-ai-frontend-prompt.md

创建AI前端提示任务

目的

生成一个精湛、全面且优化的提示，可用于任何AI驱动的前端开发工具（例如，Vercel v0、Lovable.ai或类似工具），以搭建或生成前端应用程序的重要部分。

输入

• 完整的UI/UX规范 (front-end-spec.md)
• 完整的前端架构文档 (front-end-architecture) 或全栈组合架构，例如 architecture.md
• 主系统架构文档 (architecture - 用于API合约和技术栈以提供更多上下文)

关键活动与说明

1. 核心提示原则

在生成提示之前，您必须了解与用于代码的生成式AI交互的这些核心原则。

• 明确具体：AI无法读懂您的心思。提供尽可能多的细节和上下文。模糊的请求会导致通用或不正确的输出。
• 迭代，不要期望完美：一次性生成整个复杂的应用程序很少见。最有效的方法是一次提示一个组件或一个部分，然后在结果的基础上进行构建。
• 首先提供上下文：始终首先向AI提供必要的上下文，例如技术栈、现有代码片段和总体项目目标。
• 移动优先方法：以移动优先的设计思维来构建所有UI生成请求。首先描述移动布局，然后提供关于它应如何适应平板电脑和桌面的单独说明。

2. 结构化提示框架

为确保最高质量的输出，您必须使用以下四部分框架来构建每个提示。

1. 高层目标：以清晰、简洁的总体目标摘要开始。这可以使AI明确主要任务。
   • 示例：“创建一个具有客户端验证和API集成的响应式用户注册表单。”
2. 详细的、分步的说明：提供一个细粒度的、编号的AI应采取的行动列表。将复杂的任务分解为更小的、顺序的步骤。这是提示中最关键的部分。
   • 示例：“1. 创建一个名为 RegistrationForm.js 的新文件。2. 使用React钩子进行状态管理。3. 为‘姓名’、‘电子邮件’和‘密码’添加带样式的输入字段。4. 对于电子邮件字段，确保其为有效的电子邮件格式。5. 提交时，调用下面定义的API端点。”
3. 代码示例、数据结构和约束：包括任何相关的现有代码片段、数据结构或API合约。这为AI提供了具体的示例。至关重要的是，您还必须说明不该做什么。
   • 示例：“使用此API端点：POST /api/register。预期的JSON负载是 { "name": "string", "email": "string", "password": "string" }。不要包括‘确认密码’字段。所有样式都使用Tailwind CSS。”
4. 定义严格的范围：明确定义任务的边界。告诉AI它可以修改哪些文件，更重要的是，哪些文件要保持不变，以防止在整个代码库中发生意外更改。
   • 示例：“您只应创建 RegistrationForm.js 组件并将其添加到 pages/register.js 文件中。不要更改 Navbar.js 组件或任何其他现有页面或组件。”

3. 组装主提示

您现在将综合输入和上述原则，形成一个最终的、全面的提示。

1. 收集基础上下文：
   • 以描述总体项目目的、完整技术栈（例如，Next.js、TypeScript、Tailwind CSS）和正在使用的主要UI组件库的前言开始提示。
2. 描述视觉效果：
   • 如果用户有设计文件（Figma等），请指示他们提供链接或屏幕截图。
   • 如果没有，请描述视觉风格：调色板、排版、间距和整体美学（例如，“简约”、“企业”、“俏皮”）。
3. 使用结构化框架构建提示：
   • 遵循第2节中的四部分框架来构建核心请求，无论是针对单个组件还是整个页面。
4. 呈现和完善：
   • 以清晰、可复制粘贴的格式（例如，一个大的代码块）输出完整的、生成的提示。
   • 解释提示的结构以及为何包含某些信息，并参考上述原则。
   • <important_note>最后提醒用户，所有AI生成的代码都需要仔细的人工审查、测试和完善，才能被认为是生产就绪的。</important_note>