@apps/docs/src/prompts/prompts/ui-ux-designer-kb-merged-3-types.md
Generated Prompt
```markdown # APPLICATION OVERVIEW The IT Service Management (ITSM) application is designed to provide a streamlined interface for managing IT requests, incidents, and service delivery. The application focuses on delivering a clean, minimalist user experience that allows users to efficiently interact with key functionalities. # CORE FEATURES 1. **Incident Management**: Users can create, track, and manage incidents with a simple form, ensuring all relevant details are captured for resolution. 2. **Service Requests**: A feature that allows users to submit service requests, view status updates, and receive notifications upon completion. 3. **Knowledge Base**: A searchable repository of articles and FAQs to help users find solutions to common issues independently. 4. **Dashboard Overview**: A visual representation of key performance indicators (KPIs) related to IT services, including incident resolution times and user satisfaction metrics. 5. **User Feedback**: Users can provide feedback on service experiences, which is collected and displayed in an organized manner for review. # DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design focuses on a clean and simple aesthetic with plenty of white space to enhance readability and usability. - **Color Mode**: Light theme with dark text on light backgrounds to ensure optimal contrast and readability. - **Layout**: The layout consists of a top navigation bar, a central content area displaying core features, and a footer with contact information. Each section is clearly defined with generous spacing to avoid clutter. - **Typography**: Use a sans-serif font like 'Helvetica Neue' for headings and 'Arial' for body text, maintaining a clear hierarchy with larger sizes for headings and smaller for body content. # TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for utility-first styling, ensuring consistency and responsiveness across devices. - **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design. - **State Management**: Use React Context API to manage global state where necessary for user sessions and feedback collection. # IMPLEMENTATION STEPS 1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project. 3. **Create Core Components**: Develop components for Incident Management, Service Requests, Knowledge Base, and Dashboard Overview using Tailwind CSS for styling. 4. **Implement Routing**: Use React Router for navigating between different sections of the application. 5. **Mock Data Integration**: Embed realistic mock data directly within components for testing and visualization purposes. 6. **Testing**: Ensure all components are responsive and accessible, adhering to best practices for user experience. # USER EXPERIENCE Users will navigate the application through a top navbar, easily accessing features such as submitting incidents or searching the knowledge base. Each feature will present a straightforward interface with clear labels and instructions. Feedback mechanisms will be in place, allowing users to quickly express their satisfaction levels, which will help improve the service over time. ```
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!
