极客杰尼知识库Lovable 提示词库
针对不同场景可复用的提示模板与操作建议合集
提示词库（Prompt Library）
欢迎来到提示词库！这里汇集了在使用 AI 构建项目时可复用的提示模式与范例。把它们当作模板或灵感来源，根据自己的项目需求进行调整。每个章节聚焦一种常见场景——从项目启动到支付集成——都会说明适用时机、使用方式，并提供示例提示。
这些提示可以直接复制、按需修改，并在 Lovable 或任何 AI 构建工具中使用。整体语气官方而轻松，就像和同事交流一样；每条提示都会提供足够的上下文，让 AI 明白它该做什么。
启动项目（Starting Projects）
适用时机： 项目伊始。通过此提示，AI 能理解高层需求并开始搭建基础。适用于说明你在构建什么、所选技术栈及核心功能，帮助 AI 明确项目范围与起始重点。
使用方式： 说明应用类型、关键技术（前端框架、后端、服务）及主要功能或页面。随后指示 AI 从何处着手（通常是主页或重点功能），以此建立清晰的范围与初始方向。
示例提示 — 新项目起步：
我需要一个**任务管理**应用，要求：
- **技术栈：** 前端使用 Next.js，样式使用 Tailwind CSS，认证与数据库使用 Supabase。
- **核心功能：** 创建项目与任务、为用户分配任务、到期提醒，以及一个仪表板概览。
先从构建**主仪表板页面**开始，页面需要包含：
- 带导航的页眉；
- 展示项目及其状态的列表；
- 以及一个用于创建新项目的按钮。
目前可以使用示例数据，并确保设计简洁且具备响应式表现。创建一个名为 [ComponentName] 的新组件，具备以下特性：[列出功能]。组件需支持响应式设计与键盘可访问性，为 props 编写完整的 TypeScript 类型，并使用 Tailwind 完成样式。用通俗语言说明此函数的工作方式，突出其输入、输出及所有副作用：[粘贴函数]。它覆盖或遗漏了哪些边界情况？可以如何改进？此提示遵循经过验证的项目启动结构：先描述应用类型与技术栈，再列出核心功能，最后说明第一步要构建的内容（具备具体细节）。这样可以为 Lovable 提供清晰路线图，引导其启动项目。（小技巧：通常从空白项目逐步构建更稳妥，避免一次性信息过载。）
UI/UX 设计（UI/UX Design）
适用时机： 想在不改动功能的前提下改善应用的观感与体验时，例如美化界面、调整布局或实现指定设计风格。
使用方式： 明确界定设计调整的范围，并强调必须保持功能不变。AI 在样式方面表现不错，但你需要告诉它想要的外观（如现代、极简、符合特定设计体系）。若有多项修改，请分步进行（先布局，再配色等）。务必提及哪些逻辑不可改动。
示例提示 — 仅限 UI 调整：
在**不改变任何功能**的前提下改进应用的 UI。
- 保持现有逻辑与状态管理不变。
- **视觉增强：** 更新仪表板页面的样式，为每个项目条目采用现代化卡片设计，优化配色以提升对比度，并增加留白让布局更整洁。
- 确保上述调整**不会破坏任何功能或数据流**。
*目标：* 纯视觉层面的优化，让界面更精致，同时保持应用行为完全一致。提升该组件的视觉吸引力：[粘贴组件]。请添加动画、优化间距，在保持可访问性标准与响应式表现的前提下，让组件更精致。为我的应用构建设计系统，包含配色方案、字体层级、间距体系与组件变体。支持深色模式，并确保所有组件符合可访问性标准（至少达到 WCAG AA）。设计一个包含 [描述关键指/小组件] 的响应式仪表板布局，需能在手机、平板与桌面端良好呈现，并在移动端提供可折叠的侧边导航。将这个仅支持桌面的组件改造成移动优先设计，并设置合适的响应式断点：[粘贴组件]。请优先考虑小屏幕的内容与交互，再针对大屏幕做增强。为该组件添加轻量且高性能的动画，以提升用户体验：[粘贴组件]。需要包含进入/退出动画、悬停态和不会干扰用户的微交互反馈。分析并优化 [描述任务/目标] 的用户流程。绘制旅程中的每个步骤，识别阻碍点，并提出 UI 改进建议，让体验更直观、步骤更少。审查这些组件的可访问性并提出改进建议：[粘贴组件]。请检查键盘导航、屏幕阅读器支持、颜色对比度及 ARIA 属性是否到位。该提示明确指出只能做视觉增强、禁止变动逻辑，并具体列举要改进的 UI 要素（卡片风格、配色、间距）。适用于在功能完成后进行界面美化。
响应式布局（Responsiveness）
适用时机： 希望应用在不同屏幕尺寸（手机、平板、桌面）上保持良好布局。若你发现桌面效果不错但移动端失真，就需要响应式提示；通常在完成 UI 功能后进行最后的响应式检查。
使用方式： 强调移动优先策略，并要求 AI 在标准断点上实现响应式。如果使用 Tailwind 等框架，可指明其内建断点。避免固定宽度等会阻碍自适应的写法。可提供示例或直接说明“请确保小屏幕表现良好”。
示例提示 — 移动端响应式：
我们的应用需要在手机、平板与桌面端都保持**完全响应式**。
- 采用**移动优先**策略：先优化小屏布局，再针对大屏进行调整。
- 遵循现代 UI/UX 响应式设计最佳实践。（若使用 Tailwind CSS，请优先使用标准断点 `sm、md、lg、xl`，非必要不要自定义断点。）
- 确保所有页面（尤其是仪表板与项目详情页）在小屏幕上能正确重排：元素按需堆叠或缩放、文本保持可读，且内容不应溢出屏幕。
- **不要更改核心设计或功能**，只需让界面能灵活适配不同屏幕尺寸。
完成后，请在 iPhone 12 的尺寸以及典型桌面宽度下再次检查布局。我们强调在所有断点上实现响应式、移动优先，并明确仅做布局适配、禁止改动功能。可搭配截图进一步说明目标布局。
重构（Refactoring）
适用时机： 开发过程中定期整理代码，尤其是当 AI 或你自己添加了大量逻辑，导致代码杂乱或性能下降时。重构旨在在不改变行为的前提下，提升结构、可读性与性能。
使用方式： 明确重构范围：是单个文件、某个功能还是整个代码库？针对单文件或组件，可使用提示“重构该文件，但保持功能与输出不变”。强调行为不变，并说明重点（如消除重复、改善命名、简化逻辑）。大型重构建议先请 AI 给出计划。
示例提示 — 安全的文件重构：
重构 **ProjectList 组件文件**，但要**确保行为与 UI 完全一致**。
目标：
- 改善代码结构与可读性（必要时简化复杂函数或拆分为更小的函数）。
- 移除未使用的变量或导入。
- 确保文件遵循最佳实践，并补充必要注释。
请勿引入新功能或改变用户看到的表现——此次仅为提升可维护性的代码清理。如有难以理解的代码，请添加简短注释说明。审查这段代码并提出提升可读性、性能与可维护性的建议：[粘贴代码]。请重点关注 TypeScript 最佳实践、恰当的错误处理及对 React 模式的遵循。为一个 [类型] 应用建议目录结构，该应用包含以下特性：[列出功能]。请提供组件、hooks、工具与类型的组织指引，确保关注点分离。我遇到这个错误：[粘贴错误]。相关代码如下：[粘贴代码]。请帮我分析原因并给出修复方案，并解释该方案为何有效。此提示明确组件、约束与目标（结构、可读性、删除无用项、添加注释），保障重构不改变用户体验。大型重构可先让 AI 分析后再逐步执行。
应用类型（App Types）
创建一个电商入门项目，包含商品列表、搜索、筛选、购物车与结账流程。需要支持用户账号、订单历史与基础的商品管理，界面应简洁并聚焦转化。搭建一个基础 CMS，用于管理博客文章或内容，并提供管理后台。需支持创建、编辑、发布（含富文本、图片上传）以及基础的 SEO 管理。构建一个项目管理应用，包含任务看板、列表与卡片。需要提供任务分配、到期日期、标签、评论与进度跟踪，并实现拖放操作与多人协作。实现一个社交媒体信息流组件，包含帖子、评论、点赞与分享功能。需具备用户资料、关注/取消关注机制与通知系统，并保证设计响应式且支持无限滚动。创建一个分析仪表板，提供柱状图、折线图、饼图等多种图表类型，并支持数据筛选、日期范围选择与可导出的报表。设计需响应式，并在数据加载时显示骨架屏。构建一个 SaaS 应用起始项目，包含用户认证、订阅管理、设置页面与基础仪表板。需提供基于角色的访问控制、账号管理，并保留良好架构以供未来扩展。创建一个带 AI 助手的聊天界面，帮助用户完成 [描述任务/目的]。需要会话历史、输入指示、消息线程，以及对 AI 回复提供反馈的能力。构建一个利用 AI 生成 [描述内容类型] 的工具，基于用户输入与参数输出结果。请提供结果微调、收藏与多种格式导出的功能。实现一个基于用户行为与偏好的推荐组件，用于 [描述项目]。需支持对推荐结果进行反馈、展示推荐原因，并帮助用户发现更多选项。利用 AI 功能（如自然语言理解、语义搜索、智能排序）提升 [描述内容] 的搜索体验，并提供搜索建议与自动补全。创建一个仪表板，使用 AI 分析 [描述数据] 并以易懂的方式展示洞察。需要提供可视化图表、趋势的通俗解释，以及针对数据提出问题的能力。实现一个基于行为与偏好的个性化系统，支持自定义 UI 元素、内容推荐，并提供让用户掌控个性化的设置。上述提示覆盖常见应用类型，可按需替换描述，快速生成针对性模板。
React 开发（React Development）
创建一个名为 use[Name] 的自定义 React hook，用于处理 [功能]。需要正确初始化状态、执行清理、对返回值进行 memo 优化，并补全 TypeScript 类型，同时提供使用示例与错误处理。将此组件改写为使用 React Context，而不是层层传递 props：[粘贴组件]。请创建带类型定义的上下文提供者，并将业务逻辑与 UI 渲染分离。优化这个 React 组件，避免不必要的重新渲染：[粘贴组件]。请按需使用 memo、useMemo、useCallback，并添加注释说明每项优化的原因。创建一个带校验的表单，包含 [描述表单字段与规则]。请使用 react-hook-form 搭配 zod 校验，处理好错误提示，并在提交时展示加载状态。使用 React Query 为 [描述数据] 实现数据请求模式，需包含加载状态、错误处理、乐观更新以及数据同步策略。为 [描述元素] 在 [描述动作] 时创建流畅的过渡动画，可使用 CSS transitions 或 Framer Motion，并确保动画在各类设备上表现良好且不影响性能。这些提示聚焦常见的 React 任务，可根据需求替换描述、组件或逻辑，快速生成高质量代码或优化方案。
锁定文件 / 限定范围（Locking Files / Limiting Scope）
适用时机： 当你希望 AI 聚焦特定项目部分并避免修改其他区域时。例如手写的一段代码或稳定组件需要保持不变，但仍需 AI 在其他地方作业。
使用方式： 在提示中明确告知哪些文件或组件禁止修改，同时说明允许调整的范围。必要时在每次提示中重复此限制，以防 AI 忘记。
示例提示 — 限定改动范围：
这次修改请**仅关注 Dashboard 页面**。
- **不要修改** `LoginPage.tsx` 或 `AuthProvider.tsx` 文件（认证流程运行良好，需要保持不变）。
- 仅在 `Dashboard.tsx` 及相关仪表板组件内进行代码调整。
任务：为仪表板新增一个显示“本周到期任务”的区域，并从数据库拉取相关任务数据。
*再次强调：登录与认证相关文件禁止改动。*我们通过“请勿修改 X 文件，只在 Y 范围内操作”等明确措辞来约束 AI 的操作范围，有助于避免牵连其他功能。对于敏感更新，可搭配提醒语气，提高 AI 的谨慎程度。
规划（Planning）
适用时机： 在着手复杂或多步骤实现前，或当功能较大、需要拆分子任务时。若你希望 AI 先给出方案，再开始编码，也可使用规划提示。
使用方式： 要求 AI 生成计划或检查清单，例如“先列出实现步骤”或“编写代码前先说明实施计划”。这类提示通常在 Chat 模式中执行，以免直接改动代码。获得计划后，可进行讨论或调整，然后再逐步实现。
示例提示 — 规划功能实现：
在编写任何代码之前，先**规划通知功能的实现方案**。
- 列出为逾期任务发送邮件通知所需的每个步骤。
- 同时考虑前端（若需 UI 调整）与后端（如定时检查或触发器）的需求。
- 确保计划不会破坏现有功能——我们不能引入新的问题。
- 以编号列表（1、2、3……）形式提供计划，并为每步附上简要说明。
列完步骤后请先暂停，等待确认，**暂时不要修改代码**。该提示让 AI 扮演规划者，先输出带说明的序列步骤。你可据此评估方案、调整优先级，再逐步执行，避免因方向错误浪费时间。
Stripe 集成（Stripe Setup）
适用时机： 需要在应用中集成 Stripe 支付时。Lovable 可与 Stripe 对接，但需配置密钥、Webhook 及结账界面。提示可帮你快速搭建与 Stripe API 对接的骨架。
使用方式： 提供 Stripe 所需信息：模式（测试或生产）、商品或价格 ID、支付成功与取消的跳转地址。说明 UI 行为（如按钮、弹窗）。务必强调敏感密钥会通过安全方式配置（不要写在提示里），并告知禁止修改无关代码。
示例提示 — 集成 Stripe 支付：
我想在应用中**集成 Stripe 支付**。
- 目前使用 **Stripe 测试模式**。
- 我们已在 Stripe 中配置商品 ID `prod_12345` 与价格 ID `price_67890`（一次性购买）。
- 在**价格页**添加结账按钮，触发该商品的 Stripe Checkout 流程。
- 支付成功后跳转至 `/payment-success`，取消支付则跳转至 `/payment-cancelled`。
重要提示：
- 假设 API 密钥与 Webhook 密钥已通过安全方式配置（**不得**硬编码）。
- **不要**修改与支付无关的其他页面或功能。
完成后，请说明需要在 Stripe 仪表板中配置的 Webhook（例如回调 URL）。提示中包含 Stripe 的所有关键要素，并强调禁止硬编码密钥及修改其他页面。实现后，可使用测试卡号验证支付流程。如遇错误，再通过提示进行排查。
Supabase 与后端（Supabase & Backend）
为 [描述你的应用] 设计数据库模式，并包含以下实体关系：[描述关系]。请设置外键约束、性能相关的索引，选择合适数据类型，并兼顾可扩展性。创建一个服务，用于从 [API 名称] 获取数据，并实现缓存、错误重试与请求限流。请为响应数据编写 TypeScript 接口，并妥善处理 API 版本。为一个多租户应用制定行级安全（Row Level Security）策略，涉及以下数据表：[列出表]。需要实现用户隔离、基于角色的访问控制，并在兼顾性能的前提下处理层级数据访问。创建一个 Supabase Edge Function 来处理 [描述功能]，要求具备完善的错误处理、输入校验与安全检查，并包含限流及规范的环境变量使用。使用 Supabase 订阅为 [描述功能] 实现实时数据同步，妥善处理连接管理、离线时的优雅降级以及冲突解决。实现一个健壮的搜索功能，用于 [描述内容类型]，支持筛选、排序与高亮匹配结果，并提供联想搜索、最近搜索及无结果时的合理反馈。创建一个用于展示 [描述数据] 的数据表/数据网格，支持排序、筛选、分页、列宽调整与行选择，并提供数据导出及列显示自定义功能。构建一个导入/导出 [描述数据] 的系统，支持多种格式（CSV、JSON 等），需实现校验、进度指示、错误处理，并在导入时允许字段映射。使用 Recharts 为 [描述数据/指标] 创建一组交互式图表，包含柱状图、折线图、饼图等可视化形式，提供时间范围选择、下钻能力与响应式表现。制定策略，在离线数据恢复连接后与后端同步。请处理冲突解决、乐观 UI 更新，并提供同步状态的可视化提示。创建一个多步骤表单向导，用于收集 [描述数据]，需包含验证、进度跟踪、草稿保存及提交前的总览，并根据先前答案动态显示字段。这些提示覆盖数据库设计、服务封装、安全策略、实时同步、数据展示与导入导出等后端关键任务，可按需替换具体描述。
工作流（Workflow）
将此 Lovable 项目连接到 GitHub，并建立良好的协作流程。需包含分支保护规则、PR 模板，以及带自动预览部署的 CI/CD 配置。把这个大型组件拆分成更易维护的小组件：[粘贴组件]。请抽取可复用部分，正确传递 props，保持状态管理正常，并确保拆分后功能无损。为 [组件/功能] 提出测试策略，说明需要测试哪些内容以及如何执行。请包含业务逻辑的单元测试、数据流的集成测试、关键用户流程的 UI 测试，并给出模拟依赖的最佳实践。为这个异步函数实现完善的错误处理：[粘贴函数]。请加入重试逻辑、降级方案、规范的错误上报、友好的用户提示，以及便于调试的日志。为此应用搭建部署流水线，覆盖预发布与生产环境，自动执行数据库迁移，根据环境区分配置，并提供回滚能力。分析并优化这条用户流程：[描述流程]。请提出提升体验的建议，减少阻碍点，引入渐进式增强，并确保全程满足可访问性要求。这些提示帮助你建立协作流程、优化组件结构、制定测试策略、完善错误处理与部署流程。
Chat 模式 vs 默认模式（Using Chat Mode vs Default Mode）
适用时机： Lovable 提供默认模式（直接应用更改）与 Chat-Only 模式（仅对话，不立即修改）。合理运用两种模式可提升效率。默认模式适合明确的编码任务；Chat 模式则适合头脑风暴、调试或在执行前讨论。
使用方式：
- 默认模式： 适用于“请帮我实现 X”这类明确指令，AI 会直接尝试完成。
- Chat 模式： 适用于需要讨论、分析或规划的情境（例如“这个报错是什么原因？”、“实现 X 的最佳方式是什么？”）。在 Chat 模式中，AI 会提供分析或计划，通常需要你明确指示“可以实施了”后才会动手。
示例场景 — 默认 vs Chat：
- 若怀疑项目存在过时代码，直接在默认模式提示：
检查整个应用，指出哪些地方存在过时代码。 - 如果你希望先评估，可以切换到 Chat 模式，询问：
我看到一些库的弃用警告。哪些代码可能已经过时？我们应该如何更新？
调试场景也同理：在 Chat 模式复制错误消息、请求分析，确认方案后再到默认模式执行。若未在界面中看到 Chat-Only 选项，可在设置的 Labs 中启用。
编写知识库与 PRD（Writing Knowledge Bases and PRDs）
适用时机： 项目开始阶段，以及当你拥有超出单个提示长度的上下文时。Lovable 的知识库位于项目设置中，可以存放背景信息、需求与指引，并在每次提示时提供持久上下文。PRD（产品需求文档）则用于完整描述应用目标与规格，是构建蓝图。
使用方式： 首次使用时，填充知识库，包含：
- 项目概览与目标： 项目做什么、解决什么问题。
- 用户流程： 用户如何使用应用（例如“注册 → 进入仪表板 → 创建任务”）。
- 核心功能与范围： 明确范围内/外的功能，避免功能蔓延。
- 技术栈： 所用技术、API、服务。
- 设计规范： 品牌、配色、布局、可访问性要求。
- 后端细节： 数据模型、关键表、Stripe 或 Supabase 等集成。
编写完成后，可直接提醒 AI 使用知识库。例如第一条提示：
在编写任何代码之前，请先阅读知识库，并分享你对项目的理解。AI 会基于知识库进行总结，若有误解可及时纠正。此举能显著减少误解与幻觉，因为 AI 在每次提示时都能参照你的“项目手册”。随着项目演进，记得更新知识库，以保持上下文的准确性。
免责声明
本文由 Codex 自动化翻译与整理，使用的提示词为：“将原文用中文重写，尊重原意的前提下通俗易懂”。