構建ChatGPT提示語模板的分步指南，用於編寫更快的設計系統文件。
為設計系統文件建立ChatGPT提示語模板
在過去的六個月裡，我對人工智慧及其在產品設計和設計檔案中的潛力有了很多瞭解。我很好奇這項技術如何能徹底改變我們設計產品的方式。
我在社交媒體上看到的設計師在嘗試了一些專注於視覺設計的工具後上傳的帖子令人驚歎。你沒看錯，我們將不再需要自己建立螢幕，我相信Figma或其他設計工具很快就會增加這種能力。
例如，你可以檢視Elizabeth Alli Youtube上的視訊，她用Uizard應用程式做了一個測試，該應用程式從提示語（包括元件）生成螢幕。
雖然它看起來很接近，但UI元件生成器還不夠好，無法與之配合（我相信它很快就會有一個好的位置）。另一方面，我覺得人工智慧文字工具已經足夠好，可以和它們一起工作，並準備整合到我們的工作流程中。
在文件中融入設計標記、元件庫程式碼和設計指南，並遵守風格指南和設計原則，對於設計師和開發人員之間的一致性和無縫協作至關重要。
雖然編寫設計系統文件對產品設計師來說可能很乏味，但ChatGPT現在可以生成優秀的設計系統文件，簡化了這個過程。
在本指南中，我將告訴你如何為ChatGPT建立提示模板，使你能夠有效地建立每個元件的文件。按照這種方法，你可以簡化文件流程，為你的設計系統產生準確、一致和資訊豐富的內容。
撰寫有效的ChatGPT提示語
編寫元件文件的提示很容易，包括3個部分，涵蓋所有必要的UI元素的細節。
1. 要求ChatGPT充當產品設計師
您可以將ChatGPT配置成您所希望的專業人士的樣子。通過這樣做，ChatGPT會給你更準確的結果。
如:
Act like a product designer that needs to create a design system documentation for a product.
2. 概述希望ChatGPT生成的關鍵資訊
每個元件都有自己的需求，但一般來說，我們將永遠需要基本的東西：
- Overview of the component：元件的概述
- Usage：使用方法
- Anatomy：解剖
- Variants：變體
- Sizes：尺寸
- Do and Don’t：做與不做
*Tip：別忘了，每個設計系統都是不同的，所以在要求ChatGPT生成檔案之前，有必要了解你的要求。
下面是提示語參考：
Generate design system documentation for the Button component. Please include these topics:-Overview of the component-Usage-Anatomy-Variants-Sizes-Do and Don't
3. 新增關於設計系統的具體資訊
ChatGPT需要有關您的使用者介面元素和模式庫的資訊，以便為您的設計系統生成定製的文件。通過提供這些資訊，ChatGPT可以根據您的具體需求製作出一份檔案。
比如說
-按鈕可以包括圖示嗎？ -標籤可以用大寫字母書寫嗎？
下面是提示語示例：
Here is information about the button in my design system.-The button comes in two sizes S(40px height) and L(48px height).-The color of the text is white.-The background color is dark green.-The button can only have an icon on the left side of the text.
*Tip：你給ChatGPT的資訊越多，檔案就越能準確地滿足你的需要。
更多其他技巧
要求以表格形式生成內容
在你的ChatGPT提示中要求一個表格，可以幫助你以清晰和有組織的方式結構資訊，使你更容易理解資訊。
例如，你可以要求它在一個表格中生成設計系統tokens。
生成一個表格
要求生成帶標題和子標題的文件
告訴ChatGPT用標題（H1、H2、H3……）來生成檔案，這有助於組織生成的內容，提高可讀性。清晰的標題使您更容易閱讀內容。
生成標題和子標題（H1, H2, H3）的文件
可以要求提供更多資訊
如果您願意，您可以向ChatGPT索取更多關於某個主題的資訊。例如，如果您要求，ChatGPT會給您更多的做和不做的分數。只要問一下就可以了。
你可以這樣問：
Write more do and don't points.
要求ChatGPT”繼續”補充不完整內容
ChatGPT有時會停止寫大檔案。只要你輸入 “繼續（Continue）”，它就會繼續寫文字。
要求ChatGPT繼續補充完整
一鍵複製生成程式碼示例
除了選擇和複製文字外，ChatGPT還可以將文字寫在一個程式碼框內。這樣做可以讓您通過點選 “Copy code” 按鈕，一鍵複製程式碼。
要做到這一點，請ChatGPT將文字寫在程式碼框內。
一鍵從程式碼框中複製
儲存提示語模板
儲存你的提示模板可以在未來的文件工作中方便地重複使用和修改。
這有助於保持整個設計系統文件的一致性，並簡化更新或建立另一個元件的提示。
例如，如果你想為一個切換元件建立一個文件，文件的基本內容是相同的。但是，你可以要求ChatGPT多生成一個部分，解釋toggle、radio button和checkbox的區別。
以下是一個完整模板的例子
Act like a product designer that needs to create a design system documentation for a product.Generate design system documentation for the Button component. Please include these topics:-Overview of the component-Usage-Anatomy-Variants-Sizes-Do and Don'tHere is information about the button in my design system.-The button comes in two sizes S(40px height) and L(48px height).-The color of the text is white.-The background color is dark green.-The button can only have an icon on the left side of the text.More information:-Write the document with titles and subtitles (H1, H2...)
不要複製和貼上的結果
ChatGPT可以快速生成內容，但仍然需要人的判斷，因為它有時會發明輪子，生成不準確的資訊；正因為如此，你應該檢查結果，確保它們對你的情況是正確的。
確定ChatGPT生成的資訊的最好方法是檢視現有的設計系統檔案，如Material Design、Clarity Design System或其他品牌的特定指南，這些檔案可以提供有價值的見解和知識，幫助你塑造檔案。
為你的設計系統需求提供個性化的結果
你可能需要審查和調整生成的內容，以確保它滿足你特定的使用者體驗需求並遵守你的使用者體驗指南。
例如，有時，人工智慧可能包括一般的最佳實踐，但可能與你的設計系統不相關。例如，它可能建議按鈕標籤要短，但你認為這是基本的知識，沒有必要包括在檔案中。
小結
在這篇文章中，我想告訴你如何為ChatGPT建立一個模板，你可以用它來建立設計系統文件。
首先，我解釋了模板的3個部分：
- 像一個設計師一樣行事。
- 概述關鍵資訊。
- 新增你的具體細節。
接下來，我分享了一些你可以用來建立文件的技巧和竅門。例如，你可以使用表格或要求ChatGPT用標題和字幕來編寫檔案。
最後，我們討論了為什麼不建議按原樣使用ChatGPT生成的檔案，以及為什麼要修改資訊以確保它完全準確地滿足您的具體需求。
感謝你閱讀這篇文章。我希望這篇文章能幫助您瞭解如何用ChatGPT建立提示模板來生成設計系統文件。請隨時與您的朋友或團隊成員分享，如果您有任何問題，請告訴我。
評論留言