2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家
这个周末，我决定给我的网站来一次升级，仅用几个小时就借助 Lovable 重塑了视觉形象。
美观、结构清晰，首页视频由人工智能生成——而且完全不用手写 CSS。
但在达到这一效果之前，我必须解决一个大多数人在“氛围式编码”中忽略的问题：
没有结构，你写得很快，但之后却要花双倍时间重构。
以下是我从 2025 年 8 月起使用 Lovable 的经验总结，以及我创建的模板，确保今后再也不用从零开始。
没有框架的“氛围式编码”陷阱
Lovable 非常强大。你描述想要什么，它就能生成。几分钟内，你就能得到一个可运行的视觉界面。
但问题出现在第五次提示时——如果你仍未定义配色、字体、文件夹架构和代码规范，Lovable 就会替你做决定，而且每次提示所做的决定可能还不一致。
结果就是：硬编码的颜色散落各处、重复的组件、无人能维护的结构。
解决方案不是少用人工智能，而是提供更充分的上下文。
生成前先定义——三个必答问题
- 产品 —— 做什么？为谁做？核心问题、目标用户、北极星指标。
- 设计系统 —— 长什么样？HSL 色彩标记、排版规范、可复用组件。在创建任何页面前，先把这一切定下来。
- 系统设计 —— 底层如何运作？技术栈、架构、数据库、部署方式。
这三者截然不同，混淆它们是最常见的错误之一。
设计系统 ≠ 系统设计
设计系统是视觉语言：色彩标记、排版规范、可复用组件，关乎“看起来怎么样”。
系统设计是技术架构：数据库如何与前端连接、模块之间如何通信，关乎“实际如何运作”。
在我的网站中：
→ 设计系统：HSL 色彩标记、Plus Jakarta Sans 与 Inter 字体组合、通过 CVA 实现的按钮与徽章变体、毛玻璃效果与渐变文字。
→ 系统设计：React 18 + Vite + Supabase、基于功能的架构、事件总线、端口与适配器模式。
为什么我没有使用微服务？？？
Lovable + Supabase 构成了一个模块化单体应用，这才是正确的选择。
微服务解决的是多团队独立部署下的运维扩展性问题。对于早期阶段的 SaaS 产品或个人网站，微服务只会徒增复杂度而毫无收益：服务发现、网络延迟、编排基础设施等问题接踵而至。
真正重要的是在同一进程中实现良好隔离的模块。这正是基于功能的架构配合事件总线所能提供的——在不增加运维复杂度的前提下，实现职责分离的好处。
我遵循的规则是：各功能模块绝不直接相互引用。所有通信通过类型化的事件总线进行；外部集成则通过端口与适配器模式实现。
React 中的 SOLID 原则——实践版
→ 单一职责原则（S）：一个组件只做一件事。SectionHeader 组件仅负责渲染标题。
→ 开闭原则（O）：通过 CVA 变体进行扩展。需要新按钮样式？只需添加一个变体，无需修改 button.tsx 文件。
→ 里氏替换原则（L）：端口与适配器模式确保可替换性。若要将 Supabase 存储换成 Cloudinary，只需更换一个适配器即可。
→ 接口隔离原则（I）：使用细粒度的自定义 Hook——如 useAuth、useOrganization、useFeatureGate。绝不使用一个包揽一切的 useApp()。
→ 依赖倒置原则（D）：功能模块依赖于抽象接口，而非直接依赖 Supabase。
首页视频？也是 AI 生成的
首页背景视频由 PixVerse（app.pixverse.ai）生成，采用文本生成视频技术，风格为未来感/科技风，导出为 .mp4 格式，并通过 “video autoPlay muted loop” 播放，同时叠加遮罩层以确保文字可读性。
无需图库、无需设计师、无需 Adobe Premiere，也能实现电影级视觉效果。
最终成果
