Integra é um toolkit de design engineering e Agent Skills para orientar agentes de IA na criação, evolução e avaliação de interfaces. Combina contexto de produto, direção visual, sistemas de design, implementação, inspeção local e QA baseado em evidências.
O objetivo não é impor um tema ou gerar interfaces genéricas. É ajudar o agente a compreender o produto, fazer escolhas justificadas, executar o trabalho certo e apresentar o que realmente verificou.
O pacote npm é integra-cli. Num projeto onde pretendes instalar as skills:
npx integra-cli init
npx integra-cli add integra-animate
npx integra-cli list
npx integra-cli doctorO Live Workbench oferece Quick Canvas para ajustes rápidos e Inspector para diagnóstico detalhado. É independente de framework e não acrescenta dependências de runtime. Ativa-o apenas num entrypoint de desenvolvimento (por exemplo, Vite):
Consulta o guia do CLI para os comandos add, update, remove e para o contrato de instalação. O CLI instala skills e contexto partilhado; não instala o runtime do repositório nem ativa automaticamente uma skill em todos os hosts.
Usa Alt + Shift + I para abrir/fechar rapidamente o Live depois de registar o plugin. Hover e seleção usam o azul Integra #3B82F6; ↑ Pai sobe na árvore DOM. Podes pré-visualizar classes, cores, tamanho de texto, padding e radius; consultar o contraste; repor o estado; e copiar o DOM diff.
- Direção contextual: transforma objetivos, utilizadores, conteúdo e restrições numa tese visual implementável.
- Design intelligence: roteamento de estilos e descoberta contextual de presets, sempre subordinados ao brief e à identidade do produto.
- Agent Skills portáteis: instruções especialistas para UX, direção, sistemas, geração, refactor, motion, cor, investigação e QA.
- Quality engineering: auditorias heurísticas, acessibilidade e performance com evidência, confiança e limitações explícitas.
- Live Inspector: inspeção local de DOM e preview temporário/reversível para preparar um handoff ao código-fonte.
- CLI independente: instalação, atualização, diagnóstico e remoção de skills sem executar scripts incluídos no bundle.
| Área | Skill | Responsabilidade |
|---|---|---|
| Orquestração | integra |
Entender o pedido e selecionar o workflow mínimo adequado |
| UX e estrutura | integra-ux-shape |
Jobs, fluxos, navegação, IA e estados |
| Direção visual | integra-design-direction |
Tese visual, composição, identidade e decisões de design |
| Sistema | integra-design-system |
Tokens, componentes, variantes, temas e governação |
| Cor | integra-colorize |
Cor semântica, hierarquia, temas e contraste |
| Motion | integra-animate |
Transições, micro-interações, timing, reduced motion e performance |
| Implementação | integra-ui-generator |
Novos ecrãs, componentes e interações |
| Manutenção | integra-refactor-agent |
Refactor com preservação do comportamento |
| Revisão | integra-design-qa |
UX, qualidade visual, estados e responsividade |
| Acessibilidade | integra-accessibility-audit |
Auditoria WCAG com evidência por critério |
| Performance | integra-performance-audit |
Medição e diagnóstico de gargalos |
| Investigação | integra-investigation |
Pesquisa técnica e de produto baseada em fontes |
| Referências | integra-reference-investigator |
Observação e adaptação original de referências |
| Inteligência visual | integra-visual-knowledge |
Curadoria e retrieval de fontes, tokens, padrões, regras e exemplos |
| Inspeção | integra-live-inspector |
Preview de DOM local e handoff para source |
integra-direction é mantida como alias legado de integra-design-direction para compatibilidade. Os nomes canónicos seguem o padrão integra-<capacidade>; não renomeamos skills já distribuídas sem uma estratégia de migração.
O catálogo commands/manifest.json descreve comandos, modificadores, gatilhos, skills, inputs, outputs e política de alteração de source. Entre os modificadores estão /integra:colorize e /integra:animate.
O manifesto é agnóstico ao host. A sua presença não significa que Codex, Gemini CLI, Cursor, Claude Code ou Copilot tenham registado comandos nativos automaticamente. A descoberta e a invocação dependem do suporte e da configuração de cada host.
- Produto antes da decoração: começa pelo trabalho do utilizador, conteúdo e contexto.
- Direção original: referências informam princípios; não são copiadas como páginas, assets ou identidade.
- Menor workflow útil: não chamar todas as skills quando uma especialista basta.
- Decisões rastreáveis: separar factos, restrições, preferências, pressupostos e desconhecidos.
- Acessibilidade desde o início: semântica, teclado, foco, contraste, estados e reduced motion.
- Motion com propósito: cada animação comunica estado, continuidade, feedback ou uma intenção visual clara.
- Evidência antes de claims:
not_run,inconclusivee heurísticas nunca são convertidos empassed. - Alterações seguras: preservar trabalho existente e exigir aprovação do diff exato antes de editar source.
O core determinístico é provider-agnostic. Os módulos de contexto, direção, presets, investigação, refinamento, QA e Live Inspector comunicam através de contratos explícitos. As Agent Skills são a camada de instruções para os agentes; o CLI empacota as skills canónicas e os recursos de contexto necessários para as instalar noutros projetos.
Consulte:
- Arquitetura
- Visual knowledge routing
- Design Intelligence Library
- Compatibilidade e instalação por host
- Contrato de contexto de IA
- Contrato de integração dos agentes
- Avisos e licenças de terceiros
A biblioteca separa fontes visuais, providers de assets, mapeamentos para os 61 nichos existentes, observações por página, receitas semânticas de tokens, padrões de layout, regras, anti-patterns e exemplos. A Skill integra-visual-knowledge orienta a curadoria e a seleção contextual; o resolver é offline-first e devolve candidatos explicáveis, sem navegar em sites, aplicar tokens ou declarar defeitos automaticamente. Novas fontes permanecem catalog-only até inspeção específica.
Para desenvolver o repositório completo:
- Node.js 24 e npm 10 ou superior.
- Instala dependências e executa a suite de verificação:
npm ci
npm run check
npm run distribution:check
npm run distribution:smokePara validar a biblioteca visual:
npm run validate:visual-libraryPara validar apenas as skills:
npm run validate:skills
npm run validate:agent-assetsO validador verifica frontmatter, nomes, limites do formato e links locais. O bundler verifica recursos e integridade antes de criar o bundle do CLI. Estes checks não provam que um host específico carregou ou executou uma skill.
- O CLI não executa scripts do bundle e não instala o runtime de desenvolvimento do repositório.
- Instalar uma skill não garante que um host a tenha descoberto, ativado ou seguido.
- O Live Inspector é apenas para desenvolvimento local; não edita source nem deve ser usado em produção.
- O Design QA contém heurísticas; não substitui revisão humana nem testes reais no browser.
- Uma auditoria parcial não prova conformidade WCAG global.
- Uma recomendação de performance sem medições não é um ganho comprovado.
O Integra é distribuído sob MIT. A skill integra-animate e a adaptação existente de integra-colorize incorporam orientação adaptada do Impeccable, licenciado sob Apache-2.0. O bundle inclui o texto integral dessa licença e os avisos necessários em docs/third-party-notices.md e licenses/.
O Integra não incorpora o CLI, os binários, a extensão de browser, os scripts ou as dependências runtime do Impeccable.