AegisRed - Prompt para Lovable — Platform Mockup Instrucción principal Crea un mockup funcional de , una plataforma europea de orquestación...
Generated Prompt
```markdown ## APPLICATION OVERVIEW AegisRed is a web application designed for the orchestration and validation of autonomous agents aimed at ethical vulnerability discovery within critical infrastructure as defined by NIS2. The platform provides users with a comprehensive dashboard for managing campaigns, analyzing findings, and overseeing agent performance in a professional, dark-themed interface tailored for cybersecurity operations. ## CORE FEATURES 1. **Sidebar Navigation**: A collapsible sidebar featuring quick access to sections such as Dashboard, Campaigns, Templates, Agents, Evidence, Reports, and Settings. It includes user identification with an active status badge. 2. **Dashboard Overview**: Displays real-time key performance indicators (KPIs) with actionable insights, such as active campaigns and vulnerabilities found. The dashboard provides an intuitive overview of ongoing operations. 3. **Campaign Management**: Detailed tracking of campaigns with status updates, progress bars, and findings breakdown. Users can access campaign details and take action on each campaign directly from the dashboard. 4. **Agent Monitoring**: Real-time status monitoring of all agents with details on their current tasks, specialties, and overall performance. Users can launch and manage agents effectively. 5. **Findings and Evidence**: A comprehensive table of findings with filtering options to assess severity, campaign, and agent involvement. Each finding allows users to delve into detailed reports, including recommendations for remediation. 6. **Custom Templates**: A library of pre-defined templates for various types of assessments, allowing users to launch campaigns quickly and efficiently. Users can also create custom templates as needed. ## DESIGN SPECIFICATIONS - **Visual Style**: Professional, dark mode design reflecting a cybersecurity tool aesthetic, similar to military control panels. - **Color Mode**: Predominantly dark background (#0F1117) with accents in red (#C0392B), navy blue (#1B2A4A), amber (#D4740E), and green (#1E7A46). - **Layout**: - A collapsible left sidebar for navigation with a vertical arrangement of icons. - A main dashboard area featuring KPI cards arranged horizontally. - Detailed campaign pages structured with two-column layouts for task execution and live agent feeds. - **Typography**: Monospaced font for technical data and a sans-serif font (Inter or similar) for UI elements, ensuring clarity and readability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for responsive design - **UI Components**: Lucide React for icons and shadcn/ui for component styling - **State Management**: React Context or Zustand for state management as needed ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript. Install Tailwind CSS and configure PostCSS. 2. **Create Layout Components**: Develop the sidebar, dashboard, and main content areas using Tailwind CSS for styling. 3. **Develop Sidebar Navigation**: Implement the collapsible sidebar with links to different sections, utilizing icons from Lucide React. 4. **Build Dashboard**: Create the dashboard layout with KPI cards, ensuring responsiveness for desktop views. 5. **Implement Campaign and Agent Pages**: Structure the pages for campaign details and agent monitoring with appropriate data fetching and state management. 6. **Design Findings Table**: Develop a dynamic table for findings with filtering options and detailed views for each entry. 7. **Create Templates Library**: Implement the templates section with cards for launching and viewing details of predefined assessments. 8. **Ensure Responsiveness**: Test and optimize the layout across various screen sizes while maintaining functionality. ## USER EXPERIENCE Users will navigate through a streamlined interface where they can quickly assess campaign statuses, monitor agent activities, and view the latest findings. The design encourages engagement with real-time data feeds and allows for seamless interaction, ensuring that users can effectively manage cybersecurity operations without unnecessary distractions. ```
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!
