构建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创建提示模板来生成设计系统文档。请随时与您的朋友或团队成员分享，如果您有任何问题，请告诉我。
评论留言