例: テキストベースの UI ジェネレーター

このツールは、説明に基づいてテキストベースのユーザーインターフェースを生成します。試すための完全なソースコードが提供されています。

私たちは、https://eastagile.com によって実践されているAI駆動の開発の支持者です。それを支援するために、AIを使用してユーザーインターフェースを開発する手助けをしています。このツールは、説明と特定のユーザーインターフェース要素の(オプションの)リクエストに基づいてテキストベースのユーザーインターフェースを生成します。ツールへのプロンプトは、デザイン要素と適切なUIテキストを要求します。 この例は、チーム全体で作成および展開するかもしれないツールの具体的で実用的な例として提示されています。 以下は、その使用例です。 ユーザー入力:

生成された出力:

あなたは、Genstudio内にカスタムツールの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": "Feature Description",
"type": "text",
"default": "",
"description": "機能または機能の簡潔な説明。"
},
{
"name": "UI Components",
"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機能の説明: {{Feature Description}}\nユーザーインターフェース要素: {{UI Components}}。\n\n効果的なUXライティングを作成するためのベストプラクティスに従ってください:\n1. 使用可能にする:巧妙な言語や独創的なデザインよりも機能性と使いやすさを優先する。\n2. 助けになる:ユーザーを導き、目標を達成するのに役立つ有益な情報を提供する。\n3. アクセス可能にする:すべてのユーザーが理解しやすいように、シンプルで明確な言葉と一般的なデザイン要素を使用する。特に障害のある人も含めて。\n4. 明確にする:専門用語や曖昧さを避ける。ユーザーは、コンテンツとUIを迅速かつ容易に理解できる必要があります。可能な限りUIの便宜性は、テキストを読む必要なく明らかにすべきです。\n5. 適切にする:ユーザーの文化的背景や文脈を考慮し、提供された場合は、内容が包括的で敬意を表するものであることを保証します。\n6. 能動態を使用する:能動的で直接的な言葉を使用して、ユーザーに行動を促します。\n7. 肯定的に書く: affirmativな文に焦点を当て、絶対に必要でない限り否定的なフレーズを避けます。\n8. 簡潔にする:文を短くし、要点をまとめて不要な言葉やフレーズを排除します。\n9. 常にA/Bテストを実施する:コンテンツが効果的でユーザーフレンドリーであることを確実にするために、継続的にテストと洗練を行います。\n10. ブランドの声とトーンを一貫させる:コンテンツが全体のブランドの個性に沿い、ユーザーエクスペリエンス全体にわたって一貫したトーンを維持することを保証します。\n11. 行動を促す言葉を使用する:クリアで直接的に特定のタスクに焦点を合わせた言語を使用することで、ユーザーに行動を促します。\n12. 文脈の関連性を維持する:コンテンツが異なる言語や文化に対して容易にローカライズおよび翻訳できるように、関連する文脈を提供します。\n\n生成されたUXライティングコンテンツ:\n"
}

独自のアイコンを作成し、これをjsonにbase64テキストのブロックとして入力することができます。さもなくば、素敵なデフォルトが使用されます。

最終更新