Claude Code生成UI的3个技巧

Claude 是一款非常强大的 AI 工具，特别擅长编码。可以在 Claude 中编写完整的应用程序或服务。这就是为什么 Claude 迅速成为产品设计师工具包中的重要工具。它使我们能够快速移动和构建，不仅快速交互原型，还构建可用于实施的 UI 组件。

在本文中，我想分享 3 个实用技巧，关于如何最大限度地利用 UI 组件编码与 Claude。为了使本指南更加具体，我将使用 Claude 来编写注册 Web 表单。

1、提供视觉参考

"一张图片胜过千言万语。" 这句谚语对人类和 AI 都同样有效。当 AI 在构建某个组件时有视觉参考时，它可以从中提取有价值的见解并丰富上下文。这就是为什么在文本提示的同时提供视觉能够为 AI 创造更好的上下文。

模糊的提示

使用电子邮件和密码编写注册表单

通过使用此提示，您为 Claude 创建了一个巨大的知识差距，关于注册表单的外观和工作方式。当然，Claude 将填补这一差距并构建它认为对您的任务有效的内容，但这可能不是您确切需要的内容。

具体的提示

[粘贴表单的屏幕截图] 在 [技术栈] 中实现此设计

UI 的屏幕截图有助于为 AI 创造更好的上下文。例如，我可以粘贴以下注册表单的屏幕截图，并要求它在 HTML 和 CSS 中编码。

以下是 Claude 为我生成的内容（注意：我故意显示了来自 Claude 的第一个、未优化的输出，其中有一些明显的视觉缺陷，以便您可以理解可以从这个工具中期待什么）。

由 Claude 生成的输出。请注意，这不是静态模拟，而是以 HTML 和 CSS 编写的注册表单的预览。

甚至可以通过要求 AI 在它为您生成的结果上执行自我检查来使此提示更强大：

[粘贴表单的屏幕截图] 实现此设计。

获取结果的屏幕截图并与原始结果进行比较。

列出差异并修复它们

2、提供数据验证标准

由于注册表单将用户数据作为输入，我们需要有一种机制来验证这些数据。与我们提示的任何其他部分类似，我们不希望提供通用标准；我们希望尽可能精确。

模糊的提示

实现电子邮件地址验证

一个通用的提示解释了我们的意图（我们希望看到的内容），但错过了实现细节，这些细节解释了实现的细微差别。

具体的提示

编写 ValidateEmail 函数。

该函数应接受用户在"电子邮件"字段中提供的电子邮件地址作为输入，并返回布尔状态（如果电子邮件有效，则为 True，如果无效，则为 False）。

它应该检查标准电子邮件语法

示例：
someone@example.com 是有效的电子邮件（函数应返回 True）
someone@.com 是无效的电子邮件（函数应返回 False）

为 ValidateEmail 编写单元测试，确保代码正确工作（电子邮件语法检查）并提供测试

与函数实现一起

一个好的提示不仅解释了您的意图，还提供了实现细节，如函数名称、输入和输出，以及该函数应具有的逻辑（连同示例）。

以下是 Claude 为我的注册表单生成的输出。

这段代码完全按预期工作。

3、出错时，要求 AI 修复根本原因，而不仅是症状

错误是不可避免的。无论您多么擅长提示，总会有 AI 代码中断的时刻，您会看到错误消息。但是，您可以使用提示魔法来最大限度地减少处理此错误所花费的时间。为此，您需要避免通用提示，并明确说明 AI 应该修复什么以及为什么修复。

模糊的提示

代码无法工作

构建失败

应用程序无法按预期执行

此类提示陈述了事实，但没有要求 AI 修复问题。当然，Claude 会理解您想要的内容，但与之前的示例类似，Claude 解决问题的方式将基于其对问题空间的自己的理解。

具体的提示

具体的提示具有三个重要元素：

• 原始错误消息代码
• 修复问题的请求
• 验证解决方案的请求

代码无法工作，显示此错误：[粘贴原始错误代码

和错误输出]。

修复它并验证构建成功。

不要抑制错误，而是解决根本原因。

快速说明为什么要使用原始错误代码而不是用您自己的话描述问题：Claude 在海量错误消息数据集上进行了训练。当您提供原始错误输出时，它可以轻松匹配此错误并识别最可能的根本原因。

原文链接: 3 Practical Tips for Making Most of Claude for Coding UI Components

汇智网翻译整理，转载请标明出处