> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# 最佳实践

> 快速上手，避免在 Lumi 上构建时遇到的常见陷阱。

无论您是新用户还是经验丰富的用户，要充分利用 Lumi，都需要打下坚实的基础、掌握提示工程，并有效利用其各种工具和模式。遵循这些指南，您可以加快开发进程，避免常见的陷阱。

## 提示词最佳实践

### **1. 掌握提示工程以获得更好的输出：**

将 AI 视为您的工程伙伴；它只知道您明确告知它的内容。

* **清晰与详细：** **清晰而详细的提示会带来更优质的输出**。请具体说明，提及确切的页面（例如 `/dashboard`）和预期的行为。使用自然语言提出您的请求，例如

```mdx expandable theme={null}
我希望角色为 Investor 的用户可以访问此组件，但 Admin 不可以。
```

* **视觉辅助：** **添加屏幕截图，尤其是在描述错误或用户体验问题时**。这能提供文字本身可能遗漏的视觉背景。
* **护栏与限制：** 告诉 AI **不要修改哪些内容**。例如，您可以指示：

```mdx expandable theme={null}
不要编辑 /shared/Layout.tsx。
```

* **重复以加深记忆：** AI 的记忆力可能有限，因此如有必要，请**在不同提示中重复重要指令**。
* **分解复杂任务：** 避免同时尝试实现多个功能。**将您的工作分解为更小、可测试的块**。在每个步骤之间使用讨论模式进行验证，然后再继续。一个有用的功能分解模板包括：

```mdx expandable theme={null}
创建新页面，添加 UI 布局，连接数据，添加逻辑 + 边缘情况，按角色测试。
```

* **特定角色的指令：** 如果您的应用程序支持多个用户角色，请**始终定义提示适用于哪个角色**。这有助于防止因共享逻辑或组件而产生的错误。例如：

```mdx expandable theme={null}
作为 Investor，我希望查看公司仪表板，但不能编辑它。请将此功能仅限于 Investor 角色。
```

### **2. 频繁利用讨论模式**

讨论模式是您的 AI 助手，专为调试、头脑风暴和规划实现而设计，**不会立即更改您的代码**。

* **何时使用：** 在 2-3 次“尝试修复”失败后，在调试复杂逻辑或数据库问题时，或在规划新功能时，切换到讨论模式。您可以提示它

```mdx expandable theme={null}
"建议 3 种实现 X 的方法"。
```

* **工作流程建议：** 一些用户发现，**将 60-70% 的时间花在讨论模式中**非常有效，只有在完全满意后才点击“实施计划”。这种方法可以提高输出的一致性，并防止意外的编辑。
* **受控交互：** 为避免不必要的代码执行，请使用诸如“调查但先不要编写代码”或“在不更改任何内容的情况下建议 3 种解决方法”之类的提示。这能让您保持控制权。
* **跳出 AI 循环：** 如果 AI 进入修补损坏代码的“循环”，请切换到讨论模式，粘贴错误的屏幕截图，并提示：

```mdx expandable theme={null}
"请调查此问题，不要破坏其他功能。如果需要，请恢复到上一个可用的版本，并从那里开始修复"。
```

### **3. 将 Remix 作为最后手段。**

有时，重新开始会花费更少的时间，尤其是在陷入开发困境时。

* **Remix 的作用：** Remix 会在 T=0 时刻创建一个**项目的干净副本**。然后，您可以使用改进的提示和更清晰的知识进行重建，将旧项目纯粹用作参考。
* **何时 Remix：** 如果您陷入了充满错误的循环，希望在保留历史记录的同时干净地重新开始，或者需要断开像 Supabase 这样的数据库服务并尝试新方法，这会很有用。

### **4. 培养耐心与冷静**

AI 开发可能难以预测；前一刻神奇，后一刻令人沮丧。构建的最后阶段通常耗时最长。

* **黄金法则：** **花时间编写提示，重新检查所有内容，并将工作分解为小的、可测试的块**。您输入的精确度与输出的质量直接相关。

### **5. 增强工作流程的额外技巧**

* **“我很沮丧...”模式：** 使用“我很沮丧…”的提示模式来帮助 AI 更好地集中注意力。
* **编辑后检查：** 在进行任何重大编辑后，**务必重新检查多个角色及其行为**，特别是对于条件逻辑。
* **回退版本：** 存储稳定版本作为快速调试的回退方案。
* **特定角色的组件：** 为避免因过于通用的逻辑而产生错误，请提示 AI

```mdx expandable theme={null}
"为 [角色 X] 创建一个专用组件，除非明确限定范围，否则不要重用共享组件"。
```

## 提示库 – 策略与示例

提示库提供了一系列可重用的提示模式和示例，适用于使用 Lumi AI 的常见开发场景。您可以将这些视为可用于您项目的模板。

1. **启动项目**

* **何时使用：** 在项目最开始时，帮助 AI 理解高层需求并构建基础。它充当您的初始项目简介。
* **如何使用：** 概述应用程序类型、关键技术（前端、后端、服务）和主要功能。指导 AI 从何处开始，通常是主页或一个关键功能。

```mdx expandable theme={null}
"我需要一个任务管理应用程序，包含： - 技术栈：Next.js 前端，Tailwind CSS 用于样式，Supabase 用于身份验证和数据库。 - 核心功能：项目和任务创建、将任务分配给用户、到期日提醒以及仪表板概览。 从构建主仪表板页面开始，包含： - 一个带导航的页眉， - 一个显示项目及其状态的列表， - 以及一个创建新项目的按钮。 目前请提供虚拟数据，并确保设计简洁且响应式"。
```

2. **UI/UX 设计增强**

* **何时使用：** 在不改变其功能的情况下，**优化应用程序的视觉吸引力**。这包括打磨 UI、调整布局或实现特定的设计风格。
* **如何使用：** 明确定义设计更改的范围，并**强调功能必须保持不变**。引导 AI 实现所需的美学效果（例如，现代、简约）。一次处理一个更改，并提及任何不应更改其逻辑的 UI 部分。

```mdx expandable theme={null}
应用 UI 需要改进，但不改变任何功能。 - 保持所有现有逻辑和状态管理不变。 - 视觉增强：更新仪表板页面的样式：为每个项目列表使用现代卡片设计，改进配色方案以获得更好的对比度，并增加内边距以获得更整洁的布局。 - 确保这些更改不会破坏任何功能或数据流。 目标：纯粹为了更精致的外观进行美化改进，应用程序的行为与之前完全相同。
```

3. **确保响应式设计**

* **何时使用：** 当您的应用需要适应各种屏幕尺寸（手机、平板、桌面）的布局时。非常适合作为处理大量 UI 任务的最后一步。
* **如何使用：** **强调移动优先的方法**，并指示 AI 确保在标准断点上实现响应式设计。提及特定的 CSS 框架指南（例如，Tailwind 的 `sm, md, lg, xl` 断点），并要求避免使用固定宽度。

```mdx expandable theme={null}
我们的应用需要在手机、平板和桌面上完全响应式。 - 遵循移动优先策略：优先考虑小屏幕的布局，然后为大屏幕进行调整。 - 使用现代 UI/UX 最佳实践进行响应式设计。（对于 Tailwind CSS，请使用标准断点 sm、md、lg、xl——除非必要，否则不要使用自定义断点。） - 确保每个页面（尤其是仪表板和项目详情页）在小屏幕上都能正常重排：元素应根据需要堆叠或调整大小，文本应保持可读，并且没有任何内容溢出屏幕。 - 不要更改核心设计或功能，只需确保它能灵活适应不同的屏幕尺寸。 进行更改后，请在 iPhone 12 尺寸和典型桌面宽度下再次检查布局。
```

4. **代码重构**

* **何时使用：** 定期进行，尤其是在代码变得混乱或缓慢时。重构可以改善代码结构、可读性或性能，**而不会改变其外部行为**。
* **如何使用：** 确定范围（文件、功能或代码库）。对于特定文件，提示：“重构此文件以提高清晰度和效率，但**不要改变其功能或输出**”。指定重点领域，如减少重复或简化逻辑。对于较大的重构，请要求 AI 分步规划或先审计代码。

```mdx expandable theme={null}
重构 ProjectList 组件文件，但保持其行为和 UI 完全相同。 目标： - 改善代码结构和可读性（简化复杂函数，如果需要则分解为更小的函数）。 - 移除任何未使用的变量或导入。 - 确保文件遵循最佳实践并有良好的文档记录。 不要引入任何新功能或改变组件对用户的工作方式——这纯粹是为了可维护性而进行的代码清理。如果代码的任何部分不清楚，请添加简短的注释以作说明。
```

5. **应用类型与功能**

Lumi 可以协助处理各种类型的应用程序和功能。示例包括：

```mdx expandable theme={null}
电子商务商店：产品列表、搜索、筛选、购物车、结账、用户账户。
```

```mdx expandable theme={null}
CMS：管理仪表板、内容创建/编辑/发布、富文本、图片上传、SEO。
```

```mdx expandable theme={null}
项目管理：任务板、列表、卡片、分配、截止日期、拖放。
```

```mdx expandable theme={null}
社交媒体信息流：帖子、评论、点赞、分享、用户个人资料、通知、无限滚动。
```

```mdx expandable theme={null}
分析仪表板：各种图表类型、数据筛选、日期范围选择、可导出的报告。
```

```mdx expandable theme={null}
SaaS 应用入门套件：用户身份验证、订阅管理、设置、仪表板、基于角色的访问。
```

```
AI 聊天界面：对话历史、输入指示器、消息线程、反馈。
```

```mdx expandable theme={null}
AI 内容生成工具：根据输入生成内容、优化选项、保存、导出。
```

```mdx expandable theme={null}
推荐组件：基于用户行为/偏好、反馈、推荐解释。
```

```mdx expandable theme={null}
个性化系统：可定制的 UI、内容推荐、用户对个性化的控制。
```

6. **与 AI 进行战略规划**

* **何时使用：** 在开始复杂的多步骤实现之前，或者当您有一个需要分解的大功能时。规划提示允许您在**编写代码之前概述方法**，从而节省积分并防止方向错误。
* **如何使用：** 向 AI 索要计划或清单。例如，“为 X 概述一个分步计划”或“在编码之前，列出您将采取的实现 Y 的步骤”。最好在讨论模式下执行此操作，以避免代码执行。

```mdx expandable theme={null}
在编写任何代码之前，请规划新通知功能的实现。 - 列出在任务逾期时添加电子邮件通知所需的每个步骤。 - 考虑前端（UI 更改，如果有）和后端（创建计划检查或触发器）两个方面。 - 确保计划保持当前功能的稳定——我们不能破坏任何现有功能。 - 以有序列表（1, 2, 3, ...）的形式提供计划，并对每个步骤进行简要说明。 概述计划后，请暂停以供审查。暂时不要进行任何代码更改。” AI 可能会回复一个类似这样的计划： 1. 为任务添加时间戳字段。 2. 创建一个服务器端函数来检查逾期任务。 3. 集成电子邮件发送功能。 4. 更新 UI 以支持通知切换。 5. 测试流程。
```

通过勤奋地应用这些最佳实践并利用提示库，您将能够很好地在 Lumi 中高效、有效地开发复杂的应用程序。