SkyDeck.ai Docs
Sign UpAdmin Sign InContact Us
English
English
  • SkyDeck.ai
  • GenStudio Workspace
    • Conversations
    • SkyDeck AI Helper App
    • Document Upload
    • Sharing and Collaboration
    • Slack Synchronization
    • Public Snapshots
    • Web Browsing
    • Tools
      • Pair Programmer
        • How to Use
        • Example – Python Script Assistance
      • SQL Assistant
        • How to Use
        • Example – Query Debugging
      • Legal Agreement Review
        • How to Use
        • Example – NDA Clause
      • Teach Me Anything
        • How to Use
        • Example – Intro to Programming
      • Strategy Consultant
        • How to Use
        • Example – Employee Retention
      • Image Generator
        • How to Use
        • Example – Winter Wonderland
    • Data Security
      • Data Loss Prevention
  • Control Center
    • Admin & Owner Tools
    • Setup Guide
      • Set Up Account
      • Set Up Integrations
        • Integration Assistance
      • Set Up Security
        • Authentication (SSO)
      • Organize Teams
        • Add New Group
        • Remove Groups
      • Curate Tools
        • System Tools
        • Assign Tags
      • Manage Members
        • Add Members
        • Import File
        • Invite Members
        • Edit Members
    • Billing
      • Free Trial
      • Buy Credit
      • Plans and Upgrades
      • Model Usage Prices
  • Integrations
    • LLMs and Databases
      • Anthropic Integration
      • Database Integration
      • Groq Integration
      • HuggingFace Integration
      • Mistral Integration
      • OpenAI Integration
      • Perplexity Integration
      • Together AI Integration
      • Vertex AI Integration
    • App Integrations
      • Rememberizer Integration
      • Slack Integration
  • Developers
    • Develop Your Own Tools
      • JSON format for Tools
      • JSON Format for LLM Tools
      • Example: Text-based UI Generator
      • JSON Format for Smart Tools
  • Use Cases
    • Creating a Privacy Policy
  • Notices
    • Terms of Use
    • Privacy Policy
    • Cookie Notice
  • Releases
    • May 9th, 2025
    • May 2nd, 2025
    • Apr 25th, 2025
    • Apr 18th, 2025
    • Apr 11th, 2025
    • Apr 4th, 2025
    • Mar 28th, 2025
    • Mar 21st, 2025
    • Mar 14th, 2025
    • Mar 7th, 2025
    • Feb 28th, 2025
    • Feb 21st, 2025
    • Feb 14th, 2025
    • Feb 7th, 2025
    • Jan 31st, 2025
    • Jan 24th, 2025
    • Jan 17th, 2025
    • Jan 10th, 2025
    • Jan 3rd, 2025
    • Dec 27th, 2024
    • Dec 20th, 2024
    • Dec 13th, 2024
    • Dec 6th, 2024
    • Nov 29th, 2024
    • Nov 22nd, 2024
    • Nov 15th, 2024
    • Nov 8th, 2024
    • Nov 1st, 2024
    • Oct 25th, 2024
    • Oct 18th, 2024
    • Oct 11th, 2024
    • Oct 4th, 2024
    • Sep 27th, 2024
    • Sep 20th, 2024
    • Sep 13th, 2024
    • Sep 6th, 2024
    • Aug 23rd, 2024
    • Aug 16th, 2024
    • Aug 9th, 2024
    • Aug 2nd, 2024
    • Jul 26th, 2024
    • Jul 12th, 2024
    • Jul 5th, 2024
    • Jun 28th, 2024
    • Jun 21st, 2024
    • Nov 12th 2023
    • Nov 6th 2023
    • Oct 30th 2023
    • Oct 23th 2023
    • Oct 16th 2023
    • Sep 18th 2023
    • Sep 8th 2023
  • Security
    • SkyDeck.ai Security Practices
    • Bug Bounty Program
  • AI Documentation
    • LLM Evaluation Report
    • SkyDeck.ai LLM Ready Documentation
Powered by GitBook
On this page
  1. Developers
  2. Develop Your Own Tools

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.

Last updated 11 days ago

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:

Generated Output:

You add your custom tool json inside Genstudio.

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": "admin@eastagile.com",
"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.

Sample input using the specified input fields.
A text-based user interface with text generated by our app.
Upload json to define a custom tool
text based UI generator sample input
text based UI generator output
upload custom tool