AI System Prompt Optimizer and Formatting Tool

Application Specification: AI System Prompt Optimizer and Formatting Tool

Core Concept

A high-performance, client-side web application designed to help users construct, refine, and optimize system instructions for Large Language Models (LLMs). The tool turns vague requirements into highly structured, token-efficient, and logically coherent system prompts.

Layout & Design System

• Color Palette: Professional dark-mode aesthetic (Dark Charcoal background #121212, Slate Grey panels #1E1E1E, Neon Mint accents for actions, Off-white primary text).
• Structure: Two-pane split-screen interface.
  • Left Pane (Builder): Input controls and settings.
  • Right Pane (Live Preview): Read-only output with syntax highlighting.
• Typography: JetBrains Mono for output windows (to ensure character alignment) and Inter for UI elements.
• Animations:
  • 'Pulse' animation on the 'Optimize' button when the state is 'dirty'.
  • Smooth fade-in for dynamic constraint additions.
  • Slide-in notifications when copying text to the clipboard.

Interactive Features

1. Structured Input Modules:
   • Persona Builder: Dropdown presets (e.g., Developer, Creative Writer, Data Analyst) or custom input.
   • Constraint Checklist: Add/Remove functionality for negative constraints (e.g., 'Do not use emojis', 'Never mention specific brands').
   • Output Format Selector: Radio buttons for common formats (JSON, Markdown, XML, Plain Text, CSV).
   • Variable Injection: Support for placeholder tags like {{user_context}} or {{date}}.
2. The 'Optimizer' Engine (Client-Side Logic):
   • Clarity Pass: Automatically replaces passive voice with active verbs.
   • Structure Pass: Converts paragraph-style instructions into clear bulleted lists and headers for better LLM token parsing.
   • Constraint Strength: Users can set weights for instructions (High/Medium/Low priority).
3. Utility Suite:
   • Token Estimator: A real-time counter showing the estimated token count of the generated system prompt.
   • Copy-to-Clipboard: Single-click copy with an 'Action successful' toast notification.
   • Template Library: Pre-built, editable blocks for common tasks (e.g., 'JSON Data extraction', 'Code Reviewer', 'Language Translator').
   • Version History (Local Storage): Autosave feature storing the last 5 iterations in the user's browser cache.
4. Advanced Settings:
   • Toggle between 'Concise' vs 'Descriptive' output styles.
   • 'Escape Quotes' switch for JSON-based system prompts.

Technical Implementation

• Framework: Vanilla JavaScript (ES6+), HTML5, CSS3 (using CSS Variables for theme management).
• State Management: Simple observer pattern to keep the Preview Pane in sync with the Builder Pane.
• Local Storage: window.localStorage to persist templates and session history.
• Performance: Zero-latency updates. All operations run client-side to ensure privacy and speed.