MemoryLake
返回全部文章
Tutorial2026 年 10 月 26 日·10 分钟阅读

如何在不丢失上下文的情况下从 Claude Design 迁移到 Claude Code (2026)

您在 Claude Design 中花了一周时间完善新的入职流程。屏幕看起来已经完工,间距遵循您的设计系统,您和 Claude 在过程中解决了十几个小问题:为什么第二步是可选的,哪些状态需要空视图,错误文案应该怎么写。现在是构建它的时候了,而构建发生在 Claude Code 中。

Anthropic 为这一跨越构建了直接路径。Claude Design 可以将设计交付给 Claude Code,而 Claude Code 拥有用于拉取设计系统和导入设计的命令。Anthropic 以设计的形式描述了这种交付。您在设计聊天中推导出的推理过程是需要刻意带走的部分,因为它是防止构建偏离设计的关键。

本指南涵盖了从 Claude Design 迁移到 Claude Code 的内容、每个部分的落脚点,以及如何带走决策。如果您早期的规划是在普通的 Claude 聊天中而不是在 Claude Design 中进行的,我们关于将 Claude 聊天迁移到 Claude Code 的指南涵盖了该路径。

Claude Design 现在的所在地

Claude Design 现在在 Claude 内部运行。Anthropic 的入门文章将其描述为“您可以从中启动 Artifact 的模板之一,因此您可以在任何聊天、Claude Code 以及 Artifacts 选项卡中使用它,并包含画布编辑和您的设计系统。”它适用于 Free、Pro、Max、Team 和 Enterprise 计划。

原有的独立站点 claude.ai/design 即将关闭。Anthropic 的迁移指南指出,它“将于 2026 年 12 月 14 日关闭,在此日期之前您仍可访问它。”那里的项目可以作为 Artifact 移入 Claude,这一举措正逐步向付费计划推出。

这为您想要构建的设计提供了三个可能的起点:

  • 在 Claude 中制作的设计(作为 Artifact)
  • 仍在独立站点中的设计
  • 在 Claude Code 内部使用 /design 命令起草的设计

这三者最终都会到达同一个地方,但路径和随之而来的内容有所不同。

Claude Code 可以从 Claude Design 中获取什么

设计本身,通过交付

入门文章用一句话描述了交付:“当设计准备好成为软件时,您可以将其交付给 Claude Code,它会从您现有的工作继续,而不是从截图重新开始。”

在导出选项中,向 Claude Code 的交付有两个目的地:发送到本地编码代理(用于您机器上的 Claude Code)和发送到 Claude Code Web(用于云端会话)。同一个菜单还提供其他格式,包括 .zip 下载、PDF、PPTX、Google Slides 和独立 HTML。

从 Claude Code 侧来看,同一篇文章提到:“在 Claude Code 中,使用 /design 将设计导入您的代码库,将代码导出为实时原型,或者让 Claude 从头到尾构建整个项目。”

设计系统,通过 /design-sync

设计系统是第二个组成部分。Anthropic 的设计系统文章指出,如果您的设计系统“已经以 React 组件的形式存在,请在 Claude Code 中运行 /design-sync。它会直接读取您的 Token 和组件,最适合代码中的产品设计系统。”

入门文章明确了目的:“使用 /design-sync 拉取您的设计系统,这样您在 Claude Design 中构建的所有内容都从现有组件开始。”当您的组件存在于仓库中时,仓库就成为了源头,设计将从您实际交付的内容开始。

设计 Token,通过 CLAUDE.md

Claude Code 也有存放视觉规则的地方。Claude Code 的 Artifact 文档指出,为了保持 Artifact 与您的品牌一致,“将它们记录在 Claude 可以找到的地方,例如项目的 CLAUDE.md 或仓库中的主题文件”。它还补充了 Claude 如何对它们进行排序:“Claude 将您的设计系统视为比其自身选择更高的优先级,而将您的提示词视为比两者都高的优先级。”

因此,在 CLAUDE.md 中包含颜色、字体和间距的简短设计系统部分,是该仓库中每个 Claude Code 会话都会读取的内容。我们关于 Claude Code 子目录 CLAUDE.md 限制的指南解释了将长文件放在何处,以便重要行仍然可以加载。

哪些内容不会自动随之迁移

Anthropic 对交付的描述是关于设计的。它没有说设计背后的对话也会随之迁移,对于独立站点,它明确表示聊天和评论无法移动。有三种上下文值得您亲自带走。

塑造设计的对话。 您选择一种布局而不是另一种的原因、您同意处理的边缘情况以及您设置的约束都存在于聊天中。对于独立站点,Anthropic 明确表示:“您的聊天和评论无法移动到 Claude,因此它们将留在独立版本中直到其关闭。”其未迁移内容列表指名了“您与 Claude 的聊天”和“对项目和设计系统的评论”,并建议:“在独立版本关闭之前,保存您从聊天和评论中需要的任何内容。”

评论和评审笔记。 留在设计上的反馈也是独立站点相同列表的一部分。

适用于单个设计之外的规则。 表单使用哪个组件、空状态应该显示什么、错误如何措辞。如果这些是在对话中确定的,它们就不在设计文件中。

这并非交付功能的缺陷。设计文件保存的是设计。背后的决策是另一回事,Claude Code 会从仓库中的文件读取它们。

人们首先尝试的方法

发送截图。 它对于粗略的开始有效,但 Anthropic 自身对交付的描述将其与从截图重新开始进行了对比。截图不携带结构或组件。

将整个设计聊天粘贴到 Claude Code 中。 它在带来推理的同时也带来了大量噪音,并使会话的上下文充满了不需要存在的讨论。

依赖 Claude Code 推断设计系统。 如果没有 CLAUDE.md 中的 Token 或它可以读取的组件,它会做出自己的视觉选择。

将独立项目留到 12 月。 那里的聊天和评论不会移动,独立项目的公共链接在关闭后将停止工作。

手动迁移

第 1 步:收集设计、系统和决策

在交付任何内容之前,收集三样东西。

  • 设计。 确保您想要构建的版本是当前版本。如果它仍在独立站点中,当该选项对您可用时将项目移入 Claude,或者将项目下载为 .zip。Anthropic 指出,移动项目会显示一个评审列表,“列出移动的内容、任何运行方式不同的内容以及留下的内容”。
  • 设计系统。 如果您的系统存在于代码中,请记录是哪个仓库和哪些组件。如果它是从品牌资产在 Claude 中构建的,请检查它是否已移过,并且是您的设计所使用的那个。
  • 决策。 回顾设计聊天并写下决定了什么以及原因:布局选择、每个屏幕需要的状态、文案规则、无障碍要求以及您排除的任何内容。每条决策一行。对于独立项目,请在 12 月 14 日之前完成此操作,因为聊天不会移动。

第 2 步:将每个部分带入 Claude Code

在功能所在的仓库中:

  1. 拉取设计系统。 如果您的组件在仓库中,运行 /design-sync,以便 Claude Design 和 Claude Code 基于相同的组件工作。
  2. 将视觉规则添加到 CLAUDE.md。 编写一个包含颜色、排版和间距的简短设计系统部分,或指向保存它们的主题文件。
  3. 在 Claude Code 会读取的地方添加决策。 将适用于整个功能的规则放入 CLAUDE.md 或 CLAUDE.md 引用的简短设计笔记文件中。将一次性的细节留给会话本身。
  4. 交付设计。 从设计中,选择“发送到本地编码代理”用于本地会话,或“发送到 Claude Code Web”用于云端会话。或者,在 Claude Code 中使用 /design 导入它。
  5. 在上下文可见的情况下开始构建。 在第一条消息中,告诉 Claude Code 这是哪个设计,要遵循哪些决策,以及完成的标准是什么。然后要求它在编写代码之前总结它将要构建的内容。

如果您交付到云端会话,您机器上的仅限本地设置不会自动跟随。我们关于 Claude Code 云端会话中留在笔记本电脑上的内容的指南涵盖了云环境加载的内容。

更好的方法:将设计决策保存在一个比设计文件更长久的列表中

手动迁移是有效的,但它显示了决策所在的位置:在不会随之移动的设计聊天中。您将它们复制到此仓库的 CLAUDE.md 中,而下一个不同产品的设计又要以同样的方式开始。当您在 ChatGPT 中评审构建,或在另一个助手程序中规划下一个功能时,那些决策也不在那里。

MemoryLake 是一个记忆层,用于将您工作所遵循的设计决策和惯例保存在一个由您维护的列表中,供 Claude Code 和您连接的其他助手程序(如 ChatGPT 和 Codex)使用。

您用自己的语言亲自编写条目。不会从 Claude Design、您的 Artifact、您的设计系统、您的 Claude 聊天或任何供应商的存储中读取、写入或删除任何内容。对于工作内容,请遵循您组织关于在工具之外保留内容的政策。

第 1 步:创建 API 密钥

登录并从仪表板生成密钥。该密钥属于您的 MemoryLake 工作区,与您的 Claude 账户是分开的。

MemoryLake 控制台显示 API 密钥屏幕,在此处创建并复制新密钥以供代理使用
MemoryLake 控制台显示 API 密钥屏幕,在此处创建并复制新密钥以供代理使用

第 2 步:上传您的第一批记忆

从您在手动迁移第 1 步中写下的决策开始:布局选择、状态、文案规则以及您排除的内容。每个条目一个决策,注明日期,并贴上所属产品或功能的标签。

MemoryLake 工作区显示已上传的第一批文档,列出了每个文件成为可搜索记忆的过程
MemoryLake 工作区显示已上传的第一批文档,列出了每个文件成为可搜索记忆的过程

第 3 步:连接您的 AI 和代理

连接 Claude Code 和您使用的其他助手程序。下一次设计交付、评审或后续功能开发开始时,决策已触手可及。

MemoryLake 集成屏幕列出了可以连接到记忆层的 AI 客户端和代理框架
MemoryLake 集成屏幕列出了可以连接到记忆层的 AI 客户端和代理框架

这在实践中改变了什么

第一个区别是构建与设计的匹配是基于正确的原因。Claude Code 拥有设计、组件及其背后的决策,因此它不必猜测为什么第二步是可选的。

第二个区别是设计系统保持在一个地方。通过 /design-sync 从仓库读取组件以及 CLAUDE.md 中的 Token,新的设计和新的代码都从同一个源头开始。

第三个区别是决策在工具更迭中幸存下来。12 月关闭的独立聊天,或者您再也不会打开的设计聊天,都不会带走推理过程。如果您也在 ChatGPT 中进行设计,我们关于 ChatGPT 为什么会忘记您的设计系统的指南涵盖了那一方面。

从 Claude Design 迁移到 Claude Code 的最佳实践

交付设计,而不是截图。 交付保留了 Claude Code 所需的结构。

使仓库成为组件的源头。 当您的设计系统以代码形式存在时,使用 /design-sync。

将视觉规则放入 CLAUDE.md。 仓库中的每个会话都会读取它们。

在离开设计聊天之前写下决策。 每条一行,并注明原因。

在 12 月 14 日之前保存独立聊天和评论。 它们不会移动到 Claude。

在构建之前要求 Claude Code 重述计划。 这是检查决策是否送达的最快方法。

将功能范围的规则与一次性细节分开。 规则放入文件;细节放入会话。

如果 Claude Code 仍然偏离您商定的内容,我们关于 Claude Code 为什么会忘记项目上下文的指南涵盖了常见原因。

结论

Claude Design 现在存在于 Claude 和 Claude Code 内部。完成的设计可以通过“发送到本地编码代理”或“发送到 Claude Code Web”交付给 Claude Code,或者通过 /design 导入。代码中的设计系统可以通过 /design-sync 拉取,视觉规则可以存放在 CLAUDE.md 中。

Anthropic 没有描述设计背后的对话会随交付一起迁移。在离开设计聊天之前写下决策,将功能范围的决策放入仓库,并将它们保存在比设计文件更长久的地方。这样,构建就会出于与设计制作时相同的理由来遵循设计。

常见问题

如何将 Claude Design 发送到 Claude Code?

使用设计导出菜单中的交付选项:发送到本地编码代理(用于您机器上的 Claude Code),或发送到 Claude Code Web(用于云端会话)。在 Claude Code 中,您也可以使用 /design 来导入设计。

Claude Code 中的 /design-sync 有什么作用?

它从代码中将您的设计系统拉取到 Claude Design 中。Anthropic 表示它直接读取您的 Token 和组件,最适合代码中的产品设计系统。

我的 Claude Design 聊天会移动到 Claude Code 吗?

Anthropic 将交付描述为移动设计,并未说明设计聊天会随之移动。独立站点的聊天根本无法移动到 Claude,因此在交付前请写下您需要的决策。

我应该把 Claude Code 的设计 Token 放在哪里?

放在项目的 CLAUDE.md 或仓库中的主题文件中。Claude Code 的文档指出,Claude 将您的设计系统视为比其自身选择更高的优先级。

独立的 Claude Design 何时关闭?

2026 年 12 月 14 日。在那之前您仍可使用它。那里的聊天和评论不会迁移到 Claude。

我可以在不离开 Claude Code 的情况下使用 Claude Design 吗?

可以。/design 命令可以在一个画布上以画板形式起草设计,并将其发布为 Claude Design Artifact,供您评审和编辑。