Ejemplo: Generador de UI Basado en Texto

Esta herramienta genera una interfaz de usuario basada en texto según la descripción. Se proporciona el código fuente completo para que lo pruebes.

Somos defensores del Desarrollo impulsado por IA como lo practica https://eastagile.com. Para apoyar eso, utilizamos IA para ayudarnos a desarrollar interfaces de usuario. Esta herramienta genera una interfaz de usuario basada en texto, según la descripción y una solicitud (opcional) de ciertos elementos de interfaz de usuario. El aviso para la herramienta solicita elementos de diseño, así como texto de UI apropiado. Este ejemplo se presenta como un ejemplo concreto y práctico de una herramienta que uno podría crear y desplegar en su equipo. Aquí hay un ejemplo de su uso. Entrada del Usuario:

Salida Generada:

Agregas tu json de herramienta personalizada dentro de Genstudio.

Aquí está el json real que actualizarías en un archivo (es decir, 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": "Descripción de la Característica",
"type": "text",
"default": "",
"description": "Una breve descripción de la característica o funcionalidad."
},
{
"name": "Componentes de UI",
"type": "text",
"default": "Cualquier cosa apropiada y convencional",
"description": "El tipo de componentes de interfaz de usuario (por ejemplo, botón de opción, lista de selección múltiple)."
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "Esta herramienta genera una interfaz de usuario basada en texto según tu descripción y los componentes de interfaz de usuario especificados.",
"prompt_name": "Generador de Interfaz de Usuario Basada en Texto",
"usage_notes": "Proporciona una descripción de qué tipo de interfaz, característica o aplicación deseas generar (Descripción de la Característica) y cualquier tipo específico de elementos de interfaz de usuario que desees usar (Componentes de UI). Esta aplicación está diseñada para apoyar el Desarrollo impulsado por IA (AiDD) como lo practica East Agile https://eastagile.com.",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "Generar una interfaz de usuario basada en texto con redacción para la siguiente característica o funcionalidad:\n\nDescripción de la Característica: {{Feature Description}}\nElementos de Interfaz de Usuario: {{UI Components}}.\n\nPor favor, sigue estas mejores prácticas para crear una redacción de UX efectiva:\n1. Hazlo utilizable: Prioriza la funcionalidad y la facilidad de uso sobre un lenguaje ingenioso o un diseño no convencional.\n2. Hazlo útil: Proporciona información útil que guíe a los usuarios y les ayude a alcanzar sus objetivos.\n3. Hazlo accesible: Utiliza un lenguaje simple y claro y elementos de diseño convencionales que faciliten la comprensión a todos los usuarios, incluidas las personas con discapacidades.\n4. Hazlo claro: Evita la jerga y la ambigüedad; los usuarios deben poder entender el contenido y la UI de manera rápida y sencilla. Cuando sea posible, las oportunidades de interacción de la UI deben ser obvias sin necesidad de leer texto.\n5. Hazlo apropiado: Considera el contexto y la cultura de tus usuarios, si se proporciona, y asegúrate de que el contenido sea inclusivo y respetuoso.\n6. Usa la voz activa: Incita a los usuarios a tomar acción usando un lenguaje activo y directo.\n7. Escribe de manera positiva: Enfócate en afirmaciones afirmativas y evita frases negativas a menos que sea absolutamente necesario.\n8. Sé conciso: Mantén las oraciones cortas y al grano, eliminando palabras y frases innecesarias.\n9. Realiza pruebas A/B constantes: Prueba y refina continuamente el contenido para garantizar que sea efectivo y fácil de usar.\n10. Mantén coherente la voz y el tono de la marca: Asegúrate de que el contenido esté alineado con la personalidad general de la marca y mantenga un tono consistente en toda la experiencia del usuario.\n11. Usa un lenguaje orientado a la acción: Anima a los usuarios a actuar utilizando un lenguaje claro, directo y centrado en tareas específicas.\n12. Mantén la relevancia contextual: Proporciona contexto relevante para asegurar que el contenido sea fácilmente localizable y traducible para diferentes idiomas y culturas.\n\nContenido de Redacción de UX Generado:\n"
}

Podrías crear tu propio ícono e ingresarlo como un bloque de texto en base64 en este json. De lo contrario, se usará un bonito predeterminado.

Última actualización