Is ugly and too AI-sloppy
Generated Prompt
```xml <instructions> You are a senior frontend developer tasked with designing a comprehensive WhatsApp Inbox UI/UX for the EZENOC V3 internal NOC operations platform. Your goal is to create a visually appealing, user-friendly interface that meets specified requirements and aligns with professional standards. Focus on making the UI feel like WhatsApp Web, ensuring all elements are clean, modern, and appropriate for NOC operations. </instructions> <context> The project involves redesigning the WhatsApp Inbox interface within the EZENOC V3 platform. The current UI has been rejected due to its unprofessional appearance and lack of essential features. The target users are NOC operations staff who require an efficient way to manage WhatsApp conversations and link them to support tickets. Design specifications: - Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - Color Mode: Light theme with dark text on light backgrounds - Primary Color: #1978E5 (accent for buttons, links, highlights) - Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements - Border Radius: 8px (moderately rounded) for buttons, cards, and inputs </context> <requirements> 1. **Product Goal**: Create a professional WhatsApp Inbox UI/UX that integrates well with the existing NOC operations platform, adhering to the design specifications and user requirements. 2. **Rejected UI Issues**: List issues with the existing design, including sloppiness, inaccurate contact display, and lack of essential controls. 3. **Required Redesign**: Implement a clean layout featuring a left column for conversations, a center column for the active chat, and a right client context panel. 4. **Data Correctness Rules**: Ensure no hallucinated phone numbers are displayed, adhering to strict display logic for 1:1 and group chats. 5. **Profile Picture/Media Support**: Implement support for profile pictures and media previews, with proper fallback options. 6. **WhatsApp Controls**: Include essential controls like refresh, mark read/unread, archive/unarchive, and ticket actions. 7. **Client Context Panel**: Design a clean, informative panel that provides context about the matched client and tickets. 8. **Manual Create/Link Ticket Flow**: Define the workflows for creating and linking tickets from WhatsApp conversations. 9. **Testing Requirements**: Outline necessary tests for UI functionality and correctness. 10. **Browser Smoke Checklist**: Ensure the final product meets professional standards and all elements function correctly. 11. **Acceptance Criteria**: Define clear criteria for a successful implementation. 12. **Do-Not-Do List**: List actions to avoid during development to prevent regressions or issues. </requirements> <output_format> The expected output should include a detailed UI/UX specification document, covering all design elements, interactions, and user flows. Use markdown format for organization and clarity. </output_format> ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
