能力标签
lovable-boilerplate Cursor规则
Cursor规则

lovable-boilerplate Cursor规则

基于 TypeScript · 提升 AI 辅助编程的代码质量与风格一致性
英文名:lovable-boilerplate
⭐ 56 Stars 🍴 27 Forks 💻 TypeScript 📄 MIT 🏷 AI 7.5分
7.5AI 综合评分
cursor_ruleboilerplatecopilotcopilot-enabledcursor-ruleslovabletypescript
✦ AI Skill Hub 推荐

lovable-boilerplate Cursor规则 是 AI Skill Hub 本期精选Cursor规则之一。综合评分 7.5 分,整体质量较高。我们推荐使用将其纳入你的 AI 工具库,帮助提升工作效率。

📚 深度解析

lovable-boilerplate Cursor规则 是专为 Cursor AI 代码编辑器设计的规则配置文件。Cursor Rules 是 Cursor 提供的一项功能,允许开发者在项目根目录放置 .cursorrules 文件(或在 Cursor Settings 中配置 Rules for AI),从而定制 AI 代码助手在该项目中的行为规范和输出风格。

使用 lovable-boilerplate Cursor规则 的核心价值在于提升代码质量的一致性。在没有规则约束的情况下,AI 生成的代码风格可能随机变化;而有了精心设计的 Cursor Rules,AI 会严格遵守你制定的编码规范,例如始终使用函数式组件而非类组件、命名必须使用驼峰命名法、注释只用中文等。

对于团队协作而言,将 .cursorrules 文件纳入 Git 版本管理,可以确保团队所有成员在使用 AI 辅助编程时遵循统一的规范,避免代码审查中因 AI 生成风格不一致带来的额外成本。AI Skill Hub 推荐将 Cursor Rules 作为新项目启动的标配步骤之一。

📋 工具概览

lovable-boilerplate:开源Cursor规则,基于React的可爱inspired的AI UI生成器

lovable-boilerplate Cursor规则 是一套专为 Cursor AI 代码编辑器定制的编程规范规则集。通过精心设计的规则约束,它能引导 AI 生成符合团队标准的高质量代码,减少人工审查成本,保障代码风格一致性。适合个人开发者快速提升代码质量,也适合团队统一 AI 辅助编程的规范。

GitHub Stars
⭐ 56
开发语言
TypeScript
支持平台
Windows / macOS / Linux
维护状态
轻量级项目,按需更新
开源协议
MIT
AI 综合评分
7.5 分
工具类型
Cursor规则
Forks
27

📖 中文文档

以下内容由 AI Skill Hub 根据项目信息自动整理,如需查看完整原始文档请访问底部「原始来源」。

lovable-boilerplate:开源Cursor规则,基于React的可爱inspired的AI UI生成器

lovable-boilerplate Cursor规则 是一套专为 Cursor AI 代码编辑器定制的编程规范规则集。通过精心设计的规则约束,它能引导 AI 生成符合团队标准的高质量代码,减少人工审查成本,保障代码风格一致性。适合个人开发者快速提升代码质量,也适合团队统一 AI 辅助编程的规范。

📌 核心特色
  • 深度定制 AI 代码助手在 Cursor 中的行为规范与输出风格
  • 内置特定语言或框架的编码最佳实践约束
  • 减少 AI 生成代码的人工审查成本,提升代码质量
  • 支持团队统一 AI 辅助编程规范,降低协作成本
  • 实时生效,无需重启 IDE,即改即用
🎯 主要使用场景
  • 为特定项目或技术栈指定 AI 代码风格和安全规范
  • 在多人协作项目中统一 AI 辅助编程的代码质量标准
  • 快速生成符合团队规范的代码,减少后期返工
以下安装命令基于项目开发语言和类型自动生成,实际以官方 README 为准。
安装命令
# 在 Cursor 中安装规则
# 1. 打开 Cursor → Cmd+Shift+P
# 2. 搜索 "Open Cursor Settings" 或直接进入 Settings
# 3. 找到 "Rules for AI" / "Cursor Rules" 配置项
# 4. 粘贴本工具的规则内容

# 也可以克隆仓库后本地导入
git clone https://github.com/chihebnabil/lovable-boilerplate
# 按照 README 中的说明添加规则文件
📋 安装步骤说明
  1. 打开 Cursor,进入 Settings(设置)
  2. 找到 Rules for AI 或 Cursor Rules 选项
  3. 将规则内容复制后粘贴到规则输入框中
  4. 保存设置,后续所有 AI 对话将自动应用此规则
以下用法示例由 AI Skill Hub 整理,涵盖最常见的使用场景。
常用命令 / 代码示例
# 命令行使用
lovable-boilerplate --help

# 基本用法
lovable-boilerplate [options] <input>

# Node.js 代码中使用
const lovable_boilerplate = require('lovable-boilerplate');

const result = await lovable_boilerplate.run(options);
console.log(result);
以下配置示例基于典型使用场景生成,具体参数请参照官方文档调整。
配置示例
# lovable-boilerplate 配置说明
# 查看配置选项
lovable-boilerplate --config-example > config.yml

# 常见配置项
# output_dir: ./output
# log_level: info
# workers: 4

# 环境变量(覆盖配置文件)
export LOVABLE_BOILERPLATE_CONFIG="/path/to/config.yml"
📑 README 深度解析 真实文档 完整度 75/100 查看 GitHub 原文 →
以下内容由系统直接从 GitHub README 解析整理,保留代码块、表格与列表结构。

Lovable Boilerplate

Reverse-engineered Lovable AI app builder turned into a developer-friendly React boilerplate with comprehensive AI coding assistant instructions.

React TypeScript Vite shadcn/ui Tailwind CSS

Features

  • Lightning Fast Development with Vite and React 19
  • 🎨 40+ Pre-built Components from shadcn/ui
  • 🎯 Type-Safe with TypeScript 5.9
  • 🗄️ Backend Ready with Supabase integration
  • 📱 Responsive Design with Tailwind CSS
  • 🔄 Smart Data Fetching with TanStack Query
  • 📋 Form Validation with React Hook Form + Zod
  • 🤖 AI-Optimized with comprehensive coding instructions

Prerequisites

  • Node.js 18+ or Bun
  • Git

Install dependencies (npm, yarn, or bun)

npm install

Start Supabase locally (requires Docker)

npx supabase start

One-Click Setup

Edit with Bolt Edit with Replit

Getting Started

Installation

```bash

Setup Supabase

1. Create a Supabase Project - Visit supabase.com and create a new project - Wait for your database to be provisioned

2. Configure Environment Variables

   cp .env.example .env
   
Add your Supabase credentials to .env:
   VITE_SUPABASE_URL=https://your-project.supabase.co
   VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key
   

Authentication Example

// Sign up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password'
});

// Sign in
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password'
});

// Get current user
const { data: { user } } = await supabase.auth.getUser();

// Sign out
await supabase.auth.signOut();

Set up environment variables

cp .env.example .env

Edit .env with your Supabase credentials

Supabase Integration

This boilerplate comes with Supabase pre-configured for backend functionality including authentication, database, and real-time features.

Available Components

UI Components (40+ ready-to-use)

All components are pre-configured with shadcn/ui and located in src/components/ui/:

Layout & Navigation - accordion, card, separator, sheet, sidebar, tabs - breadcrumb, command, dropdown-menu, menubar, navigation-menu, pagination

Forms & Inputs - button, input, textarea, select, checkbox, radio-group, switch, form - calendar, input-otp, slider, toggle

Feedback & Overlays - alert, alert-dialog, toast, sonner, progress, skeleton - dialog, drawer, hover-card, popover, tooltip

Data Display - avatar, badge, table, chart, carousel - aspect-ratio, collapsible, resizable, scroll-area

Using Bun (faster alternative)

bun dev # Start dev server bun run build # Production build ```

🇨🇳 中文文档镜像 AI 翻译 2026-06-09
英文原文章节由系统翻译为中文摘要,便于快速理解。完整原文见上方 "📑 README 深度解析"。
📌 简介

Lovable Boilerplate 是一个反向工程的可爱 AI 应用程序构建器,转化为一个友好的 React 热启动器,包含了全面 AI 编码辅助指南。

⚡ 功能介绍

Lovable Boilerplate 的功能包括: - 使用 Vite 和 React 19 实现的极速开发 - 40+ 个预构建组件 - 使用 TypeScript 5.9 实现的类型安全 - 使用 Supabase 集成的后端准备 - 使用 Tailwind CSS 实现的响应式设计 - 使用 TanStack Query 实现的智能数据获取 - 使用 React Hook Form + Zod 实现的表单验证 - 使用全面编码指南实现的 AI 优化

📋 环境依赖

环境依赖与系统要求: - Node.js 18+ 或 Bun - Git

🛠 安装步骤(Docker/pip/源码)

安装步骤: - 安装依赖项(npm、yarn 或 bun) - 使用 Docker 启动 Supabase

🚀 使用教程

使用教程: - 使用 Supabase 进行身份验证 - 获取当前用户 - 登出

⚙️ 配置说明(含 MCP / env)

配置说明: - 复制 .env.example 到 .env - 编辑 .env 文件以填写 Supabase 凭据

🔄 工作流/模块

工作流 / 模块说明: - 使用 Supabase 集成的后端功能,包括身份验证、数据库和实时功能

🎯 aiskill88 AI 点评 A 级 2026-05-23

lovable-boilerplate是一个基于React的开源Cursor规则,带来AI UI生成的能力,但需要进一步优化和完善

📚 实用指南(长尾问题)
适合谁
  • 使用 Cursor 编辑器、希望提升 AI 编程效率的开发者
最佳实践
  • Cursor rules 控制在 80 行内,否则模型上下文成本会显著上升
常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)
部署方案
  • 云端托管:可放在 Vercel / Railway / Fly.io 等 PaaS 平台
相关搜索
lovable-boilerplate 中文教程lovable-boilerplate 安装报错怎么办lovable-boilerplate 与同类工具对比lovable-boilerplate 最佳实践lovable-boilerplate 适合谁用

⚡ 核心功能

👥 适合谁
  • 使用 Cursor 编辑器、希望提升 AI 编程效率的开发者
⭐ 最佳实践
  • Cursor rules 控制在 80 行内,否则模型上下文成本会显著上升
⚠️ 常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)

👥 适合人群

Cursor IDE 日常用户前端 / 后端 / 全栈开发者AI 辅助编程爱好者技术团队负责人

🎯 使用场景

  • 为特定项目或技术栈指定 AI 代码风格和安全规范
  • 在多人协作项目中统一 AI 辅助编程的代码质量标准
  • 快速生成符合团队规范的代码,减少后期返工

⚖️ 优点与不足

✅ 优点
  • +MIT 协议,可免费商用
  • +直接提升 AI 辅助编码质量
  • +零学习成本,立即生效
  • +高度可定制,适配各类项目
⚠️ 不足
  • 仅适用于 Cursor IDE,不支持其他编辑器
  • 规则效果高度依赖模型的理解能力
  • 需定期审查和维护规则内容
⚠️ 使用须知

AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。

建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。

📄 License 说明

✅ MIT 协议 — 最宽松的开源协议之一,可自由商用、修改、分发,仅需保留版权声明。

🔗 相关工具推荐

📚 相关教程推荐
📰 相关 AI 新闻
🗺️ 相关解决方案
🧩 你可能还需要
基于当前 Skill 的能力图谱,自动补全的工具组合

❓ 常见问题 FAQ

解答
💡 AI Skill Hub 点评

经综合评估,lovable-boilerplate Cursor规则 在Cursor规则赛道中表现稳健,质量良好。如果你已有明确的使用需求,可以直接上手体验;如果还在评估阶段,建议对比同类工具后再做决策。

⬇️ 获取与下载
⬇ 下载源码 ZIP

✅ MIT 协议 · 可免费商用 · 直接从 aiskill88 服务器下载,无需跳转 GitHub

📚 深入学习 lovable-boilerplate Cursor规则
查看分步骤安装教程和完整使用指南,快速上手这款工具
🌐 原始信息
原始名称 lovable-boilerplate
原始描述 开源Cursor规则:A Lovable-inspired React boilerplate that brings no-code AI UI generation into c。⭐56 · TypeScript
Topics cursor_ruleboilerplatecopilotcopilot-enabledcursor-ruleslovabletypescript
GitHub https://github.com/chihebnabil/lovable-boilerplate
License MIT
语言 TypeScript
🔗 原始来源
🐙 GitHub 仓库  https://github.com/chihebnabil/lovable-boilerplate 🌐 官方网站  https://nextlovable.com/boilerplate

收录时间:2026-05-13 · 更新时间:2026-05-16 · License:MIT · AI Skill Hub 不对第三方内容的准确性作法律背书。

📺 订阅 AI Skill Hub Daily Telegram 频道
每天 8 条精选 AI Skill、MCP、Agent 与自动化工具推送
加入频道 →