构建 Claude Design 的设计师如何在日常工作中使用它

2025 年秋，Nate Parrott 是 Claude Code VS Code 扩展的唯一产品设计师，与两名工程师一起将命令行工具重新设计为图形界面产品。随着 Opus 4.5 上线，工程团队的交付速度大幅提升，而他的设计产出节奏却没有跟上。他意识到，必须找到一种方式让自己的工作效率实现质的飞跃，而不只是在现有流程上做微调。

最初，Nate 尝试将终端输出和截图直接粘贴给 Claude，让它给出设计方案，但效果并不理想。经过大约一个月的摸索，他发现了关键突破口：Claude 在生成 HTML 方面能力极强。HTML 不仅是网页格式，更是一种富交互的视觉媒介——幻灯片、视频、PDF 能呈现的内容，网页同样可以做到。他据此搭建了一个分屏界面，左侧对话，右侧实时渲染，并将 Anthropic 的字体、配色、资产和设计原则全部提炼进提示词，让每次输出都自动符合品牌规范。

这个内部原型在一次 Anthropic Labs 团队异地会议上引发了真正的转折。与会者在等待轮到自己发言时，当场用 Claude Design 拼出了演示幻灯片。这一幕让 Labs 团队决定为其正式配备人手，Claude Design 由此从副业项目升级为正式产品。它的定位也从「产品原型工具」扩展为「任何视觉传达场景」的创作平台，涵盖幻灯片、落地页、可打印的单页文档、邮件、动画以及社交媒体素材。

Claude Design 并非万能。它没有图像生成模型，不适合做 Logo 设计；生产级软件开发仍应交给 Claude Code。两者的分工很清晰：Claude Design 负责早期创意探索、团队对齐和方向验证，Claude Code 负责将设计转化为可交付的代码。目前两款工具已深度集成，用户可以在 Claude Code 会话中直接调用 `/design` 指令创建或同步设计项目，设计完成后无缝移交，不必重新截图。

在日常工作中，Nate 用 Claude Design 完成线框图绘制、方案快速迭代等基础设计任务。他曾用它构建了一个定制视频编辑器来制作 Claude Design 的开场动画，也曾让 Claude 生成带滑块和预设的颜色调节界面，还与两位同事在工具内部探索 Claude Design 编辑器本身的新设计方向。他的核心建议是：在打开电脑之前就想清楚你要什么，把提示词写好再动手，这样 Claude 才能精准执行你的构想，而不是输出它自己偏好的默认风格。

要点

• Claude Design 起源于一位设计师为追上工程团队交付节奏而做的内部实验，核心洞察是 HTML 可以作为强大的视觉创作媒介。
• 通过将品牌规范内嵌进提示词，Claude Design 能让每次输出自动符合设计规范，大幅降低品牌一致性的维护成本。
• Claude Design 与 Claude Code 已实现深度集成，设计稿可通过 `/design` 指令直接在开发会话中创建并移交，打通了从创意到代码的完整链路。
• Claude Design 适合早期创意探索和团队对齐，不适合 Logo 设计或生产级代码开发，明确边界有助于发挥其最大价值。
• 提示词质量决定输出质量：在开始设计前花时间想清楚需求，是获得高质量结果最有效的方法。