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 d'une description et d'une demande (optionnelle) pour certains éléments d'interface utilisateur. Le prompt pour l'outil demande des éléments de conception ainsi qu'un texte d'UI 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 :
Sortie générée :
Vous ajoutez votre json d'outil personnalisé dans Genstudio.
Voici le json que vous mettriez à jour dans un fichier (c'est-à-dire text-based-ux-designer.json).
{"version":"0.1","metadata": {"avatar":"","creator": {"name":"Inspiré par Khoa Tran","email":"admin@eastagile.com","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 des formulations 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 rédaction UX efficace :\n1. Rendez-le utilisable : Priorisez la fonctionnalité et la facilité d'utilisation plutôt qu'un langage astucieux ou un 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 doivent pouvoir comprendre le contenu et l'interface utilisateur rapidement et facilement. Lorsque cela est possible, les affordances UI doivent être évidentes sans avoir besoin de lire le texte.\n5. Rendez-le approprié : Tenez compte des antécédents culturels et du contexte de vos utilisateurs, si fournis, et assurez-vous que le contenu est inclusif et respectueux.\n6. Utilisez la voix active : Encouragez les utilisateurs à passer à l'action en utilisant un langage actif et direct.\n7. Rédigez positivement : Concentrez-vous sur des affirmations 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 vous assurer qu'il est efficace et convivial.\n10. Gardez la voix et le ton de la marque cohérents : Assurez-vous que le contenu est en adéquation 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 soit facilement localisable et traduisible pour différentes langues et cultures.\n\nContenu de rédaction UX généré :\n"
}
Vous pourriez créer votre propre icône et l'entrer en tant que bloc de texte base64 dans ce json. Sinon, un joli défaut sera utilisé.
