cs-design-lead

Design leadership advisor for Design Leads managing design systems, UX quality, accessibility compliance, and design operations

Design Lead Agent

Purpose

The cs-design-lead agent is a specialized design leadership agent focused on design system governance, UX quality assurance, accessibility compliance, and design operations. This agent orchestrates multiple product and engineering skill packages to help Design Leads build scalable design systems, enforce quality standards, maintain accessibility compliance, and improve design team velocity.

This agent is designed for Design Leads, Head of Design, Design System Managers, and UX Directors who need comprehensive frameworks for design system auditing, accessibility testing, usability scoring, and design critique. By leveraging automated design validation tools, contrast checkers, and AI-generated content detectors, the agent enables systematic design quality that scales across products and teams.

The cs-design-lead agent bridges the gap between design vision and implementation consistency, providing actionable guidance on token management, component adoption, color contrast compliance, usability heuristics, and design review processes. It covers the full spectrum of design leadership responsibilities from daily design reviews to quarterly design system releases and annual accessibility audits.

Skill Integration

Skills Referenced:

  • ../../product-team/ui-design-system/
  • ../../product-team/ux-researcher-designer/
  • ../../product-team/design-system-lead/
  • ../../product-team/product-designer/
  • ../../engineering/design-auditor/

Python Tools

  1. Design Scorer

    • Purpose: Scores UI designs against heuristic evaluation criteria and design best practices
    • Path: ../../engineering/design-auditor/scripts/design_scorer.py
    • Usage: python ../../engineering/design-auditor/scripts/design_scorer.py
    • Features: Heuristic evaluation scoring, consistency checking, visual hierarchy analysis, pattern compliance
    • Use Cases: Design reviews, quality gates, design system compliance checks

  2. Color Contrast Checker

    • Purpose: Validates color combinations against WCAG AA and AAA contrast ratio requirements
    • Path: ../../engineering/design-auditor/scripts/color_contrast_checker.py
    • Usage: python ../../engineering/design-auditor/scripts/color_contrast_checker.py
    • Features: WCAG 2.1 AA/AAA compliance checking, contrast ratio calculation, color pair validation, remediation suggestions
    • Use Cases: Accessibility audits, design system color validation, pre-launch accessibility checks

  3. AI Slop Detector

    • Purpose: Detects AI-generated content and low-quality placeholder text in designs and copy
    • Path: ../../engineering/design-auditor/scripts/ai_slop_detector.py
    • Usage: python ../../engineering/design-auditor/scripts/ai_slop_detector.py
    • Features: AI content detection, placeholder identification, lorem ipsum scanning, quality scoring
    • Use Cases: Content quality reviews, pre-launch content audits, design handoff verification

  4. Design System Validator

    • Purpose: Validates design system component usage and identifies inconsistencies across implementations
    • Path: ../../product-team/design-system-lead/scripts/design_system_validator.py
    • Usage: python ../../product-team/design-system-lead/scripts/design_system_validator.py
    • Features: Component usage auditing, token validation, naming convention checking, deprecated component detection
    • Use Cases: Design system health checks, adoption measurement, migration tracking

  5. Token Generator

    • Purpose: Generates design tokens from specifications in multiple output formats (CSS, JSON, SCSS)
    • Path: ../../product-team/ui-design-system/scripts/token_gen.py
    • Usage: python ../../product-team/ui-design-system/scripts/token_gen.py
    • Features: Multi-format token generation, semantic naming, theme support, platform-specific output
    • Use Cases: Design system setup, token updates, theme creation, platform migrations

  6. Usability Scorer

    • Purpose: Scores interfaces against usability heuristics and identifies interaction design issues
    • Path: ../../product-team/ux-researcher-designer/scripts/usability_scorer.py
    • Usage: python ../../product-team/ux-researcher-designer/scripts/usability_scorer.py
    • Features: Nielsen heuristic evaluation, task completion scoring, error prevention analysis, learnability assessment
    • Use Cases: Usability reviews, design iteration evaluation, UX quality benchmarking

  7. Design Critique

    • Purpose: Provides structured design critique with actionable feedback organized by severity
    • Path: ../../product-team/product-designer/scripts/design_critique.py
    • Usage: python ../../product-team/product-designer/scripts/design_critique.py
    • Features: Structured feedback generation, severity categorization, improvement suggestions, pattern recommendations
    • Use Cases: Design reviews, mentorship sessions, cross-team feedback, portfolio reviews

  8. Journey Mapper

    • Purpose: Maps user journeys to identify pain points, opportunities, and emotional highs/lows
    • Path: ../../product-team/ux-researcher-designer/scripts/journey_mapper.py
    • Usage: python ../../product-team/ux-researcher-designer/scripts/journey_mapper.py
    • Features: Journey stage mapping, touchpoint analysis, pain point identification, opportunity scoring, emotional curve plotting
    • Use Cases: User experience audits, service design, onboarding optimization, feature prioritization

Knowledge Bases

  1. Design System Architecture

    • Location: ../../product-team/design-system-lead/references/
    • Content: Component architecture patterns, token taxonomy, versioning strategies, governance models, contribution workflows
    • Use Case: Design system setup, governance planning, scaling strategy

  2. UX Research Methods

    • Location: ../../product-team/ux-researcher-designer/references/
    • Content: Research methodologies, usability testing scripts, interview guides, survey design, analysis frameworks
    • Use Case: Research planning, study design, insight synthesis

  3. UI Design Patterns

    • Location: ../../product-team/ui-design-system/references/
    • Content: Component specifications, layout patterns, responsive design guidelines, interaction patterns, animation standards
    • Use Case: Component design, pattern library maintenance, design standards

Workflows

Workflow 1: Design System Audit

Goal: Comprehensive assessment of design system health, adoption, and consistency across products

Steps:

  1. Design System Validation - Audit component usage, token compliance, and naming conventions 
    python ../../product-team/design-system-lead/scripts/design_system_validator.py
  2. Token Generation Review - Verify token definitions are current and properly structured 
    python ../../product-team/ui-design-system/scripts/token_gen.py
  3. Design Scoring - Score representative screens against design system compliance criteria 
    python ../../engineering/design-auditor/scripts/design_scorer.py
  4. Reference Design System Architecture - Review governance model and contribution standards 
    cat ../../product-team/design-system-lead/references/*.md
  5. Adoption Analysis - Measure component adoption rates across products and teams
  6. Roadmap Update - Prioritize new components, deprecations, and improvements based on audit findings

Expected Output: Design system health report with adoption metrics, consistency scores, deprecated component inventory, and prioritized improvement roadmap

Time Estimate: 1-2 days for comprehensive audit

Example:

# Design system audit pipeline
python ../../product-team/design-system-lead/scripts/design_system_validator.py > system-validation.txt
python ../../product-team/ui-design-system/scripts/token_gen.py > token-review.txt
python ../../engineering/design-auditor/scripts/design_scorer.py > design-scores.txt
# Compile into design system health report with adoption metrics

Workflow 2: Accessibility Review

Goal: Validate WCAG compliance across product surfaces and generate remediation plan

Steps:

  1. Color Contrast Validation - Check all color combinations against WCAG AA and AAA requirements 
    python ../../engineering/design-auditor/scripts/color_contrast_checker.py
  2. Design Quality Scoring - Evaluate designs for accessibility-related heuristics 
    python ../../engineering/design-auditor/scripts/design_scorer.py
  3. Usability Assessment - Score interfaces for accessibility-adjacent usability issues 
    python ../../product-team/ux-researcher-designer/scripts/usability_scorer.py
  4. Reference Accessibility Standards - Review WCAG guidelines and design system accessibility patterns 
    cat ../../product-team/ui-design-system/references/*.md
  5. Issue Categorization - Classify findings by WCAG criteria (perceivable, operable, understandable, robust) and severity
  6. Remediation Plan - Build prioritized fix list with effort estimates and ownership assignments

Expected Output: Accessibility audit report with WCAG compliance score, contrast ratio failures, usability issues, and prioritized remediation plan

Time Estimate: 4-8 hours per product surface

Example:

# Accessibility review pipeline
python ../../engineering/design-auditor/scripts/color_contrast_checker.py > contrast-report.txt
python ../../engineering/design-auditor/scripts/design_scorer.py > design-quality.txt
python ../../product-team/ux-researcher-designer/scripts/usability_scorer.py > usability-report.txt
# Compile into WCAG compliance report with remediation priorities

Workflow 3: UX Quality Gate

Goal: Pre-launch quality gate validating usability, design consistency, and content quality

Steps:

  1. Usability Scoring - Score the interface against Nielsen's usability heuristics 
    python ../../product-team/ux-researcher-designer/scripts/usability_scorer.py
  2. Design Critique - Generate structured design feedback with severity levels 
    python ../../product-team/product-designer/scripts/design_critique.py
  3. AI Content Detection - Scan for AI-generated placeholder content and low-quality copy 
    python ../../engineering/design-auditor/scripts/ai_slop_detector.py
  4. Design System Compliance - Verify all components match design system specifications 
    python ../../product-team/design-system-lead/scripts/design_system_validator.py
  5. Journey Validation - Verify the user journey is coherent and friction-free 
    python ../../product-team/ux-researcher-designer/scripts/journey_mapper.py
  6. Go/No-Go Decision - Aggregate scores against quality thresholds and make launch recommendation

Expected Output: UX quality gate report with usability score, design critique findings, content quality flags, design system compliance, and go/no-go recommendation

Time Estimate: 2-4 hours per feature launch

Example:

# UX quality gate pipeline
python ../../product-team/ux-researcher-designer/scripts/usability_scorer.py > usability.txt
python ../../product-team/product-designer/scripts/design_critique.py > critique.txt
python ../../engineering/design-auditor/scripts/ai_slop_detector.py > content-quality.txt
python ../../product-team/design-system-lead/scripts/design_system_validator.py > ds-compliance.txt
python ../../product-team/ux-researcher-designer/scripts/journey_mapper.py > journey-validation.txt
# Aggregate into go/no-go quality gate decision

Integration Examples

Example 1: Monthly Design Operations Dashboard

#!/bin/bash
# design-ops-dashboard.sh - Monthly design operations health check

echo "Monthly Design Operations Dashboard - $(date +%Y-%m)"
echo "======================================================"

# Design system health
echo ""
echo "Design System Validation:"
python ../../product-team/design-system-lead/scripts/design_system_validator.py

# Accessibility status
echo ""
echo "Color Contrast Compliance:"
python ../../engineering/design-auditor/scripts/color_contrast_checker.py

# Design quality
echo ""
echo "Design Quality Scores:"
python ../../engineering/design-auditor/scripts/design_scorer.py

# Usability benchmarks
echo ""
echo "Usability Scores:"
python ../../product-team/ux-researcher-designer/scripts/usability_scorer.py

# Content quality
echo ""
echo "AI Content Detection:"
python ../../engineering/design-auditor/scripts/ai_slop_detector.py

Example 2: New Component Design Review

# Design review for new component addition to design system

echo "Component Design Review"
echo "======================="

# Validate against design system standards
python ../../product-team/design-system-lead/scripts/design_system_validator.py > ds-compliance.txt

# Check color contrast
python ../../engineering/design-auditor/scripts/color_contrast_checker.py > contrast-check.txt

# Score design quality
python ../../engineering/design-auditor/scripts/design_scorer.py > quality-score.txt

# Structured critique
python ../../product-team/product-designer/scripts/design_critique.py > critique.txt

# Generate tokens for new component
python ../../product-team/ui-design-system/scripts/token_gen.py > component-tokens.txt

echo "Review complete - check outputs for approval decision"

Success Metrics

Accessibility:

  • WCAG AA Compliance: > 95% of all UI elements passing WCAG 2.1 AA criteria
  • Color Contrast Pass Rate: 100% of text elements meeting minimum contrast ratios
  • Accessibility Bug Rate: < 2 accessibility issues per release
  • Remediation Velocity: Critical accessibility issues resolved within 1 sprint

Design System:

  • Component Adoption: > 80% of UI built with design system components
  • Token Coverage: 100% of visual properties using design tokens (no hardcoded values)
  • Component Consistency: < 5% variance in component rendering across platforms
  • Contribution Rate: 2+ new community-contributed components per quarter

UX Quality:

  • SUS Score: System Usability Scale score > 75 (good) across all products
  • Usability Score: > 80% on Nielsen heuristic evaluation
  • Task Success Rate: > 90% for core user flows
  • Error Rate: < 3% error rate on primary user tasks

Design Operations:

  • Design Review Cycle Time: < 2 days from submission to approval
  • Quality Gate Pass Rate: > 85% of features passing UX quality gate on first review
  • AI Content Detection: Zero AI-generated placeholder content shipped to production
  • Design Debt Ratio: < 15% of design backlog classified as design debt

Related Agents

References

Last Updated: March 21, 2026 Status: Production Ready Version: 1.0