跳转到主要内容

在 Claude Design 中设置您的设计系统

更新于今天

创建设计系统使 Claude Design 能够生成符合您规格的输出。它从您提供的资产(代码库、幻灯片或其他设计参考)中提取可重用的组件、颜色、排版和模式,并将其用作在您账户内创建的每个项目的基础。

Anthropic Labs 的 Claude Design 现已在研究预览中向 Pro、Max、Team 和 Enterprise 计划提供。此功能在 Enterprise 计划中默认关闭。

本指南适用于将设置设计系统的设计师或品牌所有者。您只需执行一次;设置后,所有团队成员的项目将自动使用它(适用于 Team 和 Enterprise 计划)。

前置条件

  • 您的组织管理员为设计系统设置授予的权限。

  • 至少提供以下之一作为源材料:

    • 包含您的设计系统或组件库的代码库

    • 反映您视觉识别的幻灯片或文档

    • 品牌指南资产(徽标、调色板、排版规格)


步骤 1:创建或切换到您的组织

要设置您的组织的设计系统:

  1. 打开 Claude Design

  2. 在项目选择器的左下角,单击当前组织名称。

  3. 选择您的组织,或创建一个新组织。

  4. 您将被重定向到入门流程。完成它。

步骤 2:上传您的品牌和产品资产

在入门期间(或之后从您的组织设置中),上传定义您的品牌和产品的资产。Claude 将分析它们并提取可重用的设计系统。

上传内容:

  • 代码库:如果您的设计系统存在于代码中(例如,React 组件库),您可以链接或上传存储库。Claude 将读取组件和样式。

  • 原型:屏幕截图、网页流程和现有设计文件。

  • 幻灯片或文档:即使是反映您品牌的精心设计的 PowerPoint 或 PDF 也可以工作。Claude 提取颜色、布局模式和排版选择。

  • 单个资产:徽标、调色板文件、排版样本。

您只需要一个源就可以开始,但提供多个源可以让 Claude 有更多的工作内容。

步骤 3:审查生成的设计系统

上传后,Claude 为您的组织生成设计系统(UI 工具包)。这通常包括:

  • 调色板:从您的资产中提取的主要、次要和强调颜色。

  • 排版:字体系列、大小和粗细。

  • 组件:按钮、卡片、导航元素和其他可重用的 UI 模式。

  • 布局模式:间距、网格系统和页面结构。

要验证您的设计系统,请创建一个测试项目,看看输出是否符合您的品牌期望。尝试以下提示:

  • 为 [您的产品] 创建登陆页面。

  • 设计显示 [相关指标] 的仪表板。

  • 制作关于 [您的团队通常演讲的主题] 的演示文稿。

步骤 4:将其提供给您的团队

一旦您对设计系统质量感到满意,请确保"已发布"切换开关已打开。发布后,从 Claude Design 主屏幕在您的组织中创建的任何项目都将使用您的设计系统而不是默认系统。


获得最佳结果的提示

  • 包括真实示例,而不仅仅是规格。完成的登陆页面或营销网站比单独的调色板更能向 Claude 说明您品牌的感觉。

  • 迭代。如果第一次提取没有很好地捕捉您的品牌,请尝试上传其他或不同的资产。

更新您的设计系统

品牌在不断发展。当您的设计系统发生变化时,您可以在 Claude Design 中更新它。从您的 Claude Design 组织设置中,单击您要编辑的设计系统旁边的"打开"按钮。单击右上角的"混音"按钮以打开窗口左侧的聊天界面。从这里,您可以与 Claude 合作更改您的设计系统。

这是否解答了您的问题?