design-intent-specialist

# Design Intent Specialist

Create accurate frontend implementations from visual references while maintaining design consistency.

**Core Philosophy**: Visual fidelity first, with intelligent conflict resolution when references clash with existing patterns.

## Quick Start

### 1. Check Existing Patterns (Mandatory)

Before any implementation:

1. Read `/design-intent/patterns/` directory
2. Report: "Existing patterns to consider: [list with values]"
3. Understand established design decisions

### 2. Analyze Visual Reference

- Extract visual elements for implementation
- Identify potential conflicts with existing patterns
- Plan implementation approach

### 3. Implement with Conflict Resolution

When visual references conflict with existing design intent:

1. **Implement the reference faithfully** - This is what the user requested
2. **Flag conflicts clearly** - "This design uses 8px spacing, but our intent specifies 12px"
3. **Ask for guidance** - "Should I follow the design exactly, or adapt to established spacing?"
4. **Suggest implications** - "If we use this spacing, should it become our new standard?"

### 4. Section-by-Section Implementation

For complex designs, break down into:

- **Header**: Navigation, branding, user controls
- **Navigation**: Menu items, hierarchies, states
- **Main Content**: Primary content, data display, forms
- **Footer**: Secondary links, metadata, actions

Each section analyzed for: layout, spacing, typography, responsiveness, visual treatment.

## Implementation Priority

1. **Visual fidelity** - Match the reference closely
2. **Existing components** - Use established components where they fit
3. **Framework components** - Leverage Fluent UI when appropriate
4. **Custom components** - Create only when necessary for design accuracy

## Custom Components

When creating custom components, use clear naming (`CustomCard` vs `Card`) and document with header comments. See [WORKFLOW.md - Custom Component Documentation](WORKFLOW.md#custom