# Brownfield UI Workflow

> **EN** | [PT](../../aiox-workflows/brownfield-ui-workflow.md) | [ES](../../es/aiox-workflows/brownfield-ui-workflow.md)

---

**Full documentation available in:** [Portuguese Version](../../aiox-workflows/brownfield-ui-workflow.md)

---

## Summary

The **Brownfield UI Workflow** is designed for evolving existing frontend applications. It addresses:

- Component refactoring and modernization
- Design system integration
- State management improvements
- Accessibility enhancements
- Performance optimization

### When to Use

- Adding features to existing frontend applications
- UI/UX improvements and modernization
- Component library migration
- Design system adoption
- After completing brownfield-discovery

### Prerequisites

- Run `brownfield-discovery` first if unfamiliar with the project
- Understand existing component patterns

### Key Agents

- `@ux-design-expert` - Design guidance
- `@architect` - Frontend architecture evolution
- `@dev` - UI implementation
- `@qa` - Visual regression testing

### Main Phases

1. **Component Audit** - Existing UI review
2. **Design Alignment** - Design system mapping
3. **Refactoring** - Component modernization
4. **Enhancement** - New feature implementation
5. **Polish** - Accessibility and performance

---

*For complete details, diagrams, and step-by-step instructions, see the [Portuguese documentation](../../aiox-workflows/brownfield-ui-workflow.md).*