示例:基于文本的 UI 生成器

该工具根据描述生成基于文本的用户界面。提供完整的源代码供您尝试。

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

生成的输出:

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

以下是您需要在文件中更新的实际 JSON(即 text-based-ux-designer.json)。

{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "受 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 组件)。该应用程序旨在支持由 East Agile 实践的 AI 驱动开发(AiDD)https://eastagile.com。",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "为以下功能或功能生成一个基于文本的用户界面:\n\n功能描述:{{功能描述}}\n用户界面元素:{{UI 组件}}。\n\n请遵循以下最佳实践以创建有效的用户体验写作:\n1. 使其可用:优先考虑功能和易用性,而不是巧妙的语言或非常规设计。\n2. 使其有帮助:提供有用的信息,引导用户并帮助他们实现目标。\n3. 使其可访问:使用简单、清晰的语言和传统设计元素,使所有用户(包括残疾用户)都能轻松理解。\n4. 使其清晰:避免行话和模棱两可;用户应该能够快速、轻松地理解内容和 UI。尽可能,UI 的可操作性应该是不需要阅读文本就能明显看出的。\n5. 使其合适:考虑用户的文化背景和背景(如果提供),确保内容包容且尊重。\n6. 使用主动语态:使用主动、直接的语言鼓励用户采取行动。\n7. 积极写作:专注于肯定陈述,除非绝对必要,避免消极短语。\n8. 简明扼要:保持句子简短、直接,消除不必要的单词和短语。\n9. 进行恒定的 A/B 测试:持续测试和优化内容,以确保其有效且用户友好。\n10. 保持品牌声音和语气一致:确保内容与整体品牌个性一致,并在用户体验中保持一致的语气。\n11. 使用以行动为导向的语言:使用明确、直接且专注于特定任务的语言鼓励用户采取行动。\n12. 保持上下文相关性:提供相关上下文,以确保内容容易本地化和翻译为不同语言和文化。\n\n生成的用户体验写作内容:\n"
}

您可以创建自己的图标并将其作为 base64 文本块输入到此 JSON 中。否则将使用默认的良好样式。

Last updated