# 示例：基于文本的 UI 生成器

我们是 AI 驱动开发的倡导者，实践者为 <https://eastagile.com。为了支持这一点，我们使用> AI 来帮助我们开发用户界面。该工具根据描述和（可选）对某些用户界面元素的请求生成基于文本的用户界面。该工具的提示要求设计元素以及适当的 UI 文本。\
\
这个例子作为一个具体且实用的工具示例，展示了一个可以在团队中创建和部署的工具。\
\
以下是其使用示例。\
\
用户输入：

<figure><img src="https://3281534889-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8OsLqa0GcuPS5rI92Zvz%2Fuploads%2Fgit-blob-517f8d25882116da01e7c6de6ea5c0518240e732%2Ftext-based-UI-generator-sample-input.png?alt=media" alt="基于文本的 UI 生成器示例输入"><figcaption><p>使用指定输入字段的示例输入。</p></figcaption></figure>

生成的输出：

<figure><img src="https://3281534889-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8OsLqa0GcuPS5rI92Zvz%2Fuploads%2Fgit-blob-86fea5d4d67be72b0941bc9953ccd7d3809f01f8%2Ftext-based-UI-generator-output.png?alt=media" alt="基于文本的 UI 生成器输出"><figcaption><p>由我们的应用生成的基于文本的用户界面。</p></figcaption></figure>

您可以在 Genstudio 中添加自定义工具的 json。

<figure><img src="https://3281534889-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8OsLqa0GcuPS5rI92Zvz%2Fuploads%2Fgit-blob-313397082d39fdc5b020861efdc05a69221cc94a%2Fupload-custom-tool.png?alt=media" alt="上传自定义工具"><figcaption><p>上传 json 以定义自定义工具</p></figcaption></figure>

\
\
这是您将在文件中更新的实际 json（即 text-based-ux-designer.json）。

```json
{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "Inspired by Khoa Tran",
"email": "admin@eastagile.com",
"organization": "East Agile"
},
"timestamp": "2023-06-01T10:00:00Z",
"variables": [
{
"name": "功能描述",
"type": "text",
"default": "",
"description": "功能或特性的简要描述。"
},
{
"name": "UI 组件",
"type": "text",
"default": "任何合适且常规的",
"description": "用户界面组件的类型（例如，单选按钮，多选列表）。"
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "该工具根据您的描述和指定的用户界面组件生成基于文本的用户界面。",
"prompt_name": "基于文本的用户界面生成器",
"usage_notes": "提供您想要生成的界面、功能或应用的描述（功能描述）以及您希望使用的任何特定类型的用户界面元素（UI 组件）。该应用旨在支持 AI 驱动开发（AiDD），由 East Agile 实践 https://eastagile.com。",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "生成以下功能或特性的基于文本的用户界面：\n\n功能描述：{{功能描述}}\n用户界面元素：{{UI 组件}}。\n\n请遵循以下最佳实践以创建有效的 UX 文案：\n1. 使其可用：优先考虑功能性和易用性，而不是巧妙的语言或非常规设计。\n2. 使其有帮助：提供有用的信息，引导用户并帮助他们实现目标。\n3. 使其可访问：使用简单、清晰的语言和常规设计元素，使所有用户（包括残疾人士）都能轻松理解。\n4. 使其清晰：避免行话和模糊；用户应该能够快速轻松地理解内容和 UI。当可能时，UI 的可用性应显而易见，无需阅读文本。\n5. 使其适当：考虑用户的文化背景和上下文（如果提供），确保内容具有包容性和尊重性。\n6. 使用主动语态：通过使用主动、直接的语言促使用户采取行动。\n7. 积极书写：专注于肯定的陈述，除非绝对必要，否则避免使用消极短语。\n8. 简洁：保持句子简短且切中要点，消除不必要的词语和短语。\n9. 进行持续的 A/B 测试：不断测试和优化内容，以确保其有效且用户友好。\n10. 保持品牌声音和语调一致：确保内容与整体品牌个性一致，并在用户体验中保持一致的语调。\n11. 使用以行动为导向的语言：通过使用清晰、直接且专注于特定任务的语言，鼓励用户采取行动。\n12. 保持上下文相关性：提供相关上下文，以确保内容易于本地化和翻译为不同语言和文化。\n\n生成的 UX 文案内容：\n"
}

```

您可以创建自己的图标并将其作为 base64 文本块输入到此 json 中。否则，将使用一个不错的默认值。