像网页设计一样构建你的prompt

cursor在其博客中提到了一个有趣的观点：将提示工程 (prompting) 重新定义为 "提示设计" (prompt design)，并将其类比为网页设计。

提示就像是在与一个时间有限的人交流。虽然大语言模型 (LLM) 特定的技巧（比如链式思维）确实有帮助，但我发现，改善提示效果的最佳方法之一就是提供非常清晰且高质量的指令，就像清晰和简洁的表达能帮助人类更好地理解一样。

将提示视为清晰的交流，让人觉得提示像是写作。然而，大多数提示设计都是动态的：有多个输入变量，需要根据这些变量动态调整提示。

因此，将提示设计理解为“带有动态输入的清晰交流”似乎最为准确。

那么，还有哪个领域与动态输入的清晰交流相关呢？答案是网页设计。

提示设计和网页设计有许多相似之处。

• 需要清晰表达，且交流是主要目标；

• 需要响应动态内容，不像写作或杂志排版；

• 需要根据不同的尺寸调整内容——网页设计调整屏幕尺寸，提示设计则调整上下文窗口的大小。

• 开发者偏好相似

• 查看实际的提示非常重要。例如，提示 “Hi {message}” 看起来似乎没问题，但一旦渲染出来，你可能会发现用户名和消息混在一起了。

• 可组合组件在提示设计和网页设计中都很有用。

• 声明式 (Declarative) 编程比命令式 (Imperative) 编程更优。用 document.createElement 调用创建所有 HTML 元素的网站很难维护。同样，由一长串 str += "..." 构成的提示也很难阅读和修改。

• 像素级完美。在为较弱的大语言模型（如 GPT-3.5 及以下）设计提示时，希望确保格式没有多余的换行符或其他不完美之处；而在设计网站时，有时每个像素都很关键。

对于大语言模型智能体 (LLM Agent)，这个类比可以进一步扩展：智能体提示设计可以类比为为智能体创建一个交互式网站，它们可以通过调用函数来“点击按钮”，提示则会根据函数调用重新渲染，就像网页在按钮点击后重新渲染一样。

当然，提示设计和网页设计之间也有区别：

• 提示设计目前只涉及文本内容（目前为止！）。

• 缓存机制不同：特别是对于智能体，需要通过只更改提示的后半部分来降低重新渲染的成本。虽然这可以类比为网页缓存优化，但两者本质上是不同的挑战。

在这种提示设计的思路启发下，创建 Priompt，一个类似 React 的基于 JSX 的提示设计库。

它允许开发者使用类似于网页开发的方式来设计提示，包括:

• 使用JSX语法
• 提供预览功能
• 支持组件化和可复用性

潜在的局限性和未来展望

• 随着模型能力的提升，对 "像素级完美" 的需求可能会降低
• 上下文窗口的限制可能会消失
• API 可能会朝着提供更少控制权的方向发展
• 缓存可能成为提示工程中更重要的方面
• 提示设计可能最终被更高层次的框架或编译器取代

对行业的启示

• 提示工程可能需要更多的设计思维，而不仅仅是工程思维
• 开发更好的提示设计工具可能会成为一个重要的研究方向
• 网页设计领域的最佳实践可能会对提示工程产生影响