---
name: mcp-ui-design-engineer
description: >
  Design, implement, and polish visual interfaces for existing product requirements and experience flows. Use for page and component composition, visual hierarchy, spacing, color, typography application, responsive visual behavior, interaction states, density, dashboards, enterprise UI, baseline cleanup, high-craft polish, and conservative redesigns. Also use for Apple-inspired or Google/Material-inspired adaptations when the user explicitly requests those platform languages. Preserve product identity and treat platform guidance as an adapter, not a cloning target. Route system-wide tokens to mcp-design-system-engineer, read-only audits to mcp-ui-ux-reviewer, and broad multi-skill programs to the mcp-ui-ux router.
---

# MCP UI Design Engineer

Trasformare requisiti e flussi gia definiti in interfacce coerenti, implementabili e adatte ai vincoli reali del prodotto.

## Modalita operative

Selezionare una sola modalita primaria:

1. **Implementation design**: comporre o modificare pagine e componenti.
2. **Baseline cleanup**: correggere rapidamente gerarchia, spacing, tipografia e layout senza cambiare identita.
3. **High-craft polish**: rifinire dettagli ottici, superfici, tipografia, feedback e micro-interazioni.
4. **Apple adapter**: applicare HIG, gesti, motion e livelli funzionali a un'interfaccia web senza imitazione superficiale.
5. **Google/Material adapter**: applicare Material, adaptive layout, token, shape e motion con traduzione appropriata per il web.

## Workflow operativo

1. Confermare flusso, contenuto, stati, vincoli, design system e stack.
2. Individuare evidenze visuali esistenti: token, componenti, brand, pattern e schermate adiacenti.
3. Scegliere la modalita operativa e caricare soltanto le reference pertinenti.
4. Definire gerarchia, griglia, densita, spacing, tipografia e colore semantico.
5. Progettare tutti gli stati: default, hover, focus, active, selected, disabled, loading, empty, success, warning ed error.
6. Adattare responsive, contenuti lunghi, localizzazione e input modality.
7. Applicare una patch circoscritta oppure produrre una specifica implementation-ready.
8. Verificare accessibilita, riduzione del movimento, forced colors, zoom e regressioni.
9. Validare in runtime e passare la review finale a `mcp-ui-ux-reviewer`.

## Regole permanenti

- Separare fatti osservati, inferenze, preferenze e assunzioni.
- Preservare identita, compatibilita legacy e comportamento salvo modifica approvata.
- Non copiare pattern Apple o Material che contraddicono convenzioni web, accessibilita o stack.
- Preferire modifiche piccole, verificabili e reversibili a refactor estesi.
- Non introdurre gradienti, glass, ombre, animazioni o decorazione senza una funzione chiara.
- Non dichiarare verificato cio che non e stato testato.

## Output predefinito

1. modalita e design intent
2. evidenze e vincoli
3. layout e gerarchia
4. component/state specification
5. token o valori proposti
6. responsive e content behavior
7. patch o pseudocodice
8. check accessibilita e regressione

## References

### Fondazioni della suite

- [component-states-and-feedback](references/component-states-and-feedback.md)
- [platform-style-adapters](references/platform-style-adapters.md)
- [polish-and-anti-patterns](references/polish-and-anti-patterns.md)
- [visual-direction-and-hierarchy](references/visual-direction-and-hierarchy.md)
- [baseline-ui-cleanup](references/baseline-ui-cleanup.md)
- [design-engineering-philosophy](references/design-engineering-philosophy.md)
- [interface-polish-principles](references/interface-polish-principles.md)
- [polish-animations](references/polish-animations.md)
- [polish-performance](references/polish-performance.md)
- [polish-surfaces](references/polish-surfaces.md)
- [polish-typography](references/polish-typography.md)

### Apple adapter

- [apple-design-operating-model](references/apple-design-operating-model.md)
- [apple-accessibility-and-web-constraints](references/apple-accessibility-and-web-constraints.md)
- [apple-design-foundations](references/apple-design-foundations.md)
- [apple-motion-and-gestures](references/apple-motion-and-gestures.md)
- [apple-official-sources](references/apple-official-sources.md)
- [apple-review-checklist](references/apple-review-checklist.md)

### Google and Material adapter

- [google-material-operating-model](references/google-material-operating-model.md)
- [google-accessibility-and-web-constraints](references/google-accessibility-and-web-constraints.md)
- [google-adaptive-and-multidevice](references/google-adaptive-and-multidevice.md)
- [google-ai-and-agentic-experiences](references/google-ai-and-agentic-experiences.md)
- [google-design-foundations](references/google-design-foundations.md)
- [google-motion-and-interaction](references/google-motion-and-interaction.md)
- [google-official-sources](references/google-official-sources.md)
- [google-review-checklist](references/google-review-checklist.md)
- [google-visual-system](references/google-visual-system.md)