Ask HN：如何在 UI 开发中使用 LLM？
Source: Hacker News
使用 Claude 进行原型设计
我发现 Claude 在为我需要的 GUI 应用生成创意和原型时非常有帮助。不要让它生成任何图像或矢量图——它在这方面很糟糕——但你可以让它为一个具有某些功能、三列布局等的应用做原型，它已经为我生成了相当出色的 HTML/CSS。
截图对比工作流
我使用的最佳方法是让 LLM 通过 WebDriver + 浏览器截图来工作。我先准备好 UI 的基准截图（通常在 Figma 中创建），然后指示代理与这些截图进行匹配，并不断迭代，直到实现与截图保持一致。
第一次实现完成后，我会通读所有代码，制定合适的软件设计和架构，并将所有内容重构为干净的代码，同样使用截图对比来确保没有回归。
通过参考截图进行样式化
由于 LLM 几乎接近 AGI，你可以给它提供几张你喜欢的 UI 截图，并让它为你的应用复制这种风格，同时指定诸如“请按此风格为应用做样式，同时遵循国际化、辅助技术以及 Fitts 定律的最佳实践”等要求。
如果此工作流失效，通常是因为你使用的 LLM 版本过旧；旧模型的能力要弱得多。
UI 设计中的挑战
用户界面设计对 LLM 来说是一个非常棘手的任务。它们可以生成高质量的 CSS 和设计模式，但在实际布局和构图上往往表现糟糕。
对于简单、定义明确的请求——例如“在表单上添加一个状态栏，内容为 …”——输出可以完美工作。然而，对于更宽泛的提示如“用于收集客户信息的现代 UI”，结果通常不尽如人意。
“氛围” vs. “严肃” 方法
我尚未彻底破解这个难题，但对我而言效果最好的模式是：
- “氛围” – 使用原生 HTML/CSS/JS。它在生成可用的第一版时出奇地好，而且没有构建步骤，迭代速度更快。
- “严肃” – 使用 Go 进行服务器端模板渲染和处理程序，结合
go‑rod（Chrome DevTools Protocol 驱动）来测试组件并截取截图。只要有相应的技能和一些现成示例，LLM 就能生成经过充分测试的组件。单一的编译语言有助于保证正确性和可维护性。
Claude Code 与 Figma、Chrome DevTools 的结合
在 UI 实现阶段（即使不是为了 UX），我会把 Claude Code 与 Figma MCP 和 Chrome DevTools MCP 结合使用，这样模型就能截取截图并将其与预期设计进行对比，作为验收标准的一部分。
在处理基于 React 的应用时，我还会使用 Agentation 库来对 UI 进行更有针对性的微调：
https://github.com/benjitaylor/agentation
LLM 辅助 UI 开发的最佳实践
- 使用标准的 CSS 库——例如 Tailwind。
- 使用常见的 React 组件库，如 Radix UI（不要重复造轮子）。
- 避免发明新的 UI 模式。
- 使用 Storybook 将所有自定义 UI 元素隔离出来，并在每种状态下进行测试和打磨。
- 多年积累的审美经验可以帮助你判断什么是好 UI，然后让 Claude/Codex 对你不满意的细节进行迭代。
最后思考
原始问题关注的是“UI 开发”——即 UI 的实现部分，而不是前期的设计发现阶段。当前的 LLM 在工作流的这一特定环节仍然相当糟糕。