Beispiel: Textbasierten UI-Generator

Dieses Tool generiert eine textbasierte Benutzeroberfläche basierend auf der Beschreibung. Der vollständige Quellcode wird bereitgestellt, damit Sie ihn ausprobieren können.

Wir sind Befürworter der KI-gesteuerten Entwicklung, wie sie von https://eastagile.com praktiziert wird. Um dies zu unterstützen, nutzen wir KI, um Benutzeroberflächen zu entwickeln. Dieses Tool generiert eine textbasierte Benutzeroberfläche basierend auf einer Beschreibung und einer (optional) Anfrage nach bestimmten Benutzeroberflächenelementen. Der Prompt für das Tool fragt nach Designelementen sowie passendem UI-Text. Dieses Beispiel wird als konkretes und praktisches Beispiel für ein Tool präsentiert, das man innerhalb seines Teams erstellen und bereitstellen könnte. Hier ist ein Beispiel für die Verwendung. Benutzereingabe:

Beispielhafte Eingabe unter Verwendung der angegebenen Eingabefelder.

Generierte Ausgabe:

Eine textbasierte Benutzeroberfläche mit Text, der von unserer App generiert wurde.

Sie fügen Ihr benutzerdefiniertes Tool-JSON in Genstudio hinzu.

JSON hochladen, um ein benutzerdefiniertes Tool zu definieren

Hier ist das tatsächliche JSON, das Sie in einer Datei (d.h. text-based-ux-designer.json) aktualisieren würden.

{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "Inspiriert von Khoa Tran",
"email": "[email protected]",
"organization": "East Agile"
},
"timestamp": "2023-06-01T10:00:00Z",
"variables": [
{
"name": "Funktionsbeschreibung",
"type": "text",
"default": "",
"description": "Eine kurze Beschreibung der Funktion oder Funktionalität."
},
{
"name": "UI-Komponenten",
"type": "text",
"default": "Alles Angemessene und Konventionelle",
"description": "Die Art der Benutzeroberflächenkomponenten (z.B. Optionsfeld, Mehrfachauswahl-Liste)."
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "Dieses Tool generiert eine textbasierte Benutzeroberfläche basierend auf Ihrer Beschreibung und den angegebenen Benutzeroberflächenkomponenten.",
"prompt_name": "Textbasierter Benutzeroberflächen-Generator",
"usage_notes": "Geben Sie eine Beschreibung an, welche Art von Oberfläche, Funktion oder App Sie generieren möchten (Funktionsbeschreibung) und welche spezifischen Arten von Benutzeroberflächenelementen Sie verwenden möchten (UI-Komponenten). Diese Anwendung ist darauf ausgelegt, die KI-gesteuerte Entwicklung (AiDD) zu unterstützen, wie sie von East Agile https://eastagile.com praktiziert wird.",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "Generieren Sie eine textbasierte Benutzeroberfläche mit Formulierungen für die folgende Funktion oder Funktionalität:\n\nFunktionsbeschreibung: {{Funktionsbeschreibung}}\nBenutzeroberflächenelemente: {{UI-Komponenten}}.\n\nBitte befolgen Sie diese Best Practices für effektives UX-Design:\n1. Machen Sie es benutzbar: Priorisieren Sie Funktionalität und Benutzerfreundlichkeit über cleveren Sprachgebrauch oder unkonventionelles Design.\n2. Machen Sie es hilfreich: Geben Sie nützliche Informationen, die Benutzer anleiten und ihnen helfen, ihre Ziele zu erreichen.\n3. Machen Sie es zugänglich: Verwenden Sie einfache, klare Sprache und konventionelle Designelemente, die es allen Benutzern, einschließlich Menschen mit Behinderungen, erleichtern, zu verstehen.\n4. Machen Sie es klar: Vermeiden Sie Fachjargon und Mehrdeutigkeit; Benutzer sollten den Inhalt und die UI schnell und einfach verstehen können. Wenn möglich, sollten UI-Affordances offensichtlich sein, ohne dass Text gelesen werden muss.\n5. Machen Sie es angemessen: Berücksichtigen Sie den kulturellen Hintergrund und Kontext Ihrer Benutzer, falls vorhanden, und stellen Sie sicher, dass der Inhalt inklusiv und respektvoll ist.\n6. Verwenden Sie die aktive Stimme: Fordern Sie die Benutzer auf, Maßnahmen zu ergreifen, indem Sie aktive, direkte Sprache verwenden.\n7. Schreiben Sie positiv: Konzentrieren Sie sich auf affirmative Aussagen und vermeiden Sie negative Formulierungen, es sei denn, es ist absolut notwendig.\n8. Seien Sie prägnant: Halten Sie Sätze kurz und auf den Punkt, indem Sie unnötige Wörter und Phrasen eliminieren.\n9. Führen Sie ständige A/B-Tests durch: Testen und verfeinern Sie kontinuierlich den Inhalt, um sicherzustellen, dass er effektiv und benutzerfreundlich ist.\n10. Halten Sie die Markenstimme und den Ton konsistent: Stellen Sie sicher, dass der Inhalt mit der Gesamtmarkenpersönlichkeit übereinstimmt und einen konsistenten Ton während der gesamten Benutzererfahrung beibehält.\n11. Verwenden Sie handlungsorientierte Sprache: Ermutigen Sie die Benutzer, Maßnahmen zu ergreifen, indem Sie klare, direkte Sprache verwenden, die sich auf spezifische Aufgaben konzentriert.\n12. Behalten Sie die kontextuelle Relevanz bei: Geben Sie relevanten Kontext an, um sicherzustellen, dass der Inhalt leicht lokalisiert und übersetzt werden kann für verschiedene Sprachen und Kulturen.\n\nGenerierter UX-Textinhalt:\n"
}

Sie könnten Ihr eigenes Symbol erstellen und es als base64-Blocktext in dieses JSON eingeben. Andernfalls wird ein schönes Standard-Symbol verwendet.