Back to Prompts
UX and Product Design

Modern ASCII TUI Redesign for CLI Tools – Professional Mockups & Specs

Community February 1, 2026
0 copies 0 likes

Transform CLI tools into sleek, professional Text User Interfaces (TUIs) with this prompt, generating ASCII art mockups, design breakdowns, and implementation tips for frameworks like Ratatui, Textual, or Bubble Tea.

Prompt
You are an expert TUI (Text User Interface) designer specializing in modern, professional command-line applications using ASCII art, text styling, and frameworks like Ratatui (Rust), Textual (Python), or Bubble Tea (Go).

**Task:** Redesign the [TOOL_NAME] CLI into a clear, modern TUI. Base it on the current UI: [CURRENT_UI_DESCRIPTION]. Keep the core concept ([CORE_CONCEPT]) but transform the presentation for better structure, hierarchy, and professionalism.

**Design Guidelines:**
- **Output Area (results/logs/responses):** Mimic a 'regular terminal' – dark/gray/black background (use ═, ║, or shaded blocks like █ for dark fills), neutral white/gray text. This is the main content zone.
- **Input & Panels ([PANELS_LIST]):** Light backgrounds (use light gray/white fills like ▄ or spaces with borders), sharp edges (┌─┐│└─┘ or ╔═╗║╚═╝), generous spacing, clear focus states (e.g., highlighted borders or [> ] cursors). Panels for query, filters, status, metadata, etc.
- **Overall Layout:** Avoid a 'big gray rectangle'. Use grid-based structure: header with [TOOL_NAME] logo/title top-left, side/top panels for inputs/controls, central/large output area, bottom input bar. Ensure visual hierarchy (larger fonts/symbols for headers, padding everywhere). Professional, clean, not cluttered – aim for 80-120 cols wide, responsive feel in text.
- **Color Scheme Simulation:** Describe or use ANSI-like codes in mockup (e.g., #000 for dark bg, #fff for light). Light panels contrast sharply against dark output.
- **States:** Show idle, focused (e.g., query input blinking), and sample populated states.

**Output Format:**
1. **Full ASCII Mockup:** Provide 3-5 viewport-sized (e.g., 100x40 chars) renderings: Idle state, Query focus, Populated with sample data. Use fixed-width font-friendly art.
2. **Design Breakdown:** Bullet points on layout grid, components, spacing rationale, focus handling.
3. **Implementation Tips:** Code snippets/steps for [FRAMEWORK] (e.g., Ratatui widgets: Paragraph for output, Input for query, Table/List for panels).
4. **Variations:** 1 compact (side-by-side panels) and 1 expanded (top/bottom split) layout.

Sample Data for Mockup:
- Header: [TOOL_NAME] v[VERSION]
- Query: 'Search for [EXAMPLE_QUERY]'
- Output: Sample logs/responses.
- Panels: Status 'Ready', Filters 'doc_type:pdf', Metadata 'Hits: 5'.

Generate now for [TOOL_NAME]!

How to Use

Copy the prompt into your AI chat interface. Replace placeholders: [TOOL_NAME] with your CLI tool's name (e.g., 'git'), [CURRENT_UI_DESCRIPTION] with its existing UI details, [CORE_CONCEPT] with the main functionality, [PANELS_LIST] with needed panels (e.g., 'query, filters, status'), [FRAMEWORK] with your choice (e.g., 'Ratatui'), [VERSION] and [EXAMPLE_QUERY] with specifics, and customize sample data. Run the prompt to generate mockups and specs; iterate by providing feedback on outputs.

Comments

More Prompts

View all
Software Engineering

Step-by-Step Agentic CLI Coding Tool Development Plan Generator

This prompt generates a comprehensive Markdown roadmap for building professional, interactive, agentic CLI coding tools with stunning TUIs, inspired by Claude Code and Aider. Customize placeholders and feed to an AI for an executable build plan.

C
Claude Directory
Art and Design

Accurate Simpsons Character Portrait Generator

Generate ultra-detailed, canonical image prompts for Simpsons characters like Ralph Wiggum, optimized for AI generators like Midjourney or DALL-E, ensuring faithful 2D cel-shaded portraits with no background.

C
Community
Software Engineering

Flask 3-Layer Clean Architecture Tutorial Generator

Generate a comprehensive, step-by-step Markdown tutorial for building a production-ready Flask web app using a strict 3-layer architecture (presentation, business logic, data), fully customizable for any app functionality.

C
Community
Writing

AI Skill Description Improver: Polished Documentation Prompt Template

This reusable prompt template enhances raw AI skill descriptions into clear, structured, markdown-formatted documentation with actionable instructions, examples, and SEO optimization for maximum usability.

C
Claude Directory
Writing

AI Skill Description Improver: Professional Prompt Template

Transform vague AI skill descriptions into clear, structured, and professional documentation with this expert prompt template designed for technical writers and prompt engineers.

C
Community
Software Engineering

Expert Code Quality Analyzer: Structured Review & Refactoring Template

A professional prompt template for thorough AI-powered code reviews, assessing readability, performance, security, best practices, bugs, and design with scored feedback, detailed breakdowns, refactored code, and prioritized fixes.

C
Community