什么是 Claude Design？定价、7 种创建方法及提示词示例全指南 [2026 最新版]

好的，这是您要求的英文到简体中文的专业翻译。

2026 年 6 月 18 日，Claude Design 进行了一次重大更新。

功能增加了，界面也变了。

我一边使用一边确认了，所以我会按顺序写下屏幕上要点击的位置。

这篇文章是为“一边学习一边使用”而写的。

请一边实际打开 [claude.ai/design](//claude.ai/design)，一边阅读本文。

可以免费使用吗？

不，不可以。

Claude Design 是付费计划专属功能。

如果你有 Pro 计划（$20/月），就可以使用。无需额外付费。

什么是 Claude Design？

这是一款 AI 工具，只需用日语给出粗略指示，就能创建幻灯片、LP、应用原型、提案等。

Anthropic 于 2026 年 4 月 17 日发布了它。这次更新显著增强了它的功能。

输出是“实时 HTML”。它不是静态图像，而是生成一个可点击、可移动的设计。

如何阅读屏幕

当你打开 [claude.ai/design](//claude.ai/design) 时，会显示这个屏幕。

顶部选项卡

“创建新内容”区域

在这里选择你想创建的内容类型。排列着七个卡片。

在“设计”下方，会列出你过去的设计。

当 Claude 提出后续问题时（所有卡片通用）

选择卡片并发送提示后，如果 Claude 判断信息不足，可能在屏幕右侧显示附加问题。

问题的内容会根据提示而变化。

有必填项和选填项。

填写项目后，按“继续”即可开始生成。

如何创建 Slides（演示材料）

从这里创建研讨会材料、简报幻灯片和推介 decks。

步骤 1. 在主页上点击“Slides”

点击写着“演示文稿和推介 decks”的卡片。

步骤 2. 输入你想创建的幻灯片内容

点击后，你会进入这个界面。

左侧边栏会显示“演示是关于什么的？”

你可以从三种输入方式中选择：

• 上传文档：从 Word 或 PDF 等现有文档创建幻灯片。
• 粘贴你的笔记：粘贴笔记或文本，让 AI 结构化。
• 现有 deck：基于现有的幻灯片 deck 进行重构。

如果你不附加任何东西，只需在下面的文本框中输入日语内容，然后按发送。

提示示例

1请为 AI 咨询服务制作一个介绍幻灯片。
2对象：不擅长电脑的个体经营者和自由职业者
3时长：用于 20 分钟的研讨会
4结构：当前问题 → AI 能解决什么 → 服务详情 → 费用 → 如何申请
5氛围：友好，没有技术术语
6外观：简约易读，白色背景

1请制作一个自我介绍幻灯片。
2前 SE，目前教授 AI 使用
3业绩：使用 Claude Code 实现运营自动化，构建了 30 万日元/月的系统
4对象：AI 初学者的个体经营者
5幻灯片数量：5-7 张，留白多，易于观看

1请制作一个关于如何使用 Claude Code 的介绍幻灯片。
2受众：从未写过代码的初学者
3时长：10 分钟
4内容：什么是 Claude Code → 安装步骤 → 第一个命令 → 常见失败及解决方案
5语气：礼貌、温和、不吓人

Deck 选项（可选）

• 优化用于 Google Slides：仅使用 Google 字体（在 Google Slides 中打开时很方便）。
• 添加演讲者备注：自动为每张幻灯片添加演讲备注。

步骤 3. 等待生成

这需要几分钟。你可以在左侧面板查看进度。

完成后，看起来像这样。

步骤 4. 使用右上角的按钮进行调整

生成完成后，右上角会出现按钮。

“调整”功能使用最多。只需像聊天一样输入“将第一张幻灯片的标题放大”，它就会帮你修复。

注意事项

首先确定幻灯片的视觉风格。

如果在过程中说“改变所有颜色”，一致性很容易被破坏。

先决定大框架，再修改细节，效率更高。

如何创建产品原型（交互式原型）

你可以创建应用屏幕、服务预约流程和网络服务模型。

完成后，它将处于可以实际点击操作的状态。

步骤 1. 在主页上点击“Product prototype”

点击写着“交互式应用模型”的卡片。

步骤 2. 输入你想创建的应用屏幕内容

点击后，你会进入这个界面。

就像 Slides 一样，在文本框中输入日语内容并按发送。

原型写得越详细，准确性越高。 包含以下内容将提高质量：

• 什么样的应用：预约系统、任务管理、支付界面等。
• 屏幕数量：多少个屏幕。
• 每个屏幕的内容：显示什么。
• 操作流程：按哪里进入下一步。
• 设备尺寸：用于智能手机（390×844px）或 PC。
• 颜色/风格：深色主题、明亮配色方案等。

提示示例

1请为美容院预约应用创建一个原型。
2在智能手机屏幕上（390×844px）。
34 个屏幕：
41. 首页：沙龙名称、菜单列表（剪发/染发/护理）
52. 菜单选择：选择后继续
63. 日期/时间选择：日历和时段
74. 确认/完成：预约详情和“预约”按钮
8风格：白色背景，粉红色点缀，圆角设计
9当点击“预约”按钮时，过渡到“预约完成！”屏幕。

步骤 3. 等待生成

这需要几分钟。完成后，看起来像这样。

它处于可以实际点击操作的状态。点击“预约”按钮会过渡到下一个屏幕。

步骤 4. 使用右上角的按钮进行调整

生成完成后，右上角会出现按钮。

“调整”功能使用最多。只需像聊天一样输入“把背景颜色改成白色”或“把字体放大”，它就会帮你修复。

如果你想添加动画

Claude Design 默认不添加动画。

如果想添加动效，请明确指定。

1悬停时按钮放大到 1.05 倍，过渡时间 200ms。
2页面加载时卡片淡入 + 向上滑动，以 150ms 间隔依次显示。

如何创建产品线框图（骨架设计）

当你想先确定“屏幕布局”时使用。

它只创建布局的骨架，而不是详细的设计。

它适合确认“用户按此顺序进行”的流程。

步骤 1. 在主页上点击“Product wireframe”

点击写着“低保真屏幕和流程”的卡片。

### 步骤 2. 输入你想创建的屏幕布局

点击后，你会进入这个界面。

只需在文本框中输入日语内容并按发送。如果你有想用作参考的屏幕，通过“添加屏幕截图”附加它会提高准确性。

提示示例

1请为咨询服务申请流程创建一个线框图。
2步骤：首页 → 服务描述 → 费用 → 申请表格 → 完成
3只要能看出每个屏幕要放什么就行。不需要详细设计。

1请为研讨会申请 LP 创建一个线框图。
2部分：主视觉区 → 讲师介绍 → 内容 → 参与费用 → 申请表格
3以智能手机视图显示。

步骤 3. 等待生成

完成后，看起来像这样。

屏幕骨架用灰色框显示。用于确认“按钮在这里”、“图像在这里”等布局。详细设计使用“Product prototype”或“Document”进行。

步骤 4. 使用右上角的按钮进行调整

生成完成后，右上角会出现按钮。

在“调整”中指示“在第三个屏幕上添加费用显示”等操作，会进行附加修改。

如何创建文档（LP、提案、文档）

从这里创建着陆页、提案、报告和简历。

在 7 种类型的卡片中，这是用途最广的。

步骤 1. 在主页上点击“Document”

点击写着“简历、PDF 等”的卡片。

### 步骤 2. 输入你想创建的内容

点击后，你会进入这个界面。

Document 卡片独有的功能是“说出来”。

如果你像聊天一样输入想法来整理思路，它会按原样读取结构。

如果你有 PDF 或材料，可以通过“上传 PDF 或笔记”进行上传。

提示示例

1请为个人 AI 咨询服务创建一个 LP。
2目的：增加 LINE 注册量
3结构：
4- 主视觉区：标语 + 注册按钮
5- 你有这些问题吗？（3 项）
6- 服务能解决什么（3 项）
7- 费用
8- 常见问题（3 项）
9- 最终 CTA：LINE 注册按钮
10对象：不擅长电脑的个体经营者、50 多岁女性
11风格：简约温馨，白色 + 珊瑚色点缀

1请为企业创建一份咨询服务提案。
2结构：当前问题 → 提案内容 → 预期效果 → 费用 → 实施步骤 → 关于下次会议
3风格：简约可信赖，海军蓝 x 白色

1请作为自由职业者创建一份自我介绍材料（作品集）。
2包含内容：简介、技能、业绩、费用、联系方式
3风格：单色 + 1 种强调色，现代简洁

步骤 3. 等待生成

这需要几分钟。完成后，看起来像这样。

你可以滚动查看其余部分。对于 LP，从费用、问答到页脚都会生成。

步骤 4. 使用右上角的按钮进行调整

生成完成后，右上角会出现按钮。

只需在“调整”中指示 LP 的措辞或颜色，它就会当场修复。

如何创建动画

你可以创建动画横幅和动态图形。

步骤 1. 在主页上点击“Animation”

点击写着“动态图形和循环”的卡片。

步骤 2. 输入你想创建的动画内容

点击后，你会进入这个界面。

如果你有故事板或图像，可以通过“放置故事板或图像”进行上传。

如果你有脚本（文本），也可以通过“粘贴脚本”进行粘贴。

提示示例

1请为服务介绍创建一个动画横幅。
2内容：文字“AI x 系统化”淡入 → 服务名称从下方出现 → CTA 按钮闪烁
3背景：深色，珊瑚色点缀线条
4尺寸：1200×630px
5循环播放

1请创建一个数字计数动画。
2显示文字“已有 3，000 人报名”，在 2 秒内从 0 计数到 3，000。
3页面显示时开始。

完成后，看起来像这样。

步骤 3. 使用右上角的按钮进行调整

生成完成后，右上角会出现按钮。

与其他卡片不同，没有“编辑”按钮。 由于动画是基于代码（CSS/JavaScript）运行的，不能直接点击编辑元素。只能通过在“调整”中指示 AI 来进行修改。

如果将动画导出为 PDF，动效会丢失。如果想保留动效，请选择 HTML 格式。

如何使用空白画布（从零开始创建）

没有模板，没有问题。当你希望从一个完全空白的画布开始时使用。

对于“不适合任何卡片”或“想自己决定一切”的情况，请选择此选项。

只需在文本输入框中输入你想创建的内容并按发送。

如何使用从文件开始（从文件创建）

此卡片将现有文件转换为设计。只需给 Claude 一个 Word、PDF 或 PPTX 文件，它就会为你创建设计。

步骤 1. 点击“Start with a file”

点击写着“将其变为设计”的卡片。文件选择对话框将打开。

支持的文件格式有 DOCX、PPTX、XLSX、PDF、JPG 和 PNG。

步骤 2. 上传文件并输入指示

选择文件后，它会被上传，并出现一个大的文本输入框。输入你想用日语创建的内容，然后按“开始项目”按钮。

其他卡片有“发送”按钮，但此卡片有“开始项目”。

提示示例

1请将附件的 Word 提案转换为视觉提案幻灯片。
2做成 5-7 张幻灯片的配置，采用简约易读的设计。

1请将这份手写笔记中的想法转换为 LP 提案。
2对象：AI 初学者的个体经营者
3目标：咨询申请

完成后，看起来像这样。

步骤 3. 使用右上角的按钮进行调整

生成后，你可以使用右上角的工具栏进行调整。点击“+ 调整”按钮会打开一个聊天输入框，你可以在其中提供额外指示进行精细修改。

如何使用设计系统 [本次更新新增]

在主页卡片列表下方有一个“设置设计系统”按钮。

通过一次注册品牌颜色、字体和徽标，它们将自动反映在后续设计中。

这解决了“每次颜色都不一致”的问题。

点击按钮会显示“添加设计系统”弹窗。

有两种注册方法。

① 在此处创建（适合初学者）

只需在表单中输入必要信息即可完成设置。

可以注册的内容：

• 公司名称/品牌描述（文本输入）
• GitHub 仓库 URL
• Figma 文件（上传 .fig 文件）
• 字体、徽标和资产文件

无需代码即可使用。如果是第一次尝试，推荐此方法。

② 使用 Claude Code 创建 (BEST FIDELITY)

这是一个让 Claude Code 学习品牌信息的功能。

一旦注册，你就不必每次创建 LP、主页或幻灯片时都指定“用这个颜色和这个字体”。作为品牌统一的设计会自动生成。

主要面向企业开发团队。 这是一个从使用 React 规则创建的服务代码中自动读取品牌信息的功能。个人使用几乎没有用例。

使用方法

你可以按照以下步骤从零开始创建。

步骤 1. 检查 Node.js

步骤 2. 创建文件夹和文件

1任意文件夹/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js（将颜色和字体改写为你的品牌）

1export const colors = {
2  primary: "#DA7756",      // 主色
3  background: "#F5F4F0",   // 背景色
4  text: "#1C1917",         // 正文
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

步骤 3. 执行 /design-sync

在 Claude Code 中运行以下命令：

1/design-sync

完成后，品牌将被注册到“设计系统”选项卡中。在后续设计生成中，将自动使用此颜色和字体。

导出方法

完成的设计可以以多种格式导出。

如果有动画，导出为 PDF 时动效会丢失。

如果想保留动效，请选择 HTML 格式。

调整技巧（调整面板）

生成后，点击“调整”按钮可以向 AI 发出微调指示。

有效指示示例：

• “把页眉文字放大”
• “让按钮更突出”
• “整体变得更简洁”
• “检查在智能手机上查看时的布局”

与其一次性更改所有内容，不如一个接一个地给出指示，更容易获得想要的结果。

本次更新的变化

总结 — 根据你想创建的内容选择卡片

Claude Design 适用于 Pro 计划（$20/月）及以上。不能免费使用。

根据你想创建的内容选择卡片

当提示中包含“目的、结构、对象和风格”这四个要点时，准确性会提高。

不要一开始就追求完美，先创建一个大框架，然后逐一修复，效率更高。

如果你喜欢这篇文章，我会很高兴你点个“赞”。

▼ 你可以通过 LINE 收到即使不擅长电脑也能开始的 Claude 使用方法。

注册后将赠送 Claude Code 安装指南。

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso