Lovable 提示词库（Prompt Library）

原文地址：Lovable Prompt Library

Lovable 收集了一系列可复用的 AI 提示词模板，覆盖项目开发中常见的各种场景。你可以把它们当作灵感或基础模板，根据自己的需求进行调整。这些提示词涵盖了从新项目启动、UI 设计、响应式布局、代码重构、支付集成等多种实际用例，并配有详细的使用说明与示例。

目录

  • 启动新项目
  • UI/UX 设计
  • 响应式设计
  • 代码重构
  • 应用类型
  • React 开发
  • 限制修改范围
  • 规划与拆解任务
  • Stripe 支付集成
  • Supabase & 后端开发
  • 团队协作与工作流
  • 对话模式与默认模式
  • 知识库与 PRD（需求文档）撰写

启动新项目

适用时机：

在项目刚开始，需要让 AI 理解你的整体需求，为项目打下基础时使用。可以用来快速起步，比如描述你要做什么、用哪些技术栈、有哪些核心功能，并指定从哪里开始开发（通常是主页面或重要功能）。

使用方法：

步骤：
1. 先描述应用类型和技术栈（前端框架、样式方案、后端服务等）。
2. 列出核心功能或页面。
3. 指定要从哪里开始（如主面板页面）。
这样可以让 AI 明确范围和优先级，迅速展开开发。

示例提示词：

我需要一个 任务管理 应用，包括：
- 技术栈： Next.js 前端，Tailwind CSS 样式，Supabase 做认证和数据库。
- 核心功能： 项目与任务创建、任务分配、截止日期提醒、仪表盘总览。
请先构建 主仪表盘页面，包含：
- 带导航的头部，
- 项目列表与状态，
- 新建项目按钮。
请先用假数据，并保持设计简洁响应式。

（小建议：可以先从空项目起步，逐步递增功能，避免 AI 一次性生成过多内容。）

UI/UX 设计

适用时机：

当你想优化界面外观但不影响功能时，比如美化页面、调整排版、统一风格。只改视觉，不动逻辑。

使用方法：

1. 明确说明是“只改样式，不改功能”。
2. 列出你想优化的具体点（如卡片设计、配色、间距等）。
3. 如果有多项需求，建议分多次进行（如先布局、后配色）。
4. 如有不能动的部分请特别指出。

示例提示词：

请优化应用 UI，不要改变任何功能。
- 保持原有逻辑和状态管理不变。
- 视觉优化： 仪表盘页面使用现代卡片设计，每个项目展示更美观，配色更有对比度，增加内边距让布局更清爽。
- 目标： 纯粹的视觉美化，不能影响功能和数据流转。

响应式设计

适用时机：

当应用在不同设备（手机、平板、桌面）上显示效果不佳，或需要最终检查各页面的适配性时。

使用方法：

1. 强调“移动优先”策略，要求优先适配小屏。
2. 如果用 Tailwind，直接要求用自带断点（sm, md, lg, xl）。
3. 明确不能用固定宽度，所有内容都要自适应。
4. 可要求特别关注某些页面或元素的适配。

示例提示词：

我们的应用需要全端响应式，适配手机、平板和电脑桌面。
- 采用移动优先布局，先满足小屏，再适配大屏。
- 使用 Tailwind CSS 的标准断点（sm, md, lg, xl）。
- 确保所有页面（尤其是仪表盘和项目详情页）在小屏下元素自动堆叠、文本可读、无内容溢出。
- 不要改变设计和功能，只需确保各种屏幕自适应。
完成后请特别检查 iPhone 12 和常见桌面宽度下的显示效果。

代码重构

适用时机：

开发过程中代码变得冗长、混乱或难以维护时，可以让 AI 帮你清理和优化代码结构，但不改变功能。

使用方法：

1. 明确指出重构范围（是单个文件、一个功能，还是整个项目）。
2. 强调“不能改变功能和输出”，只做结构和可读性优化。
3. 可指定关注点，如减少重复、优化变量命名、简化逻辑。
4. 大型重构建议先让 AI 拆解计划，分步执行。

示例提示词：

请重构 ProjectList 组件文件，保持行为和界面完全不变。
目标：
- 优化代码结构和可读性（如需可拆分为更小函数）。
- 移除未使用的变量和导入。
- 遵循最佳实践并补充必要注释。
不能加入新功能，不能影响用户体验，只做维护性清理。

应用类型

以下是常见应用类型的快速提示词模板：

  • 电商商店：产品列表、搜索、筛选、购物车、结算、订单历史、用户账户、基础管理后台，界面简洁以转化为主。
  • 内容管理系统（CMS）：博客或文章管理，富文本编辑、图片上传、SEO 基础、后台发布。
  • 项目管理工具：任务看板、列表、卡片、任务分配、截止日期、标签、评论、进度跟踪、拖拽排序、协作。
  • 社交媒体组件：帖子、评论、点赞、分享、用户资料、关注、通知、无限滚动和响应式设计。
  • 数据分析仪表盘：多种图表（柱状、折线、饼图）、数据筛选、日期范围、报表导出、骨架加载。
  • SaaS 应用基础框架：用户认证、订阅管理、设置页、角色权限管理、可扩展架构。
  • AI 聊天界面：带历史、输入提示、消息分组、反馈机制。
  • AI 内容生成工具：输入参数生成内容、收藏与导出。
  • 推荐系统：基于用户行为推荐内容，支持反馈与解释推荐理由。
  • AI 搜索体验：自然语言理解、语义搜索、智能排序、自动补全。
  • AI 数据分析仪表盘：智能洞察、可视化、趋势说明、数据问答。
  • 个性化体验系统：可自定义 UI、内容推荐、偏好设置。

React 开发

  • 创建自定义 Hook：如 useXXX，需支持状态初始化、清理、记忆化、TypeScript 类型，附示例用法和错误处理。
  • 用 Context 重构组件，避免传递过深，拆分业务逻辑和 UI。
  • 优化组件防止不必要重渲染，合理使用 memo、useMemo、useCallback，并说明原因。
  • 使用 react-hook-form + zod 实现表单校验、错误处理、加载态。
  • 用 React Query 实现数据拉取，处理加载、错误、本地乐观更新和同步。
  • 实现平滑过渡动画，可用 CSS 或 Framer Motion，并保持性能。

限制修改范围

适用时机：

当你只想让 AI 修改项目的某一部分，其他部分完全不动时使用。比如某些功能已稳定，或某些文件你手动写了，不希望 AI 覆盖。

使用方法：

1. 明确告诉 AI 哪些文件/组件不能动。
2. 每次提示都重复强调限制范围。
3. 若操作敏感，还可加一句“谨慎执行，先确认再动手”。

示例提示词：

请只关注 Dashboard 页面。
- 不要修改 LoginPage.tsx 和 AuthProvider.tsx（认证已稳定，需保持不变）。
- 只允许编辑 Dashboard.tsx 及其相关组件。
任务：在 Dashboard 新增“本周到期任务”板块，并从数据库获取相关任务。
（再次强调，登录和认证文件绝对不能动！）

规划与拆解任务

适用时机：

遇到复杂需求或多步骤开发时，先让 AI 帮你拆解步骤，制定计划，避免走错路，节省开发和沟通成本。

使用方法：

1. 让 AI 输出步骤清单（如“请先列举实现步骤，不要写代码”）。
2. 可以要求对每一步给出解释和注意事项。
3. 先评审计划，满意后再执行实现。

示例提示词：

在写代码前，请规划实现“逾期任务邮件通知”功能的步骤。
- 分别列出前端和后端的实现要点。
- 保证不影响现有功能。
- 用有序列表形式输出，每步给出简要说明。
- 只输出计划，暂不写代码。

Stripe 支付集成

适用时机：

需要为应用增加 Stripe 支付功能时，建议用清晰的提示词让 AI 帮你完成支付按钮、回调、测试等流程。

使用方法：

1. 说明使用测试/正式环境，提供产品/价格 ID、跳转地址等。
2. 强调 API 密钥已安全配置（不可写在代码里）。
3. 明确不能修改与支付无关的功能。
4. 可让 AI 补充 Stripe 后台 webhook 配置说明。

示例提示词：

我要给应用添加 Stripe 支付，要求如下：
- 目前用 Stripe 测试模式。
- Stripe 产品 ID 为 prod_12345，价格 ID 为 price_67890（一次性购买）。
- 在 Pricing 页面新增结算按钮，发起支付流程。
- 支付成功跳转到 /payment-success，取消跳转到 /payment-cancelled。
重要说明：
- 假设 API 密钥和 webhook 已安全配置（不要写进代码）。
- 不要改动任何与支付无关的内容。
完成后请说明 Stripe 后台需要设置哪些 webhook。

Supabase & 后端开发

  • 设计数据库结构，明确实体关系、外键、索引、数据类型及可扩展性。
  • 创建带缓存、错误重试、请求节流的数据服务，并用 TypeScript 定义接口。
  • 为多租户应用实现 Row Level Security（行级安全），区分角色、隔离数据。
  • 用 Edge Function 实现某些后端逻辑，注意错误处理、输入校验、安全检查。
  • 实现 Supabase 实时同步，支持离线降级与冲突解决。
  • 开发高级搜索、过滤、排序、关键词高亮、联想建议、无结果处理。
  • 建立高级数据表格，支持排序、筛选、分页、导出、列定制。
  • 处理数据导入/导出（CSV/JSON），校验、进度、错误提示、字段映射。
  • 创建多种可交互图表，支持钻取、时间选择、响应式。
  • 实现离线数据同步策略，冲突解决、乐观更新、同步状态提示。
  • 开发多步骤表单向导，带校验、进度、草稿保存和条件字段。

团队协作与工作流

  • 对接 GitHub 并建立协作流程：分支保护、PR 模板、CI/CD 自动预览部署。
  • 将大组件拆分为小组件，优化复用与状态管理，确保不破坏功能。
  • 制定测试策略，包括单元测试、集成测试、UI 测试、依赖模拟。
  • 为异步函数加全方位错误处理：重试、降级、友好提示、日志。
  • 配置部署流水线：区分预发/生产，自动数据库迁移、环境变量、回滚能力。
  • 分析优化用户流程，减少阻力、提升体验、渐进增强、可访问性。

对话模式与默认模式

适用时机：

Lovable 有两种提示模式：默认模式（直接变更项目）和 对话模式（仅讨论不动代码）。如需讨论、排查、规划，建议用对话模式，更安全可控。

使用方法：

- 默认模式适合已明确需求，直接让 AI 执行。
- 对话模式常用于调研、分析、讨论方案，需你确认后再执行代码更改。
- 典型流程：先用对话模式头脑风暴、分析，再切换到默认模式执行。

示例：

用户：我看到有过时的库警告，哪些代码需要更新？怎么改？
AI：分析出相关部分、说明原因和建议，不会直接改代码。

如发现错误，建议先用对话模式分析、确认后再执行修复，确保安全。

知识库与 PRD（需求文档）撰写

适用时机：

项目初期，或有大量背景信息与长期需求时，将关键信息存到 Lovable 的知识库（Knowledge Base），让 AI 每次都能“记住”你的项目大背景，减少反复解释。

使用方法：

1. 在知识库填写项目简介、目标、用户流程、核心功能、技术栈、设计规范、后台数据模型等。
2. 写好后可让 AI 先阅读知识库并复述理解，及时纠正偏差。
3. 项目变动时及时维护知识库和 PRD，确保后续每个提示都能参考到最新需求。

示例提示词：

在写代码前，请先阅读知识库并复述你对项目的理解。

这样 AI 会用自己的话总结你的需求。你可以及时纠正，确保一致后再推进后续开发。知识库和 PRD 就是项目 AI 助手的“长期记忆”，帮助减少误解和跑偏。

小贴士

  • 所有提示词均可根据自身项目实际调整、补充细节。
  • 多用分步、分阶段的提示，逐步推进，效果更佳。
  • 遇到疑难问题，建议先用对话模式分析，确认方案再应用。
  • 知识库与 PRD 文档长期维护，能显著提升 AI 辅助开发效率。