什么是 Claude Design
Claude Design 是「Anthropic Labs」推出的研究预览产品。如果说我们熟悉的 Claude 聊天是一个「用文字回答的 AI」，那么 Claude Design 就是一个「产出可见成果的 AI」。只要给出提示词（请求语句），它就能直接在屏幕上画出网站样稿、可点击的原型、演示幻灯片、广告版式，以及简历、合同这类文档。
它由 Claude 的前沿（最高级别）模型驱动，本文所依据的教程中运行的是 Opus 4.8。关键在于你无需另学一款设计软件，只要像平时对 Claude 说话那样提出请求，成果就会出现。
有一点重要区分：Claude Design 负责制作「设计与样稿」。把样稿变成能运行的代码并放上互联网（部署），则由后文要讲的 Claude Code 接手。两者是搭档，但并非同一样东西。
从哪里、如何开始
首先需要一个 Claude 账号和付费订阅。由于 Claude Design 目前处于研究预览阶段，面向 Pro、Max、Team、Enterprise 订阅用户开放。起点是登录 claude.ai（可用 Google 账号等注册）。
进入方式有两种。一是网页浏览器：打开 claude.ai，点开左上角侧边栏，就能看到「Claude Design」入口，可直接打开。
二是 Claude 桌面应用。它屏幕空间更大，也是教程作者推荐的方式。从左下角的下载按钮获取对应操作系统（macOS 或 Windows）的应用，安装并登录后，左下角会出现一个「Design」按钮。点击它，Claude Design 会在独立窗口中打开。
第一次打开时，你可能看到几个示例设计，也可能是空白页面，因人而异。不必慌张，直接从下一步「创建设计系统」开始即可。
为什么要先建「设计系统」
在 Claude Design 里，无论做什么，第一步都是「设计系统」。设计系统是把一个品牌的视觉规则集中在一处的集合。可以把它看作一本「品牌手册」，规定了用什么字体、什么颜色、Logo 长什么样，以及按钮、卡片等元素是什么形状。
先建它的理由是一致性。一旦设定好设计系统，之后所做的网站、幻灯片、广告都会以相同的字体和颜色产出，不必每次重新解释品牌。
创建方式有多种。如果已有代码或设计资产，可以粘贴 GitHub 仓库地址、指定电脑里的代码文件夹，或连接 Figma 文件让 Claude 读取那套风格。如果什么都没有，只需给出公司名称和一两句介绍，字体和颜色可以问 Claude 要备选方案。实际在 Claude 聊天里请它连同预览一起给出合适的 Google 字体搭配和配色方案，它就会给出可挑选的选项。
如果没有 Logo，就先用另一款图像生成工具做好再放进去。教程中，作者用了一款第三方工具（非 Anthropic）制作放大也不会糊的 SVG Logo，然后拖进来。只要记住这一步是作者的选择，而非 Claude Design 的功能即可——Logo 用什么工具做都行。
输入完所有信息并点击生成，几分钟后品牌指南就完成了。你会得到一份「活文档」——随时可编辑——其中整理了 Logo 变体、配色方案，以及按钮、卡片、表单等元素。满意的话就切到「已发布」状态，若愿意还可设为默认设计系统，让之后所有作品自动套用。
请为这家公司推荐 4 组合适的 Google 字体搭配。
把标题字体和正文字体配成一对，要独特但不过分。
每组都附上预览。
（选好字体后）
请推荐 4 套配色方案，既让人感到可信，又保留本地小微企业的亲切感。实际做一张单页网站
有了设计系统后，点击「New design（新建设计）」，选择刚做好的设计系统，再用一句话描述你想做什么。比如：顶部带有免费报价表单的落地页，首屏（Hero）区、服务区、地区区，底部再放一次同样的表单，还有顶部导航栏。
Claude Design 收到提示词后不会立刻开做，而是先反问。诸如「服务项目列哪些？」「电话号码是？」「要突出哪些信任指标？」「报价表单里放哪些字段？」等问题，回答后它就会把答案融入并开始搭建网站。这种先确认的步骤，能减少走偏。
搭建过程中会弹出「tweaks（微调）」面板。即使不懂代码，你也能用滑块和按钮当场改动表单位置（右侧/下方）、表单样式（内联/卡片）、标题文案，以及整体调性（含蓄/平衡/大胆）。屏幕右上角的 breakpoint（桌面、平板、手机）切换，可预览各设备上的样子。
放图片的位置会以斜纹占位符留空，而且每个位置 Claude 还会一并告诉你该用的图像提示词和所需比例（如 16:9）。用那段提示词生成图片（图像生成同样使用另一款工具），按编号拖进去，Claude Design 就会把它们摆到对应位置。
用我们的设计系统做一张单页落地页。
- 首屏：右侧放免费报价表单 + 左侧放公司介绍（本地、可信）
- 服务区 / 地区区 / 最底部再放一次报价表单
- 顶部导航（服务做成下拉）
图片位置先留空，并为每个位置给出图像提示词和所需比例。不只是网站——广告、幻灯片、文档
Claude Design 的产出不只网站。开始时选择的模板不同，类型也随之不同。
选择「animation（动画）」模板会得到一个广告工作室。它会按 Instagram、Facebook 等各广告规格，生成一个用于调整文字叠加、片头片尾动效以及颜色文案的仪表盘。不过广告里的背景视频或图片本身并非 Claude Design 生成，需要你用另一款工具做好再放进去。Claude Design 负责搭建承载这些素材的「广告框架与动效」。
「slides（幻灯片）」模板用来做演示材料。比如做一份包含产品颜色与规格的提案演示稿，并附带图片占位符。成稿可导出为 PPTX（PowerPoint），放到平板上当面展示给客户。
「document（文档）」模板以品牌调性制作合同、提案等文档。它会把需要改动的部分——客户姓名、条目——留作占位符，方便每次只替换数值。（有法律效力的文档当然需要专业人士审阅。）
总之，Claude Design 的构想就是：在一套设计系统之上，把网页、广告、演示和文档都以同一品牌产出。
把设计交给 Claude Code 变成代码与部署
到此为止都是「可见的设计」。要真正放上互联网并让它运转，就需要 Claude Code——一款通过命令编写并运行代码的 AI 编程工具。
交接很简单。在 Claude Design 的产出上使用「Share（分享）→ Send to Claude Code（发送到 Claude Code）」，会出现一段可粘贴的提示词，粘进 Claude Code 即可。设计系统也能以同样方式传过去，在 Claude Code 里还能用 /design-sync 命令来交换设计系统。
之后就是 Claude Code 的活了。它会把交接过来的设计整理进一个代码仓库，真正部署网站，并能把制作文档、幻灯片、广告这类重复工作打包成可复用的「技能（skill）」。教程中，作者把这样搭好的网站放到托管服务上、用真实地址上线，甚至配好了仅管理员登录以查看收到的报价请求。请记住，这部分部署与组装是 Claude Code 做的，而非 Claude Design。
核心价值就在这里：Claude Design 给你一个快速原型，Claude Code 把它变成可维护、可扩展的真正代码资产。设计不再止于一张图，而是以代码的形式留存下来。
这为何重要——SH Consulting 的观点
过去要立起一个品牌，需要设计师、网页开发、视频剪辑和文档负责人各自到位。Claude Design 把这些角色拉进一个人的对话流程里。只要定好一套设计系统，网页、广告、演示、文档都出自同一双手。
这对小微商户和单人创业者意义尤其重大。因为没有请代理机构的预算而一再搁置的品牌梳理，如今一位负责人一个周末就能做出初稿。真正的改变不在于一个完美的成品，而在于「一个可编辑的起点」几个小时内就到手。
但打开工具并不等于终点。判断做什么、把产出调到贴合品牌、决定是否留作代码资产，这些仍是人的工作。SH Consulting 关注的正是这里：把问题从「该买哪款设计工具」换成「该如何重新设计我们的品牌制作流程」。工具已经足够强，胜负取决于你把它插进工作流的哪个位置。