範例:基於文本的 UI 生成器

此工具根據描述生成基於文本的用戶界面。提供完整的源代碼供您試用。

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

生成的輸出:

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

以下是您需要在文件中更新的實際 json(即 text-based-ux-designer.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 元件)。此應用旨在支持由 East Agile https://eastagile.com 實踐的 AI 驅動開發 (AiDD)。",
"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 中。否則,將使用一個很好的默認值。

Last updated