Exemple : Générateur d'interface utilisateur basé sur du texte
Cet outil génère une interface utilisateur textuelle basée sur la description. Le code source complet est fourni pour que vous puissiez l'essayer.
Nous sommes des défenseurs du développement piloté par l'IA tel que pratiqué par https://eastagile.com. Pour soutenir cela, nous utilisons l'IA pour nous aider à développer des interfaces utilisateur. Cet outil génère une interface utilisateur basée sur du texte en fonction de la description et d'une demande (optionnelle) pour certains éléments d'interface utilisateur. L'invite pour l'outil demande des éléments de conception ainsi que du texte d'interface utilisateur approprié.
Cet exemple est présenté comme un exemple concret et pratique d'un outil que l'on pourrait créer et déployer au sein de votre équipe.
Voici un exemple de son utilisation.
Entrée de l'utilisateur :
Exemple d'entrée utilisant les champs d'entrée spécifiés.
Sortie générée :
Une interface utilisateur basée sur du texte avec du texte généré par notre application.
Vous ajoutez votre json d'outil personnalisé à l'intérieur de Genstudio.
Téléchargez le json pour définir un outil personnalisé
Voici le json réel que vous mettriez à jour dans un fichier (c'est-à-dire text-based-ux-designer.json).
Vous pourriez créer votre propre icône et l'entrer sous forme de bloc de texte base64 dans ce json. Sinon, un joli défaut sera utilisé.
{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "Inspiré par Khoa Tran",
"email": "[email protected]",
"organization": "East Agile"
},
"timestamp": "2023-06-01T10:00:00Z",
"variables": [
{
"name": "Description de la fonctionnalité",
"type": "text",
"default": "",
"description": "Une brève description de la fonctionnalité ou de la fonctionnalité."
},
{
"name": "Composants UI",
"type": "text",
"default": "Tout ce qui est approprié et conventionnel",
"description": "Le type de composants d'interface utilisateur (par exemple, bouton radio, liste multi-sélection)."
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "Cet outil génère une interface utilisateur basée sur du texte en fonction de votre description et des composants d'interface utilisateur spécifiés.",
"prompt_name": "Générateur d'interface utilisateur basée sur du texte",
"usage_notes": "Fournissez une description du type d'interface, de fonctionnalité ou d'application que vous souhaitez générer (Description de la fonctionnalité) et tout type spécifique d'éléments d'interface utilisateur que vous souhaitez utiliser (Composants UI). Cette application est conçue pour soutenir le développement piloté par l'IA (AiDD) tel que pratiqué par East Agile https://eastagile.com.",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "Générez une interface utilisateur basée sur du texte avec un wording pour la fonctionnalité ou la fonctionnalité suivante :\n\nDescription de la fonctionnalité : {{Feature Description}}\nÉléments d'interface utilisateur : {{UI Components}}.\n\nVeuillez suivre ces meilleures pratiques pour créer un écriture UX efficace :\n1. Rendez-le utilisable : Priorisez la fonctionnalité et la facilité d'utilisation plutôt que le langage astucieux ou le design non conventionnel.\n2. Rendez-le utile : Fournissez des informations utiles qui guident les utilisateurs et les aident à atteindre leurs objectifs.\n3. Rendez-le accessible : Utilisez un langage simple et clair et des éléments de design conventionnels qui facilitent la compréhension pour tous les utilisateurs, y compris ceux ayant des handicaps.\n4. Rendez-le clair : Évitez le jargon et l'ambiguïté ; les utilisateurs devraient pouvoir comprendre le contenu et l'interface utilisateur rapidement et facilement. Lorsque cela est possible, les affordances de l'interface utilisateur devraient être évidentes sans avoir besoin de lire le texte.\n5. Rendez-le approprié : Tenez compte du contexte culturel et de l'arrière-plan de vos utilisateurs, si fourni, et assurez-vous que le contenu est inclusif et respectueux.\n6. Utilisez la voix active : Incitez les utilisateurs à agir en utilisant un langage actif et direct.\n7. Écrivez positivement : Concentrez-vous sur des déclarations affirmatives et évitez les phrases négatives sauf si absolument nécessaire.\n8. Soyez concis : Gardez les phrases courtes et précises, en éliminant les mots et phrases inutiles.\n9. Effectuez des tests A/B constants : Testez et affinez continuellement le contenu pour garantir son efficacité et sa convivialité.\n10. Gardez la voix et le ton de la marque cohérents : Assurez-vous que le contenu s'aligne avec la personnalité globale de la marque et maintient un ton cohérent tout au long de l'expérience utilisateur.\n11. Utilisez un langage orienté vers l'action : Encouragez les utilisateurs à agir en utilisant un langage clair, direct et axé sur des tâches spécifiques.\n12. Maintenez la pertinence contextuelle : Fournissez un contexte pertinent pour garantir que le contenu est facilement localisable et traduisible pour différentes langues et cultures.\n\nContenu d'écriture UX généré :\n"
}
