用 AI 做前端:截图作为反馈

问题:AI 看不见你的界面

编写代码的智能体不会自动"看到"浏览器中的结果。它不知道一个按钮是否对齐正确,或者文字是否溢出——除非你给它看。这正是"把仪表盘做得好看一点"(模糊)和一张截图加具体指示之间的区别。

截图作为反馈

你可以直接插入截图:拖放、复制粘贴,或者以文件路径的方式。给智能体一张想要的设计效果图,然后让它对结果截图并进行比较。这样就形成了一个智能体自己就能闭环的循环,而不需要你手动检查每一个中间步骤。

组件迭代

以小步骤进行:构建一个组件、截图、指出与目标的差异、修正。这比一次性"把整个页面做出来"效果更好,因为问题能更早暴露出来。

使用设计系统

如果你的项目有设计系统(固定的颜色、间距、组件),明确告诉智能体,或者给它展示现有组件作为模板。这样能避免它自创一套不一致的方案。

用视觉方式验证

最终重要的不是代码本身,而是看得见的结果。始终要求看到实际结果的截图,而不只是一句"完成了"的描述。