Skip to main content

Designer Screenshots

This directory contains screenshots for the Designer documentation.

Required Screenshots​

Please add the following screenshots to this directory:

  1. designer-home.png (referenced in index.md)

    • Shows the Designer home page with project selection and creation
    • Should show the project cards and the "Create new project" button
    • Capture: http://localhost:14345/

  2. dashboard.png (referenced in features.md)

    • Shows the Dashboard view with project overview and key metrics
    • Should show project configuration summary, dataset stats, and quick actions
    • Capture: http://localhost:14345/chat/dashboard

  3. data-management.png (referenced in features.md)

    • Shows the Data management interface
    • Should display processing strategies and datasets
    • Include both strategy cards and dataset cards if possible
    • Capture: http://localhost:14345/chat/data

  4. rag-config.png (referenced in features.md)

Screenshot Guidelines​

  • Format: PNG (preferred) or JPG
  • Resolution: At least 1200px wide for clarity
  • Browser: Use a clean browser window (hide bookmarks bar, etc.)
  • Theme: Either light or dark mode is fine, but be consistent
  • Content: Use example/demo projects to avoid exposing private information
  • Cropping: Include enough context to understand the UI, but remove unnecessary browser chrome

How to Add Screenshots​

  1. Start the Designer: lf start
  2. Open http://localhost:14345 in your browser
  3. Navigate to each section
  4. Take screenshots using your OS screenshot tool
  5. Name them according to the list above
  6. Place them in this directory
  7. The documentation will automatically reference them

Optional: Annotating Screenshots​

If you want to highlight specific features, consider:

  • Adding arrows or callouts using an image editor
  • Circling important UI elements
  • Adding brief text labels

Keep annotations minimal and professional.