218 lines
7.0 KiB
YAML
218 lines
7.0 KiB
YAML
workflow:
|
|
id: brownfield-ui
|
|
name: Brownfield UI/Frontend Enhancement
|
|
description: >-
|
|
Workflow for modernizing, redesigning, or enhancing existing frontend applications.
|
|
Handles UI/UX improvements, framework migrations, and frontend refactoring.
|
|
type: brownfield
|
|
project_types:
|
|
- ui-modernization
|
|
- framework-migration
|
|
- design-refresh
|
|
- frontend-refactoring
|
|
|
|
stages:
|
|
- id: ui-analysis
|
|
name: Current UI Assessment
|
|
description: Analyze existing frontend and identify improvement areas
|
|
steps:
|
|
- agent: analyst
|
|
action: Frontend Assessment
|
|
description: >-
|
|
Analyze current frontend, user feedback, and performance issues
|
|
inputs:
|
|
- existing-frontend
|
|
- user-feedback
|
|
- analytics-data
|
|
outputs:
|
|
- frontend-assessment
|
|
- usability-issues
|
|
- performance-analysis
|
|
prompts:
|
|
- "Let's analyze the current frontend application"
|
|
- "What are users' main pain points with the current UI?"
|
|
- "Share analytics data or user feedback if available"
|
|
|
|
- agent: ux-expert
|
|
action: UX Audit
|
|
description: >-
|
|
Conduct comprehensive UX audit and competitive analysis
|
|
inputs:
|
|
- frontend-assessment
|
|
- user-feedback
|
|
outputs:
|
|
- ux-audit-report
|
|
- competitor-analysis
|
|
- accessibility-audit
|
|
prompts:
|
|
- "Let's audit the current user experience"
|
|
- "How do competitors handle similar flows?"
|
|
|
|
- id: enhancement-strategy
|
|
name: UI Enhancement Strategy
|
|
description: Define UI improvement strategy and goals
|
|
steps:
|
|
- agent: pm
|
|
action: UI Enhancement Planning
|
|
description: >-
|
|
Define enhancement goals, priorities, and success metrics
|
|
inputs:
|
|
- ux-audit-report
|
|
- usability-issues
|
|
outputs:
|
|
- ui-enhancement-strategy
|
|
- improvement-priorities
|
|
- success-metrics
|
|
prompts:
|
|
- "What are the priority UI improvements?"
|
|
- "Define success metrics for the redesign"
|
|
|
|
- agent: ux-expert
|
|
action: Design Strategy
|
|
description: >-
|
|
Create design strategy and visual direction
|
|
inputs:
|
|
- ui-enhancement-strategy
|
|
- competitor-analysis
|
|
outputs:
|
|
- design-strategy
|
|
- visual-direction
|
|
- brand-evolution
|
|
prompts:
|
|
- "Define the new visual direction"
|
|
- "How should the brand evolve?"
|
|
|
|
- id: incremental-design
|
|
name: Incremental UI Design
|
|
description: Design improvements that can be rolled out incrementally
|
|
steps:
|
|
- agent: ux-expert
|
|
action: Progressive Design System
|
|
description: >-
|
|
Create new design system that can coexist with existing UI
|
|
inputs:
|
|
- design-strategy
|
|
- frontend-assessment
|
|
outputs:
|
|
- progressive-design-system
|
|
- component-migration-plan
|
|
- style-guide-evolution
|
|
prompts:
|
|
- "Design a system that can coexist with current UI"
|
|
- "Plan component-by-component migration"
|
|
|
|
- agent: ui-architect
|
|
action: Frontend Migration Architecture
|
|
description: >-
|
|
Design technical approach for gradual frontend migration
|
|
inputs:
|
|
- progressive-design-system
|
|
- existing-frontend
|
|
outputs:
|
|
- migration-architecture
|
|
- component-strategy
|
|
- bundling-strategy
|
|
prompts:
|
|
- "Design incremental migration approach"
|
|
- "How to avoid breaking existing functionality?"
|
|
|
|
- id: user-validation
|
|
name: User Testing & Validation
|
|
description: Validate new designs with users
|
|
steps:
|
|
- agent: ux-expert
|
|
action: Prototype & Test
|
|
description: >-
|
|
Create prototypes and conduct user testing
|
|
inputs:
|
|
- progressive-design-system
|
|
- improvement-priorities
|
|
outputs:
|
|
- interactive-prototypes
|
|
- user-testing-results
|
|
- design-iterations
|
|
prompts:
|
|
- "Let's create testable prototypes"
|
|
- "Test with real users and iterate"
|
|
|
|
- id: technical-planning
|
|
name: Implementation Planning
|
|
description: Plan technical implementation of UI changes
|
|
steps:
|
|
- agent: ui-architect
|
|
action: Technical Implementation Plan
|
|
description: >-
|
|
Create detailed technical plan for UI migration
|
|
inputs:
|
|
- migration-architecture
|
|
- design-iterations
|
|
outputs:
|
|
- implementation-roadmap
|
|
- risk-mitigation-plan
|
|
- rollback-strategy
|
|
prompts:
|
|
- "Create step-by-step implementation plan"
|
|
- "Plan for safe rollbacks if needed"
|
|
|
|
- agent: qa
|
|
action: UI Testing Strategy
|
|
description: >-
|
|
Plan testing approach for UI changes
|
|
inputs:
|
|
- implementation-roadmap
|
|
- user-testing-results
|
|
outputs:
|
|
- ui-test-strategy
|
|
- visual-regression-tests
|
|
- cross-browser-testing
|
|
- accessibility-testing
|
|
prompts:
|
|
- "Plan comprehensive UI testing"
|
|
- "Ensure no regressions in existing flows"
|
|
|
|
- id: deployment-strategy
|
|
name: Gradual Rollout Planning
|
|
description: Plan safe deployment of UI changes
|
|
steps:
|
|
- agent: ui-architect
|
|
action: Feature Flag Strategy
|
|
description: >-
|
|
Design feature flagging for gradual UI rollout
|
|
inputs:
|
|
- implementation-roadmap
|
|
- risk-mitigation-plan
|
|
outputs:
|
|
- feature-flag-design
|
|
- a-b-testing-plan
|
|
- monitoring-strategy
|
|
prompts:
|
|
- "Design A/B testing for new UI components"
|
|
- "Plan feature flags for safe rollout"
|
|
|
|
transitions:
|
|
- from: ui-analysis
|
|
to: enhancement-strategy
|
|
condition: assessment complete
|
|
- from: enhancement-strategy
|
|
to: incremental-design
|
|
condition: strategy defined
|
|
- from: incremental-design
|
|
to: user-validation
|
|
condition: designs ready
|
|
- from: user-validation
|
|
to: technical-planning
|
|
condition: designs validated
|
|
- from: technical-planning
|
|
to: deployment-strategy
|
|
condition: implementation planned
|
|
|
|
special_considerations:
|
|
- name: User Adoption
|
|
description: Plan for user training and change management
|
|
- name: SEO Impact
|
|
description: Ensure URL structure and SEO aren't negatively affected
|
|
- name: Performance
|
|
description: Maintain or improve existing performance metrics
|
|
- name: Analytics
|
|
description: Preserve analytics tracking through UI changes
|