08 product · Design
UX DesignerDesigner de UXDiseñador UX
Design system and accessibility.Design system e acessibilidade.Design system y accesibilidad.
The UX Designer is the persona that curates the design system and guards accessibility. In an AI-native SDLC, the UX Designer operates a stack of validated primitives that turn design decisions into machine-readable tokens and enforceable gates.
Executive summary
The UX Designer produces and governs the design system, the information architecture, and the accessibility guarantees for every user-facing surface. In an AI-native SDLC the UX Designer operates inside the Design phase with a fixed set of primitives: one design system curation agent, four slash prompts, scoped instructions, schema-validated hooks, and a curated list of validated MCPs. Primary outputs are the token map, the component pattern library, accessibility scan reports, and the information architecture that the Developer and QA Engineer implement against.
Role and responsibilities
Think of the UX Designer like the editor of a design language. They do not ship every screen, but every screen that ships has to match the typography, spacing, color, motion, and accessibility rules they authored. In an AI-native SDLC the design language lives as machine-readable tokens, the pattern library is consumable by agents, and the UX Designer is accountable for the fact that the product looks and feels coherent from the first sketch to the rendered page.
Primary responsibilities:
- Author and maintain the design token map under
docs/design-system/tokens/for color, typography, spacing, radius, motion, and elevation - Govern the component pattern library under
docs/design-system/patterns/with usage rules and accessibility notes - Run accessibility scans on every front-end PR via Playwright MCP and axe-core integrations
- Maintain the information architecture under
docs/ia/that binds user journeys to pages and components - Operate the Design System Curator agent and the
/token-map,/a11y-scan,/pattern-lib,/ia-reviewprompts - Align design decisions with the Enterprise Architect’s principles, the Product Owner’s spec, and the Azure Static Web Apps deployment target
- Publish the design review digest to the product Teams channel for stakeholder visibility
Jobs to be done
- As a UX Designer, I want the token map to be the source of truth, so that every component and page reads from the same palette and scale.
- As a UX Designer, I want accessibility to be gated on PR, so that WCAG violations never reach production.
- As a UX Designer, I want the pattern library to be consumable by agents, so that Copilot proposes components from our system, not from the open web.
- As a UX Designer, I want the information architecture to bind journeys to pages, so that every screen has a named context and purpose.
- As a UX Designer, I want design tokens to regenerate the CSS and the Static Web App theme on merge, so that intent and output stay aligned.
- As a UX Designer, I want the design review digest to surface violations and patterns weekly, so that debt is managed, not accumulated.
Pain points before AI-native
- Tokens trapped in a design tool. Colors and spacing live in a design file and are copied by hand into CSS. Drift is guaranteed.
- Accessibility checked at release. WCAG violations land in production because scans run only in the staging environment.
- Pattern library as PDF. Developers and agents cannot consume static documents. They invent components off-system.
- Information architecture as a wireframe. Pages and journeys are drawn, not linked. Analytics tagging happens ad-hoc.
- Design debt invisible. Divergences from the system pile up without a scan to surface them.
AI-native daily workflow
The UX Designer operates a fixed loop each day. The loop uses GitHub Copilot primitives inside Visual Studio Code and Claude Code at the terminal, plus a small catalog of validated MCPs for external context.
Morning setup
- Open the design system repository in Visual Studio Code. GitHub Copilot Chat loads
AGENTS.mdand the scoped design system instructions. - Pull the latest
mainand review overnight component PRs against the pattern library. - Run
/a11y-scanvia Playwright MCP to produce the current accessibility report across the staged Azure Static Web App preview environments. - Review the design system dashboard generated from GitHub MCP telemetry.
Midday execution
- Token authoring. Invoke
/token-mapon any new or revised token. The Design System Curator agent produces the token file, regenerates the CSS export, and updates the Azure Static Web Apps theme bundle. - Pattern authoring. Invoke
/pattern-libon new components or revised usage rules. The agent produces a pattern document with props, accessibility notes, and a primed example. - Information architecture. Invoke
/ia-reviewwhen a new journey or page is proposed. The agent updates the IA map underdocs/ia/and binds the page to named components from the pattern library. - Cross-persona consultation. Raise design debates in the product Teams channel via the Microsoft 365 Agents SDK MCP, with pattern links as the canonical citation.
Afternoon review
- Invoke
/a11y-scanas the final sweep on all open front-end PRs. Block merge on any critical WCAG violation detected by Playwright MCP and axe-core. - Open a pull request on token, pattern, or IA changes. GitHub Copilot Code Review comments on token consistency and accessibility annotations.
- Publish the daily design digest to the product Teams channel via the Microsoft 365 Agents SDK, summarizing new tokens, pattern revisions, and open violations.
- Update the design system changelog and regenerate the Azure Static Web App preview so stakeholders can click through the current state.
Recommended primitives
Agent
| Agent | File | Purpose |
|---|---|---|
design-system-curator | .github/agents/design-system-curator.agent.md | Author tokens, curate the pattern library, run accessibility scans, and govern information architecture |
The Design System Curator uses claude-sonnet-4-6 by default. Tools: read, edit, search, grep, glob, bash scoped to token-build scripts. Extended thinking is disabled because iterative design tasks benefit from short, fast loops.
Slash prompts
| Command | File | Purpose |
|---|---|---|
/token-map | .github/prompts/token-map.prompt.md | Author or revise tokens and regenerate the CSS and Static Web App theme |
/a11y-scan | .github/prompts/a11y-scan.prompt.md | Run accessibility checks via Playwright MCP and axe-core |
/pattern-lib | .github/prompts/pattern-lib.prompt.md | Author or revise a component pattern with props and accessibility notes |
/ia-review | .github/prompts/ia-review.prompt.md | Review and update the information architecture map for a journey |
Instructions scoped
Scoped applyTo reduces token cost by approximately 68 percent compared to global instructions.
Scope (applyTo) | File | Purpose |
|---|---|---|
docs/design-system/tokens/**/*.json | .github/instructions/tokens.instructions.md | Token schema, naming rules, and regeneration contract |
docs/design-system/patterns/**/*.md | .github/instructions/patterns.instructions.md | Pattern document template, props, accessibility annotations |
docs/ia/**/*.md | .github/instructions/ia.instructions.md | Information architecture schema, journey-to-page binding, analytics tagging |
Hooks
Hooks cost zero LLM tokens. They are the strongest governance layer for design.
pre-commit: reject any token file that breaks the naming schema or any pattern without accessibility annotationspost-commit: regenerate the CSS export, Static Web App theme bundle, and pattern indexpre-merge: run/a11y-scanon the PR preview deployment and block merge on critical WCAG violations
Validated MCPs
| MCP | Purpose | Owner |
|---|---|---|
| Playwright MCP | Drive accessibility scans and visual regressions against preview deployments | Microsoft (official) |
| GitHub MCP Server | Read front-end PRs, Actions runs, and preview deployment metadata | GitHub (official) |
| Azure MCP Server | Inspect Azure Static Web Apps preview environments and configuration | Microsoft (official) |
| Microsoft Learn Docs MCP | Ground design decisions in Microsoft Fluent and accessibility guidance | Microsoft (official) |
| Microsoft 365 Agents SDK MCP | Publish design digests to Teams and ingest stakeholder feedback from Outlook | Microsoft (official) |
Real examples
Example 1: new primary color and accessible contrast
Input: A brand refresh introduces a new primary color. The color must pass WCAG AA contrast against the existing neutral palette.
Invocation: /token-map followed by /a11y-scan.
Expected output:
- Updated
docs/design-system/tokens/color/primary.jsonwith the new value and contrast matrix annotations. - Regenerated CSS variables in the Azure Static Web App theme bundle.
- An accessibility scan report confirming AA contrast across 14 interactive surfaces, with three flagged surfaces that need pattern revision.
- A pull request with Copilot Code Review comments on token naming and pattern impact.
Example 2: accessibility gate on a new checkout flow
Input: A new checkout journey with five pages introduced under src/checkout/.
Invocation: /ia-review followed by /a11y-scan.
Expected output:
- Updated
docs/ia/checkout.mdbinding the five pages to named patterns and analytics events. - A Playwright MCP accessibility run against the Static Web App preview with zero critical violations, two minor label issues, and three keyboard navigation warnings.
- Three issues filed via the GitHub MCP for the warnings, assigned to the Developer with pattern links as the remediation reference.
- A blocked merge until critical violations close, unblocked once warnings have an owner and a follow-up issue.
Anti-patterns
- Copy-paste design tokens. Values diverge across repos and platforms. Mitigation: token files are the single source, regenerated by hook.
- Accessibility as a release checklist. Violations land in production before the checklist runs. Mitigation:
pre-mergehook runs/a11y-scanon every PR preview. - Pattern library as PDF. Developers invent components off-system. Mitigation: the pattern library is markdown and the primed-context pack links patterns by name.
- Journeys drawn, not mapped. Pages ship without named context, analytics, or accessibility annotations. Mitigation:
/ia-reviewbinds every page to pattern and analytics references. - Design debt tolerated. Divergences accumulate without a scan. Mitigation: weekly design digest surfaces divergence counts with owners.
KPIs and impact metrics
| KPI | Baseline | Target | Measurement |
|---|---|---|---|
| Critical WCAG violations at release | 6 per release | 0 | Playwright MCP scan report |
| Token adoption, components reading from the token map | 55 percent | 100 percent | CSS variable usage audit |
| Pattern library adoption, components authored from patterns | 45 percent | > 90 percent | Pattern usage audit |
| IA coverage, pages with journey and analytics binding | 30 percent | 100 percent | IA linter in GitHub Actions |
| Design debt items closed per week | 3 | > 8 | Digest summary |
| Preview-to-approval cycle time | 3 days | < 1 day | GitHub PR timestamps |
Maturity in four levels
| Level | Name | Markers |
|---|---|---|
| L1 | Manual | Tokens in a design tool, patterns in PDF, accessibility at release |
| L2 | Assisted | Copilot used to polish pattern prose, tokens copy-pasted to CSS |
| L3 | Augmented | Design System Curator agent, four slash prompts, scoped instructions, Playwright MCP, a11y scans on PR |
| L4 | Autonomous | Full primitives kit, hooks enforced, token regeneration automated, IA bindings standard, weekly digest live |
Integration with other personas
- From Product Owner: approved
SPECIFICATION.mdwith user-facing acceptance criteria that the IA must honor - From Enterprise Architect: principles that constrain visual and accessibility policy
- To Developer: tokens, patterns, and primed-context packs that make component work deterministic
- To QA Engineer: accessibility scans as a first-class test suite alongside functional tests
- To DevOps Engineer: Azure Static Web Apps preview environment requirements for accessibility scans
- To Tech Writer: pattern library and token map as the canonical source for UI documentation
- To DevRel: public-facing design system artifacts for developer audiences
Glossary
- Design token: a named, machine-readable value for color, typography, spacing, radius, motion, or elevation.
- Pattern: a documented component with props, usage rules, and accessibility annotations.
- Information architecture: the mapping from user journeys to pages and components, with analytics and accessibility bindings.
- Accessibility scan: automated sweep via Playwright MCP and axe-core that checks pages against WCAG criteria.
- Design debt: divergence between shipped surfaces and the design system, measured and managed weekly.
- Token map: the generated, versioned export of all tokens consumed by CSS, components, and the Azure Static Web App theme bundle.
References
- Microsoft Fluent design system — canonical Microsoft design patterns and tokens
- Azure Static Web Apps documentation — deployment platform for preview-environment accessibility scans
- Playwright documentation — automated accessibility testing guidance
- GitHub Copilot documentation — agent mode, prompts, and instructions
- Web Content Accessibility Guidelines (WCAG) — normative accessibility specification
O UX Designer é a persona que cura o design system e protege a acessibilidade. Em um SDLC AI-native, o UX Designer opera uma pilha de primitivas validadas que transformam decisões de design em tokens legíveis por máquina e gates aplicáveis.
Resumo executivo
O UX Designer produz e governa o design system, a arquitetura de informação e as garantias de acessibilidade para toda superfície voltada ao usuário. Em um SDLC AI-native, o UX Designer opera dentro da fase de Design com um conjunto fixo de primitivas: um agente de curadoria de design system, quatro slash prompts, instruções escopadas, hooks validados por schema e uma lista curada de MCPs validados. As saídas primárias são o token map, a pattern library de componentes, os relatórios de scan de acessibilidade e a arquitetura de informação contra a qual o Developer e o QA Engineer implementam.
Papel e responsabilidades
Pense no UX Designer como o editor de uma linguagem de design. Ele não entrega cada tela, mas toda tela que é entregue precisa bater com as regras de tipografia, espaçamento, cor, movimento e acessibilidade que ele escreveu. Em um SDLC AI-native, a linguagem de design vive como tokens legíveis por máquina, a pattern library é consumível por agentes e o UX Designer é responsável pelo fato de que o produto parece e se comporta de forma coerente, do primeiro sketch à página renderizada.
Responsabilidades primárias:
- Escrever e manter o mapa de design tokens em
docs/design-system/tokens/para cor, tipografia, espaçamento, radius, movimento e elevação - Governar a pattern library de componentes em
docs/design-system/patterns/com regras de uso e notas de acessibilidade - Rodar scans de acessibilidade em todo PR de front-end via Playwright MCP e integrações com axe-core
- Manter a arquitetura de informação em
docs/ia/que liga jornadas de usuário a páginas e componentes - Operar o agente Design System Curator e os prompts
/token-map,/a11y-scan,/pattern-lib,/ia-review - Alinhar decisões de design com os princípios do Enterprise Architect, a spec do Product Owner e o destino de deploy Azure Static Web Apps
- Publicar o digest de revisão de design no canal de produto no Teams para visibilidade com stakeholders
Jobs to be done
- Como UX Designer, eu quero que o token map seja a fonte da verdade, para que todo componente e página leia da mesma paleta e escala.
- Como UX Designer, eu quero que acessibilidade seja bloqueante no PR, para que violações de WCAG nunca cheguem em produção.
- Como UX Designer, eu quero que a pattern library seja consumível por agentes, para que o Copilot proponha componentes do nosso sistema, não da web aberta.
- Como UX Designer, eu quero que a arquitetura de informação ligue jornadas a páginas, para que toda tela tenha um contexto e propósito nomeados.
- Como UX Designer, eu quero que design tokens regenerem o CSS e o tema do Static Web App no merge, para que intenção e saída fiquem alinhadas.
- Como UX Designer, eu quero que o digest de revisão de design mostre violações e padrões semanalmente, para que a dívida seja gerenciada, não acumulada.
Dores antes da era AI-native
- Tokens presos em uma ferramenta de design. Cores e espaçamentos vivem em um arquivo de design e são copiados à mão para o CSS. Divergência é garantida.
- Acessibilidade verificada no release. Violações de WCAG aterrissam em produção porque os scans rodam só no ambiente de staging.
- Pattern library como PDF. Developers e agentes não conseguem consumir documentos estáticos. Eles inventam componentes fora do sistema.
- Arquitetura de informação como wireframe. Páginas e jornadas são desenhadas, não linkadas. Taggeamento de analytics acontece ad-hoc.
- Dívida de design invisível. Divergências do sistema se acumulam sem um scan que as mostre.
Fluxo diário AI-native
O UX Designer opera um loop fixo todo dia. O loop usa primitivas do GitHub Copilot dentro do Visual Studio Code e Claude Code no terminal, além de um pequeno catálogo de MCPs validados para contexto externo.
Setup da manhã
- Abra o repositório do design system no Visual Studio Code. GitHub Copilot Chat carrega o
AGENTS.mde as instruções escopadas do design system. - Puxe a última
maine revise PRs de componentes da madrugada contra a pattern library. - Rode
/a11y-scanvia Playwright MCP para produzir o relatório atual de acessibilidade nos ambientes de preview do Azure Static Web App em staging. - Revise o dashboard do design system gerado a partir da telemetria do GitHub MCP.
Execução no meio do dia
- Autoria de tokens. Invoque
/token-mapem qualquer token novo ou revisado. O agente Design System Curator produz o arquivo de token, regenera o export de CSS e atualiza o bundle de tema do Azure Static Web Apps. - Autoria de patterns. Invoque
/pattern-libem novos componentes ou regras de uso revisadas. O agente produz um documento de pattern com props, notas de acessibilidade e um exemplo preparado. - Arquitetura de informação. Invoque
/ia-reviewquando uma nova jornada ou página for proposta. O agente atualiza o mapa de IA emdocs/ia/e liga a página a componentes nomeados da pattern library. - Consulta cross-persona. Levante debates de design no canal de produto no Teams via Microsoft 365 Agents SDK MCP, com links de pattern como citação canônica.
Revisão no fim da tarde
- Invoque
/a11y-scancomo varredura final em todos os PRs de front-end abertos. Bloqueie o merge em qualquer violação crítica de WCAG detectada pelo Playwright MCP e axe-core. - Abra um pull request nas mudanças de token, pattern ou IA. O GitHub Copilot Code Review comenta sobre consistência de tokens e anotações de acessibilidade.
- Publique o digest diário de design no canal de produto no Teams via Microsoft 365 Agents SDK, resumindo novos tokens, revisões de pattern e violações abertas.
- Atualize o changelog do design system e regenere o preview do Azure Static Web App para que stakeholders possam clicar pelo estado atual.
Primitivas recomendadas
Agente
| Agente | Arquivo | Propósito |
|---|---|---|
design-system-curator | .github/agents/design-system-curator.agent.md | Escrever tokens, curar a pattern library, rodar scans de acessibilidade e governar a arquitetura de informação |
O Design System Curator usa claude-sonnet-4-6 por padrão. Ferramentas: read, edit, search, grep, glob, bash escopados a scripts de build de token. Extended thinking fica desabilitado porque tarefas de design iterativas se beneficiam de loops curtos e rápidos.
Slash prompts
| Comando | Arquivo | Propósito |
|---|---|---|
/token-map | .github/prompts/token-map.prompt.md | Escrever ou revisar tokens e regenerar o CSS e o tema do Static Web App |
/a11y-scan | .github/prompts/a11y-scan.prompt.md | Rodar checks de acessibilidade via Playwright MCP e axe-core |
/pattern-lib | .github/prompts/pattern-lib.prompt.md | Escrever ou revisar um pattern de componente com props e notas de acessibilidade |
/ia-review | .github/prompts/ia-review.prompt.md | Revisar e atualizar o mapa de arquitetura de informação para uma jornada |
Instruções escopadas
Um applyTo escopado reduz o custo em tokens em aproximadamente 68 por cento em comparação com instruções globais.
Escopo (applyTo) | Arquivo | Propósito |
|---|---|---|
docs/design-system/tokens/**/*.json | .github/instructions/tokens.instructions.md | Schema de tokens, regras de nomenclatura e contrato de regeneração |
docs/design-system/patterns/**/*.md | .github/instructions/patterns.instructions.md | Template de documento de pattern, props, anotações de acessibilidade |
docs/ia/**/*.md | .github/instructions/ia.instructions.md | Schema de arquitetura de informação, binding jornada-para-página, taggeamento de analytics |
Hooks
Hooks custam zero tokens de LLM. São a camada mais forte de governança para design.
pre-commit: rejeita qualquer arquivo de token que quebre o schema de nomenclatura ou qualquer pattern sem anotações de acessibilidadepost-commit: regenera o export de CSS, o bundle de tema do Static Web App e o índice de patternspre-merge: roda/a11y-scanno deployment de preview do PR e bloqueia o merge em violações críticas de WCAG
MCPs validados
| MCP | Propósito | Dono |
|---|---|---|
| Playwright MCP | Dirigir scans de acessibilidade e regressões visuais contra deployments de preview | Microsoft (oficial) |
| GitHub MCP Server | Ler PRs de front-end, runs do Actions e metadados de deployment de preview | GitHub (oficial) |
| Azure MCP Server | Inspecionar ambientes de preview do Azure Static Web Apps e configuração | Microsoft (oficial) |
| Microsoft Learn Docs MCP | Ancorar decisões de design no guia Microsoft Fluent e de acessibilidade | Microsoft (oficial) |
| Microsoft 365 Agents SDK MCP | Publicar digests de design no Teams e ingerir feedback de stakeholders do Outlook | Microsoft (oficial) |
Exemplos reais
Exemplo 1: nova cor primária e contraste acessível
Entrada: Um refresh de marca introduz uma nova cor primária. A cor precisa passar no contraste AA do WCAG contra a paleta neutra existente.
Invocação: /token-map seguido de /a11y-scan.
Saída esperada:
docs/design-system/tokens/color/primary.jsonatualizado com o novo valor e anotações de matriz de contraste.- Variáveis CSS regeneradas no bundle de tema do Azure Static Web App.
- Um relatório de scan de acessibilidade confirmando contraste AA em 14 superfícies interativas, com três superfícies sinalizadas que precisam de revisão de pattern.
- Um pull request com comentários do Copilot Code Review sobre nomenclatura de tokens e impacto no pattern.
Exemplo 2: gate de acessibilidade em um novo fluxo de checkout
Entrada: Uma nova jornada de checkout com cinco páginas introduzida em src/checkout/.
Invocação: /ia-review seguido de /a11y-scan.
Saída esperada:
docs/ia/checkout.mdatualizado ligando as cinco páginas a patterns nomeados e eventos de analytics.- Um run de acessibilidade do Playwright MCP contra o preview do Static Web App com zero violações críticas, dois problemas menores de label e três avisos de navegação por teclado.
- Três issues abertas via GitHub MCP para os avisos, atribuídas ao Developer com links de pattern como referência de remediação.
- Um merge bloqueado até que as violações críticas fechem, desbloqueado assim que os avisos tenham dono e issue de follow-up.
Anti-padrões
- Design tokens via copy-paste. Valores divergem entre repos e plataformas. Mitigação: arquivos de token são a fonte única, regenerados por hook.
- Acessibilidade como checklist de release. Violações aterrissam em produção antes do checklist rodar. Mitigação: hook
pre-mergeroda/a11y-scanem cada preview de PR. - Pattern library como PDF. Developers inventam componentes fora do sistema. Mitigação: a pattern library é markdown e o pack de contexto preparado linka patterns pelo nome.
- Jornadas desenhadas, não mapeadas. Páginas sobem sem contexto nomeado, analytics ou anotações de acessibilidade. Mitigação:
/ia-reviewliga cada página a referências de pattern e analytics. - Dívida de design tolerada. Divergências se acumulam sem scan. Mitigação: digest semanal de design mostra contagem de divergências com donos.
KPIs e métricas de impacto
| KPI | Linha base | Meta | Medição |
|---|---|---|---|
| Violações críticas de WCAG no release | 6 por release | 0 | Relatório de scan do Playwright MCP |
| Adoção de tokens, componentes lendo do token map | 55 por cento | 100 por cento | Auditoria de uso de variáveis CSS |
| Adoção da pattern library, componentes escritos a partir de patterns | 45 por cento | > 90 por cento | Auditoria de uso de patterns |
| Cobertura de IA, páginas com binding de jornada e analytics | 30 por cento | 100 por cento | IA linter em GitHub Actions |
| Itens de dívida de design fechados por semana | 3 | > 8 | Resumo do digest |
| Ciclo preview-para-aprovação | 3 dias | < 1 dia | Timestamps de PR do GitHub |
Maturidade em quatro níveis
| Nível | Nome | Marcadores |
|---|---|---|
| L1 | Manual | Tokens em ferramenta de design, patterns em PDF, acessibilidade no release |
| L2 | Assistido | Copilot usado para polir a prosa de patterns, tokens copiados manualmente para CSS |
| L3 | Aumentado | Agente Design System Curator, quatro slash prompts, instruções escopadas, Playwright MCP, scans de a11y no PR |
| L4 | Autônomo | Kit completo de primitivas, hooks aplicados, regeneração de tokens automatizada, bindings de IA padrão, digest semanal ativo |
Integração com outras personas
- Do Product Owner:
SPECIFICATION.mdaprovado com critérios de aceitação voltados ao usuário que a IA deve honrar - Do Enterprise Architect: princípios que restringem política visual e de acessibilidade
- Para Developer: tokens, patterns e packs de contexto preparado que tornam o trabalho de componentes determinístico
- Para QA Engineer: scans de acessibilidade como suíte de teste de primeira classe junto com testes funcionais
- Para DevOps Engineer: requisitos de ambiente de preview do Azure Static Web Apps para scans de acessibilidade
- Para Tech Writer: pattern library e token map como fonte canônica para documentação de UI
- Para DevRel: artefatos públicos de design system para audiências de desenvolvedor
Glossário
- Design token: um valor nomeado e legível por máquina para cor, tipografia, espaçamento, radius, movimento ou elevação.
- Pattern: um componente documentado com props, regras de uso e anotações de acessibilidade.
- Arquitetura de informação: o mapeamento de jornadas de usuário para páginas e componentes, com bindings de analytics e acessibilidade.
- Scan de acessibilidade: varredura automatizada via Playwright MCP e axe-core que verifica páginas contra critérios WCAG.
- Dívida de design: divergência entre superfícies entregues e o design system, medida e gerenciada semanalmente.
- Token map: o export gerado e versionado de todos os tokens consumidos pelo CSS, componentes e bundle de tema do Azure Static Web App.
Referências
- Design system Microsoft Fluent — patterns e tokens de design canônicos da Microsoft
- Documentação do Azure Static Web Apps — plataforma de deploy para scans de acessibilidade em ambiente de preview
- Documentação do Playwright — guia de testes automatizados de acessibilidade
- Documentação do GitHub Copilot — agent mode, prompts e instruções
- Web Content Accessibility Guidelines (WCAG) — especificação normativa de acessibilidade
El UX Designer es la persona que cura el design system y resguarda la accesibilidad. En un SDLC AI-native, el UX Designer opera un stack de primitivas validadas que convierten decisiones de diseño en tokens legibles por máquina y compuertas aplicables.
Resumen ejecutivo
El UX Designer produce y gobierna el design system, la arquitectura de información y las garantías de accesibilidad para cada superficie cara al usuario. En un SDLC AI-native, el UX Designer opera dentro de la fase de Design con un conjunto fijo de primitivas: un agente de curaduría del design system, cuatro slash prompts, instrucciones con alcance, hooks validados por esquema y una lista curada de MCPs validados. Las salidas principales son el mapa de tokens, la librería de patrones de componentes, los reportes de escaneo de accesibilidad y la arquitectura de información contra la cual el Developer y el QA Engineer implementan.
Rol y responsabilidades
Piensa en el UX Designer como el editor de un lenguaje de diseño. No envían cada pantalla, pero cada pantalla que se envía tiene que coincidir con la tipografía, el espaciado, el color, el motion y las reglas de accesibilidad que escribieron. En un SDLC AI-native, el lenguaje de diseño vive como tokens legibles por máquina, la librería de patrones es consumible por agentes, y el UX Designer es responsable de que el producto se vea y se sienta coherente desde el primer sketch hasta la página renderizada.
Responsabilidades principales:
- Redactar y mantener el mapa de design tokens bajo
docs/design-system/tokens/para color, tipografía, espaciado, radius, motion y elevación - Gobernar la librería de patrones de componentes bajo
docs/design-system/patterns/con reglas de uso y notas de accesibilidad - Correr escaneos de accesibilidad sobre cada PR de front-end vía Playwright MCP e integraciones con axe-core
- Mantener la arquitectura de información bajo
docs/ia/que amarra journeys de usuario a páginas y componentes - Operar el agente Design System Curator y los prompts
/token-map,/a11y-scan,/pattern-lib,/ia-review - Alinear las decisiones de diseño con los principios del Enterprise Architect, el spec del Product Owner y el target de despliegue de Azure Static Web Apps
- Publicar el digest de design review al canal de producto en Teams para visibilidad de stakeholders
Jobs to be done
- Como UX Designer, quiero que el mapa de tokens sea la fuente de verdad, para que cada componente y página lea de la misma paleta y escala.
- Como UX Designer, quiero que la accesibilidad esté con compuerta en PR, para que las violaciones WCAG nunca lleguen a producción.
- Como UX Designer, quiero que la librería de patrones sea consumible por agentes, para que Copilot proponga componentes desde nuestro sistema, no desde la web abierta.
- Como UX Designer, quiero que la arquitectura de información amarre journeys a páginas, para que cada pantalla tenga un contexto y propósito nombrado.
- Como UX Designer, quiero que los design tokens regeneren el CSS y el theme de Static Web App al hacer merge, para que la intención y la salida permanezcan alineadas.
- Como UX Designer, quiero que el digest de design review afloran violaciones y patrones semanalmente, para que la deuda se gestione, no se acumule.
Puntos de dolor antes de la era AI-native
- Tokens atrapados en una herramienta de diseño. Los colores y espaciados viven en un archivo de diseño y se copian a mano al CSS. La deriva está garantizada.
- Accesibilidad chequeada en release. Las violaciones WCAG aterrizan en producción porque los escaneos solo corren en el ambiente de staging.
- Librería de patrones como PDF. Los developers y agentes no pueden consumir documentos estáticos. Inventan componentes fuera del sistema.
- Arquitectura de información como wireframe. Las páginas y journeys se dibujan, no se enlazan. El tagging de analytics ocurre ad-hoc.
- Deuda de diseño invisible. Las divergencias del sistema se acumulan sin un escaneo que las afloran.
Flujo diario AI-native
El UX Designer opera un loop fijo cada día. El loop usa primitivas de GitHub Copilot dentro de Visual Studio Code y Claude Code en la terminal, además de un pequeño catálogo de MCPs validados para contexto externo.
Setup de la mañana
- Abrir el repositorio del design system en Visual Studio Code. GitHub Copilot Chat carga
AGENTS.mdy las instrucciones del design system con alcance. - Hacer pull del último
mainy revisar PRs nocturnos de componentes contra la librería de patrones. - Ejecutar
/a11y-scanvía Playwright MCP para producir el reporte de accesibilidad actual a través de los ambientes de preview de Azure Static Web App. - Revisar el dashboard del design system generado a partir de la telemetría del MCP de GitHub.
Ejecución al mediodía
- Autoría de tokens. Invocar
/token-mapsobre cualquier token nuevo o revisado. El agente Design System Curator produce el archivo de token, regenera el export de CSS y actualiza el bundle de theme de Azure Static Web Apps. - Autoría de patrones. Invocar
/pattern-libsobre nuevos componentes o reglas de uso revisadas. El agente produce un documento de patrón con props, notas de accesibilidad y un ejemplo preparado. - Arquitectura de información. Invocar
/ia-reviewcuando se proponga un nuevo journey o página. El agente actualiza el mapa de IA bajodocs/ia/y amarra la página a componentes nombrados de la librería de patrones. - Consulta entre personas. Levantar debates de diseño en el canal de producto en Teams a través del MCP del Microsoft 365 Agents SDK, con enlaces a patrones como cita canónica.
Revisión al final de la tarde
- Invocar
/a11y-scancomo barrida final sobre todos los PRs abiertos de front-end. Bloquear el merge en cualquier violación WCAG crítica detectada por Playwright MCP y axe-core. - Abrir un pull request sobre cambios de tokens, patrones o IA. GitHub Copilot Code Review comenta sobre consistencia de tokens y anotaciones de accesibilidad.
- Publicar el digest diario de diseño al canal de producto en Teams a través del Microsoft 365 Agents SDK, resumiendo nuevos tokens, revisiones de patrones y violaciones abiertas.
- Actualizar el changelog del design system y regenerar el preview de Azure Static Web App para que los stakeholders puedan navegar el estado actual.
Primitivas recomendadas
Agente
| Agente | Archivo | Propósito |
|---|---|---|
design-system-curator | .github/agents/design-system-curator.agent.md | Redactar tokens, curar la librería de patrones, correr escaneos de accesibilidad y gobernar la arquitectura de información |
El Design System Curator usa claude-sonnet-4-6 por defecto. Herramientas: read, edit, search, grep, glob, bash con alcance a scripts de build de tokens. El extended thinking está deshabilitado porque las tareas iterativas de diseño se benefician de loops cortos y rápidos.
Slash prompts
| Comando | Archivo | Propósito |
|---|---|---|
/token-map | .github/prompts/token-map.prompt.md | Redactar o revisar tokens y regenerar el CSS y el theme de Static Web App |
/a11y-scan | .github/prompts/a11y-scan.prompt.md | Correr chequeos de accesibilidad vía Playwright MCP y axe-core |
/pattern-lib | .github/prompts/pattern-lib.prompt.md | Redactar o revisar un patrón de componente con props y notas de accesibilidad |
/ia-review | .github/prompts/ia-review.prompt.md | Revisar y actualizar el mapa de arquitectura de información para un journey |
Instrucciones con alcance
El applyTo con alcance reduce el costo en tokens en aproximadamente 68 por ciento comparado con instrucciones globales.
Alcance (applyTo) | Archivo | Propósito |
|---|---|---|
docs/design-system/tokens/**/*.json | .github/instructions/tokens.instructions.md | Esquema de token, reglas de naming y contrato de regeneración |
docs/design-system/patterns/**/*.md | .github/instructions/patterns.instructions.md | Plantilla de documento de patrón, props, anotaciones de accesibilidad |
docs/ia/**/*.md | .github/instructions/ia.instructions.md | Esquema de arquitectura de información, vinculación journey-a-página, tagging de analytics |
Hooks
Los hooks cuestan cero tokens de LLM. Son la capa de gobierno más fuerte para diseño.
pre-commit: rechazar cualquier archivo de token que rompa el esquema de naming o cualquier patrón sin anotaciones de accesibilidadpost-commit: regenerar el export de CSS, el bundle de theme de Static Web App y el índice de patronespre-merge: correr/a11y-scansobre el preview deployment del PR y bloquear el merge en violaciones WCAG críticas
MCPs validados
| MCP | Propósito | Dueño |
|---|---|---|
| Playwright MCP | Manejar escaneos de accesibilidad y regresiones visuales contra preview deployments | Microsoft (oficial) |
| GitHub MCP Server | Leer PRs de front-end, corridas de Actions y metadata de preview deployment | GitHub (oficial) |
| Azure MCP Server | Inspeccionar ambientes de preview de Azure Static Web Apps y configuración | Microsoft (oficial) |
| Microsoft Learn Docs MCP | Anclar decisiones de diseño en la guía de Microsoft Fluent y de accesibilidad | Microsoft (oficial) |
| Microsoft 365 Agents SDK MCP | Publicar digests de diseño a Teams e ingerir feedback de stakeholders desde Outlook | Microsoft (oficial) |
Ejemplos reales
Ejemplo 1: nuevo color primario y contraste accesible
Entrada: Un brand refresh introduce un nuevo color primario. El color debe pasar contraste WCAG AA contra la paleta neutra existente.
Invocación: /token-map seguido de /a11y-scan.
Salida esperada:
- Un
docs/design-system/tokens/color/primary.jsonactualizado con el nuevo valor y anotaciones de matriz de contraste. - Variables CSS regeneradas en el bundle de theme de Azure Static Web App.
- Un reporte de escaneo de accesibilidad confirmando contraste AA a través de 14 superficies interactivas, con tres superficies marcadas que necesitan revisión de patrón.
- Un pull request con comentarios de Copilot Code Review sobre el naming de tokens e impacto de patrón.
Ejemplo 2: compuerta de accesibilidad sobre un nuevo flujo de checkout
Entrada: Un nuevo journey de checkout con cinco páginas introducido bajo src/checkout/.
Invocación: /ia-review seguido de /a11y-scan.
Salida esperada:
- Un
docs/ia/checkout.mdactualizado que amarra las cinco páginas a patrones nombrados y eventos de analytics. - Una corrida de accesibilidad de Playwright MCP contra el preview de Static Web App con cero violaciones críticas, dos issues menores de label y tres warnings de navegación por teclado.
- Tres issues presentados vía el MCP de GitHub para los warnings, asignados al Developer con enlaces a patrones como referencia de remediación.
- Un merge bloqueado hasta que cierren las violaciones críticas, desbloqueado una vez que los warnings tengan dueño y un issue de seguimiento.
Anti-patrones
- Copy-paste de design tokens. Los valores divergen a través de repos y plataformas. Mitigación: los archivos de token son la fuente única, regenerados por hook.
- Accesibilidad como checklist de release. Las violaciones aterrizan en producción antes de que el checklist corra. Mitigación: el hook
pre-mergecorre/a11y-scanen cada preview de PR. - Librería de patrones como PDF. Los developers inventan componentes fuera del sistema. Mitigación: la librería de patrones es markdown y el paquete de contexto preparado enlaza patrones por nombre.
- Journeys dibujados, no mapeados. Las páginas se envían sin contexto, analytics o anotaciones de accesibilidad nombrados. Mitigación:
/ia-reviewamarra cada página a referencias de patrón y analytics. - Deuda de diseño tolerada. Las divergencias se acumulan sin un escaneo. Mitigación: el digest semanal de diseño afloran conteos de divergencia con dueños.
KPIs y métricas de impacto
| KPI | Línea base | Meta | Medición |
|---|---|---|---|
| Violaciones WCAG críticas en release | 6 por release | 0 | Reporte de escaneo de Playwright MCP |
| Adopción de tokens, componentes que leen del mapa de tokens | 55 por ciento | 100 por ciento | Auditoría de uso de variables CSS |
| Adopción de librería de patrones, componentes redactados desde patrones | 45 por ciento | > 90 por ciento | Auditoría de uso de patrones |
| Cobertura de IA, páginas con vinculación de journey y analytics | 30 por ciento | 100 por ciento | Linter de IA en GitHub Actions |
| Ítems de deuda de diseño cerrados por semana | 3 | > 8 | Resumen del digest |
| Tiempo de ciclo preview-a-aprobación | 3 días | < 1 día | Timestamps de PR de GitHub |
Madurez en cuatro niveles
| Nivel | Nombre | Marcadores |
|---|---|---|
| L1 | Manual | Tokens en una herramienta de diseño, patrones en PDF, accesibilidad en release |
| L2 | Asistido | Copilot usado para pulir prosa de patrón, tokens copiados-pegados al CSS |
| L3 | Aumentado | Agente Design System Curator, cuatro slash prompts, instrucciones con alcance, Playwright MCP, escaneos de a11y en PR |
| L4 | Autónomo | Kit completo de primitivas, hooks forzados, regeneración de tokens automatizada, vinculaciones de IA estándar, digest semanal en vivo |
Integración con otras personas
- Desde Product Owner:
SPECIFICATION.mdaprobado con criterios de aceptación cara al usuario que la IA debe honrar - Desde Enterprise Architect: principios que restringen la política visual y de accesibilidad
- Hacia Developer: tokens, patrones y paquetes de contexto preparado que vuelven determinístico el trabajo de componentes
- Hacia QA Engineer: escaneos de accesibilidad como suite de prueba de primera clase junto a las pruebas funcionales
- Hacia DevOps Engineer: requisitos del ambiente de preview de Azure Static Web Apps para escaneos de accesibilidad
- Hacia Tech Writer: librería de patrones y mapa de tokens como fuente canónica para la documentación de UI
- Hacia DevRel: artefactos públicos del design system para audiencias de developers
Glosario
- Design token: un valor nombrado y legible por máquina para color, tipografía, espaciado, radius, motion o elevación.
- Patrón: un componente documentado con props, reglas de uso y anotaciones de accesibilidad.
- Arquitectura de información: el mapeo de journeys de usuario a páginas y componentes, con vinculaciones de analytics y accesibilidad.
- Escaneo de accesibilidad: barrida automatizada vía Playwright MCP y axe-core que chequea páginas contra criterios WCAG.
- Deuda de diseño: divergencia entre superficies enviadas y el design system, medida y gestionada semanalmente.
- Mapa de tokens: el export generado y versionado de todos los tokens consumidos por CSS, componentes y el bundle de theme de Azure Static Web App.
Referencias
- Microsoft Fluent design system — patrones y tokens de diseño canónicos de Microsoft
- Azure Static Web Apps documentation — plataforma de despliegue para escaneos de accesibilidad en ambiente de preview
- Playwright documentation — guía de testing automatizado de accesibilidad
- GitHub Copilot documentation — agent mode, prompts e instructions
- Web Content Accessibility Guidelines (WCAG) — especificación normativa de accesibilidad