最近，以 chatgpt 為代表的 AI 被吵的特別火爆，類似“AI 是新一次工業革命”“AI 改變世界”的言論甚囂塵上，但是，大部分人只是嘗鮮用了幾次后，就不再使用了，對 chatgpt 的感覺是：很厲害，但沒什么用。

我前段時間也有在玩 AI，個人的感覺，chatgpt 確實極大地提高了我們的生產力，例如，使用 chatgpt 進行翻譯，目前 chatgpt 的翻譯比絕大部分的機翻都要好；還有我們可以用 chatgpt 來幫我們理解某個概念，幫我們制定健身計劃，某個學科的學習步驟等等。

而后來我想到，針對于設計師的工作場景是否可以使用 ChatGPT 來幫我們寫設計系統文檔，設計系統和 ChatGPT 兩個生產力工具結合在一起，是否會迸發出不一樣的火花？

在文章開始之前，我先提出三個問題：

為了高效閱讀，大家可以帶著這三個問題閱讀文章，在閱讀結束后，大家可以回頭想一想，這幾個問題是否已經有答案了。

更多ChatGPT 干貨：

一、設計系統文檔

1. 設計系統

在介紹設計系統文檔之前，我們先聊一下什么是設計系統。在設計系統的范疇內，很多同學總是「設計系統」「設計規范」「組件庫」「設計語言」等概念傻傻分不清楚。

我們這里把范圍從小到大分別解釋一下，幫助大家厘清這些概念。

設計語言：包括字體、色彩、間距、圓角、布局等在內的基礎視覺元素。

組件庫：一個由 UI 組件按照一定的結構和順序組織起來的集合。這些 UI 組件可以是按鈕、文本框、下拉菜單等等，它們被設計成可以重復使用的模塊，可以在不同的應用程序或頁面中使用。

設計原則：即整個設計規范所要遵循的全局規則，為設計提供方向指導。例如 ant design 的設計原則就是：自然，確定性，意義感，生長性。

設計規范：設計語言、組件庫、設計原則組合起來稱為設計規范。

設計系統文檔：對設計規范的解釋說明，具體而言，這個文檔詳細解釋了某樣東西為什么是這樣的，以及何時和如何使用它。

設計系統：設計規范和設計系統文檔合稱為設計系統。

而當我們捋清楚這些概念后，就會發現長期以來我們對于設計系統的理解存在誤解。很多時候，我們所做的所謂設計系統實際上只能稱為組件庫。

關于設計規范，由于不屬于本文重點，且較為基礎，故不在此贅述。

2. 設計系統文檔的價值

1. 傳遞信息：文檔可以將設計系統的信息傳遞給其他團隊成員，包括開發人員、測試人員和其他設計師。這有助于確保所有人都了解設計系統的目的和功能。
2. 統一視覺風格：文檔可以確保設計系統的所有元素都符合同一視覺風格。這有助于確保設計系統的一致性和可識別性。
3. 提高效率：文檔可以為其他團隊成員提供有關如何使用設計系統的詳細信息。這有助于減少溝通成本并提高效率。
4. 管理變更：文檔可以幫助管理設計系統的變更。這有助于確保所有變更都得到記錄和審查，從而減少錯誤和不一致性。
5. 促進協作：文檔可以促進設計師之間的協作。借助一些在線文檔工具，設計師可以共享設計系統的信息和想法，從而提高設計系統的質量和效率。

3. 怎么寫設計系統文檔

①需要考慮的方面

1. 目標受眾：設計系統文檔的受眾包括設計師、開發人員、產品經理等，需要考慮不同受眾的需求和背景，選擇合適的語言和表達方式。
2. 文檔結構：設計系統文檔應該具備清晰的結構，包括導言、設計原則、組件庫、樣式指南、交互指南、設計模板等內容。
3. 圖片和示例：設計系統文檔需要配合圖片和示例來解釋設計原則和組件使用方法，以便于讀者理解和使用。
4. 規范和標準：設計系統文檔應該包含規范和標準，以確保組件的一致性和可復用性。
5. 更新和維護：設計系統文檔需要定期更新和維護，以反映最新的設計趨勢和技術發展，并保證文檔的準確性和完整性。

②設計系統文檔的組成部分

正如前文所言，文檔是任何規模設計系統的必備工具。它使每個人都可以快速有效地做出一致的決策。如果我們可以提供詳細的文檔來支持設計系統的各個方面，就會發現使用者很快就可以上手這套設計系統。

但是，為了充分發揮文檔的作用，設計系統絕不能簡單地描述樣式或組件規格。以下是我們可以添加到文檔中的內容列表：

基礎介紹

即對這個組件的基礎介紹，介紹這個組件的定義與功能

詳細內容

對組件的詳細介紹，包括組件的元素構成與不同規格，例如不同尺寸等，也就是我們 figma 里組件的變體。

如何使用

即這個組件的使用場景，何時使用，何時不使用

相關內容

這里可以放一些相關組件，或者其他關于這個組件的更多介紹

FAQ

FAQ 是"常見問題解答"的縮寫，放一些針對這個組件常見的問題和解答，以便用戶能夠快速找到答案并解決問題。

更新時間

更新時間的作用是記錄這個組件及其對應的設計系統文檔的最新更新時間。

當然，以上這些不是每個部分都有，可以根據實際情況進行增刪。

③實例

當然，從純粹的理論角度來看，很難想象設計系統文檔和設計規范是如何協同工作的，因為缺乏上下文的背景，我們這里以顏色和按鈕為例，來分別演示一下設計語言和組件庫，這里先演示下在不用 ChatGPT 輔助的情況下如何寫。

色彩

正如前文所述，設計系統的本質是與其他設計師以及開發人員更好地配合。在色彩的部分中，需要包括這些內容：

1. 基礎定義
2. 色板
3. 應用指南-- token
4. 使用注意事項
5. 相關內容
6. 更新時間

接下來，我們看一下每個部分的內容。

1）基礎定義

一個產品的顏色由主題色、中性色和輔助色構成，而主題色、中性色和功能色會根據當前界面的深淺模式而變動。

主題色：它是在UI界面和組件中顯示最核心的顏色，展示界面的主要或重要的元素。

中性色：不用于強調功能也不用于強調功能性信息的顏色，例如背景色，明暗模式，文字，空間劃分等。常用色是黑白灰。

功能色：用于強調界面中的元素。輔助色僅作為強調和突出，應慎重使用。輔助色也可以選擇主題色的深色和淺色變體來用于界面元素對比。如數據圖，插圖等。其中，最常用的輔助色是功能色。功能色有成功、出錯、失敗、提醒、鏈接等。選取功能色時需符合用戶對顏色的基本認知，例如看到綠色符號一般就知道操作成功，而并不需要讀完所有的文字。

色彩模型：在本系統中采用 HTC 色彩模型進行設計，該模型更便于設計師在調整色彩時對于顏色有明確的心理預期，同時也方便團隊間的溝通。

2）色板

3）使用指南

為了方便閱讀和使用，我們這里定義了色彩 token，分為全局 token，別名 token 以及組件 token，token 之間層層嵌套，方便調用和后期調整。

具體定義和嵌套形式如下圖：

4）注意事項

5）相關內容

這里可以放一些相關的其他文檔的鏈接

HTC 模型簡介及顏色推導（HTC 模型是谷歌提出的一個色彩模型，顏色的推導方式有很多種，例如透明疊色、等序差值等，筆者探索后使用 HTC 模型是目前的最優方案，由于不是本文重點，故不在此贅述，大家感興趣的話，以后可以專門寫一篇色彩指南））

6）更新時間

2023/05/27 05:14:13 AM

按鈕

1）基礎定義

按鈕可以讓用戶執行某個操作或者跳轉到另一個頁面。它們有多種不同的樣式，以滿足不同的需求，并且可以用來引起用戶的注意，提示他們需要在哪里進行操作以便在流程中繼續前進。

解構

2）屬性變體

尺寸：S，高度為 24px；M，高度為 32px；L，高度為 40px

類型：主要按鈕；次要按鈕；文字按鈕

狀態：正常狀態；焦點狀態；懸停狀態；活動狀態或按下狀態；進度/加載狀態；禁用狀態

3）使用指南

1. 按鈕的樣式需要有可點擊的能供性；
2. 用戶能從按鈕上清晰得預測出行為結果。

4）更新時間

2023/05/28 11:14:13 AM

在看了上面的兩個實例后，我們大概可以知道設計系統中的組件&樣式的設計系統文檔該如何寫了

二、ChatGPT

盡管設計系統文檔對于設計人員和開發人員之間的一致性和無縫協作至關重要，但是編寫設計系統文檔是一件非常乏味的任務。然而現在有了 ChatGPT，可以非常輕松地輕松生成非常優質的設計系統文檔，進而簡化流程。

1. 編寫有效的聊天提示

無論是問 ChatGPT 什么內容，我們給出的提示的形式都是一致的，角色+內容+補充提示。將這個模板代入到設計系統文檔中，就是這三個部分：

①賦予其設計師的角色

我們可以將 ChatGPT 設置成某種職業人士，通過這樣做，ChatGPT 給出的答案會更精準。

我們可以用這樣的句式來發出指令：

假如你現在是一名 UI 設計師。

②敘述需要包含的內容

這塊就需要我們在上文總結過的知識了，所有的設計系統文檔都必定包含且通用的內容有，基礎介紹，詳細內容，使用場景，相關內容。

提示示例如下：

請為按鈕組件生成設計系統文檔。其中包括以下主題：基礎介紹，詳細內容，使用場景，相關內容。

③補充自己設計系統的特定信息

我們需要為 ChatGPT 提供一些我們設計系統的特定信息，以便生成適合我們的自定義文檔。

例如，按鈕的尺寸，顏色等。

下面是提示符的一個示例：

請注意：按鈕有三個尺寸，分別是 S(24px)，M(32px)，L(40px)

按鈕有四個狀態，分別是默認，懸停，按下，禁用。

按鈕有兩種類型，分別是主按鈕，次按鈕

以下是完整的提示示例：

假如你現在是一名 UI 設計師，請為按鈕組件生成設計系統文檔。其中包括以下主題：基礎介紹，詳細內容，使用場景，相關內容。請注意：按鈕有三個尺寸，分別是 S(24px)，M(32px)，L(40px) 按鈕有四個狀態，分別是默認，懸停，按下，禁用。按鈕有兩種類型，分別是主按鈕，次按鈕。

2. 按實際情況進行微調

盡管 ChatGPT 可以快速生成文檔，但有時候它會寫一些重復的車轱轆話或者生成不準確的信息。所以，我們有必要對生成結果進行檢查并調整。

作為一位用戶體驗設計師，我越來越感受到設計系統對于提高用戶體驗的重要性。最近，我開始重讀 Adobe 的設計系統，并發現它是 B 端中最完善且專業的設計系統之一。因此，我會繼續深入閱讀，并將這些學習到的知識應用到我的設計工作中。

歡迎關注作者微信公眾號：「JIN石為KAI」