Squad Especialista

Design System Squad

“Eu vou criar um design system unificado para todos os seus produtos em 30 dias — sem contratar 4 designers e sem cada tela ter uma cara diferente.”

v2.1.0 Comando: /DS Score: 10.0
9
Agentes
100+
Tasks
13
Workflows
19
Checklists
16
Templates
Overview

O que faz este squad

Squad focado exclusivamente em Design System. Especializado em tokens, componentes, acessibilidade, registry, metadata machine-readable e DesignOps. Trabalho de brand, logo, thumbnails e foto fica com squads dedicados.

Objetivos

  • Construir e evoluir design systems de forma escalável
  • Reduzir redundância de UI com consolidação de patterns
  • Garantir acessibilidade e governança contínua
  • Sincronizar registry, metadata e documentação
  • Operar migrações com baixo risco e alta previsibilidade

Capabilities

  • Design system architecture (Atomic Design)
  • Token extraction e DTCG exports
  • Component build e composition
  • Registry-first distribution
  • AI-readable metadata generation
  • Accessibility governance (WCAG)
  • DesignOps maturity e process optimization

Hierarquia do Squad

Orchestrator
Design Chief
Roteamento e coordenação
Tier 0 — Operations
Dave Malouf
DesignOps & Scaling

Dan Mall
Adoção & Buy-in
Tier 1 — Architecture
Brad Frost · Page Composer
Atlas · Foundations Lead
Storybook Expert · Nano Banana

Roteamento

O Design Chief recebe a request e roteia pro agente certo:

PedidoRoteado Para
design system, component, token, atomic, registry, mcp@brad-frost
foundations, f1/f2/f3, figma tokens, base components@ds-foundations-lead
token architect, figma variables, token normalization@ds-token-architect
storybook, csf3, interaction testing, visual regression@storybook-expert
a11y, wcag, aria, contrast, focus order@brad-frost
designops, maturity, process, scaling, governance@dave-malouf
buy-in, stakeholder, pitch, adoption@dan-mall
brand, logo, identidade→ /Brand squad
thumbnail, foto, video→ /ContentVisual squad
Agentes

9 agentes especializados

Design Chief
Design System Orchestrator
Orchestrator

Roteia e coordena execução dentro do squad. Classifica requests como IN_SCOPE ou OUT_OF_SCOPE, resolve dependências antes de paralelizar, e garante quality chain antes de completar deliverables.

Comandos
*triageClassificar e rotear
*routeRotear pro agente
*resolve-dsResolver contexto DS
*show-contextContexto ativo
*review-epic-dsReview DS do epic
*review-planReview deliverable
*handoffHandoff p/ outro squad
*help
*exit
Brad Frost
Design System Architect & Pattern Consolidator
Tier 1 — Specialist

O coração do squad. Expert em Atomic Design, brownfield audit, consolidação de padrões, extração de tokens, migration planning e component building. Filosofia: “Show the horror, then fix it.” Metric-driven, visual shock therapy, ROI-focused.

Mind-Clone: Brad Frost — Criador do Atomic Design, Pattern Lab
Comandos (+60)
*auditAuditar codebase
*consolidateConsolidar patterns
*tokenizeExtrair tokens
*migrateMigração
*shock-reportReport de caos
*calculate-roiCalcular ROI
*setupSetup inicial DS
*buildBuild componente
*composeCompor molecules
*extendEstender pattern
*documentDocumentação
*sync-registrySync registry
*bootstrap-shadcnBootstrap shadcn
*token-w3cTokens W3C
*token-modesToken modes
*motion-auditAuditar motion
*visual-regressionVisual regression
*agentic-auditAI readiness
*fluent-auditFluent 2 audit
*fluent-buildFluent 2 build
*theme-multiMulti-brand
*ds-governGovernança
*figma-pipelinePipeline Figma
*a11y-auditAcessibilidade
*contrast-matrixMatriz WCAG
*refactor-planPlan refactor
*refactor-executeExec refactor
*ds-healthHealth score
*bundle-auditBundle impact
*dead-codeCódigo morto
*yoloModo paralelo
Targets

80%+ pattern reduction • <50KB CSS bundles • <30s cold builds • WCAG 2.2/APCA • Zero hardcoded values • Tailwind v4 + OKLCH + shadcn/Radix

Dan Mall
Design System Seller & Collaboration Expert
Tier 0

Vende design systems mostrando a dor, não a teoria. Pragmático, bridge entre design e business. Co-criador do Hot Potato Process.

Mind-Clone: Dan Mall — SuperFriendly, “Selling Design Systems”
Comandos
*element-collageExploração visual
*hot-potatoDesigner-dev loop
*stakeholder-pitchPitch de buy-in
*ds-timelineRoadmap 90 dias
Dave Malouf
DesignOps Pioneer & Scaling Expert
Tier 0

Co-fundador do DesignOps Assembly. Definiu DesignOps como disciplina. 50+ times escalados, 10.000+ designers impactados, 30-50% efficiency gains.

Mind-Clone: Dave Malouf — DesignOps Assembly Co-founder
Comandos (16)
*ops-auditMaturidade
*maturity-assessmentNível vs target
*metrics-stackMétricas
*scale-designPlano de escala
*team-topologyEstrutura ideal
*tools-auditStack tools
*governanceGovernança
*workflow-mapWorkflows
*hiring-opsContratação
*onboardingOnboarding
*career-ladderCarreira
*communityComunidade
*budget-modelOrçamento
Three Lenses Framework

How We Work — Workflow, processos, ferramentas • How We Grow — Skills, carreira • How We Thrive — Cultura, comunidade

Atlas
Token Architect — Figma → JSON/CSS/TS
Tier 1

Transforma dados do Figma em artefatos normalizados em camadas. Determinístico: mesma entrada, mesma saída. Output: tokens.json, components.map.json, tokens.css, tokens.ts.

Pipeline (6 Steps)

1. Normalizar input → 2. Classificar tokens → 3. Validar grafo → 4. Build manifest → 5. Gerar exports → 6. Output 4 artefatos

Layering

Base → valores raw • Semantic → intent de uso • Component → mapeamento (só referencia semantic)

Foundations Lead
Pipeline Lead — Figma → shadcn/UI
Tier 1

Orquestra pipeline de adaptação: tokens do Figma → shadcn/UI customizado. 3 fases com QA gates bloqueantes.

Fases

F1 Foundations & Tokens: Ingest → Map → Apply → QA Gate
F2 Base Components: Ingest specs → Adapt shadcn → QA Gate
F3 Derived: Derive restantes → QA Gate Final

Regras

Preserva: JSX, Props API, Radix, ARIA, keyboard nav • Modifica: Tailwind classes, cores, radius, spacing • Nunca: Adicionar/remover props, hardcode colors

Storybook Expert
Story Architect & Documentation Specialist
Tier 1

Expert em stories CSF3, interaction testing, visual regression, a11y testing. “Stories are living specs, not documentation.”

Comandos (27+)
*write-story
*audit-stories
*fix-story
*coverage-report
*add-play
*interaction-test
*visual-test
*docs-page
*setup
*generate-all
*brownfield
*sync-workspace
*yolo
Page Composer
Page Composition & Layout Specialist
Tier 1

Brad Frost constrói os LEGO bricks, Page Composer monta os prédios. Content-first. “Content determines layout, not the other way around.”

Comandos (14)
*compose-page9 fases
*layout-audit
*typography-map
*spacing-check
*copy-layout
*validate-brief
*generate-seo-meta
*compose-states
*validate-anti-ai
*preflight55 itens
Nano Banana Generator
AI Image Generation Specialist
Tier 1

Geração de imagens com Gemini (API nativa ou OpenRouter). Frameworks: SCDS, PRIO, BATCH.

Missions
generateGerar imagem
conceptConceito visual
refineRefinar prompt
upscale2K/4K
batchVariações
style-guideRef. de estilo
Workflows

13 workflows orquestrados

Audit-Only
design-system-audit-only
Auditoria + shock report visual + cálculo de ROI para stakeholders.
Fases: 5
Agente: brad-frost
Trigger: Manual
Brownfield Complete
design-system-brownfield-complete
Fluxo completo: audit → consolidate → tokenize → migrate → build → compose → promote → critical-eye.
Fases: 11
Agente: brad-frost
Trigger: Manual
Greenfield New
design-system-greenfield-new
DS do zero: setup → atoms → molecules → organisms → document → promote.
Fases: 6
Agente: brad-frost
Trigger: Manual
Foundations Pipeline
foundations-pipeline
Figma → shadcn/UI. 3 macro-fases com QA gates bloqueantes.
Fases: 9
Agente: foundations-lead
Trigger: Manual
Critical Eye
design-system-critical-eye
Curadoria contínua: scoring 0-100, lifecycle CANDIDATE → CANONICAL → DEPRECATED.
Fases: 6
Agentes: brad-frost, chief
Trigger: Manual
Page Composition
page-composition
9 fases determinísticas: tipo → template → copy → layout → typography → spacing → components → code → QA.
Fases: 9
Agente: page-composer
Trigger: Manual
Epic DS Alignment
epic-ds-alignment
Quality gate para epics. 52-point checklist, auto-fix loop, verdict routing.
Fases: 12
Agentes: chief, brad-frost
Trigger: Manual
Agentic Readiness
design-system-agentic-readiness
Preparar DS para consumo por agentes AI. Audit + setup metadata machine-readable.
Fases: 2
Agente: brad-frost
Trigger: Manual
DTCG Tokens Governance
dtcg-tokens-governance
Extrair e validar tokens no padrão W3C DTCG.
Fases: 2
Agente: brad-frost
Trigger: Manual
Motion Quality
motion-quality
Auditoria de motion tokens + baseline de visual regression.
Fases: 2
Agente: brad-frost
Trigger: Manual
Self-Healing
self-healing-workflow
Auto-correção: lint, typecheck, a11y, token drift, registry sync. Com rollback.
Fases: 3
Trigger: Push / PR / Cron
Storybook Full Setup
wf-storybook-full-setup
Zero → Storybook configurado em 1 sessão. Install → config → expand → generate → verify.
Fases: 5
Agente: storybook-expert
Trigger: Manual
Storybook Brownfield
wf-storybook-brownfield-migration
Migração brownfield: scan → classify → migrate por tier → extract → verify.
Fases: 9
Agentes: storybook, brad-frost
Trigger: Manual
Tasks

100+ tasks disponíveis

Filtrar por agente:

Task IDDescriçãoAgente
ds-audit-codebaseAuditar padrões e redundânciasbrad-frost
ds-build-componentConstruir componente de DSbrad-frost
ds-build-mcp-serverServidor MCP para DSbrad-frost
ds-calculate-roiCalcular ROI da consolidaçãobrad-frost
ds-compose-moleculeCompor moleculesbrad-frost
ds-consolidate-patternsConsolidar patterns redundantesbrad-frost
ds-context-contractContrato de contexto por taskdesign-chief
ds-extract-tokensExtrair tokensbrad-frost
ds-generate-ai-metadataMetadata para agentes AIbrad-frost
ds-generate-documentationDocumentação de DSbrad-frost
ds-generate-migration-strategyEstratégia de migraçãobrad-frost
ds-govern-a11y-complianceGovernança a11ybrad-frost
ds-health-metricsHealth score do DSbrad-frost
ds-integrate-squadIntegrar squad AIOXdesign-chief
ds-setup-design-systemSetup inicialbrad-frost
ds-sync-registrySync registry e metadatabrad-frost
ds-validate-ai-readinessProntidão AIbrad-frost
ds-agentic-auditAudit agenticbrad-frost
ds-token-w3c-extractTokens W3C DTCGbrad-frost
ds-motion-auditAuditar motionbrad-frost
ds-visual-regressionVisual regressionbrad-frost
ds-fluent-auditAderência Fluent 2brad-frost
ds-governanceModelo de governançabrad-frost
ds-figma-pipelinePipeline Figma MCPbrad-frost
ds-critical-eye-inventoryInventariar variantesbrad-frost
ds-critical-eye-scorePontuar variantesbrad-frost
ds-critical-eye-decideTransições lifecyclebrad-frost
f1-ingest-figma-tokensIngest tokens do Figmafoundations-lead
f1-map-tokens-to-shadcnMap tokens → shadcn CSS varsfoundations-lead
f1-apply-foundationsAplicar no globals.cssfoundations-lead
f1-qa-foundationsQA gate foundationsfoundations-lead
f2-adapt-shadcn-componentsAdaptar componentes shadcnfoundations-lead
f3-derive-componentsDerivar componentesfoundations-lead
f3-qa-derived-componentsQA gate finalfoundations-lead
a11y-auditAcessibilidade geralbrad-frost
contrast-matrixMatriz contraste WCAGbrad-frost
focus-order-auditOrdem de focobrad-frost
atomic-refactor-planPlanejar refactorbrad-frost
atomic-refactor-executeExecutar refactorbrad-frost
bootstrap-shadcn-libraryBootstrap shadcnbrad-frost
bundle-auditImpacto do bundlebrad-frost
dead-code-detectionCódigo mortobrad-frost
tailwind-upgradeUpgrade Tailwindbrad-frost
token-usage-analyticsUso de tokensbrad-frost
validate-design-fidelityFidelidade visualbrad-frost
designops-maturity-assessmentMaturidade DesignOpsdave-malouf
designops-metrics-setupMétricas DesignOpsdave-malouf
design-team-scalingEscalar timedave-malouf
design-tooling-auditStack de ferramentasdave-malouf
design-process-optimizationOtimizar processodave-malouf
design-triageTriagem de demandasdave-malouf
create-docCriação de docdesign-chief
execute-checklistExecutar checklistdesign-chief
Checklists & Templates

19 checklists + 16 templates + 41 knowledge files

Checklists

Atomic Refactor
Accessibility WCAG
A11y Release Gate
Component Quality
Migration Readiness
Pattern Audit
Token Mapping
Component Adaptation
Design Fidelity
Reading Accessibility
Design Handoff
Team Health
DesignOps Maturity
Critical Eye Review
Page Composition
Brief Validation
SEO Meta
Epic DS Alignment (52 pts)

Knowledge Base

Atomic Design Principles
Design Token Best Practices
WCAG Compliance Guide
Agentic DS Guide
Fluent 2 Principles
Motion Tokens Guide
W3C DTCG Spec
ROI Calculation Guide
Page Layout Framework
Typography Hierarchy
Spacing Rhythm System
Copy-to-Layout Bridge
Component Index (46)
Brad Frost DNA (4 files)
Critical Eye Scoring
Exemplos de Uso

3 fluxos completos — do comando ao resultado

01
Audit Brownfield — diagnosticar caos de UI
App Next.js com 2 anos de desenvolvimento, 47 variações de botão, cores hardcoded, sem design system.
1
Design Chief roteia para Brad Frost
*triage "auditar design system do nosso app"
IN_SCOPE → @brad-frost. Workflow recomendado: audit-only (5 fases).
2
Brad Frost executa audit
@brad-frost *audit
Escaneando codebase...

inventory.yaml gerado:
47 variações de botão | 23 tons de cinza | 12 font-sizes diferentes
8 border-radius únicos | 156 cores hardcoded | 0 design tokens
Redundância estimada: 78%.
3
Shock Report + ROI
@brad-frost *shock-report
shock-report.html gerado — comparativo visual: 47 botões lado a lado, matrix de cores, inconsistências de spacing.

@brad-frost *calculate-roi
Com time de 5 devs a R$150/h:
Tempo perdido em inconsistências: 12h/semana × 52 = 624h/ano.
Custo anual do caos: R$93.600.
Consolidação estimada: 80% reduction → economia de R$74.880/ano.
ROI: 4.2× em 6 meses. Breakeven: 47 dias.
4
Preview de tokens
@brad-frost *tokenize
Token preview:
47 botões → 4 variantes (primary, secondary, ghost, danger).
23 cinzas → 6 tokens semânticos.
156 cores → 12 tokens base + 8 semânticos.
Pronto para migração.
02
Foundations Pipeline — Figma para shadcn/UI
Designer entregou tokens do Figma. Precisa adaptar shadcn/UI para o visual do produto.
1
Iniciar pipeline
@ds-foundations-lead
Foundations Lead ativo. Pipeline de 3 fases com QA gates bloqueantes.
2
Fase 1 — Tokens
F1-Step 1: Ingest Figma tokens → tokens-normalized.json (42 tokens).
F1-Step 2: Map tokens → shadcn CSS vars (--background, --foreground, --primary, --secondary... todos mapeados em OKLch).
F1-Step 3: Apply → globals.css atualizado com @theme inline.

F1-QA Gate: 42/42 tokens mapeados ✓ | Dark mode parity ✓ | Zero valores inventados ✓ | Todos CSS vars cobertos ✓ → PASS
3
Fase 2 — Componentes base
F2-Step 1: Ingest specs visuais de 8 componentes base (Button, Input, Card, Badge, Avatar, Alert, Dialog, Select).
F2-Step 2: Adapt shadcn — Tailwind classes atualizadas, cores via tokens, radius via tokens. Props API preservada, Radix primitives intactos, ARIA intacto.

F2-QA Gate: 8/8 componentes adaptados ✓ | TypeScript compila ✓ | Props API preservada ✓ | Keyboard nav funcional ✓ → PASS
4
Fase 3 — Componentes derivados
F3: 14 componentes derivados seguindo padrões estabelecidos (Tabs, Accordion, Table, Tooltip...).

F3-QA Gate Final: 22/22 total componentes ✓ | Zero hardcoded colors ✓ → PASS.
Pipeline completo.
03
Page Composition — montar página completa
Precisa de uma landing page de produto SaaS. Copy já existe, precisa virar página.
1
Validar brief e identificar tipo
@page-composer *compose-page landing --copy briefing.yaml
Phase 1: Brief validado (7/8 — PASS). Tipo detectado: Landing Page. Product surface: SaaS B2B.
2
Template + Layout
Phase 2: Template selecionado: landing-hero-features-social-cta.
Phase 3: Copy-to-layout bridge: framework AIDA detectado no briefing.
Seções mapeadas: Attention → Hero, Interest → Features grid, Desire → Social proof + testimonials, Action → CTA section.

Phase 4: Layout framework aplicado — container 1200px, 12-col grid, breakpoints 640/768/1024/1280.
Phase 5: Typography — scale 1.25, vertical rhythm 24px, 6 níveis hierárquicos.
3
Componentes + Código
Phase 6: Spacing — strategy 'generous' (landing page). 4px baseline grid.
Phase 7: Componentes selecionados do component-index.json:
Hero (badge + heading + paragraph + 2 buttons), FeatureGrid (3-col cards with icons), TestimonialCarousel (avatar + quote + role), CTASection (heading + button + guarantee).

Phase 8: Código gerado — React + Tailwind + shadcn/ui. 1 arquivo page.tsx, 4 componentes extraídos. SEO meta tags incluídas. Loading/empty/error states gerados.
4
Quality gate
Phase 9: Validação (10 seções):
Layout Grid ✓ | Typography ✓ | Spacing ✓ | Responsive ✓ | CTA Contrast ✓
Copy-to-Layout ✓ | Accessibility ✓ | Anti-AI Look ✓ | SEO ✓ | Component States ✓.
Score: 9.2/10 — PASS. Página pronta.
Demo Interativa

Brownfield Audit + Build Pipeline

Veja o pipeline completo rodando em tempo real: do triage até a entrega dos primeiros componentes atômicos. Aperte Play e acompanhe cada fase.

aiox — design system brownfield pipeline
Progresso
0 / 6
Clique em Play para iniciar o pipeline...
Aguardando...
Aperte Play

O pipeline vai executar 6 fases: triage, audit, consolidate, tokenize, shock report e build. Dois agentes (/design-chief, /brad-frost) trabalham em sequência.

A cada fase, o terminal mostra os comandos e as respostas. Do lado, você vê a explicação do que está acontecendo.

Resultado final: componentes atômicos prontos + ROI 4.2×.