最近几天，ChatGPT十分火爆，暗示着人工智能时代正在发生，作为产品设计师要不断适应人工智能带来的变化，才能走得更远更稳。

今天，就和大家介绍一下，如何使用ChatGPT聊天机器人与Pixso Tokens Studio插件，快速完成设计令牌（Design token）的构建，提升产品设计的工作效率，一起来看看吧~

使用ChatGPT

输出Design token代码

开始之前，先要了解什么是Tokens studio。

Tokens studio 是Pixso中内置的设计开源插件，通过Tokens studio插件可以帮助产品设计师快速完成Design token的创建、编辑、管理，并将其交付给开发。

如果有小伙伴还不了解Design token，这里Pixso设计师简单说一下，Design token是指“设计变量”，是一种将产品的视觉样式参数进行封装的设计体系搭建方法，它能够让产品设计师与开发人员更好地建立统一的视觉描述语言，语义化的命名与管理设计语言的基本元素。

对于有深色模式与浅色模式的界面的产品、主题品牌色切换的产品，通过Design token的方法，能够确保产品的视觉规范统一，实现一键主题色切换，在提升产品设计质量与团队协作方面十分有效。

常用的Design token组成元素包括：颜色、投影、尺寸、间距、字体样式、透明度、圆角等。产品设计师基于这些基础元素，与开发团队充分沟通，整理出一份Design token资产表，然后用文档表格的形式进行记录，最后再对照这个token资产表使用ChatGPT聊天机器人进行json代码生成。

这里Pixso设计师就以基础颜色的Design token命名步骤，给大家进行说明。

第一步：

命名颜色的 Design token

首先与开发团队进行充分沟通，确定颜色token的命名规则。token的命名规则需要与开发团队保持一致，这样才能更好地进行落地。

例如：定义基础色名称为“blue-5"，其对应的色值为“#004FB3”。

为了让其在实际运用场景中，能够更好地被理解与修改，我们将其token定义为“color-primary-active”，即该颜色运用于主要颜色激活的状态场景。

第二步：

使用ChatGPT聊天机器人输出代码

在定义好其颜色的token后，可以直接使用ChatGPT聊天机器人进行json代码输出。比如说，对应上面的颜色定义，对ChatGPT进行提问如下：

“输出一个json字符串，它的属性分别为blue-5与color-primary-active，对应的值是一个属性为value和type的对象，value的值分别为"#004FB3", "{blue-5}"，type为color，这个json字符串是什么”

可获得如下图所示的json代码，然后可点击“copy code”，复制这段代码。

ChatGPT+Tokens Studio

快速完成产品设计

通过ChatGPT聊天机器人获得了对应的token资产表的json代码后，将之前复制的代码粘贴到Pixso插件“Tokens Studio”来对设计文件进行管理，详细的操作步骤如下：

第一步：

进入Pixso编辑器页面，找到插件Tokens Studio

第二步：

运行插件Tokens Studio，将ChatGPT中创建的json代码导入

如下图所示，点击“Tokens Studio”中的大括号图标“{ }”，将ChatGPT聊天机器人中的json代码粘贴进去，点击下方的“保存JSON”按钮。

第三步：

通过Deign token，管理编辑设计文件

如下图所示，点击插件“Tokens Studio”中的“列表”图标，就可以看到导入的颜色token样式了。选择左下角的“应用至页面”，点击右下角“更新”，就可以对设计图的样式进行一键调整啦。

如果想要添加修改相关的token，也可以直接在插件进行编辑。

第四步：

导出json文件进行Design token更新交付

如果你在插件“Tokens Studio”，有更新相关的token，也可以点击插件的“导出”，输出一个JSON文件交付给开发人员进行更新，实现团队高效协作。

以上就是本期与大家分享的使用ChatGPT聊天机器人与Pixso插件快速完成Design token创建的方法，通过Design token的方法可以让产品设计更加高效。

而使用ChatGPT这样的AI工具，可以帮助代码不了解的产品设计师，完成一些简单的代码处理工作，从而让开发团队与产品设计师之间摆脱繁琐与低效的重复沟通，专注更加有价值的地方。

Token Studio有一个非常重要的作用，可以支持设计文中多属性的一键批量切换，这对于设计师去定义多场景下的设计稿来说，十分方便。

① 设计规范定义：通过token定义团队内通用的设计规范：色值，间距，字体，字号等；

② 通用样式调用：在设计稿中调用token以使用通用的设计样式，实现设计稿的一键切换；

③ 样式快速交付给开发：可将不同的token集可创建为的样式以代码的形式交付给开发；

④ 快速修改样式代码：开发通过调用token，实现多元素一键替换属性，不需要针对每个元素进行单独的调整替换。

或扫描下方二维码

加入官方活动交流社群