Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a sophisticated design handoff tool that enables seamless offline documentation and inspection of design specifications for interfaces. Inspired by existing tools like Figma and Zeplin, it aims to provide developers with a robust offline solution that integrates design files, version control, and accessibility checks, all while maintaining a user-friendly interface.

## CORE FEATURES
1. **Offline Design Inspection**: Allows users to view and interact with design files without needing to connect to external APIs, ensuring accessibility in various environments.
2. **Document Structure with Blocks**: Implements a Notion and zeroheight like system where each piece of information (text, images, design references) is treated as a block with unique identifiers, facilitating easy navigation and updates.
3. **Visual flows**: Analyzes and visually represents user flows to improve understanding between design and develop, facilating the comprension of experience
4. **Integration with Git LFS**: Supports large binary files by using Git LFS to manage design assets efficiently, allowing for a clean and responsive repository.
6. **Plugin Architecture**: Extensible through plugins that can enhance functionality while maintaining security through WebAssembly sandboxing.

Secondary features
5. **Accessibility Tools**: Built-in features for checking compliance with WCAG standards, including contrast ratios and screen reader previews, ensuring that designs meet accessibility requirements.


## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: A modular workspace layout similar to Visual Studio Code, with collapsible panels and a flexible arrangement for tools and documentation.
- **Typography**: Use a sans-serif font such as Inter or Roboto for readability, with a hierarchy that emphasizes headings, sub-headings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Utilize shadcn/ui for modern UI components.
- **State Management**: Context API or Zustand for lightweight state management as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**:
   - Initialize a new React project with TypeScript.
   - Install necessary dependencies: Tailwind CSS, shadcn/ui, and Git LFS support.
   
2. **Create Core Components**:
   - Develop the main workspace component to house the design inspection and documentation features.
   - Implement block-based content components for documentation.

3. **Integrate Offline Functionality**:
   - Use Tauri to manage local files and create a lightweight application.
   - Implement file handling for design files and integrate the @grida/refig engine for rendering.

4. **Build Visual Diffing Module**:
   - Utilize JSON structure analysis for design files to implement the visual diffing feature with appropriate algorithms.

5. **Accessibility Integration**:
   - Include tools for checking design accessibility and ensure compliance with WCAG standards.

6. **Establish Plugin System**:
   - Create a basic plugin architecture that allows for future extensions via WebAssembly.

7. **Testing and Optimization**:
   - Conduct thorough testing of all features, particularly in offline scenarios, and optimize performance metrics.

## USER EXPERIENCE
Users will have a streamlined experience starting from launching the application, where they can upload design files and immediately access a dashboard displaying the design blocks. They can inspect designs visually, run accessibility checks, and document changes all within the same interface. The application will support collaborative features, allowing users to lock files during editing and synchronize changes when back online. With a focus on usability, the interface will be responsive and intuitive, minimizing cognitive load and maximizing efficiency.