Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a sophisticated design handoff tool that provides seamless offline documentation and inspection of design specifications for interfaces. It aims to empower developers with a robust offline solution that integrates design files, version control, and accessibility checks, all while maintaining a user-friendly and intuitive interface.

## CORE FEATURES
1. **Offline Design Inspection**: Users can view and interact with design files without needing external APIs, ensuring full accessibility in various environments.
2. **Document Structure with Blocks**: Employs a Notion-like system where each piece of information (text, images, design references) is treated as a block with unique identifiers, simplifying navigation and updates.
3. **Visual Flows**: Analyzes and visually represents user flows, enhancing understanding between design and development, and improving overall user experience comprehension.
4. **Integration with Git LFS**: Supports large binary files management through Git LFS, ensuring a clean and responsive repository for design assets.
5. **Plugin Architecture**: Allows extensibility through plugins that enhance functionality while maintaining security via WebAssembly sandboxing.
6. **Accessibility Tools**: Built-in compliance checks with WCAG standards, ensuring designs meet accessibility requirements through features like contrast ratios and screen reader previews.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: Modular workspace layout similar to Visual Studio Code, featuring collapsible panels and a flexible arrangement for tools and documentation.
- **Typography**: Utilize 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 and responsive UI components.
- **State Management**: Context API or Zustand for lightweight state management as necessary.

## 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 desktop 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 the application launch, where they can upload design files and immediately access a dashboard displaying design blocks. They can visually inspect designs, run accessibility checks, and document changes within the same interface. Collaborative features will enable users to lock files during editing and synchronize changes when back online. The interface will be responsive and intuitive, minimizing cognitive load and maximizing efficiency for all users.