Example: Text-based UI Generator

This tool generates a text-based user interface based on description. Full source code is provided for you to try out.

We are advocates of AI Driven Development as practiced by https://eastagile.com. To support that we use AI to help us develop user interfaces. This tool generates a text-based user interface based on description and an (optionl) request for certain user interface elements. The prompt for the tool asks for design elements as well as appropriate UI text. This example is presented as a concete and practical example of a tool that one might create and deploy throughout your team. Here is an example of its usage. User Input:

Sample input using the specified input fields.

Generated Output:

A text-based user interface with text generated by our app.

You add your custom tool json inside Genstudio.

Upload json to define a custom tool

Here is the actual json that you would update in a file (i.e. text-based-ux-designer.json).

{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "Inspired by Khoa Tran",
"email": "[e-mail]",
"organization": "East Agile"
},
"timestamp": "2023-06-01T10:00:00Z",
"variables": [
{
"name": "Feature Description",
"type": "text",
"default": "",
"description": "A brief description of the feature or functionality."
},
{
"name": "UI Components",
"type": "text",
"default": "Anything appropriate and conventional",
"description": "The type of user interface components (e.g., radio button, multi-select list)."
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "This tool generates a text-based user interface based on your description and user interface components specified.",
"prompt_name": "Text-based User Interface Generator",
"usage_notes": "Provide a description of what sort of interface, feature, or app you want to generate (Feature Description) and any specific type of user interface elements you wish to use (UI Components). This application is designed to support AI Driven Development (AiDD) as practiced by East Agile https://eastagile.com.",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "Generate a text-based user interface with wording for the following feature or functionality:\n\nFeature Description: {{Feature Description}}\nUser Interface Elements: {{UI Components}}.\n\nPlease follow these best practices for creating effective UX writing:\n1. Make it usable: Prioritize functionality and ease of use over clever language or unconventional design.\n2. Make it helpful: Provide useful information that guides users and helps them accomplish their goals.\n3. Make it accessible: Use simple, clear language and conentional design elements that make it easy for all users to understand, including those with disabilities.\n4. Make it clear: Avoid jargon and ambiguity; users should be able to understand the content and UI quickly and easily. When possible UI affordances should be obvious without needing to read text.\n5. Make it appropriate: Consider the cultural background and context of your users, if provided, and ensure the content is inclusive and respectful.\n6. Use the active voice: Prompt users to take action by using active, direct language.\n7. Write positively: Focus on affirmative statements and avoid negative phrases unless absolutely necessary.\n8. Be concise: Keep sentences short and to the point, eliminating unnecessary words and phrases.\n9. Perform constant A/B testing: Continuously test and refine the content to ensure it is effective and user-friendly.\n10. Keep brand voice and tone consistent: Ensure the content aligns with the overall brand personality and maintains a consistent tone throughout the user experience.\n11. Use action-oriented language: Encourage users to take action by using language that is clear, direct, and focused on specific tasks.\n12. Maintain contextual relevance: Provide relevant context to ensure the content is easily localizable and translatable for different languages and cultures.\n\nGenerated UX Writing Content:\n"
}

You could create your own icon and enter it as a base64 block of text to this json. Otherwise a nice default will be used.