📸Image Naming Guide
Standardized naming for all user guide screenshots and images
Naming Pattern
All screenshots follow this pattern:
{page}_{section}_{element}_{description}.pngComponents:
page: Main page name (dashboard, agents, workflows, etc.)
section: Tab or section name (roster, configuration, etc.)
element: Specific UI element (card, button, modal, etc.)
description: What's shown (overview, details, expanded, etc.)
Examples:
agents_roster_overview_card.pngagents_create_step1_template_selection.pngworkflows_active_execution_progress.pngknowledge_search_results_similarity.png
Screenshot Checklist
Dashboard Page
Total: 11 screenshots
Agents Page
Main Tabs:
Create Agent Modal:
Other Modals:
Total: 47 screenshots
Workflows Page
Main Tabs:
Modals:
Total: 24 screenshots
Knowledge Base Page
Main Tabs:
Modals:
Total: 32 screenshots
Context Engineering Page
Modals:
Total: 19 screenshots
Chatbot Page
Total: 10 screenshots
Tools Page
Modals:
Total: 12 screenshots
Playbooks Page
Total: 6 screenshots
Settings Page
Total: 18 screenshots
Analytics Page
Total: 10 screenshots
Screenshot Guidelines
Technical Requirements
Resolution: 1920x1080 or higher (scale down to 1200px width for web)
Format: PNG for UI screenshots (crisp text)
File Size: Optimize to <500KB (use TinyPNG or similar)
Quality: High quality, no compression artifacts
Content Guidelines
Include:
✅ Relevant UI elements
✅ Example data (realistic but not sensitive)
✅ Cursor or highlights (if explaining click actions)
✅ Tooltips visible (if documenting tooltips)
Exclude:
❌ Personal information
❌ Real API keys or passwords
❌ Customer/client data
❌ Browser chrome (unless necessary)
Consistency
Use same theme: Dark mode (default) or light mode consistently
Use same data: Where possible, use consistent example agents/workflows across screenshots
Example Agents:
CodeReviewer Pro (Code Architect)
SecurityExpert-003 (Security Expert)
DataAnalyst-007 (Data Analyst)
Example Workflows:
"Security Audit - Main Branch"
"PR Review #456"
"Data Analysis - Customer Churn"
Example Documents:
Security_Policy.pdf
API_Documentation.md
Q4_Report.pdf
Annotations
Use annotations when helpful:
Red arrows pointing to specific elements
Red boxes highlighting key areas
Number badges for step-by-step
Text callouts for important notes
Tools:
macOS: Screenshot + Preview (built-in)
Windows: Snipping Tool + Paint
Cross-platform: Greenshot, ShareX, Flameshot
Screenshot Workflow
Capturing Screenshots
Prepare environment:
Clear test data if needed
Set up example scenario
Ensure UI is in correct state
Capture:
Take screenshot (Cmd+Shift+4 on macOS)
Capture full element
Include context but minimize clutter
Annotate (if needed):
Add arrows or highlights
Keep annotations minimal
Use red color for visibility
Save:
Use naming convention
Save to
docs/user-guides/images/Optimize file size
Update documentation:
Reference in markdown:
Add alt text for accessibility
Link to larger version if needed
Example Screenshot Reference
Or with caption:
Placeholder Status
All user guides currently use placeholder references. Screenshots need to be captured according to this guide.
Current Status: 📸 0 / 189 screenshots captured
Priority Order:
High Priority (capture first): Dashboard, Agents Roster, Workflows Active
Medium Priority: Knowledge Library, Settings Credentials
Low Priority: Advanced modals, detailed views
Screenshot Coverage Summary
Dashboard
11
🔴 High
Agents
47
🔴 High
Workflows
24
🔴 High
Knowledge
32
🟡 Medium
Context
19
🟡 Medium
Chatbot
10
🟡 Medium
Tools
12
🟢 Low
Playbooks
6
🟢 Low
Settings
18
🟡 Medium
Analytics
10
🟢 Low
TOTAL
189
Future: Video Walkthroughs
Consider creating video versions of key workflows:
Creating your first agent (3 min video)
Running your first workflow (5 min video)
Uploading and searching documents (4 min video)
Setting up credentials (5 min video)
Videos complement screenshots for complex interactions.
Screenshot capture is a separate task - this guide provides the structure and naming convention to follow when capturing screens.
Last updated