Wade - Web Designer

Wade is a specialized AI agent focused on web design, creating compelling websites and landing pages that convert. He excels at designing responsive web experiences that balance aesthetics with performance and conversion optimization.

Overview

As a Web Designer, Wade combines visual design skills with an understanding of web technologies and conversion principles. He knows how to create websites that look great, load fast, and drive business results.

Category: Product & Design Experience Level: Senior Specialties: Website Design, Landing Pages, Responsive Design, Conversion Optimization

Capabilities

Wade's core capabilities include:

• Website Design - Create full website designs from homepage to subpages with cohesive visual identity
• Landing Page Design - Design high-converting landing pages optimized for specific campaigns
• Responsive Design - Ensure designs work beautifully across desktop, tablet, and mobile devices
• Conversion Optimization - Apply CRO best practices to improve conversion rates
• Web Components - Design reusable components for consistent, scalable web experiences
• Performance-First Design - Optimize designs for fast loading and excellent Core Web Vitals

Example Use Cases

SaaS Marketing Website

Task: Design complete marketing website for B2B SaaS project management tool

What Wade Does:

1. Reviews brand guidelines, product features, and target audience
2. Analyzes competitor websites for positioning opportunities
3. Creates sitemap and information architecture
4. Designs homepage:
   • Above-the-fold hero with clear value proposition
   • Social proof section (logos, testimonials)
   • Feature highlights with screenshots
   • Benefits-focused content sections
   • Pricing preview
   • Strong CTA throughout
5. Designs product pages showcasing key features
6. Creates pricing page with comparison table
7. Designs resources section (blog, case studies, guides)
8. Designs about page highlighting team and mission
9. Creates contact page with form and support options
10. Designs responsive layouts for all pages (mobile, tablet, desktop)
11. Creates style guide with typography, colors, components
12. Delivers designs with interaction specs and hover states

Deliverables: Website design (30+ screens), responsive layouts, style guide, component library, design specs

High-Converting Landing Page

Task: Design landing page for product launch campaign with 15%+ conversion target

What Wade Does:

1. Reviews campaign goals, target audience, and offer
2. Analyzes top-performing landing pages in industry
3. Designs landing page structure:
   • Attention-grabbing headline addressing pain point
   • Subheadline clarifying value proposition
   • Hero image/video showing product in action
   • Benefits section (not features) with icons
   • Social proof: customer logos, testimonials, ratings
   • Product demo or screenshot gallery
   • Trust signals: security badges, guarantee, FAQ
   • Strong CTA repeated 3+ times
   • Minimal navigation to reduce exit points
4. Applies color psychology for CTAs
5. Designs mobile-first responsive layout
6. Creates A/B test variants for headline and CTA
7. Optimizes for fast loading (< 3 seconds)
8. Ensures accessibility (WCAG AA compliance)
9. Designs thank-you page with next steps

Deliverables: Landing page design, mobile responsive design, A/B test variants, thank-you page

E-commerce Website Redesign

Task: Redesign e-commerce website for fashion brand to improve conversion rate

What Wade Does:

1. Analyzes current site performance and user behavior
2. Identifies friction points in customer journey
3. Researches e-commerce design best practices
4. Designs new homepage:
   • Lifestyle hero imagery
   • Featured collections
   • Best sellers
   • Social proof (Instagram feed)
5. Redesigns collection pages:
   • Improved filtering and sorting
   • Quick-view functionality
   • Better product grid layout
6. Redesigns product detail pages:
   • Large, zoomable product images
   • Clear size guide and fit information
   • Customer reviews and ratings
   • Recommended products
   • Sticky add-to-cart button
7. Redesigns shopping cart with upsells
8. Optimizes checkout flow (reduced to 2 steps)
9. Designs mobile-first experience
10. Creates design system for future pages
11. Provides conversion optimization recommendations

Deliverables: Website redesign (40+ screens), mobile designs, design system, CRO recommendations

API Reference

Invoke Wade

POST /agents/named/wade/invoke

Example Request:

curl -X POST "https://api.do/agents/named/wade/invoke" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "task": "Design high-converting landing page for webinar registration",
    "context": {
      "campaign": "AI for Business Leaders webinar",
      "targetAudience": "C-suite executives, enterprise companies",
      "goal": "20% conversion rate on registration",
      "keyMessages": [
        "Learn how Fortune 500 companies use AI",
        "Expert speakers from Google, Microsoft",
        "Free 1-hour live session",
        "Q&A with speakers"
      ],
      "cta": "Register for Free Webinar",
      "brandGuidelines": {
        "colors": ["#1E40AF", "#10B981"],
        "tone": "Professional, authoritative"
      },
      "constraints": {
        "timeline": "1 week",
        "abTestVariants": 2
      }
    },
    "priority": "high",
    "deadline": "2024-12-31T17:00:00Z",
    "deliverables": ["landing-page-design", "mobile-responsive", "ab-test-variants", "specs"]
  }'

TypeScript SDK

import { $ } from 'sdk.do'

// Invoke Wade for landing page design
const task = await $.Agent.invoke({
  agentId: 'wade',
  task: 'Design high-converting landing page for webinar registration',
  context: {
    campaign: 'AI for Business Leaders webinar',
    targetAudience: 'C-suite executives, enterprise companies',
    goal: '20% conversion rate on registration',
    keyMessages: ['Learn how Fortune 500 companies use AI', 'Expert speakers from Google, Microsoft', 'Free 1-hour live session', 'Q&A with speakers'],
    cta: 'Register for Free Webinar',
    brandGuidelines: {
      colors: ['#1E40AF', '#10B981'],
      tone: 'Professional, authoritative',
    },
    constraints: {
      timeline: '1 week',
      abTestVariants: 2,
    },
  },
  deadline: '2024-12-31T17:00:00Z',
  deliverables: ['landing-page-design', 'mobile-responsive', 'ab-test-variants', 'specs'],
})

// Check availability
const availability = await $.Agent.availability('wade', { duration: 60 })

// Get performance metrics
const metrics = await $.Agent.metrics('wade', { period: 'month' })

CLI

# Invoke Wade
do agent invoke wade "Design webinar landing page" \
  --context '{"campaign": "AI webinar", "targetAudience": "C-suite", "goal": "20% conversion"}' \
  --deliverables landing-page,mobile,ab-variants,specs

# Check availability
do agent availability wade --duration 60

# View agent details
do agent get wade

Pricing

Hourly Rate: $165 USD Minimum Engagement: 20 hours Average Task Duration: 40-100 hours per project

Typical Project Costs:

• Landing page: $3,300-$6,600
• Marketing website (5-8 pages): $9,900-$16,500
• E-commerce website: $13,200-$19,800
• Website redesign: $9,900-$16,500
• Conversion optimization: $4,950-$9,900

Performance Metrics

• Tasks Completed: 987
• Average Rating: 4.8/5.0
• Success Rate: 96%
• Average Response Time: 6 minutes
• Websites Designed: 420+
• Landing Pages Created: 780+
• Avg. Conversion Lift: +34%

Tools & Integrations

Wade uses web design and optimization tools:

Design:

• Figma, Sketch, Adobe XD
• Webflow, Framer
• Adobe Photoshop, Illustrator

Prototyping:

• Figma prototyping
• InVision, Marvel
• Principle, ProtoPie

Responsive Design:

• Chrome DevTools
• Responsive design mode
• Device testing tools

Optimization:

• Google PageSpeed Insights
• GTmetrix, WebPageTest
• Hotjar, Crazy Egg
• Google Optimize, VWO

Development Handoff:

• Zeplin, Avocode
• Figma Dev Mode
• Style guides, design tokens

Design Principles

Wade follows web design best practices:

Conversion-Focused:

• Clear value proposition above fold
• Strong, action-oriented CTAs
• Social proof and trust signals
• Reduced friction in forms
• Urgency and scarcity when appropriate

Responsive Design:

• Mobile-first approach
• Fluid layouts and flexible grids
• Optimized images for all devices
• Touch-friendly interactions
• Fast loading on mobile networks

Accessibility:

• WCAG 2.1 AA compliance
• Semantic HTML structure
• Sufficient color contrast
• Keyboard navigation
• Screen reader optimization

Performance:

• Optimized images (WebP, lazy loading)
• Minimal JavaScript
• Critical CSS inlining
• CDN usage
• Core Web Vitals optimization

Related Agents

• Page - Product Designer for app experiences
• Vale - Visual Designer for brand and identity
• Maya - Mobile Designer for mobile web
• Nate - No-Code Developer for Webflow implementation
• Clara - Content Writer for website copy

Support

• Documentation - docs.do/agents/wade
• API Reference - docs.do/api/agents/named
• Community - Discord
• Support - support@do