# 範例：基於文本的 UI 生成器

我們是 AI 驅動開發的倡導者，這一做法由 <https://eastagile.com> 提供支持。為了支持這一點，我們使用 AI 來幫助我們開發用戶界面。這個工具根據描述和（可選）對某些用戶界面元素的請求生成基於文本的用戶界面。該工具的提示要求設計元素以及適當的 UI 文本。\
\
這個範例作為一個具體且實用的工具示例，展示了可以在團隊中創建和部署的工具。\
\
以下是其使用示例。\
\
用戶輸入：

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

生成的輸出：

<figure><img src="https://792239878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDpjOuj6vh9iG28BJUH22%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://792239878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDpjOuj6vh9iG28BJUH22%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 中。否則將使用一個不錯的默認值。