Agent L3 UI Design Document
Document Overview
This document details the complete UI/UX design for Agent L3 platform, including:
- Main website
- Agent Creator web app
- Agent Operator web app
- Agent Investor web app
- Desktop applications
- Documentation sections
Design Phase: Greyscale Prototype (Colors TBD)
Application Architecture
Main Website
Purpose: Marketing, navigation hub, documentation Audience: All users, potential users, researchers
Agent Creator App
Purpose: Build, configure, and register agents Audience: Developers, creators, technical users
Agent Operator App
Purpose: Monitor, manage, and operate agents Audience: Agent creators, operators, administrators
Agent Investor App
Purpose: Discover agents, invest, track portfolio Audience: Investors, liquidity providers, CR8 stakers
Desktop Applications
Purpose: Native apps for heavy users Audience: Power users, day traders, professional operators
Part 1: Main Website
1.1 Homepage
Layout Structure
┌─────────────────────────────────────────┐
│ Header │
│ [Logo] [Nav] [Connect Wallet] │
├─────────────────────────────────────────┤
│ │
│ Hero Section │
│ ┌─────────────────────────────────┐ │
│ │ [Large Heading] │ │
│ │ [Tagline] │ │
│ │ [CTA Buttons] │ │
│ └─────────────────────────────────┘ │
│ │
│ Stats Bar │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Stat1│ │Stat2│ │Stat3│ │Stat4│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ Features Section │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │Feature1│ │Feature2│ │Feature3│ │
│ └────────┘ └────────┘ └────────┘ │
│ │
│ CTA Section │
│ [Get Started] │
│ │
│ Footer │
│ [Links] [Social] [Legal] │
└─────────────────────────────────────────┘Components
Hero Section
- H1: "Own the Future of Autonomous Agents"
- P: Tagline/description
- CTA: "Create Agent" (primary), "Browse Agents" (secondary)
- Background: Subtle pattern or gradient (greyscale)
Stats Bar
- 4 stat cards
- Icon + Number + Label
- Example: "1,234 Agents", "$5.6M Liquidity", "45K Owners", "2.3M CR8 Staked"
Features Grid
- 3-6 feature cards
- Icon, Heading, Description
- Cards: Build, Operate, Invest
Call-to-Action
- Single CTA section
- Clear next step
Wireframe Reference: wireframes/website-homepage.png
1.2 Navigation Pages
Navigation Structure
Header Navigation:
[Logo] | Products | Docs | Blog | About | [Connect Wallet]
Products Dropdown:
- Agent Creator (→ /creator)
- Agent Operator (→ /operator)
- Agent Investor (→ /investor)
- Main Registry (→ /registry)
Docs:
- Getting Started
- API Reference
- Smart Contracts
- Guides
- FAQAbout Page
- Mission/vision
- Team (optional)
- Roadmap preview
- Contact
Wireframe Reference: wireframes/website-nav-structure.png
Part 2: Agent Creator Web App
2.1 Application Layout
Main Layout
┌──────────┬──────────────────────────────┐
│ │ Header │
│ Sidebar │ [Logo] [Agent Name] [Menu] │
│ ├──────────────────────────────┤
│ - Builder │ │
│ - Config │ Main Content Area │
│ - Test │ [Dynamic Content] │
│ - Deploy │ │
│ │ │
│ │ │
└──────────┴──────────────────────────────┘Sidebar Navigation:
- Builder (Step-by-step creation)
- Configuration (Settings, integrations)
- Test (Sandbox testing)
- Deploy (Registration, activation)
- History (Previous agents)
2.2 Builder Flow (Step-by-Step)
Step 1: Basic Information
┌──────────────────────────────────┐
│ Step 1 of 4: Basic Information │
│ [Progress: ████░░░░░░] 25% │
├──────────────────────────────────┤
│ │
│ Agent Name * │
│ ┌──────────────────────────┐ │
│ │ │ │
│ └──────────────────────────┘ │
│ │
│ Description * │
│ ┌──────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────┘ │
│ │
│ Agent Wallet │
│ ┌──────────────────────────┐ │
│ │ [Use Connected Wallet] │ │
│ │ or enter address: │ │
│ └──────────────────────────┘ │
│ │
│ Fee Rate (%) * │
│ ┌──────────────────────────┐ │
│ │ 2.5 │ │
│ └──────────────────────────┘ │
│ Info: Fee charged to users │
│ │
│ [Cancel] [Next →] │
└──────────────────────────────────┘Fields:
- Agent Name (required, max 50 chars)
- Description (required, max 500 chars, markdown support)
- Agent Wallet (optional, defaults to connected wallet)
- Fee Rate (required, 0-10%, slider or input)
Wireframe: wireframes/creator-step1-basic.png
Step 2: Select Integrations
┌──────────────────────────────────┐
│ Step 2 of 4: Integrations │
│ [Progress: ████████░░] 50% │
├──────────────────────────────────┤
│ │
│ Available Integrations │
│ [Search: ________] │
│ │
│ Filter: [All] [DeFi] [AI] [NFT] │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 🔄 Uniswap│ │ 💰 Aave │ │
│ │ │ │ │ │
│ │ DEX swaps│ │ Lending │ │
│ │ [✓] │ │ [ ] │ │
│ └──────────┘ └──────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 🤖 OpenAI│ │ 🎨 Mid...│ │
│ │ │ │ │ │
│ │ AI models│ │ Images │ │
│ │ [✓] │ │ [✓] │ │
│ └──────────┘ └──────────┘ │
│ │
│ Selected: 3 integrations │
│ │
│ [← Back] [Next →] │
└──────────────────────────────────┘Features:
- Search/filter integrations
- Category grouping
- Selection with checkboxes
- Preview integration details
- Minimum 1 required
Wireframe: wireframes/creator-step2-integrations.png
Step 3: Configure Integrations
┌──────────────────────────────────┐
│ Step 3 of 4: Configuration │
│ [Progress: ███████████░░] 75% │
├──────────────────────────────────┤
│ │
│ Configure Selected Integrations │
│ │
│ ┌──────────────────────────┐ │
│ │ 🔄 Uniswap │ │
│ ├──────────────────────────┤ │
│ │ Network: [Sepolia ▼] │ │
│ │ Slippage: [0.5%] │ │
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 🤖 OpenAI │ │
│ ├──────────────────────────┤ │
│ │ API Key: [●●●●●●●●] │ │
│ │ [🔒 Encrypted Storage] │ │
│ │ Model: [GPT-4 ▼] │ │
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 🎨 Midjourney │ │
│ ├──────────────────────────┤ │
│ │ API Key: [●●●●●●●●] │ │
│ │ Style: [Default ▼] │ │
│ └──────────────────────────┘ │
│ │
│ [← Back] [Next →] │
└──────────────────────────────────┘Features:
- Per-integration configuration
- API key management (encrypted)
- Parameter settings
- Test connections
Wireframe: wireframes/creator-step3-config.png
Step 4: Review & Deploy
┌──────────────────────────────────┐
│ Step 4 of 4: Review & Deploy │
│ [Progress: ████████████████] 100%│
├──────────────────────────────────┤
│ │
│ Review Your Agent │
│ │
│ ┌──────────────────────────┐ │
│ │ Agent: Trading Bot v1 │ │
│ │ Wallet: 0x1234...5678 │ │
│ │ Fee Rate: 2.5% │ │
│ │ │ │
│ │ Integrations: │ │
│ │ • Uniswap │ │
│ │ • OpenAI │ │
│ │ • Midjourney │ │
│ └──────────────────────────┘ │
│ │
│ Estimated Gas: ~200,000 │
│ │
│ [ ] I agree to terms │
│ │
│ ┌──────────────────────────┐ │
│ │ Transaction Preview │ │
│ │ │ │
│ │ Method: registerAgent │ │
│ │ Estimated: 200,000 gas │ │
│ └──────────────────────────┘ │
│ │
│ [← Back] [Deploy Agent] │
└──────────────────────────────────┘Features:
- Summary display
- Transaction preview
- Terms agreement
- Deploy button (triggers wallet)
Wireframe: wireframes/creator-step4-deploy.png
2.3 Configuration Dashboard
Main View
┌────────────────────────────────────────┐
│ Agent: Trading Bot │
│ [Active] [Settings] [Analytics] │
├────────────────────────────────────────┤
│ │
│ Overview │
│ ┌──────────┐ ┌──────────┐ │
│ │ Status │ │ Fees │ │
│ │ Active │ │ $1,234 │ │
│ └──────────┘ └──────────┘ │
│ │
│ Quick Actions │
│ [Configure] [Test] [Deploy Update] │
│ │
│ Integrations │
│ ┌──────────────────────────┐ │
│ │ Active: 3 │ │
│ │ [Manage Integrations →] │ │
│ └──────────────────────────┘ │
│ │
│ Recent Activity │
│ ┌──────────────────────────┐ │
│ │ [Activity Log Table] │ │
│ └──────────────────────────┘ │
└────────────────────────────────────────┘Wireframe: wireframes/creator-dashboard.png
Part 3: Agent Operator Web App
3.1 Operator Dashboard
Main Layout
┌────────────────────────────────────────┐
│ Operator Dashboard │
│ [Agent Selector ▼] [Settings] │
├────────────────────────────────────────┤
│ │
│ Agent Status │
│ ┌────────────────────────────────┐ │
│ │ Status: ✅ Active │ │
│ │ Last Activity: 2 min ago │ │
│ │ Wallet Balance: 1.5 ETH │ │
│ └────────────────────────────────┘ │
│ │
│ Performance Metrics │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │Fees │ │Yield│ │Tasks│ │Users│ │
│ │$234 │ │$123│ │45 │ │12 │ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
│ Activity Feed │
│ ┌────────────────────────────────┐ │
│ │ [Real-time activity log] │ │
│ │ • Fee collected: $50 │ │
│ │ • Task completed: Swap executed │ │
│ │ • User interaction: API call │ │
│ └────────────────────────────────┘ │
│ │
│ Quick Actions │
│ [Start] [Stop] [Configure] [Fund] │
└────────────────────────────────────────┘Key Features:
- Real-time monitoring
- Performance metrics
- Activity feed
- Control actions
Wireframe: wireframes/operator-dashboard.png
3.2 Agent Control Panel
Control Interface
┌────────────────────────────────────────┐
│ Agent Control: Trading Bot │
├────────────────────────────────────────┤
│ │
│ Agent State │
│ ┌────────────────────────────────┐ │
│ │ Current State: [Running ▼] │ │
│ │ │ │
│ │ [⏸ Pause] [⏹ Stop] [▶ Resume]│ │
│ └────────────────────────────────┘ │
│ │
│ Wallet Management │
│ ┌────────────────────────────────┐ │
│ │ Balance: 1.5 ETH │ │
│ │ │ │
│ │ [Deposit] [Withdraw] [Transfer]│ │
│ └────────────────────────────────┘ │
│ │
│ Integration Status │
│ ┌────────────────────────────────┐ │
│ │ Uniswap: ✅ Connected │ │
│ │ OpenAI: ✅ Connected │ │
│ │ Aave: ⚠️ Warning │ │
│ └────────────────────────────────┘ │
│ │
│ Fee Collection │
│ ┌────────────────────────────────┐ │
│ │ Pending: $234 │ │
│ │ │ │
│ │ [Collect Fees →] │ │
│ └────────────────────────────────┘ │
└────────────────────────────────────────┘Wireframe: wireframes/operator-control.png
Part 4: Agent Investor Web App
4.1 Registry/Discovery Page
Main View
┌────────────────────────────────────────┐
│ Agent Registry │
│ [Search: ________] [Filter ▼] [Sort ▼]│
├────────────────────────────────────────┤
│ │
│ Stats Bar │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │Agents│ │Liquidity│ │Fees│ │Yield│ │
│ │1,234│ │$5.6M │ │$2.3M│ │$1.1M│ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
│ Agent Cards Grid │
│ ┌──────────┐ ┌──────────┐ │
│ │ 🔄 Bot A │ │ 🤖 Bot B │ │
│ │ │ │ │ │
│ │ Liquidity │ │ Liquidity │ │
│ │ 5.2 ETH │ │ 8.1 ETH │ │
│ │ │ │ │ │
│ │ Fees: │ │ Fees: │ │
│ │ $234 │ │ $456 │ │
│ │ │ │ │ │
│ │ [View →] │ │ [View →] │ │
│ └──────────┘ └──────────┘ │
│ │
│ [Load More] │
└────────────────────────────────────────┘Features:
- Search and filter
- Sort options (liquidity, fees, yield, recent)
- Agent cards with key metrics
- Pagination or infinite scroll
Wireframe: wireframes/investor-registry.png
4.2 Agent Detail Page
Layout
┌────────────────────────────────────────┐
│ ← Back to Registry │
│ │
│ Agent: AI Trading Bot │
│ [Status Badge] [Actions ▼] │
├────────────────────────────────────────┤
│ │
│ Overview │
│ ┌────────────────────────────────┐ │
│ │ Wallet: 0x1234...5678 │ │
│ │ Fee Rate: 2.5% │ │
│ │ Integrations: Uniswap, OpenAI │ │
│ └────────────────────────────────┘ │
│ │
│ Statistics │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Liquidity│ │Fees│ │Yield│ │Owners│ │
│ │5.2 ETH│ │$234│ │$123│ │42 │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ Your Holdings (if connected) │
│ ┌────────────────────────────────┐ │
│ │ Ownership: 2.5% │ │
│ │ Value: 0.13 ETH │ │
│ │ Earnings: $12.50 │ │
│ │ │ │
│ │ [Claim Rewards] [Manage] │ │
│ └────────────────────────────────┘ │
│ │
│ Ownership Distribution │
│ ┌────────────────────────────────┐ │
│ │ [Ownership Chart] │ │
│ └────────────────────────────────┘ │
│ │
│ Actions │
│ [Provide Liquidity] [Withdraw] │
└────────────────────────────────────────┘Wireframe: wireframes/investor-detail.png
4.3 Portfolio Dashboard
Layout
┌────────────────────────────────────────┐
│ My Portfolio │
│ [Filter ▼] [Export] │
├────────────────────────────────────────┤
│ │
│ Summary Cards │
│ ┌──────────┐ ┌──────────┐ │
│ │CR8 Balance│ │Staked CR8│ │
│ │1,234 CR8 │ │500 CR8 │ │
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │Portfolio │ │Rewards │ │
│ │Value │ │Pending │ │
│ │2.5 ETH │ │50 CR8 │ │
│ └──────────┘ └──────────┘ │
│ │
│ Agent Holdings │
│ ┌────────────────────────────────┐ │
│ │ Trading Bot │ │
│ │ Ownership: 2.5% | Value: 0.13│ │
│ │ Earnings: $12.50 │ │
│ │ [Claim] [Manage] │ │
│ ├────────────────────────────────┤ │
│ │ NFT Creator │ │
│ │ Ownership: 5.0% | Value: 0.40│ │
│ │ Earnings: $45.00 │ │
│ │ [Claim] [Manage] │ │
│ └────────────────────────────────┘ │
│ │
│ CR8 Staking │
│ ┌────────────────────────────────┐ │
│ │ Staked: 500 CR8 │ │
│ │ Pending Rewards: 50 CR8 │ │
│ │ │ │
│ │ [Stake More] [Claim Rewards] │ │
│ └────────────────────────────────┘ │
└────────────────────────────────────────┘Wireframe: wireframes/investor-portfolio.png
Part 5: Desktop Applications
5.1 Desktop App Architecture
Electron/TAURI Structure
- Framework: Electron (or Tauri for lighter footprint)
- Platforms: macOS, Windows, Linux
- Features: Native menus, shortcuts, notifications
Main Window Layout
┌──────────────────────────────────────────────┐
│ File Edit View Window Help │
├──────────────────────────────────────────────┤
│ [Logo] Agent L3 [Min] [_] [X] │
├──────────┬──────────────────────────────────┤
│ │ │
│ Sidebar │ Main Content │
│ │ │
│ - Home │ [Application-specific content] │
│ - Agents │ │
│ - Portfolio│ │
│ - Settings│ │
│ │ │
└──────────┴──────────────────────────────────┘5.2 Desktop Features
Enhanced Features:
- Multi-window support
- Keyboard shortcuts
- System tray integration
- Native notifications
- Offline mode support
- File system access (for logs/configs)
Wireframe: wireframes/desktop-main.png
Part 6: Documentation Sections
6.1 Documentation Structure
/docs
├── Getting Started
│ ├── Introduction
│ ├── Quick Start
│ └── Installation
├── Guides
│ ├── Creating Your First Agent
│ ├── Providing Liquidity
│ ├── Staking CR8
│ └── Integration Setup
├── API Reference
│ ├── Smart Contracts
│ ├── Frontend SDK
│ └── REST API (if any)
├── Smart Contracts
│ ├── AgentRegistry
│ ├── AgentDeposit
│ ├── FeeDistributor
│ └── CR8Staking
└── FAQ6.2 Documentation Page Layout
┌────────────────────────────────────────┐
│ Agent L3 Documentation │
├──────────┬─────────────────────────────┤
│ │ │
│ Sidebar │ Content │
│ │ │
│ - Guides │ # Creating Your First │
│ - API │ Agent │
│ - FAQ │ │
│ │ Content here... │
│ │ │
│ │ [Previous] [Next] │
└──────────┴─────────────────────────────┘Features:
- Searchable
- Table of contents
- Code examples
- Interactive demos
- Version selector
Wireframe: wireframes/docs-layout.png
Screen Specifications
Screen Sizes & Breakpoints
Mobile:
- Width: 320px - 640px
- Single column layout
- Stacked components
- Touch-optimized (44px min targets)
Tablet:
- Width: 640px - 1024px
- 2-column layouts possible
- Touch + mouse support
Desktop:
- Width: 1024px+
- Multi-column layouts
- Hover states
- Keyboard shortcuts
Large Desktop:
- Width: 1440px+
- Maximum content width: 1280px
- Centered layouts
Component State Specifications
Buttons
- Default: Gray-900 bg, White text
- Hover: Slightly darker
- Active: Pressed state
- Disabled: 40% opacity, not-allowed cursor
- Loading: Spinner + disabled
Cards
- Default: White bg, Gray-200 border
- Hover: Gray-400 border (if interactive)
- Selected: Gray-300 background
- Loading: Skeleton state
Forms
- Default: White bg, Gray-300 border
- Focus: Gray-700 border, outline
- Error: Gray-900 border, error message
- Success: Gray-700 border (subtle)
- Disabled: Gray-200 bg, Gray-400 text
Interaction Patterns
Loading States
- Skeleton loaders for content
- Spinner for actions
- Progress bars for multi-step processes
Empty States
- Icon (32px)
- Heading
- Description
- CTA button
Error States
- Error icon
- Error message
- Action buttons (retry, cancel)
Success States
- Checkmark icon
- Success message
- Next action CTA
Accessibility Specifications
Keyboard Navigation
- Tab order: Logical flow
- Focus indicators: 2px Gray-700 outline
- Skip links: Jump to main content
- ARIA labels: All interactive elements
Screen Reader Support
- Semantic HTML
- ARIA roles and properties
- Alt text for images
- Status announcements
Visual Accessibility
- Minimum contrast: 4.5:1
- No color-only information
- Focus visible at all times
- Resizable text (up to 200%)
File Structure for Design Assets
design/
├── brand-kit/
│ ├── logos/
│ │ ├── logo-primary.svg
│ │ ├── logo-secondary.svg
│ │ └── logo-icon.svg
│ ├── typography/
│ │ └── font-specs.md
│ └── spacing/
│ └── spacing-scale.png
│
├── wireframes/
│ ├── website/
│ │ ├── homepage.png
│ │ ├── about.png
│ │ └── docs-layout.png
│ ├── creator/
│ │ ├── step1-basic.png
│ │ ├── step2-integrations.png
│ │ ├── step3-config.png
│ │ └── step4-deploy.png
│ ├── operator/
│ │ ├── dashboard.png
│ │ └── control-panel.png
│ ├── investor/
│ │ ├── registry.png
│ │ ├── agent-detail.png
│ │ └── portfolio.png
│ └── desktop/
│ └── main-window.png
│
├── mockups/
│ ├── greyscale/
│ │ └── [same structure as wireframes]
│ └── color/
│ └── [future - add colors]
│
└── components/
├── buttons.png
├── forms.png
├── cards.png
└── navigation.pngDesign Delivery Checklist
For Each Screen
- [ ] Wireframe (greyscale)
- [ ] Component annotations
- [ ] Interaction states
- [ ] Responsive breakpoints
- [ ] Accessibility notes
- [ ] Content placeholders
For Components
- [ ] All states (default, hover, active, disabled)
- [ ] Variants (sizes, types)
- [ ] Usage guidelines
- [ ] Code examples
For Flows
- [ ] Complete user journey
- [ ] Error paths
- [ ] Success paths
- [ ] Edge cases
Notes for Hand-Drawn Sketches
Sketch Guidelines
- Scan/Photo: High resolution (300 DPI minimum)
- Clean: Clear lines, good lighting
- Annotated: Add notes for unclear elements
- Numbered: Sequential numbering for multi-step flows
Upload Format
- File Format: PNG or PDF
- Naming:
[app]-[screen]-sketch-v1.png - Example:
creator-step1-basic-sketch-v1.png
Integration
- Add sketches to
design/wireframes/[app]/sketches/ - Reference in this document with image tags
- Use as base for digital wireframes
This design document provides comprehensive specifications for all Agent L3 applications. The greyscale foundation ensures excellent contrast and accessibility while colors can be added later as accents.