Base - Eres un desarrollador frontend senior. Crea una aplicación web completa en un único archivo HTML autocontenido (sin dependencias externas...
Generated Prompt
## APPLICATION OVERVIEW The application "base" is a web dashboard designed for solofounders to manage their projects, notes, playbooks, tasks, clients, and content all in one place. It operates as a single HTML file, utilizing localStorage for data persistence and a minimalist aesthetic for an efficient user experience. ## CORE FEATURES 1. **Project Management**: Users can create and manage multiple projects, each with an optional description. Projects are easily selectable from a fixed sidebar. 2. **Section Creation**: Within each project, users can create and delete sections, which can hold modules. Each section has buttons to add new modules or delete the section. 3. **Module Functionality**: Users can create modules that include a title, optional section assignment, and color-coded tags. Modules are displayed as cards in a responsive grid layout. 4. **Text Editor Panel**: Clicking on a module opens a sliding panel from the right containing a text editor, with features like real-time editing, word count, and PDF export. 5. **Export to PDF**: Users can export module content to PDF using jsPDF, with customized formatting and metadata. 6. **Auto-Save Feature**: Changes are automatically saved to localStorage on input events, ensuring data persistence without a backend. ## 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 - **Layout**: The layout consists of three columns: a fixed left sidebar (200px) for project navigation, a central scrollable area for project content and module cards, and a right sliding panel (380px) for editing module content. ## TECHNICAL REQUIREMENTS - **Framework**: Vanilla JS, no frameworks - **Storage**: localStorage for data persistence - **Libraries**: jsPDF from CDN for PDF generation - **CDN**: Only cdnjs.cloudflare.com is permitted ## IMPLEMENTATION STEPS 1. **Set Up HTML Structure**: Create a basic HTML file structure with a sidebar, central area, and a right panel. 2. **Add CSS Styles**: Define CSS variables for colors, typography, and border radii to maintain a consistent design. 3. **Implement Sidebar Functionality**: Code the functionality to create, select, and delete projects. 4. **Develop Sections and Modules**: Implement the creation and management of sections and modules with appropriate event listeners. 5. **Integrate Text Editor**: Create a text editor that opens in the right panel, including features for saving and exporting content. 6. **Implement Auto-Save and LocalStorage**: Write functions to save project data to localStorage automatically and retrieve it upon loading. 7. **Add PDF Export Functionality**: Utilize jsPDF to generate and download PDF files from module content. 8. **Test Functionality**: Ensure all features work seamlessly, focusing on user experience and responsiveness. ## USER EXPERIENCE Users will interact with a clean and straightforward interface, navigating through projects using the sidebar while managing sections and modules in the central area. The text editor allows for real-time updates with immediate auto-saving, providing a fluid experience. Users can export their work easily to PDF, enhancing productivity without overwhelming complexity. The application respects user actions such as closing panels with the ESC key or clicking outside modals to improve usability. This prompt encompasses a comprehensive structure for the development of the "base" dashboard application, ensuring clarity in design specifications and technical requirements.
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!
