1. 引言:从“盲目输出”到“精准微创”
痛点场景: 大多数人自己写 Prompt 时,AI 就像一个莽撞的实习生:你让他改个按钮颜色,他顺手把整个页面的布局都重写了,甚至还引入了你项目里根本没有的 Vue.js 依赖。不仅改错,还极其浪费 Token 成本。
解决方案: Lovable 的解决之道,是将 AI 从一个“打字机”变成一位**“主治外科医生”**。它的核心策略就是四个字:极度克制。今天我们通过它的原版 Prompt,来看看这把“手术刀”是怎么打造的。
2. 概念拆解:“主治医师”的行医执照 (The "What" & "Why")
生活化类比:
普通代码生成器就像街边的快印店:你给文字,它就疯狂打印(生成大量代码覆盖原文件)。
Lovable Agent 是一位外科主治医师。
术前会诊 (Discussion Mode):绝不轻易动刀,先和你确认哪里痛。
查阅病历 (Context limitation):明确知道你用的是什么药(技术栈),不能乱开处方。
微创手术 (Search-Replace Tool):只切开需要缝合的那 1 厘米,绝不把整个肚子剖开(不重写全文件)。
3. 动手实战与源码对照 (The "How" & Deep Dive)
让我们直接对照 Lovable Agent Prompt.txt 的原文,看看它的每一条“军规”到底解决了什么开发痛点。
观点一:赋予 AI“物理空间感知”,避免自说自话
绝大多数 Prompt 只教 AI 写代码,却忘了告诉 AI 它自己“在哪”。
Lovable 源码原文: "Interface Layout: On the left hand side of the interface, there's a chat window where users chat with you... You can access the console logs of the application in order to debug and use them to help you make changes."
深度解析: 这是一种非常高级的**上下文锚定(Context Anchoring)**技巧。Lovable 明确告诉大模型:“用户在左边和你说话,右边是预览区,你还可以直接读取控制台日志”。
Why(为什么这么写):这让 AI 知道自己是一个嵌在 IDE 里的助手,而不是网页端聊天的 ChatGPT。当它需要排错时,它知道有 console logs 存在(可以调用 Tool 去获取),而不是让用户“请把报错信息复制给我”。
观点二:技术栈的“绝对独裁”,根绝幻觉
代码越写越乱,通常是因为 AI “自作多情”地引入了不兼容的库。
Lovable 源码原文: "Technology Stack: Lovable projects are built on top of React, Vite, Tailwind CSS, and TypeScript. Therefore it is not possible for Lovable to support other frameworks like Angular, Vue, Svelte, Next.js, native mobile apps, etc. Backend Limitations: Lovable also cannot run backend code directly."
深度解析: 注意原词的强烈语气:“not possible”、“cannot”。
Why:这是对模型知识库的降维封锁。大模型懂 Angular 和 Vue,但这段话直接将其“阉割”到只剩 React + Vite 体系。即使用户强烈要求写个 Vue 组件,AI 也会根据这条铁律断然拒绝,从而保证了生成的代码能在当前容器中 100% 跑通。
观点三:防御性工作流,谋定而后动 (ReAct 架构核心)
这是决定 Agent 质量的最核心指令,也就是我在上一篇提到的“刹车机制”。
Lovable Agent 源码里,顶级AI如何思考与动作原理?
摘要:1. 引言:从“盲目输出”到“精准微创” 痛点场景: 大多数人自己写 Prompt 时,AI 就像一个莽撞的实习生:你让他改个按钮颜色,他顺手把整个页面的布局都重写了,甚至还引入了你项目里根本没有的 Vue.js 依赖。不仅改错,还极其浪费
