有ChatGPT的帮助轻松搭建设计系统

Sponsor

背景：公司业务线多，产品也多，之前一直在用开源的规范，为了更好的贴合业务未来发展，现准备搭建自己的设计系统（不完全摒弃开源的规范）

为了提示效率，尝试用ChatGPT辅助搭建设计系统，目前主要使用在“设计原则”和“基础规范”部分。

一、ChatGPT编写设计原则

步骤1：根据系统调性选出设计价值观，例如“简约的（Simplicity）

步骤2：在ChatGPT中生成设计原则

先让ChatGPT扮演一名角色：

“我希望你担任 UX/UI 设计师。你的工作就是搭建UI设计系统，你可以参考IBM或SAP等大公司的设计规范。我的第一个请求是：给设计价值观“简约的”一词编写清晰的描述，并且写出特点、应用时应注意什么和最佳实践3个链接”

下面是ChatGPT的回答：

不得不说，写得还可以，你还可以直接让它给出案例。

光有文案太单调了，我们想添加一张城市图片，以此体现简约的，那么就要用到生图工具Midjourney。

直接让ChatGPT生成城市图片描述，选取价值观描述部分作为提示词，这样问：

根据“简约的”一词的含义，生成一段关于城市图片的描述语，“简约的”含义是：一种注重简洁、清晰和直观的设计风格，强调去除多余的元素和复杂性，以提供用户友好的体验。”

ChatGPT的回答：

把这段翻译成英文，然后给到Midjourney，这里的提示词是：

This is a minimalist picture of the city. It presents a simple, clear and intuitive style that allows the viewer to quickly understand and feel the charm of the city. In this image, elements are carefully selected and laid out without superfluous decoration or cluttered details. Buildings, roads and landscapes are simplified to their core form, presenting the basic features of the city. Interaction logic is also simplified, and the viewer can easily understand the layout and organization of the city through simple visual cues and organization –aspect 3:2

Midjourney生成：

第四张跟描述蛮符合的，放大后：

这样就得到了设计原则的文案和配图，根据这个步骤可以生成其他价值观的文案和配图。

二、ChatGPT编写组件规范

我们先来对标下大厂IBM的组建规范（文章底部附有链接），它主要的用法包括以下几个部分：

1、概述

2、何时使用

3、何时不使用

4、类型

5、解剖

6、放置

7、状态

8、交互行为

下面以“面包屑”导航为例，这样描述：

为“面包屑”导航组件写一份设计系统组件文档。描述以下几点：概述，何时使用，何时不使用，类型，解剖，放置，状态和交互行为。添加3个该组件的最佳实践的链接。

添加一个表格，列出该组件的交互状态（默认、悬停、激活、聚焦、禁用），并描述：元素、状态、属性。

ChatGPT的回答：

我个人认为写得还可以，不过和IBM对比有一定差距，而且ChatGPT生成的不一定满足业务需要，还需要对内容进行调整。总体来说，的确可以大大提升设计系统搭建的效率，尤其当参与制定的人很少时。

结语：目前团队也在探索chatgpt中，后续工作用到chatgpt时，会继续更新～

作者：Pursid

来源：UI中国

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。