我如何从 Claude 获得更好的 UI：先研究，后构建
I’m happy to help translate the article, but I don’t have the full text of the post. Could you please paste the content you’d like translated (excluding the source line you already provided)? Once I have the text, I’ll translate it into Simplified Chinese while preserving the original formatting, markdown, and technical terms.
“构建组件” 的问题
当你直接让 Claude 构建 UI 组件时，它会从自己的训练数据中抽取内容。这意味着你会得到它所见过的各种模式——有好的、过时的，甚至是奇怪的。
我正在为我的 Angular AI UI 组件库构建一个输入指示器（即 AI 思考时显示的那些动画点）。我的第一反应就是直接让 Claude 来实现它。
结果： 功能可用，但平淡无奇——三个弹跳的点，看起来和 2019 年的所有教程示例一模一样。
Source: …
修复方案：先让 Claude 成为设计研究员
研究提示
我让 Claude Code（使用 Opus 4.5 研究模式）先对问题进行研究：
Research how typing indicators are used in modern web apps,
especially AI chats like ChatGPT, Claude, and Gemini.
Look at design patterns, animations, and how they signal
different states.给出具体的优秀应用示例会产生巨大的差异。Claude 现在有了一个“好”在此特定情境下的参考点。
研究返回了我之前想不到的洞见——比如 ChatGPT 使用的脉冲效果与 Claude 的闪光动画的区别，Gemini 在思考与回复之间的过渡方式，以及对运动敏感用户的可访问性考虑。
将研究结果反馈回去
我把整篇研究文档粘贴到一个新对话中，然后让 Claude 在此上下文下构建组件：
Based on this research, build me a typing indicator component
for Angular that follows modern AI chat patterns. Make it
polished and professional.结果： 天壤之别。不是普通的弹跳点，而是一个具备以下特性的组件：
- 细腻的动画时序，感觉自然
- 平滑的状态切换
- 设计选择真正符合 AI 聊天场景
- 我自己未曾指定的细节
它看起来像是可以投入生产的应用组件，而不是周末黑客马拉松的临时作品。
为什么这样有效
Claude 擅长遵循模式，但问题在于它遵循的是 哪种 模式。当你让它从零开始构建某物时，它会在所有已知的内容中取平均，得到中等的设计质量——安全、乏味、易被遗忘。
当你为它提供针对最佳应用如何解决此特定问题的聚焦研究时，它拥有更精准的参考点。它不再是猜测，而是应用你真正想要模仿的应用中的具体模式。
可以这样想：让 Claude “设计一个按钮” 与让它 “设计一个像 Stripe 仪表盘的按钮” 会产生完全不同的结果。研究模式会自动化地寻找这些参考。
我的工作流程
对于任何需要好看外观的 UI 组件：
- Step 1: 请 Claude（Opus 4.5，研究模式）对问题进行调研。
Research how [component] is implemented in modern apps like [2‑3 specific well‑designed examples]. Focus on design patterns, animations, and UX details. - Step 2: 审阅调研结果（有时会出现你之前未想到要询问的内容）。
- Step 3: 将完整的调研文档粘贴到一个新对话中。
- Step 4: 在此上下文下请 Claude 进行构建。
额外的五分钟调研可以节省数小时的时间，避免将通用输出反复调校成真正专业的效果。
当我使用此方法
我并不是对每个组件都这么做。像表单字段或基本布局这种简单的东西——Claude 在没有研究的情况下也能很好地处理。
但对于任何需要精致感的情况：
- 复杂的交互组件
- 动画和微交互
- “体验”很重要的组件（聊天界面、仪表盘、引导流程）
- 用户会反复看到的任何内容
这时先行研究会带来回报。
更大的意义
AI 辅助开发不仅仅是关于速度。它关乎在正确的阶段使用 AI。
大多数人把 Claude 当作代码生成器使用，但如果你这样提示它，它也可以是研究员、设计顾问和模式库——
我构建的打字指示器现在是我库中外观最好的组件之一。这并不是因为我是设计师，而是因为我让 Claude 在写下任何代码之前先进行设计研究。
在你的下一个 UI 组件上试试：先研究，再构建。