lovable实战记录

我的网站克隆原理实际工作流程1.网站内容抓取使用工具lov-fetch-website ↓ 获取内容 - Markdown 格式文本 - HTML 源代码 - 页面截图2.设计分析我分析了 Boston Dynamics 的配色方案深色背景 青蓝色强调色布局结构全屏 Hero、产品展示、案例研究视觉风格科技感、专业、现代内容策略简洁文案 大图3.原创重建重要我没有复制代码而是用 React Tailwind 从零编写组件设计了自己的设计系统HSL 色彩、语义化 token生成了 AI 机器人图片而非使用他们的素材调整了布局和交互细节关于爬虫技术我使用的工具lov-fetch-websiteLovable 平台内置工具用途快速获取网站内容用于分析限制仅用于学习和参考设计总结方面说明抓取方式Lovable 内置工具非开源爬虫设计方法分析 原创重建非直接复制代码来源100% 手写 React 组件我的角色定义提示词分析两次回答第一次问题说明你的角色定义目的和功能 我的角色定义 我是 Lovable一个专门用于创建和修改 Web 应用程序的 AI 编辑器。我通过与你对话来理解你的需求并实时对代码进行更改。 我的目的 我的核心目的是帮助你 快速构建 Web 应用无需从零开始我可以帮你生成完整的应用架构 迭代和优化根据你的反馈不断改进应用 解决问题调试错误、优化性能、改进用户体验 学习和理解解释代码逻辑、提供最佳实践建议 ⚙️ 我的核心功能1. 代码开发能力 创建、修改、删除文件 跨文件搜索和重构 管理npm依赖包 遵循 React TypeScript Tailwind CSS 最佳实践2. 技术栈 我使用的技术栈包括 前端框架React18构建工具Vite 样式方案Tailwind CSS shadcn/ui 组件库 类型安全TypeScript 路由React Router 状态管理TanStack Query3. 后端集成能力 虽然我不能直接运行后端代码但我支持通过 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 navigationwith blue CTABold hero sectionwith dramatic robot imageryLarge impactful typographyBlue accent color(#00A7E1 area)Dark navy sectionsfor contrastTrust indicators(client logos)I’ll create an original robotics website inspired by this aesthetic:Design System:Primary: Vibrant cyan-blue for CTAs and accentsDark navy backgrounds for depthClean, modern typographySmooth animationsFeatures:Hero section with generated robot imageSolutions showcaseClient trust sectionProfessional footerLet 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 systemwith vibrant cyan-blue accents and dark navy sectionsHero sectionwith generated robot image and bold typographySolutions showcasefor different industriesFeatures sectionhighlighting AI, mobility, and durabilityTrust indicatorswith company logosProfessional navigationand footerAll 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 editsAdd interactivity: Smooth scroll navigation, animations, video backgroundsExpand 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链接、版权 每个组件独立文件最大复用性技术组件:React18.3TypeScript5.x步骤5并行组件生成提示词模式:并行创建所有组件 - 使用 shadcn/ui 组件Button、Card 等 - 仅使用设计系统 token - 禁止硬编码颜色 - 响应式优先mobile-first技术组件:shadcn/uiRadix UI CVALucide 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️ 核心开源技术栈总结层级技术组件版本用途框架React18.3UI 构建构建Vite5.x快速开发环境样式Tailwind CSS3.x原子化 CSS组件shadcn/ui-预制组件库基础Radix UI1.x无障碍组件图标Lucide React0.462图标系统路由React Router6.30页面导航表单React Hook Form7.x表单管理验证Zod3.x类型安全验证 关键原则零代码复制- 从不复制原站代码完全重写设计系统优先- 所有样式通过 token 管理并行生成- 多组件同时创建效率提升 5-10x语义化 HTML- 自动 SEO 优化响应式设计- 移动端优先策略待续。