最佳实践

​

提示词最佳实践

​

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

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

我希望角色为 Investor 的用户可以访问此组件，但 Admin 不可以。

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

不要编辑 /shared/Layout.tsx。

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

创建新页面，添加 UI 布局，连接数据，添加逻辑 + 边缘情况，按角色测试。

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

作为 Investor，我希望查看公司仪表板，但不能编辑它。请将此功能仅限于 Investor 角色。

​

2. 频繁利用讨论模式

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

"建议 3 种实现 X 的方法"。

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

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

​

3. 将 Remix 作为最后手段。

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

​

4. 培养耐心与冷静

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

​

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

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

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

​

提示库 – 策略与示例

1. 启动项目

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

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

2. UI/UX 设计增强

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

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

3. 确保响应式设计

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

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

4. 代码重构

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

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

5. 应用类型与功能

电子商务商店：产品列表、搜索、筛选、购物车、结账、用户账户。

CMS：管理仪表板、内容创建/编辑/发布、富文本、图片上传、SEO。

项目管理：任务板、列表、卡片、分配、截止日期、拖放。

社交媒体信息流：帖子、评论、点赞、分享、用户个人资料、通知、无限滚动。

分析仪表板：各种图表类型、数据筛选、日期范围选择、可导出的报告。

SaaS 应用入门套件：用户身份验证、订阅管理、设置、仪表板、基于角色的访问。

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

AI 内容生成工具：根据输入生成内容、优化选项、保存、导出。

推荐组件：基于用户行为/偏好、反馈、推荐解释。

个性化系统：可定制的 UI、内容推荐、用户对个性化的控制。

6. 与 AI 进行战略规划

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

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