Exemplo: Gerador de UI Baseado em Texto
Esta ferramenta gera uma interface de usuário baseada em texto com base na descrição. O código-fonte completo é fornecido para você experimentar.
Somos defensores do Desenvolvimento Orientado por IA, conforme praticado por https://eastagile.com. Para apoiar isso, usamos IA para nos ajudar a desenvolver interfaces de usuário. Esta ferramenta gera uma interface de usuário baseada em texto com base na descrição e em um pedido (opcional) para certos elementos da interface de usuário. O prompt para a ferramenta solicita elementos de design, bem como texto apropriado para a UI. Este exemplo é apresentado como um exemplo concreto e prático de uma ferramenta que alguém poderia criar e implantar em sua equipe. Aqui está um exemplo de seu uso. Entrada do Usuário:
Saída Gerada:
Você adiciona seu json de ferramenta personalizada dentro do Genstudio.
Aqui está o json real que você atualizaria em um arquivo (ou seja, text-based-ux-designer.json).
{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "Inspirado por Khoa Tran",
"email": "[email protected]",
"organization": "East Agile"
},
"timestamp": "2023-06-01T10:00:00Z",
"variables": [
{
"name": "Descrição da Funcionalidade",
"type": "text",
"default": "",
"description": "Uma breve descrição da funcionalidade ou recurso."
},
{
"name": "Componentes da UI",
"type": "text",
"default": "Qualquer coisa apropriada e convencional",
"description": "O tipo de componentes da interface de usuário (por exemplo, botão de opção, lista de múltipla seleção)."
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "Esta ferramenta gera uma interface de usuário baseada em texto com base na sua descrição e nos componentes da interface de usuário especificados.",
"prompt_name": "Gerador de Interface de Usuário Baseada em Texto",
"usage_notes": "Forneça uma descrição do tipo de interface, funcionalidade ou aplicativo que você deseja gerar (Descrição da Funcionalidade) e qualquer tipo específico de elementos da interface de usuário que você deseja usar (Componentes da UI). Este aplicativo foi projetado para apoiar o Desenvolvimento Orientado por IA (AiDD) conforme praticado pela East Agile https://eastagile.com.",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "Gere uma interface de usuário baseada em texto com a redação para a seguinte funcionalidade ou recurso:\n\nDescrição da Funcionalidade: {{Descrição da Funcionalidade}}\nElementos da Interface de Usuário: {{Componentes da UI}}.\n\nPor favor, siga estas melhores práticas para criar uma redação de UX eficaz:\n1. Faça ser utilizável: Priorize a funcionalidade e a facilidade de uso em vez de linguagem inteligente ou design não convencional.\n2. Faça ser útil: Forneça informações úteis que orientem os usuários e os ajudem a alcançar seus objetivos.\n3. Faça ser acessível: Use linguagem simples e clara e elementos de design convencionais que tornem fácil para todos os usuários entenderem, incluindo aqueles com deficiências.\n4. Faça ser claro: Evite jargões e ambiguidade; os usuários devem ser capazes de entender o conteúdo e a UI de forma rápida e fácil. Quando possível, as affordances da UI devem ser óbvias sem precisar ler o texto.\n5. Faça ser apropriado: Considere o contexto cultural e o histórico dos seus usuários, se fornecido, e garanta que o conteúdo seja inclusivo e respeitoso.\n6. Use a voz ativa: Incentive os usuários a agir usando uma linguagem ativa e direta.\n7. Escreva positivamente: Foque em declarações afirmativas e evite frases negativas, a menos que absolutamente necessário.\n8. Seja conciso: Mantenha as frases curtas e diretas, eliminando palavras e frases desnecessárias.\n9. Realize testes A/B constantes: Teste e refine continuamente o conteúdo para garantir que seja eficaz e amigável ao usuário.\n10. Mantenha a voz e o tom da marca consistentes: Garanta que o conteúdo esteja alinhado com a personalidade geral da marca e mantenha um tom consistente em toda a experiência do usuário.\n11. Use linguagem orientada à ação: Incentive os usuários a agir usando uma linguagem clara, direta e focada em tarefas específicas.\n12. Mantenha a relevância contextual: Forneça contexto relevante para garantir que o conteúdo seja facilmente localizável e traduzível para diferentes idiomas e culturas.\n\nConteúdo de Redação de UX Gerado:\n"
}
Você poderia criar seu próprio ícone e inseri-lo como um bloco de texto base64 neste json. Caso contrário, um bom padrão padrão será usado.
Last updated