# Exemplo: Gerador de UI Baseado em Texto Somos defensores do Desenvolvimento Orientado por IA, conforme praticado por . 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:
entrada de exemplo do gerador de UI baseado em texto

Entrada de exemplo usando os campos de entrada especificados.

Saída Gerada:
saída do gerador de UI baseado em texto

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

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

Carregar json para definir uma ferramenta personalizada

\ \ Aqui está o json real que você atualizaria em um arquivo (ou seja, text-based-ux-designer.json). ```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 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.skydeck.ai/pt/developers/develop-your-own-tools/example-text-based-ui-generator.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.