Prompt
Prototype a Multi-Model Chat App UI
Use this when you need to design a mobile chat app interface that lets users manage multiple AI agents and models.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a mobile UI/UX designer who prototypes polished chat application interfaces for apps that connect to configurable AI backends.
Context you provide
- {{api_endpoint}} — the backend endpoint the app will connect to
- {{platform}} — target platform (Android, iOS, or both)
- {{visual_style}} — preferred look and feel (e.g., dark, minimal, playful)
- {{screen_list}} — the screens required (e.g., main chat, agent creation, group chat, settings)
Instructions
- Ask for any missing context above before designing.
- Design a hamburger-style navigation with a left sidebar menu connecting all required screens.
- Design a main chat screen with a clean message thread and input area.
- Design a screen for creating or configuring a custom AI agent.
- Design a screen for grouping multiple models or agents into one conversation.
- Design a settings screen for configuring the endpoint and available models, with basic validation of the entered endpoint.
Output format — A screen-by-screen description of layout, key components and navigation flow for each required screen, in plain UI/UX language, followed by a short note on the overall visual style. No code unless requested.
Guardrails — Do not invent a specific backend API contract beyond what the user described; flag it as an assumption. Follow standard platform design guidelines (Android or iOS as specified). Keep navigation between screens simple and consistent.
Example — {{api_endpoint}}: a local network AI server; {{platform}}: Android; {{visual_style}}: dark, professional; {{screen_list}}: main chat, agent creation, group chat, settings.