UI/UX Designer Agent

Your design specialist - Crafts interfaces that delight users and drive conversions

What This Agent Does

Your campaign landing page looks okay. It’s functional. But it doesn’t convert like competitor pages. Users bounce quickly. The design feels generic, not compelling. You know design matters, but you’re not a designer.

The Problem: Good design is hard. Creating interfaces that are beautiful, accessible, high-converting, and on-brand requires expertise most developers don’t have. Generic templates don’t differentiate you. Poor UX costs conversions and revenue.

The Solution: The UI/UX Designer Agent creates award-winning interfaces with professional design quality. It researches trending designs, applies proven UX patterns, ensures accessibility, optimizes for conversions, and maintains your brand identity. You get designs that look like you hired a top agency.

Quick Start

Design a new interface:

# Create a landing page design
/design "Create landing page for SaaS product with hero, features, pricing"

You’ll get wireframes, high-fidelity mockups, production-ready code, and comprehensive design documentation.

Capabilities

Stays current with best practices:

  • Researches award-winning designs on Dribbble, Behance, Awwwards
  • Analyzes top-selling templates on ThemeForest
  • Studies conversion-optimized landing pages
  • Identifies effective design patterns
  • Applies proven UX methodologies

Professional Design Creation

Produces agency-quality work:

  • Creates wireframes (mobile-first approach)
  • Designs high-fidelity mockups with attention to detail
  • Applies professional photography principles
  • Uses sophisticated typography hierarchies
  • Implements purposeful micro-interactions
  • Ensures brand consistency across touchpoints

Conversion Rate Optimization

Designs for business results:

  • Applies CRO best practices and patterns
  • Optimizes user journeys and funnels
  • Uses psychological triggers (social proof, scarcity)
  • Creates compelling calls-to-action
  • Minimizes friction in conversion paths
  • A/B test ready (variants prepared)

Accessibility & Inclusivity

Designs for all users:

  • Meets WCAG 2.1 AA standards minimum
  • Ensures 4.5
    color contrast for text
  • Provides keyboard navigation support
  • Includes proper ARIA labels
  • Tests with screen readers
  • Supports Vietnamese diacritical marks
  • Minimum 44x44px touch targets

Design System Management

Maintains consistency:

  • Creates and updates docs/design-guidelines.md
  • Defines design tokens (colors, spacing, typography)
  • Documents component patterns
  • Establishes brand guidelines
  • Ensures cross-platform consistency

Asset Generation

Produces production-ready assets:

  • Generates images with AI (Gemini image generation)
  • Creates vector graphics (SVG icons, illustrations)
  • Optimizes images (compression, format selection)
  • Removes backgrounds from photos
  • Exports assets in multiple formats
  • Provides responsive image sets

When to Use

Use the UI/UX Designer Agent when you need to:

  • Design landing pages or marketing sites
  • Create campaign-specific designs
  • Improve conversion rates through UX
  • Develop brand identity and style guides
  • Design email templates and newsletters
  • Create social media graphics
  • Audit existing designs for improvements
  • Ensure accessibility compliance

Example Workflows

Landing Page Design

/design "Create high-converting landing page for email marketing SaaS"

The designer will:

  1. Research Phase:

    • Study top SaaS landing pages (Mailchimp, ConvertKit, etc.)
    • Analyze award-winning designs
    • Research conversion optimization patterns
    • Review docs/design-guidelines.md for brand standards

  2. Design Phase:

    • Create mobile wireframes first
    • Design hero section with compelling value prop
    • Layout features with benefit-focused copy
    • Design pricing cards with psychological triggers
    • Create testimonial section with social proof
    • Design CTA sections optimized for conversions
    • Generate professional product screenshots
    • Create vector graphics and icons

  3. Implementation Phase:

    • Build responsive HTML/CSS/JS
    • Add micro-interactions and animations
    • Ensure accessibility (keyboard nav, ARIA, contrast)
    • Optimize performance (lazy loading, WebP images)
    • Test across devices and browsers

  4. Documentation Phase:

    • Update docs/design-guidelines.md with new patterns
    • Create implementation guide for developers
    • Document design decisions and rationale
    • Provide A/B test recommendations

You’ll get:

  • Wireframes (mobile, tablet, desktop)
  • High-fidelity mockups with assets
  • Production-ready HTML/CSS/JS code
  • Design system updates
  • Implementation documentation
  • A/B test variants ready to deploy

Email Template Design

/design "Create branded email template for campaign announcements"

Implementation includes:

  • Mobile-optimized HTML email template
  • Inline CSS for email client compatibility
  • Branded header and footer
  • Responsive images with fallbacks
  • CTA buttons with high contrast
  • Plain-text version
  • Testing checklist for email clients

Design System Audit

/design "Audit design consistency and create component library"

The designer will:

  • Review all existing pages and components
  • Identify inconsistencies (colors, fonts, spacing, buttons)
  • Document current design patterns
  • Create unified component library
  • Update docs/design-guidelines.md
  • Provide migration guide to new system

Design Process

1. Research Phase:

  • Understand business goals and user needs
  • Research trending designs and competitors
  • Analyze top-selling templates for inspiration
  • Study award-winning designs
  • Review existing brand guidelines
  • Generate comprehensive design plan

2. Design Phase:

  • Create wireframes (mobile-first)
  • Design high-fidelity mockups
  • Select Google Fonts with Vietnamese support
  • Generate/optimize assets (AI images, SVG icons)
  • Apply professional photography principles
  • Implement design tokens and consistency
  • Design for accessibility and UX/CX

3. Implementation Phase:

  • Build with semantic HTML/CSS/JS
  • Ensure responsive across all breakpoints
  • Add purposeful animations
  • Test cross-browser and cross-device
  • Optimize performance

4. Validation Phase:

  • Capture screenshots and compare
  • Analyze design quality with AI vision
  • Run accessibility audits
  • Gather feedback and iterate

5. Documentation Phase:

  • Update docs/design-guidelines.md
  • Create detailed implementation reports
  • Document design decisions
  • Provide developer handoff guides

Design Principles

The designer follows:

  • Mobile-First: Start small, scale up
  • Accessibility: Design for all users
  • Consistency: Maintain design system coherence
  • Performance: Optimize for fast load times
  • Clarity: Prioritize clear communication
  • Delight: Add thoughtful micro-interactions
  • Conversion: Optimize every decision for business goals
  • Brand-Driven: Strengthen brand identity

Tools & Skills

Design Generation:

  • AI image generation (Gemini)
  • Vector graphics (SVG)
  • Image editing (ImageMagick)
  • Screenshot analysis (AI vision)

Design Intelligence:

  • ui-ux-pro-max skill - Award-winning design database
  • aesthetic skill - Design principles and visual hierarchy
  • frontend-design skill - Screenshot analysis and replication
  • ui-styling skill - shadcn/ui, Tailwind CSS components

Typography:

  • Google Fonts with Vietnamese support
  • Strategic font pairing
  • Type scale and rhythm
  • Cross-language optimization

3D & Advanced:

  • Three.js scene composition
  • WebGL shader development
  • Particle systems
  • Post-processing effects

Tips

Research First: Top designers research before designing. Study award-winning examples, analyze what works, then create.

Mobile-First Always: Design for mobile first, then scale up. It’s easier than designing desktop and cramming into mobile.

Test Accessibility: Use automated tools (axe DevTools, WAVE) and manual testing (keyboard navigation, screen readers).

Optimize Images: Use WebP with PNG fallback. Compress with TinyPNG. Lazy load below-fold images. Every KB counts.

Measure Results: Great design drives results. Use analytics to measure conversion impact. A/B test variations.

Maintain Design System: Update docs/design-guidelines.md with every new pattern. Consistency compounds over time.

The UI/UX Designer Agent brings agency-level design quality to your marketing projects. You don’t need a design team—you have an award-winning designer on demand.