lovable实战记录

原创已于 2025-10-23 11:17:03 修改 · 939 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

于 2025-10-23 09:54:08 首次发布

大模型专栏收录该内容

67 篇文章

订阅专栏

我的网站"克隆"原理

实际工作流程

1. 网站内容抓取

使用工具：lov-fetch-website
↓
获取内容：
- Markdown 格式文本
- HTML 源代码
- 页面截图

2. 设计分析

我分析了 Boston Dynamics 的：

配色方案：深色背景 + 青蓝色强调色
布局结构：全屏 Hero、产品展示、案例研究
视觉风格：科技感、专业、现代
内容策略：简洁文案 + 大图

3. 原创重建

重要：我没有复制代码，而是：

用 React + Tailwind 从零编写组件
设计了自己的设计系统（HSL 色彩、语义化 token）
生成了 AI 机器人图片（而非使用他们的素材）
调整了布局和交互细节

关于爬虫技术

我使用的工具

lov-fetch-website：Lovable 平台内置工具
用途：快速获取网站内容用于分析
限制：仅用于学习和参考设计

总结

方面	说明
抓取方式	Lovable 内置工具（非开源爬虫）
设计方法	分析 + 原创重建（非直接复制）
代码来源	100% 手写 React 组件

我的角色定义（提示词分析）

两次回答

第一次

问题：说明你的角色定义，目的，和功能

🤖 我的角色定义
我是 Lovable，一个专门用于创建和修改 Web 应用程序的 AI 编辑器。我通过与你对话来理解你的需求，并实时对代码进行更改。
🎯 我的目的
我的核心目的是帮助你：
快速构建 Web 应用：无需从零开始，我可以帮你生成完整的应用架构
迭代和优化：根据你的反馈不断改进应用
解决问题：调试错误、优化性能、改进用户体验
学习和理解：解释代码逻辑、提供最佳实践建议
⚙️ 我的核心功能
1. 代码开发能力
创建、修改、删除文件
跨文件搜索和重构
管理 npm 依赖包
遵循 React + TypeScript + Tailwind CSS 最佳实践
2. 技术栈
我使用的技术栈包括：
前端框架：React 18
构建工具：Vite
样式方案：Tailwind CSS + shadcn/ui 组件库
类型安全：TypeScript
路由：React Router
状态管理：TanStack Query
3. 后端集成能力
虽然我不能直接运行后端代码，但我支持通过 Lovable Cloud 集成：
数据库（基于 Supabase）
用户认证（邮箱、手机、Google 登录）
文件存储
Edge Functions（无服务器函数）
环境变量和密钥管理
4. AI 增强功能
通过 Lovable AI，我可以帮你集成：
AI 聊天机器人
文本摘要和翻译
情感分析
图像和文档分析
5. 调试和分析工具
查看控制台日志
网络请求监控
截图验证
安全扫描
6. 搜索和学习能力
网络搜索获取最新信息
技术文档搜索（代码示例、API 文档）
解析文档（PDF、Word 等）
7. 项目管理
部署应用
连接自定义域名
版本回滚
第三方集成（Stripe、Shopify）
🔄 当前工作模式
我现在处于「聊天和规划模式」，这意味着：
✅ 我可以与你深入讨论需求
✅ 我可以查看和分析代码
✅ 我可以制定详细的实施计划
✅ 我可以使用各种工具获取信息
❌ 我暂时不能直接修改代码
当你确认了我提出的计划后，我会切换到「执行模式」来实施具体的代码更改。

第二次

问题：说明你的角色定义，目的，和功能，内置的提示词工程

回答：

我的角色定义

核心身份

我是 Lovable AI 编辑器，一个专注于 Web 应用开发的智能助手。

主要目的

通过对话式交互帮助用户创建和修改 Web 应用
在实时预览环境中即时展示代码变化
让非技术用户也能构建专业级应用

技术栈与功能

前端能力

框架：React + Vite + TypeScript
样式：Tailwind CSS + shadcn/ui 组件库
路由：React Router
状态管理：TanStack Query

后端能力（Lovable Cloud）

数据库：PostgreSQL（自动生成 schema）
认证：邮箱/手机/Google 登录
存储：文件上传和管理
Edge Functions：无服务器后端逻辑

调试工具

控制台日志分析
网络请求监控
实时截图验证
代码搜索和审查

内置提示词工程（核心原则）

1. 效率优先

- 并行执行多个独立操作（绝不串行）
- 优先使用搜索替换而非重写整个文件
- 批量读取相关文件

2. 上下文感知

- 先检查 useful-context，避免重复读取
- 理解现有代码结构后再修改
- 保持架构一致性

3. 讨论优先模式

- 默认先讨论方案，而非直接编码
- 除非用户明确要求"实现"、"创建"、"添加"
- 不确定时主动询问

4. 设计系统严格性

- 强制使用 index.css 和 tailwind.config.ts 的语义化 token
- 禁止硬编码颜色（如 text-white, bg-black）
- 所有颜色必须是 HSL 格式
- 通过变体（variants）而非内联样式实现效果

5. 最小化变更原则

- 只改用户要求的内容
- 不添加"可能有用"的功能
- 避免过度工程化
- 保持代码简洁

6. SEO 自动化

- 自动添加 meta 标签和结构化数据
- 语义化 HTML5 标签
- 图片 alt 属性优化
- 响应式设计默认启用

7. 调试工作流

1. 先用调试工具（logs/network）诊断
2. 分析问题根源
3. 做出针对性修改
4. 测试验证修复效果

8. 响应格式

- 超简洁回复（完成任务后 1-2 句话）
- 最少使用 emoji
- 支持 Mermaid 图表解释复杂概念
- 教育用户使用 Visual Edits 做简单修改

简而言之：我是你的全栈开发伙伴，既能深度讨论技术方案，也能高效编写生产级代码，始终遵循最佳实践和设计原则。

实战记录

指令：https://bostondynamics.com/ 复制这个网站

响应

I’ll create a stunning robotics company website inspired by Boston Dynamics’ design aesthetic. Let me first check out their site to understand the design language, then build something original and beautiful.

Perfect! I can see Boston Dynamics has a sleek, professional tech design with:

Clean navigation with blue CTA
Bold hero section with dramatic robot imagery
Large impactful typography
Blue accent color (#00A7E1 area)
Dark navy sections for contrast
Trust indicators (client logos)

I’ll create an original robotics website inspired by this aesthetic:

Design System:

Primary: Vibrant cyan-blue for CTAs and accents
Dark navy backgrounds for depth
Clean, modern typography
Smooth animations

Features:

Hero section with generated robot image
Solutions showcase
Client trust section
Professional footer

Let me build this with a stunning design system first, then components.
在这里插入图片描述

Done! I’ve created a stunning robotics website inspired by Boston Dynamics’ professional aesthetic.

What I built:

Modern design system with vibrant cyan-blue accents and dark navy sections
Hero section with generated robot image and bold typography
Solutions showcase for different industries
Features section highlighting AI, mobility, and durability
Trust indicators with company logos
Professional navigation and footer

All styling uses semantic design tokens from the system - no hardcoded colors!

What’s next?

Refine & Customize: Adjust colors, content, images, or sections through prompts or visual edits
Add interactivity: Smooth scroll navigation, animations, video backgrounds
Expand content: Add product pages, case studies, or a contact form

总结：

整体效果还是不错的，一次性生成，效率很高，
目前看主要是生成的前端代码，
生成的代码支持同步到github，进一步本地开发；

在这里插入图片描述

（重点）详细技术栈实现原理分析

🔄 完整克隆流程（7个步骤）

步骤1：内容抓取

工具: lov-fetch-website
提示词模式: “获取 [URL] 的 markdown、HTML 和截图”
技术组件:

Puppeteer/Playwright（无头浏览器）
HTML-to-Markdown 转换器
DOM 解析器

步骤2：设计分析

提示词模式:

分析以下网站内容：
- 配色方案（主色、辅助色、背景色）
- 布局结构（header、hero、sections、footer）
- 字体层级（标题、正文、按钮）
- 交互元素（按钮样式、卡片效果）
- 响应式断点

技术组件: AI 视觉理解能力（GPT-4 Vision）

步骤3：设计系统生成

提示词模式:

创建设计系统：
- index.css: 定义所有 HSL 色值、渐变、阴影、动画
- tailwind.config.ts: 配置主题扩展、字体、断点
- 必须使用语义化 token（--primary, --secondary 等）

技术组件:

Tailwind CSS (3.x)
CSS 自定义属性（CSS Variables）

步骤4：组件架构规划

提示词模式:

规划组件树：
- Header（导航、Logo、CTA）
- Hero（标题、描述、背景图）
- Features（功能卡片网格）
- Footer（链接、版权）
每个组件独立文件，最大复用性

技术组件:

React 18.3
TypeScript 5.x

步骤5：并行组件生成

提示词模式:

并行创建所有组件：
- 使用 shadcn/ui 组件（Button、Card 等）
- 仅使用设计系统 token
- 禁止硬编码颜色
- 响应式优先（mobile-first）

技术组件:

shadcn/ui（Radix UI + CVA）
Lucide React（图标库）
class-variance-authority（变体管理）

步骤6：资源生成

工具: imagegen--generate_image
提示词模式:

生成图片 [尺寸]x[高度]：
- Hero 背景："{主题} hero image, {风格}, ultra high resolution, {宽高比}"
- Logo/图标："{品牌} logo, minimalist, professional"
- 使用 flux.schnell（小图）或 flux.dev（大图）

技术组件:

Flux AI（图像生成模型）
ES6 模块导入系统

步骤7：测试验证

工具: project_debug--sandbox-screenshot
提示词模式: “截图验证 / 路径，对比原站效果”
技术组件: Puppeteer 截图 API

🛠️ 核心开源技术栈总结

层级	技术组件	版本	用途
框架	React	18.3	UI 构建
构建	Vite	5.x	快速开发环境
样式	Tailwind CSS	3.x	原子化 CSS
组件	shadcn/ui	-	预制组件库
基础	Radix UI	1.x	无障碍组件
图标	Lucide React	0.462	图标系统
路由	React Router	6.30	页面导航
表单	React Hook Form	7.x	表单管理
验证	Zod	3.x	类型安全验证