Claude Design 产品设计师 Nate Parrott 分享如何用其探索视觉创意

Anthropic 的产品设计师 Nate Parrott 分享了他如何使用 Claude Design（测试版）从产品原型到幻灯片和动画，在早期探索、迭代和分享视觉创意。

2025 年秋，我是 Claude Code for VS Code：https://code.claude.com/docs/en/vs-code 上唯一的产品设计师，与两名工程师合作，为终端以外的友好界面重新构想 Claude Code 的所有功能。我们于九月底发布了测试版：https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously，11 月 Opus 4.5 发布：https://www.anthropic.com/news/claude-opus-4-5，Claude Code 团队开始快速且积极地发布。工程师们发布的速度远超以往，而我仍然以原来的节奏交付。我需要找到赶上的方法。

Claude Code 在终端中运行，一切都是基于文本的，我的第一次尝试也是这样处理的：我将输出复制到 Claude，添加了截图，然后问：“这是我们想要添加的功能，你能设计一下吗？”结果不理想。有大约一个月的时间，作为一个副项目，我一直在寻找改进 Claude 设计输出的方法。

最终我发现了答案：Claude 在处理 HTML 时非常出色。我们通常把 HTML 看作网站的格式，但它也是一种丰富的、互动的视觉媒介：你能在幻灯片、视频文件或 PDF 中制作的内容，也可以在网页中制作。因此，我提示 Claude 制作 HTML，并提供了一个分屏界面，左侧可以聊天，右侧看到输出。

这很有用，但产品设计依赖于对你所设计的产品和品牌的知识应用，因此下一步，我花了一段时间将 Anthropic 品牌的精髓（我们的产品使用的字体、颜色、素材和原则）提炼成提示。这样，当我在工具中输入提示时，输出就会符合 Anthropic 品牌指南。

我把所有这些都放到一个小型内部原型里，并与团队分享。产品设计师们立刻用它制作交互原型。在传统设计工具中制作点击式原型意味着要为每个屏幕的每个状态进行模拟，并手动将它们链接在一起。而在这里，你只需要把你的素材交给Claude并说：让它工作。它输出的每个成果都有一个链接，你可以像分享文档一样分享它。

我第一次意识到Claude Design有多吸引人是在Anthropic Labs团队的一个创意展示会上：https://www.anthropic.com/news/introducing-anthropic-labs，每个人都用它在会议进行中快速制作幻灯片，甚至是在上台前的瞬间。那次会议说服了实验室团队投入人力，Claude Design从一个边缘项目变成了真正的项目。

我们不再把它描述为产品原型制作工具。Claude Design成为一个用于制作任何类型视觉传达的工具：幻灯片、落地页、可打印为PDF的一页文档、电子邮件、动画、用于社交媒体分享的视觉内容。我认为它比产品设计高了一步：你可以与Claude协作制作主要用于沟通和创意的视觉内容。

随着模型在视觉方面的能力提升，Claude Design能够完成的工作的范围和质量也随之提高。我们最新的Opus级模型Claude Opus 5：https://www.anthropic.com/news/claude-opus-5，在读取图表、示意图和截图方面比之前的Opus模型更强大，当与Claude Design配合使用来制作适合演示的幻灯片和备忘录时，效果尤其出色。

Claude Design没有图像模型，也不是为图像生成而建，因此它不适合做Logo设计——尽管这并没有阻止人们尝试。这里更好的方法是使用你已有的Logo和素材。其余产品使用方式相同：Claude提供选项和起点，让你不用盯着空白画布，也可以选择单独满意的内容或多种版本的组合。

如果你正在发布生产软件，请坚持使用 Claude Code。Claude Code 用于编码；Claude Design 用于设计工作的其他部分：早期创意、协作或在任何人开始构建之前获取对方向的认可。这两者可以双向协作，因此你可以将你在 Claude Code 中启动的原型同步到 Claude Design 进行画布上的迭代和编辑，或者将你准备构建的原型从 Claude Design 交给 Claude Code。随着模型在构建生产软件方面变得更好，最重要的工作会提前发生：拥有好想法，让所有人达成一致，并在想法仍处于早期阶段时收集反馈。

我每天都使用 Claude Design 来做你所说的基本设计工作：为早期想法制作线框，或者生成 15 个流程版本以收集同事的反馈。以下是我自己工作中的一些最近例子：

每位设计师在某个时刻都应该观看一场 Bret Victor 的演讲，名为《停止画死鱼》：https://vimeo.com/64895205。简介中写道：“我们所画的一切默认都应该是有生命的。”

我鼓励设计师，无论是在 Claude Design 还是任何其他工具中，都考虑如何让他们的创作充满生命。我最喜欢的 Claude Design 创作是那些不符合现有框架的作品：带交互模拟的文档，会与你对话的幻灯片演示，既是图表又是视频的作品，同时也是它们自己的编辑器。代码，尤其是 HTML，是一种令人惊叹的创意媒介，现在设计师创建它已经相对容易。

Claude Design 形成目前的形态是因为 Anthropic 的人们不断发现我未计划的用途；现在它在 Claude Pro、Max、Team 和 Enterprise 计划中以测试版形式提供。试试它：https://claude.com/product/design 并把它带到我们尚未想到的地方。

本文由 Anthropic 的产品设计师 Nate Parrott 撰写，表达了他对 Claude Design 的观点、使用模式和建议。

探索更多产品新闻以及使用 Claude 构建团队的最佳实践。

产品更新、操作指南、社区聚焦等等。每月发送到你的收件箱。

嗨，Claude！你能帮我为观众开发一个独特的语气吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何文档来帮助你更好地完成任务，请告诉我。你可以使用你可以访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务。请不要使用分析工具。请保持你的回复友好、简短且富有对话感。请尽快执行任务——如果有一个作品示例会有帮助，那就太好了。如果使用作品示例，请考虑哪种作品（互动、视觉、清单等）对这个特定任务最有帮助。谢谢你的帮助！

嗨，Claude！你能帮我改进写作风格吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何文档来帮助你更好地完成任务，请告诉我。你可以使用你可以访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务。请不要使用分析工具。请保持你的回复友好、简短且富有对话感。请尽快执行任务——如果有一个作品示例会有帮助，那就太好了。如果使用作品示例，请考虑哪种作品（互动、视觉、清单等）对这个特定任务最有帮助。谢谢你的帮助！

嗨，Claude！你能帮我头脑风暴创意吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何文档来帮助你更好地完成任务，请告诉我。你可以使用你可以访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务。请不要使用分析工具。请保持你的回复友好、简短且富有对话感。请尽快执行任务——如果有一个作品示例会有帮助，那就太好了。如果使用作品示例，请考虑哪种作品（互动、视觉、清单等）对这个特定任务最有帮助。谢谢你的帮助！

嗨 Claude！你能把一个复杂的主题讲得简单明了吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你觉得我应该上传任何有助于你更好完成任务的文件，请告诉我。你可以使用你可以访问的工具，比如 Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务的话。不要使用分析工具。请保持你的回答友好、简短和对话式。请尽快执行任务——如果有一个可行的产物那就太好了。如果使用产物，考虑哪种类型的产物（互动的、可视化的、清单等）对这个特定任务最有帮助。谢谢你的帮助！

嗨 Claude！你能帮我理清这些想法吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你觉得我应该上传任何有助于你更好完成任务的文件，请告诉我。你可以使用你可以访问的工具，比如 Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务的话。不要使用分析工具。请保持你的回答友好、简短和对话式。请尽快执行任务——如果有一个可行的产物那就太好了。如果使用产物，考虑哪种类型的产物（互动的、可视化的、清单等）对这个特定任务最有帮助。谢谢你的帮助！

嗨 Claude！你能帮我准备考试或面试吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你觉得我应该上传任何有助于你更好完成任务的文件，请告诉我。你可以使用你可以访问的工具，比如 Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务的话。不要使用分析工具。请保持你的回答友好、简短和对话式。请尽快执行任务——如果有一个可行的产物那就太好了。如果使用产物，考虑哪种类型的产物（互动的、可视化的、清单等）对这个特定任务最有帮助。谢谢你的帮助！

嗨，Claude！你能解释一个编程概念吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何有助于你更好完成任务的文件，请告诉我。你可以使用你能访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务。不要使用分析工具。请保持回答友好、简短并具有对话感。请尽快执行任务——如果有合适的工具或资料，提供一个会很棒。如果使用资料，请考虑哪种类型的资料（互动、可视化、清单等）对这个特定任务可能最有帮助。谢谢你的帮助！

嗨，Claude！你能查看我的代码并给我一些建议吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何有助于你更好完成任务的文件，请告诉我。你可以使用你能访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务。不要使用分析工具。请保持回答友好、简短并具有对话感。请尽快执行任务——如果有合适的工具或资料，提供一个会很棒。如果使用资料，请考虑哪种类型的资料（互动、可视化、清单等）对这个特定任务可能最有帮助。谢谢你的帮助！

嗨，Claude！你能和我一起即兴编程吗？如果你需要我提供更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何有助于你更好完成任务的文件，请告诉我。你可以使用你能访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这个任务。不要使用分析工具。请保持回答友好、简短并具有对话感。请尽快执行任务——如果有合适的工具或资料，提供一个会很棒。如果使用资料，请考虑哪种类型的资料（互动、可视化、清单等）对这个特定任务可能最有帮助。谢谢你的帮助！

嗨，Claude！你能写拨款提案吗？如果你需要更多信息，请立即问我1-2个关键问题。如果你认为我应该上传任何有助于你更好完成工作的文件，请告诉我。你可以使用你能够访问的工具——比如Google Drive、网络搜索等——如果它们能帮助你更好地完成这项任务。不要使用分析工具。请保持你的回应友好、简短和对话式。请尽快执行任务——如果有一个产物会有意义，那就太好了。如果使用产物，请考虑哪种类型的产物（互动、视觉、清单等）对这个特定任务最有帮助。感谢你的帮助！

Nate Parrott, a product designer at Anthropic, shares how he uses Claude Design (in beta) to explore, iterate on, and share visual ideas early, from product prototypes to slide decks and animations.

In the fall of 2025, I was the only product designer on Claude Code for VS Code：https://code.claude.com/docs/en/vs-code, working with two engineers to reimagine everything Claude Code does for a friendly interface outside the terminal. We shipped the beta：https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously at the end of September, Opus 4.5 arrived：https://www.anthropic.com/news/claude-opus-4-5 in November, and the Claude Code team started shipping fast and aggressively. The engineers were shipping far more than before, while I was still delivering at the pace I always had. I needed to find a way to catch up.

Claude Code runs in the terminal, where everything is text-based, and my first attempt treated it that way: I copied output into Claude, added screenshots, and asked, "Here's a feature we want to add. Why don't you design it?" The results weren't good. For a month or so, as a side project, I kept looking for ways to improve Claude’s design output.

Eventually I stumbled onto the answer: Claude is really good with HTML. We think of HTML as the format for websites, but it's also a rich, interactive visual medium: anything you can make in a slide deck, a video file, or a PDF, you can make in a web page. So I prompted Claude to make HTML, and gave it a split-view interface where you could chat on the left and see the output on the right.

That was useful, but product design is driven by applying knowledge of the product and brand you work on, so as a next step I spent a while distilling the essence of Anthropic's brand (the fonts, colors, assets, and principles our products use) into prompts. This way, when I type my prompt into the tool, the output is compliant with the Anthropic brand guide.

I put all that into a small internal prototype and shared it with the team. Product designers picked it up immediately for interactive prototypes. Making a click-through prototype in traditional design tools means mocking up every state of every screen and wiring them together by hand. Here, you hand Claude your assets and say: make it work. Every artifact it delivers has a link you can share the way you'd share a doc.

I first realized how compelling Claude Design was at an idea pitch session during an Anthropic Labs：https://www.anthropic.com/news/introducing-anthropic-labs team offsite: every person there threw together slides using it, often in the middle of the meeting before their turn to present. That session convinced the Labs team to staff it, and Claude Design went from a side project to a real project.

We stopped describing it as a tool for product mockups. Claude Design became a tool for producing any kind of visual communication: slide decks, landing pages, one-pagers you print as a PDF, emails, animations, visuals to share on social media. I think of it as one click above product design: you collaborate with Claude on visuals whose main job is communication and ideation.

As models get better at vision, so does the range and quality of work Claude Design can do. Our latest Opus-class model, Claude Opus 5：https://www.anthropic.com/news/claude-opus-5, is better than previous Opus models at reading the charts, diagrams, and screenshots, making it powerful when paired with Claude Design for creating presentation-worthy decks and memos.

Claude Design doesn't have an image model and isn’t built for image generation, so it's a poor fit for logo design—though that hasn’t stopped people from trying. The better approach here is to bring in the logo and assets you already have. The rest of the product works the same way: Claude creates options and starting points so you don’t have to stare at a blank canvas, and you choose what's good on its own, or as a combination of multiple versions.

And if you're shipping production software, stick with Claude Code. Claude Code is for coding; Claude Design is for the other parts of the design work: early ideation, collaboration, or getting buy-in on a direction before anyone commits to building it. The two work together round-trip, so you can sync a prototype you started in Claude Code to Claude Design for iteration and editing on the canvas, or hand off a prototype you’re ready to build from Claude Design to Claude Code. As models get better at building production software, the work that matters most moves earlier in the process: having good ideas, getting everyone aligned, and collecting feedback while an idea is still early.

I use Claude Design every day for what you’d call bread-and-butter design work: wireframing early ideas, or generating 15 versions of a flow to collect feedback from colleagues. Some recent examples from my own work:

There's a Bret Victor talk every designer should watch at some point, called Stop Drawing Dead Fish：https://vimeo.com/64895205. From the blurb: "Everything we draw should be alive by default."

I'd encourage designers, in Claude Design or any other tool, to think about how to make their creations alive. My favorite Claude Design creations are the ones that don't fit into existing boxes: docs with interactive simulations, slide decks that talk to you, diagrams that are also videos, designs that are also their own editors. Code, specifically HTML, is an amazing medium for creativity, and it's finally somewhat easy for designers to create with.

Claude Design took its current shape because people at Anthropic kept finding uses I hadn't planned for; it is now available in beta on Claude Pro, Max, Team, and Enterprise plans. Try it：https://claude.com/product/design and take it somewhere we haven't thought of yet.

This article was written by Nate Parrott, a product designer at Anthropic, and expresses his opinions, usage patterns, and advice on Claude Design.

Explore more product news and best practices for teams building with Claude.

Product updates, how-tos, community spotlights, and more. Delivered monthly to your inbox.

Hi Claude! Could you help me develop a unique voice for an audience? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you improve my writing style? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you brainstorm creative ideas? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you explain a complex topic simply? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you help me make sense of these ideas? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you prepare for an exam or interview? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you explain a programming concept? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you look over my code and give me tips? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you vibe code with me? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to— like Google Drive, web search, etc.—if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can—an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!

Hi Claude! Could you write grant proposals? If you need more information from me, ask me 1-2 key questions right away. If you think I should upload any documents that would help you do a better job, let me know. You can use the tools you have access to — like Google Drive, web search, etc. — if they’ll help you better accomplish this task. Do not use analysis tool. Please keep your responses friendly, brief and conversational. Please execute the task as soon as you can - an artifact would be great if it makes sense. If using an artifact, consider what kind of artifact (interactive, visual, checklist, etc.) might be most helpful for this specific task. Thanks for your help!