kscz0000 Lovable 脚手架清理
移除 Lovable 脚手架的一切痕迹，让项目真正属于你。 由 antigravity-awesome-skills 制作 · 作者：whoisabhishekadhikari
概述
Lovable（lovable.dev）用自带的 tagger 依赖、品牌标识、占位资源和生成的 markdown 文档来引导 Vite + React + shadcn/ui 项目。大多数开发者从 Lovable 导出后，希望在上架或开源前拥有一个干净的、可自主控制的代码库。本技能覆盖 Lovable 留下痕迹的全部 14 个领域。
何时使用本技能
- 用户说"清理我的 Lovable 项目"或"移除 Lovable 品牌"
- 用户说"de-Lovable"、"我从 Lovable 导出了"或"审计 Lovable 残留"
- 项目
package.json中包含lovable-tagger - 项目包含
CLEANUP_SUMMARY.md、DEPLOYMENT_GUIDE.md或DEVELOPMENT_SUMMARY.md index.html仍使用通用<title>或 Lovable favicon- 用户想在上线前审计 Vite/React 项目中的脚手架残留
核心概念
Lovable 注入了什么
Lovable 添加了三类必须移除的脚手架：
- 依赖 —
lovable-tagger开发依赖 +vite.config.ts中的componentTagger()调用。 这是唯一的运行时钩子；移除它始终安全。 - 品牌产物 —
favicon.ico/png、og-image.png、logo.png、通用<title>， 以及README.md中的 Lovable 项目 URL。 - 生成文档 — 项目根目录下的
CLEANUP_SUMMARY.md、DEPLOYMENT_GUIDE.md、DEVELOPMENT_SUMMARY.md、LOGO_UPDATE.md。
为什么执行顺序很重要
在编辑源文件之前移除依赖可以避免锁文件冲突。最后清理文档意味着 README 反映的是已清理完毕的项目。
未使用依赖占位
Lovable 预装了完整的 shadcn/ui 组件集（约 29 个组件）和所有 Radix UI 原语（约 30 个包）。大多数项目只用 5–10 个。未使用的可以安全移除，但 @radix-ui/react-slot 必须保留——它是许多 shadcn 组件通过 asChild prop 内部使用的间接依赖。
推荐执行顺序
- 依赖（Area 2 和 7）— 先清理包依赖图
- 构建配置（Area 3）— 从 Vite 中移除 tagger
- 入口文件（Area 4 和 6）— 清理运行时引用
- 资源文件（Area 5）— 替换品牌文件（如资源未准备好可延后）
- 文档和 README（Area 1 和 10）— 最后清理，使 README 反映已清理的项目
- 环境和 Git（Area 9 和 12）— 安全扫描
- SEO / 部署（Area 11）— 通常无需操作；确认后继续
- 未使用依赖（Area 13）— 如赶进度可延后到上线后
逐步指南
Area 1 · README.md
- 第 1 行：将
# Welcome to your Lovable project替换为真实项目标题 - 第 5 行：移除
https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID - 第 11–19 行：删除"Use Lovable"说明块
- 第 65–73 行：删除"Deploy via Lovable / custom domain docs"块
✅ 清除后，从头到尾阅读 README。如果删除了大段内容，主动提供撰写替换的介绍段落。
Area 2 · package.json
- 从
devDependencies中移除"lovable-tagger" - 将
"name"从"vite_react_shadcn_ts"改为真实项目名（kebab-case） - 扫描
scripts块中"lovable"或"lovable:*"条目并移除
grep -n "lovable" package.json
Area 3 · vite.config.ts
- 移除
import { componentTagger } from "lovable-tagger" - 从 plugins 数组中移除
mode === 'development' && componentTagger() - 移除
.filter(Boolean)（如果它仅为处理条件性 tagger 而存在）
grep -n "lovable\|componentTagger\|filter(Boolean)" vite.config.ts
Area 4 · index.html
- 将通用
<title>替换为真实产品名称 - 移除所有
<!-- Generated by Lovable -->注释或 Lovable meta 标签 - 如存在 Lovable favicon 引用则替换
grep -in "lovable\|generator" index.html
Area 5 · public/ 资源
替换以下文件（保留文件名，替换内容）：
| 文件 | 操作 |
|---|---|
favicon.ico |
替换为真实图标 |
favicon.png |
替换为真实图标 |
og-image.png / logo.png |
替换为真实品牌资源 |
placeholder.svg |
通常未使用 — 可安全删除 |
✅ 标记哪些文件在 <head> 中实际引用、哪些是死文件，让用户知道优先处理什么。
Area 6 · 源文件
src/main.tsx— 扫描 Lovable HOC、包装器或注释src/App.tsx— 同上- 自动生成的组件 — 查找
// generated by Lovable头部
grep -rn "lovable\|Lovable" src/ --include="*.tsx" --include="*.ts"
Area 7 · 锁文件
npm uninstall lovable-tagger
grep "lovable-tagger" package-lock.json
如项目使用 yarn 或 pnpm，改用 yarn remove 或 pnpm remove。
Area 8 · package.json 脚本（后续检查）
在 Area 2 之后二次确认 — 脚本有时与依赖分开注入：
grep -n '"lovable' package.json
Area 9 · 环境文件
grep -rin "lovable" .env .env.local .env.example 2>/dev/null \
| sed -E 's/([A-Za-z_][A-Za-z0-9_]*LOVABLE[A-Za-z0-9_]*=).*/\1[REDACTED]/I'
移除所有 Lovable API 密钥或项目 ID。如果变量仅 Lovable 使用，删除整行 — 不要留下空键。
Area 10 · 根目录 markdown 文档
删除或改造以下常见的 Lovable 生成文件：
CLEANUP_SUMMARY.mdDEPLOYMENT_GUIDE.mdDEVELOPMENT_SUMMARY.mdLOGO_UPDATE.md
grep -rln "lovable\|Lovable" *.md 2>/dev/null
✅ 删除前先浏览每个文件 — Lovable 文档有时包含有价值的架构说明，值得保留到重写的 CONTRIBUTING.md 或 ARCHITECTURE.md 中。
Area 11 · SEO 和部署配置
通常已干净 — 确认后继续：
grep -in "lovable" \
public/robots.txt public/sitemap.xml public/_redirects \
vercel.json netlify.toml 2>/dev/null
替换 og-image.png 后，更新 index.html 中的 OG meta：
<meta property="og:image" content="/og-image.png" />
<meta property="og:url" content="https://your-domain.com" />
<meta property="og:title" content="Your Real Title" />
Area 12 · Git 配置
grep -in "lovable" .gitignore
ls .git/hooks/
移除任何 Lovable 特有的 .gitignore 条目或 commit hooks。
Area 13 · 未使用依赖
步骤 1 — 映射实际导入
tmpdir="$(mktemp -d "${TMPDIR:-/tmp}/lovable-cleanup.XXXXXX")" || exit 1
grep -rh "from [\"']@radix-ui/" src/ --include="*.tsx" --include="*.ts" \
| grep -oP "from [\"']\K@radix-ui/[^\"']+" | sort -u > "$tmpdir/radix-used.txt"
grep -rh "from [\"']@/components/ui/" src/ --include="*.tsx" \
| grep -oP "from [\"']\K@/components/ui/[^\"']+" | sort -u > "$tmpdir/shadcn-used.txt"
步骤 2 — 与已安装的做差异比较
grep -oP '"@radix-ui/[^"]+' package.json | tr -d '"' | sort > "$tmpdir/radix-installed.txt"
diff "$tmpdir/radix-installed.txt" "$tmpdir/radix-used.txt"
步骤 3 — 批量移除并验证
npm uninstall @radix-ui/react-accordion @radix-ui/react-alert-dialog # etc.
npm run build
Area 14 · 通用 Lovable 产物
components.json— 验证style、baseColor和aliases与真实项目匹配eslint.config.js— 通常标准；快速扫描即可
grep -in "lovable" components.json eslint.config.js
主扫描命令
grep -rn "lovable\|Lovable\|LOVABLE\|lovable-tagger\|lovable\.dev" \
--include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" \
--include="*.json" --include="*.md" --include="*.html" --include="*.toml" \
--include="*.yaml" --include="*.yml" --include="*.txt" \
. 2>/dev/null \
| grep -v "node_modules\|\.git\|dist\|build" \
| sed -E 's/([A-Za-z_][A-Za-z0-9_]*LOVABLE[A-Za-z0-9_]*=).*/\1[REDACTED]/I'
示例
示例 1：从零开始全面审计
User: I just exported my project from Lovable. Clean it up.
Agent:
1. Runs master scan — finds 23 matches across 8 files
2. Uninstalls lovable-tagger, renames package.json "name"
3. Strips vite.config.ts of componentTagger
4. Updates index.html title, removes generator comment
5. Flags 4 markdown docs for deletion, skims each first
6. Produces cleanup report
示例 2：仅修剪目标依赖
User: Just prune the unused Radix packages from my Lovable project.
Agent:
1. Runs grep diff (Area 13 only)
2. Identifies 18 unused @radix-ui packages
3. Removes them in bulk, keeps @radix-ui/react-slot
4. Runs npm run build to verify — passes clean
最佳实践
- ✅ 应该： 在修改源文件之前先移除依赖（Area 2 和 7）
- ✅ 应该： 删除前先浏览 Lovable 生成的文档 — 可能包含有价值的架构说明
- ✅ 应该： 每批修改后验证
npm run build通过 - ✅ 应该： 上线前替换 OG 图片 — 它直接影响社交分享预览
- ❌ 不要： 移除
@radix-ui/react-slot— 它是大多数 shadcn 组件的间接依赖 - ❌ 不要： 留下空环境变量如
LOVABLE_PROJECT_ID=— 删除整行
局限性
- 本技能不会创建或提供品牌资源（favicon、OG 图片）— 它只标记需要替换的内容。用户必须自行提供真实资源。
- 依赖修剪（Area 13）安全但不万无一失 — 部分 Radix 包是间接依赖，直接
grep无法捕获。始终用npm run build验证。 - 本技能不会自动修改
components.json别名 — 它只扫描并标记不匹配项，由用户手动修复。 - 不覆盖 Lovable 特有的后端集成（Supabase 行级安全、edge functions）— 那些需要单独审查。
故障排查
问题：移除 Radix 包后构建失败
症状： @radix-ui/* 包出现 Module not found 错误
解决方案： 重新添加缺失的包。打开 src/components/ui/*.tsx 搜索 from '@radix-ui/...' 导入，找到依赖它的组件。
问题：卸载后 lovable-tagger 仍在锁文件中
症状： grep "lovable-tagger" package-lock.json 仍有结果
解决方案： 删除 node_modules/ 和 package-lock.json，然后重新运行 npm install。
问题：更新 index.html 后浏览器仍显示通用标题
症状： 浏览器标签页仍显示"Lovable"或"Vite App"
解决方案： 检查 src/App.tsx 或布局包装器中是否有 <Helmet> 或 <Head> 组件 — React 层的 title 标签会在运行时覆盖 index.html。
相关技能
@vite-config— Vite 配置最佳实践@shadcn-setup— shadcn/ui 安装与定制@react-cleanup— 通用 React 项目清理
附加资源
输出格式
完成审计后，生成清理报告：
## ✅ Cleaned
<list of changes made>
## ⚠️ Needs your input
<items needing a decision — brand assets, project name, domain>
## 🗑️ Deferred (safe to do later)
<e.g. unused dep pruning, OG image swap>