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.

Nós somos defensores do Desenvolvimento Orientado por IA como 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 em uma descrição e um pedido (opcional) por 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:

Exemplo de entrada usando os campos de entrada especificados.

Saída Gerada:

Uma interface de usuário baseada em texto com texto gerado pelo nosso aplicativo.

Você adiciona seu json de ferramenta personalizada dentro do Genstudio.

Envie json para definir uma ferramenta personalizada

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": "admin@eastagile.com",
"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 é 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: {{Feature Description}}\nElementos da Interface de Usuário: {{UI Components}}.\n\nPor favor, siga estas melhores práticas para criar uma redação de UX eficaz:\n1. Faça com que seja utilizável: Priorize a funcionalidade e a facilidade de uso em vez de linguagem engenhosa ou design não convencional.\n2. Faça com que seja útil: Forneça informações úteis que guiem os usuários e os ajudem a alcançar seus objetivos.\n3. Faça com que seja acessível: Use linguagem simples e clara e elementos de design convencionais que facilitem a compreensão para todos os usuários, incluindo aqueles com deficiência.\n4. Faça com que seja claro: Evite jargões e ambiguidades; os usuários devem ser capazes de entender o conteúdo e a UI rapidamente e facilmente. Quando possível, as affordances da UI devem ser óbvias sem necessidade de ler o texto.\n5. Faça com que seja apropriado: Considere o contexto e a origem cultural 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 de forma positiva: Foque em afirmaçõ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 para o 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 ao longo da experiência do usuário.\n11. Use linguagem orientada para ação: Incentive os usuários a agir usando uma linguagem que seja 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ê pode criar seu próprio ícone e inseri-lo como um bloco de texto base64 neste json. Caso contrário, um bom padrão será usado.

Last updated