54 lines
4.1 KiB
Markdown
54 lines
4.1 KiB
Markdown
<!-- 由 BMAD™ Core 驱动 -->
|
||
|
||
# 创建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>
|