氛围编码：对话式软件开发 — 第三部分：提示词纪律

据推测，氛围编码可能会从根本上改变我们构建软件的方式。我们不再编写代码行，而是用简单的英语描述我们的目标，然后生成可运行的软件。

在我的上一篇文章中，我尝试了一些氛围编码工具并分享了实践经验。如果你密切关注，可能会注意到一些微妙但重要的细节：我正在使用自然语言作为接口。我选择的词语塑造了AI如何解释和构建软件。而在这个过程中，隐藏着一个关键但常被忽视的层：系统提示词。

那么，提示词到底是什么？

将氛围编码视为一个聊天驱动的工程环境。你发送的每条消息，或者说提示词，不仅仅是随意的对话。它更像是为你的AI助手编写操作手册。提示词设定了基本规则。它可以定义你偏好的技术栈、编码风格、命名约定，或者AI是否应该在做出假设之前请求澄清。换句话说，它是你用来对齐AI与你的意图的接口。

为什么提示词很重要？

根据我的经验，如果提示词不清晰或不一致，事情很快就会偏离轨道。以下是我在提示词模糊时遇到的一些问题：

AI选择了错误的编程语言。
它引入了陌生且有时不必要的库。
它忽略了先前的上下文并给出了矛盾的结果。

即使使用像ChatGPT、Claude或Cursor这样的先进工具，指令的模糊性也可能导致不可预测的行为。这不是模型质量的问题，而是我们给出的指令的清晰度问题。

配置系统提示词

使用大多数现代AI平台的一个好处是，它们允许用户定义系统级提示词。你可以全局（在整个工作区）或本地（针对每个项目）定义提示词。这有助于保持一致性，避免重复上下文。

我现在养成了在每个编码会话开始时明确设置系统提示词的习惯。这就像配置你的开发环境，但以对话形式进行。

设计有效的提示词

我仍在不断学习，但我想分享一个对我很有效的示例提示词。其想法是从一开始就设定明确的约束。这减少了AI误解的空间，并降低了会话期间的摩擦。以下是我经常使用的示例系统提示词：

1
2
3
4
5


1. 将自己视为前端开发者。
2. 所有UI组件应使用React和Tailwind CSS。
3. 仅使用JavaScript，避免任何外部库（除非指定）。
4. 如果任何需求不明确，请请求澄清。
5. 专注于编写干净和模块化的代码。

这个提示词做了几件重要的事情：

它定义了助手的角色（前端开发者）。
它设定了技术边界——没有Python、TypeScript或意外的库。
它鼓励AI在模糊时提问。

你可以根据项目需求轻松扩展这个提示词。例如：

所有UI组件必须具有可访问性。
确保移动端响应式设计。
后端基于Java API构建。

这种初始对齐通过减少时间消耗和限制AI交互来简化开发。你可以引导AI根据你的开发方法和技术选择进行聚焦。

另一个观察是，AI助手在使用常用框架和工具（如React、Tailwind和Node）时表现出更高的效率。这些模型已经看到了更多这些技术的示例，这意味着你会得到更可靠和相关的响应。

新开发者：不要过度思考

如果你一直关注，到目前为止的讨论可能会让你觉得在开始氛围编码之前需要掌握十几个概念。但这不是真的。如果你刚刚开始，我的建议是设定一些清晰的边界并开始行动。让我们以创建一个交互式仪表板为例。以下是一个有效的提示词示例：

1

我是一名新开发者。我想构建一个交互式数据仪表板。你能建议一个易于维护且得到良好支持的技术栈吗？

大多数AI助手（如ChatGPT、Claude和Gemini）会帮助你完成后续步骤。助手会提出澄清你需求的问题，这允许它们开发你的技术栈和系统提示词。

帮助你设计更好提示词的工具

随着我继续实验，我意识到正确的提示词有多重要。好消息是？你不必猜测。像Anthropic Claude Console、Google Gemini和ChatGPT这样的工具可以帮助你实时测试、迭代和优化提示词。以下是我使用Google Gemini优化提示词的一个示例。

我的提示词优化过程

我从这个基础提示词开始，探索伦敦空气质量数据：

1
2
3


1. 我想构建一个交互式仪表板，用于探索位于伦敦空气质量数据（Excel）的数据。
2. 请向我提问以更好地理解需求。
3. 然后帮助我编写一个系统提示词，指导你使用React、Tailwind和D3进行可视化。

注意：如果伦敦空气质量数据在上述链接不可用，我在撰写本文时已提交了一份CSV副本。

Gemini提出了一些聪明的后续问题，关于：

我设想的可视化类型
我期望的交互性类型
布局偏好
我计划如何处理数据源

为了缩小范围，我将焦点引导到仅一个工作表：

1

仅评估“月度平均值”工作表。假设其他一切。

基于此，Gemini帮助我生成了一个优化的系统提示词，我可以用来生成我的仪表板。以下是输出提示词：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


### 系统提示词：
你是一个专业的Web开发助手，负责构建一个交互式数据探索仪表板。你的目标是生成一个详细计划，包括组件结构和初始代码片段，用于一个可视化空气质量月度平均值的React应用。

__项目目标__
创建一个交互式仪表板，用于探索伦敦的月度平均空气质量数据，数据源来自特定的Excel文件。

### 核心技术：
- 前端框架：React
- 样式框架：Tailwind CSS
- 可视化库：D3.js

### 数据源：
- __URL__：https://data.london.gov.uk/download/290a22f1-5eef-4801-8286-3f288b49093a/acce7f88-70f0-4fd0-9160-f02a9d96b2c3/air-quality-london.xlsx
- 要使用的特定工作表：“月度平均值”

### 数据解释与准备：
1. 从提供的URL下载并解析Excel文件。
2. 仅关注“月度平均值”工作表中的数据。
3. 识别用于可视化的关键列：
   - 日期（或表示月份/年份聚合的等效列）
   - 站点名称（或位置/监测站的等效列）
   - 污染物（或污染物类型的等效列，例如NO2、PM2.5）
   - 值（或月度平均浓度的等效列）
4. 数据清理和转换应包括：
   - 将日期字符串/数字转换为有效的Date对象。
   - 优雅地处理潜在的缺失或无效数据点（例如，从计算中排除它们，或在可视化上下文中使用插值，但主要专注于显示可用数据）。

### 仪表板功能与交互性：
1. 数据加载：在组件挂载时高效加载和解析“月度平均值”数据。使用适当的库（如xlsx（SheetJS））进行Excel解析。
2. 过滤器/控件：
   - 污染物类型过滤器：允许用户选择一种或多种污染物类型（例如，多选下拉菜单或复选框）。
   - 监测站过滤器：允许用户选择一个或多个特定监测站/站点。
   - 年份过滤器：提供按年份过滤数据的方式（例如，可用年份的下拉菜单或范围滑块，如果选择多个年份）。
3. 可视化（D3.js）：
   - 时间序列线图：主要可视化应该是一个线图，显示选定污染物和站点的月度平均趋势随时间的变化。
     - 每条线应代表污染物和站点的组合（或允许选择单一污染物以比较多个站点，反之亦然）。
     - 轴应清晰标注（例如，X轴为“日期”，Y轴为“浓度”）。
   - 交互式工具提示：悬停时显示特定数据点的详细信息（例如，日期、污染物、站点、确切的月度平均值）。
4. 用户界面（React和Tailwind CSS）：
   - 干净、响应式且直观的仪表板布局。
   - 过滤器控件应易于访问（例如，在侧边栏或标题中）。
   - 主可视化区域应突出。
   - 使用Tailwind CSS进行所有样式设计，确保现代和干净的美感。

### 输出要求：
1. 高级React组件结构（例如，App.js、Dashboard.js、Chart.js、FilterControls.js）。
2. 数据获取和Excel工作表初始解析的伪代码或概念性大纲。
3. D3线图组件如何接收数据和渲染的示例，专注于与React的集成和一般D3模式。
4. 管理应用状态的考虑（例如，选定的过滤器、加载的数据）。

最终想法

系统提示词需要持续优化，因为它们需要匹配项目的不断变化的需求，就像我们重写代码以增强其清晰度和可维护性一样。你的提示词应随着项目的发展而演变，以反映：

新工具或技术栈变化
更新的编码模式或风格指南
架构或设计决策的转变

一个好的提示词不仅仅是给助手的基本指令。你可以将其视为你和AI助手之间的设计合同。在我的下一篇也是最后一篇文章中，我将继续讨论如何进一步微调提示词。

我现在的建议是不要过于担心第一次就完美。从简单开始，迭代，并将你的提示词视为工程过程的一部分，在这里你的意图与实现相遇。

氛围编码：第三部分，提示词纪律

本文探讨了在AI驱动的氛围编码中如何设计有效的系统提示词，以提升开发效率和代码质量，包括提示词的重要性、设计方法和优化工具。