让 AI 构建的应用更容易调试的六个前端概念

用 AI 构建的应用出现错误时，针对每个症状写模糊提示词，很容易变成按下葫芦浮起瓢。我认为更有用的方法是描述整个系统：它由哪些部分构成、信息存在哪里，以及变化如何传播。

这次我在 Google Antigravity 中使用一个自定义前端导师。导师边讲解边构建交互式学习应用：我选择角色扮演游戏的任务与物品追踪器，你也可以换一个主题并继续提问。

一个页面可以理解为由称作组件的可复用积木组成，组件按父子关系形成树。在示例中，整个应用是父组件，每张任务卡和背包都是子组件。X-ray 视图会标出这些边界。

组件既可以通过 props 从父组件接收信息，也可以在本地状态中保存自己的变化信息。这个区别回答了一个实际问题：谁提供这个值，谁负责记住它？

最初的任务卡都显示相同的固定文字，进度按钮也还没有追踪任何东西。与其只要求“让卡片不同”，不如说明标题、地点和难度由父组件提供，而每张卡片各自保存进度计数。

父组件拥有任务列表，并把对应详情传给可复用卡片的每个实例。每个实例随后可以维护自己的进度：给采草药任务加一，不会改变击败龙的任务。

计算值有时称为派生状态，可以避免重复信息逐渐失去同步。在故障示例中，已采集草药数量改变了，但单独保存的剩余数量仍停留在八。

如果目标是八株、已经采集一株，剩余数量就应当是七。若已采集和剩余数量都作为独立状态更新，每次修改都必须让两者保持同步，从而增加不一致的机会。

可以要求智能体只保存基础计数，再由它计算剩余数量、完成状态和百分比。这样修改一个源值时，其他显示会像电子表格公式一样通过计算更新。

动态渲染和样式根据状态决定显示什么或如何显示。在游戏示例中，龙的生命值会改变徽章和颜色；低于 30% 时，卡片显示狂暴样式。另一个控件可以展开战术信息。

生命值降到零时可以显示胜利横幅。与其让模型把首领卡片“做酷一点”，不如说明条件和结果：生命值低于指定阈值时改变样式和徽章，降到零时显示胜利状态。

状态也可以控制操作。击败五只狼之前，领取奖励按钮应保持禁用；达到目标后，增加计数的按钮也应停止接受更多点击。这些条件让显示的操作与任务状态保持一致。

操作发生时，子组件可以通知父组件，让父组件更新共享信息。示例在领取奖励时使用这种连接，使更大范围的应用能够响应卡片中发生的事件。

局部状态属于特定组件，但有些信息会被相距较远的多个组件使用。通过很长的父子链条传递相同偏好可能难以维护；另一种选择是在应用层共享状态。

在演示中，货币、距离单位和主题是共享的：一次更改可以同时更新页眉、任务卡和背包。相反，打开某张卡片的备注只影响该卡片，可以保留为局部状态。

更精确的请求会指出哪些偏好需要共享、哪些应用部分需要使用它们，以及哪些细节应当保持私有。不必记住所有术语：把关系解释清楚，就能帮助 AI 编程智能体理解想要的设计。

六个概念分别是组件与边界、props 与局部状态、计算值、条件渲染与样式、操作与事件，以及局部状态和全局状态。用它们描述应用作为一个系统应该如何运行，而不是一次只修补一个功能。