Claude Design刚刚发布几天，已经有大量的通用操作指南和教程。本周我在一个真实的UX/UI项目中使用了它，看看它在我们所做的这类产品工作中具体能实现什么（它擅长什么，以及在哪些方面存在问题）。以下是我测试的内容：

• 从零开始生成设计系统

• 使用现有设计系统

• 创建线框流程

• 用户体验逻辑与规划

• 制作高保真应用原型（含动画）

• 移交给Claude Code进行实现

在本指南中，我将向你详细展示如何也能做到这些事情，以及它是如何融入我的产品设计工作流程的。

非常简要的概述

Claude Design 目前处于研究预览测试阶段。你需要一个付费套餐，即使是最基础的 Pro 套餐也可以。但请注意，目前的使用与您的 Claude 账户是独立的，并且有自己的使用限制，每天有一定的上限，达到上限后会重置。

Claude Design 的一切基础都是设计系统。这也是它对 UX 和 UI 设计师如此强大的原因。如果你还没有设计系统，可以让它为你生成一个——你只需要提供品牌或风格指南，甚至只需一些快照或视觉灵感，Claude 就能为你建立设计系统。

如果你已经有现有的设计系统，那就更好了，你可以上传你的素材，立即开始使用。

建立我的设计系统

我从我的设计系统开始。如果你已经有一个包含组件的 GitHub 仓库，可以将其关联。如果你本地电脑上有设计系统，也可以直接上传包含大量资源的文件夹。我非常喜欢的一点是，它与 Figma 配合得很好——如果你在 Figma 里有样式指南、组件或品牌指南，可以导出 FIG 文件并上传。你也可以选择为你的项目使用现有的开源设计系统。

我上传了一些资产和一个我为正在进行的项目准备的设计系统。我还想引用其他一些与代码相关的文件，所以也一并包含进去了。

💡 一些小建议：如果你想节省一些积分，并且还没有设计系统资产，可以先用像 Google Stitch 这样的工具生成，因为这类操作确实会消耗大量的 tokens。另一个建议是，对于一些简单的任务和微调，可以切换模型，这样就不会完全耗尽你的使用额度。

我继续进行了生成。系统提示大约需要 5 分钟，然后开始搭建设计系统。它会生成一个很好的进度列表，你可以看到它正在做什么、已经上传了什么，以及读取了哪些文件。接着，它会用 CSS tokens 构建这些基础文件。

审查设计系统草案

这就是事情变得有趣的地方。它为你生成了一个设计系统草稿，你可以审查所有的组件。我的草稿还缺少字体——因为我没有上传所有字体，所以它渲染了一些替代的网页字体。

它提取了我的配色方案，我在过程中逐一确认了这些颜色。其中有一个需要改进——它显然不够无障碍。因此我告诉它这个需要改进，让它确保这些颜色是无障碍的，然后提交了。接着它会显示前景色和表面色，以确保一切都没问题。对我来说看起来不错。

字体看起来很好。间距，各方面——都很不错。它形成了一个排版比例。非常好。文字标志。漂亮的间距比例。我很喜欢。按钮看起来也很好。现在我有两种通过无障碍标准的颜色。

我非常喜欢这个动作。我为动画描述了我想要的动作感觉——而且Claude的设计在动画方面实际上非常令人印象深刻。

现在我可以继续使用这个设计系统进行设计，并将其应用到我的项目中。当你返回到主屏幕时，你也可以看到你的设计系统和其他项目。

开始新项目：线框图

现在是时候创建我的第一个项目了，我想从线框图开始。我正在开发一个新闻和日记应用，帮助你通过引导你写下自己的想法，来对你所策划的话题形成观点并表达立场。接下来，我会粘贴提示内容。从引导流程开始。

这是我非常喜欢的部分——对于我做的每一个设计，Claude Design 实际上会引导我，确保它理解我想要创建的用户体验，并会问我一些更重要的问题。

我对它提出的问题的一些回答包括：

• 这是一个融合了私人日记和精选信息流的应用。

• 我希望有简短的引导流程，并且我一定想知道用户感兴趣的话题。

• 我希望这些线框图有三种不同的风格方向——类似编辑杂志的感觉，也可以是画廊风格，或者笔记本风格。

• 我希望用户能够对话题表达某种立场。

这点很重要，它特别询问了付费墙和商业模式的用户体验，我认为这是Claude Design最显著和重要的区别之一。我曾经做过一个视频，专门讲解如何通过付费墙、订阅和升级界面来设计有意图且有效的转化点，而这正是我喜欢在UI中看到的那种逻辑。

你还可以像在Figma中使用变体控件一样，决定你想在UI中能够控制和切换的具体“调整”项。

这正是我认为Claude Design目前能够在Google Stitch，甚至Replit以及其他一些像Lovable这样的设计生成工具之上脱颖而出的原因——它更多地考虑了用户体验，而不是先生成再事后调整。

如果你有其他限制条件——比如我想用的某些API，或者你希望开发者考虑的特定条件或逻辑流程——你也可以在这里输入。

审查线框图

好的，这是它想出来的方案。我们有三种不同的风格和方式来开始新手引导：编辑流程、画廊风格和笔记本风格。这些都非常棒，我有点喜欢第一个，因为它有点像是现代风格和更手写笔记本风格的结合。它会提示你，帮助你围绕一个主题进行写作，并让你更深入地思考。

我打开了调整选项。我想把编辑版本单独拿出来，放大看看有没有什么需要修改的地方。但这是一个很棒且简单的入门流程。

你还可以在顶部做一些其他事情。你可以对某些内容进行评论，比如：“这个进度指示器够清晰吗？”并将其发送给Claude。通过这样提问，会把问题发送给Claude，这有助于产生一些变化，如果你想进行调整的话。你还可以直接在这里编辑一些基本内容——间距、不透明度、边距，或者你可以在设计上绘图并要求它做出一些更改。

追求高保真

假设你想要将这个设计系统应用到线框图上，并创建一个高保真的移动端流程。

你可以点击进入你的设计系统，看到它已经发布并设置为默认。然后，点击按钮，使用这个设计系统创建一个新的设计。

它会在Claude Design中打开另一个窗口，并且设计系统会自动附加。这一次，你可以点击高保真并为项目命名，然后点击创建。

如果你愿意，可以从草图开始，但因为我已经有那些线框图了，所以我把它们附上了。我参考了另一个项目——那些线框图——然后只是说：请为这个新闻+艺术评论杂志创建最终的高保真移动应用。

接下来，它会深入你创建的设计系统，使用那些样式，并再次提出一些问题，你需要在流程继续之前回答。我选择了一些听起来很适合我设想的用户体验的选项。我很喜欢这一点，因为你不需要从零开始思考一切——它会引导你，这真的有助于激发创意。

最终呈现出来的是一个外观精美的移动应用。我真的觉得它非常精致。这里有第一期内容，有点像你自己策划的新闻摘要。然后是日志，你可以添加条目，还有不同内容的索引和一个归档库。这真的很酷。接下来我可能要做的流程是输入日志条目，以及在引导过程中提到的更多内容。

但就是这样——一个完整的应用原型。

更进一步：交给Claude Code处理

你们中的一些人可能会想——这和 Claude Code 有什么不同吗？

其实，真的没什么不同。这实际上只是 Claude Code 之上的一个可视化层。如果你已经把 Claude 连接到 Figma MCP，比如说，你其实可以在 Figma 里做类似的事情——但你还是得回到 Claude Code 里，让它和你的设计系统进行双向通信。所以，这只是把所有这些都包含在 Claude 里，省略了 Figma 这一步。

现在，如果你真的想把它变成现实，你可以导出它并交给Claude Code。有几种不同的导出方式。点击Claude Code并复制它给你的命令，我还建议你下载zip文件作为备份。

🔖需要注意的是：Claude Design 目前无法在桌面应用程序上使用，所以你必须在浏览器中使用它。但如果你正在使用 Claude Code 的桌面应用程序，你可以切换到那里。我现在就是这么做的。

在 Claude Code 中，打开你的项目，把刚刚从 Claude Design 复制的提示粘贴进去，并上传 zip 文件，以防出现任何问题。一旦你点击上传，它就会完全在 Claude Code 内实现。

这就是了——已经完全在Claude Code中实现。

为什么这个工作流程非常适合UX/UI设计师

这太棒了——从一堆想法开始，到完善用户体验，再到为我创建线框图，最后到高保真设计，然后交给Claude Code。这对UX和UI设计师来说是一个非常棒的工作流程。

我会继续尝试这个流程，因为我还想把Cowork集成进来，实现像调研和产品设计流程中其他环节的自动化。我也迫不及待想在我的产品设计课程中和学生们进行下一次直播。如果你对此感兴趣，欢迎来看看。

我很期待看到它在我的工作流程中如何持续发展。所以如果你想跟进，记得关注我并留言，也请分享这条帖子，让更多UX和UI设计师也能受益！

感谢阅读。

最初发表于 https://designerup.co，日期为2026年4月22日。