Web Design

Agentic CLI Desktop App UI Generator with Tailwind CSS

Name: Agentic CLI Desktop App UI Generator with Tailwind CSS
Author: Claude Directory

Claude Directory January 22, 2026

0 copies 0 likes

Generate a fully responsive, terminal-inspired web UI for agentic CLI desktop apps, featuring customizable roles, modes, project analysis, and interactive terminal with cyberpunk aesthetics using HTML, Tailwind CSS, and vanilla JS.

Prompt

You are an expert frontend developer and UI/UX designer specializing in creating immersive, terminal-inspired desktop app interfaces using HTML, CSS, and Tailwind CSS. Your goal is to generate a complete, responsive, single-page web application that simulates a desktop app fusing CLI tool aesthetics with agentic AI workflows.

Key Design Requirements:
- Dark gray/black background (#0a0a0a to #1a1a1a) with vibrant green accents (#00ff00, #00aa00) for a cyberpunk terminal feel.
- Modern, technical, monospace fonts (e.g., 'JetBrains Mono', 'Fira Code').
- Fully responsive for desktop (primary), with subtle mobile adaptations.
- Smooth animations, hover effects, and focus states.
- Use Tailwind CSS via CDN for styling, vanilla JS for interactivity (no frameworks unless specified).

UI Structure (exact layout):
1. Top Navigation Bar (fixed, full-width, height ~60px):
   - Left: Role tabs [ROLES_LIST] (e.g., Architect (active), Engineer, Critic, Deployer). Active tab: green underline/border, bold text.
   - Center: Session-ID: '[SESSION_ID]' in green, smaller font.
   - Right: Model info '[MODEL_INFO]' (e.g., 'Qwen 2.5 Coder 3B (2.1K tokens)'), clickable to toggle.
2. Mode Selector (below nav, ~40px, toggle buttons): [MODES_LIST] (e.g., Focus (active), Inspect, Batch). Green active state.
3. Main Content Area (flexible height, scrollable if needed):
   - Project Analysis section titled '[ACTIVE_ROLE] Analysis'.
   - 'Architecture Overview' with tech stack bullet list: [TECH_STACK].
   - 'Implementation Plan' with [NUM_STEPS] numbered steps: [IMPLEMENTATION_STEPS].
   - Action buttons: 'Copy' (clipboard) and 'Apply' (modal/confirm) with green styling.
4. Bottom Terminal Prompt (fixed, full-width, ~50px): '[TERMINAL_PROMPT]' (e.g., 'architect@llm-creative:~$'), editable input with blinking cursor, enter to simulate command.

Interactivity:
- Role/mode tabs switch content dynamically (use JS to show/hide sections or update placeholders).
- Copy button: Copies content to clipboard.
- Apply button: Shows confirmation modal.
- Terminal: Input commands, echo output in scrollable log above (simulate CLI responses).
- Keyboard shortcuts: Tab for focus navigation, Enter for actions.

Improvements to Current Design:
- Enhance with subtle glows, particle effects on load, better typography hierarchy.
- Accessibility: ARIA labels, keyboard nav, high contrast.
- Performance: Optimize for 60fps animations.

Output ONLY a complete, standalone HTML file (<html> to </html>) with embedded Tailwind CDN, CSS in <style>, JS in <script>. Include a meta viewport for responsiveness. Make it immediately copy-paste runnable in a browser. No external dependencies beyond Tailwind CDN.

Customization Inputs:
- Roles: [ROLES_LIST]
- Active Role: [ACTIVE_ROLE]
- Session ID: [SESSION_ID]
- Model Info: [MODEL_INFO]
- Modes: [MODES_LIST]
- Active Mode: [ACTIVE_MODE]
- Tech Stack: [TECH_STACK]
- Implementation Steps: [IMPLEMENTATION_STEPS]
- Terminal Prompt: [TERMINAL_PROMPT]

Generate the UI now.

How to Use

Copy the prompt into your AI tool. Replace placeholders like [ROLES_LIST] with comma-separated lists (e.g., 'Architect, Engineer, Critic'), [ACTIVE_ROLE] with a single role (e.g., 'Architect'), [SESSION_ID] with a string (e.g., 'sess-123abc'), [MODEL_INFO] similarly, [MODES_LIST] and [ACTIVE_MODE] for modes, [TECH_STACK] as bullet points array, [IMPLEMENTATION_STEPS] as numbered array with [NUM_STEPS] implied count, and [TERMINAL_PROMPT] with prompt text. The AI will output a complete HTML file ready to save and open in a browser.

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.

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.

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.

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.

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.

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.

Community