UI/UX Designer Agent

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

What This Agent Does

Trang đích chiến dịch của bạn trông ổn. Nó hoạt động. Nhưng nó không chuyển đổi như các trang của đối thủ cạnh tranh. Người dùng thoát khỏi nó nhanh chóng. Thiết kế cảm thấy chung chung, không thuyết phục. Bạn biết thiết kế là vấn đề, nhưng bạn không phải là nhà thiết kế.

The Problem: Thiết kế tốt là khó. Tạo ra các giao diện đẹp, có thể tiếp cận, chuyển đổi cao, và có thương hiệu yêu cầu chuyên môn hầu hết các nhà phát triển không có. Các mẫu chung không khác biệt. UX kém chất lượng chi phí chuyển đổi và doanh thu.

The Solution: UI/UX Designer Agent tạo ra các giao diện đạt giải với chất lượng thiết kế chuyên nghiệp. Nó nghiên cứu các thiết kế đang xu hướng, áp dụng các mẫu UX được chứng minh, đảm bảo khả năng tiếp cận, tối ưu hóa cho các chuyển đổi, và duy trì danh tính thương hiệu của bạn. Bạn sẽ nhận được các thiết kế trông giống như bạn đã thuê một cơ quan hàng đầu.

Quick Start

Thiết kế một giao diện mới:

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

Bạn sẽ nhận được các wireframe, bản mockup độ trung thực cao, mã sản xuất-sẵn sàng, và tài liệu thiết kế toàn diện.

Capabilities

Cập nhật với các thực hành tốt nhất:

  • 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

Sản xuất công việc chất lượng cơ quan:

  • 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

Thiết kế cho kết quả kinh doanh:

  • 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

Thiết kế cho tất cả người dùng:

  • 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

Duy trì tính nhất quán:

  • 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

Sản xuất tài sản sản xuất-sẵn sàng:

  • 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

Sử dụng UI/UX Designer Agent khi bạn cần:

  • Thiết kế các trang đích hoặc các trang web tiếp thị
  • Tạo các thiết kế cụ thể của chiến dịch
  • Cải thiện tỷ lệ chuyển đổi thông qua UX
  • Phát triển danh tính thương hiệu và hướng dẫn phong cách
  • Thiết kế các mẫu email và bản tin
  • Tạo đồ họa phương tiện xã hội
  • Kiểm tra các thiết kế hiện tại để cải thiện
  • Đảm bảo tuân thủ khả năng tiếp cận

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

Nhà thiết kế theo dõi:

  • 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: Các nhà thiết kế hàng đầu tìm kiếm trước khi thiết kế. Nghiên cứu các ví dụ đạt giải, phân tích những gì hoạt động, sau đó tạo.

Mobile-First Always: Thiết kế cho mobile trước tiên, sau đó mở rộng lên. Nó dễ hơn thiết kế cho máy tính để bàn và chèn vào thiết bị di động.

Test Accessibility: Sử dụng công cụ tự động (axe DevTools, WAVE) và thử nghiệm thủ công (điều hướng bàn phím, trình đọc màn hình).

Optimize Images: Sử dụng WebP với dự phòng PNG. Nén bằng TinyPNG. Lười tải hình ảnh dưới fold. Mỗi KB đều quan trọng.

Measure Results: Thiết kế tuyệt vời thúc đẩy kết quả. Sử dụng phân tích để đo tác động chuyển đổi. Các biến thể A/B test.

Maintain Design System: Cập nhật docs/design-guidelines.md với mỗi mẫu mới. Sự nhất quán kết hợp theo thời gian.

UI/UX Designer Agent mang chất lượng thiết kế cấp cơ quan cho các dự án tiếp thị của bạn. Bạn không cần một đội thiết kế - bạn có một nhà thiết kế đạt giải theo yêu cầu.