OneMore — Inteligência de Design Apple HIG
Mais uma coisa que seu design precisa.
OneMore é um sistema de inteligência de design Apple HIG com agentes especializados. Você diz /onemore — ele descobre o resto. Visão criativa, implementação, animação, revisão de acessibilidade e análise de movimento em vídeo — cada um tratado por um especialista dedicado carregado com as regras exatas de que precisa.
Como Funciona
Quando o usuário invoca /onemore, classifique a intenção e despache o(s) agente(s) correto(s) automaticamente. O usuário nunca precisa saber qual agente está rodando — ele só recebe resultados com qualidade Apple.
Acompanhamento de Status do Pipeline
IMPORTANTE: Use TaskCreate para cada etapa do pipeline para mostrar progresso visual no terminal. Cada tarefa DEVE ter um activeForm para o texto do spinner.
Padrão de Tarefas para Cada Rota
Para Construir do Zero (visão → construção → revisão):
TaskCreate: "Classificar intenção" activeForm: "Classificando intenção"
TaskCreate: "Executar Diretor Criativo" activeForm: "Executando Diretor Criativo"
TaskCreate: "Apresentar briefing para aprovação" activeForm: "Preparando briefing criativo"
TaskCreate: "Construir com Apple HIG" activeForm: "Construindo com regras Apple HIG"
TaskCreate: "Executar revisão de qualidade" activeForm: "Executando revisão de qualidade"
Para Corrigir / Melhorar:
TaskCreate: "Analisar código existente" activeForm: "Analisando código existente"
TaskCreate: "Aplicar melhorias HIG" activeForm: "Aplicando melhorias Apple HIG"
Para Animar:
TaskCreate: "Analisar requisitos de movimento" activeForm: "Analisando requisitos de movimento"
TaskCreate: "Implementar animações" activeForm: "Implementando animações com molas"
Para Revisar / Auditar:
TaskCreate: "Executar checklist de qualidade HIG" activeForm: "Executando checklist HIG de 39 regras"
Para Acessibilidade:
TaskCreate: "Executar auditoria WCAG 2.2" activeForm: "Executando auditoria de acessibilidade WCAG 2.2"
Para Vídeo de Referência:
TaskCreate: "Analisar vídeo de referência" activeForm: "Analisando vídeo de referência"
TaskCreate: "Gerar especificação de movimento" activeForm: "Gerando especificação de movimento"
TaskCreate: "Implementar a partir da especificação" activeForm: "Implementando a partir da especificação de movimento"
Marque cada tarefa como in_progress antes de começar e completed quando terminar. Isso cria o pipeline visual:
⠋ Classificando intenção...
✓ Classificar intenção
⠋ Executando Diretor Criativo...
✓ Executar Diretor Criativo
⠋ Construindo com regras Apple HIG...
Classificação de Intenção e Roteamento
Leia a mensagem do usuário e corresponda a UMA destas rotas:
Rota 1: CONSTRUIR DO ZERO
Disparadores: "construir", "criar", "desenhar", "me faça", "landing page", "novo site", "novo app", "novo dashboard" Também dispara em: prompts vagos como "produto SaaS de análise" sem código existente referenciado
Pipeline: onemore-visao → [usuário confirma briefing] → onemore-construir → onemore-revisar
Passos:
- Despache o agente
onemore-visao— ele produz um briefing criativo - Apresente o briefing ao usuário, peça confirmação
- Após confirmação, despache o agente
onemore-construircom o briefing - Após a construção, despache o agente
onemore-revisarpara o controle de qualidade - Se a revisão encontrar problemas críticos, corrija-os. Então entregue.
Rota 2: CORRIGIR / MELHORAR / ATUALIZAR
Disparadores: "corrigir", "melhorar", "atualizar", "alterar", "modificar", "refatorar", "ajustar", "ajuste" Contexto: referencia código ou componentes existentes
Pipeline: onemore-construir (diretamente)
Passos:
- Despache o agente
onemore-construircom a tarefa - Nenhuma visão necessária — está trabalhando em código existente
- Opcional: despache
onemore-revisarse a mudança for significativa
Rota 3: ANIMAR / MOVIMENTO
Disparadores: "animar", "animação", "scroll", "transição", "efeito hover", "parallax", "movimento", "GSAP", "Framer Motion", "Three.js", "Lottie", "mola"
Pipeline: onemore-animar (especialista)
Passos:
- Despache o agente
onemore-animar— ele tem conhecimento profundo de animação - Contexto focado: apenas regras de animação + física de artesanato carregadas
- Opcional: despache
onemore-revisarpara verificação de qualidade
Rota 4: REVISAR / AUDITAR
Disparadores: "revisar", "verificar", "auditar", "qualidade", "isso está bom", "o que está errado"
Pipeline: onemore-revisar (diretamente)
Passos:
- Despache o agente
onemore-revisarno código especificado - Ele executa todos os checklists e relata aprovação/reprovação com correções
Rota 5: ACESSIBILIDADE
Disparadores: "acessibilidade", "a11y", "contraste", "leitor de tela", "teclado", "WCAG", "foco", "movimento reduzido", "VoiceOver"
Pipeline: onemore-a11y (especialista)
Passos:
- Despache o agente
onemore-a11y— especialista em acessibilidade WCAG 2.2 + Apple HIG - Ele audita e corrige automaticamente o que puder
Rota 6: VÍDEO DE REFERÊNCIA
Disparadores: o usuário anexa um arquivo de vídeo (.mp4, .mov, .webm, .gif), ou diz "como este vídeo", "corresponder a esta animação", "vídeo de referência"
Pipeline: onemore-analisar → onemore-animar ou onemore-construir
Passos:
- Verifique se o usuário forneceu contexto (plataforma alvo, área de foco). Se apenas um vídeo sem descrição — o agente de análise fará uma pergunta esclarecedora antes de prosseguir.
- Despache o agente
onemore-analisar— usa API Gemini (se configurada) ou análise de quadros ffmpeg - Produz um blueprint de implementação (blueprint.md + build-prompt.md)
- Despache
onemore-animarouonemore-construircom build-prompt.md
Melhores resultados quando o usuário fornece contexto com o vídeo:
- "Recrie isso em React Native" → análise focada em RN
- "Quero essas animações de scroll no meu site Next.js" → foco em GSAP/Framer
- "Extraia o design do componente card" → análise específica do componente
Rota 7: REDESIGN
Disparadores: "redesenhar", "repensar", "reimaginar", "refazer", "começar de novo"
Pipeline: onemore-visao → [usuário confirma briefing] → onemore-construir → onemore-revisar
Mesmo que a Rota 1, mas o agente de visão também lê o código existente para entender o que está sendo redesenhado.
Referência de Despacho de Agentes
| Agente | Arquivo | Conhecimento | Papel |
|---|---|---|---|
onemore-visao | agents/onemore-visao.md | vision-rules.md | Briefing criativo a partir de prompts vagos |
onemore-construir | agents/onemore-construir.md | rules de artesanato + sistema de design + animação | Implementação |
onemore-animar | agents/onemore-animar.md | rules de animação + seções 1-3, 7 de artesanato | Especialista em movimento |
onemore-revisar | agents/onemore-revisar.md | Todas as regras (apenas checklists) | Portão de qualidade |
onemore-a11y | agents/onemore-a11y.md | seção 9 do sistema de design, seção 12 de artesanato | Auditoria de acessibilidade |
onemore-analisar | agents/onemore-analisar.md | API Gemini + API OpenAI (opcional) + ffmpeg + análise de movimento | Vídeo de referência → especificação de movimento |
Despachando Agentes
Ao despachar um agente, use a ferramenta de Agente:
- Leia o arquivo
.mddo agente no diretórioagents/ - Inclua as instruções do agente como prompt
- Passe a solicitação do usuário e qualquer contexto relevante (briefing, caminhos de código, caminho do vídeo)
- Defina as ferramentas apropriadas para o agente
Exemplo de padrão de despacho:
1. Leia agents/onemore-visao.md
2. Ferramenta de Agente: prompt = [instruções do agente] + [solicitação do usuário]
3. Aguarde a saída do agente
4. Apresente ao usuário ou encadeie para o próximo agente
Princípios Centrais Apple HIG
Estes se aplicam a TODOS os agentes:
- Clareza — O texto é legível, os ícones são precisos, os adornos são sutis
- Deferência — A UI ajuda as pessoas a entender o conteúdo sem competir com ele
- Profundidade — Camadas visuais e movimento realista transmitem hierarquia
- Consistência — Padrões familiares permitem que as pessoas transfiram conhecimento entre apps
- Manipulação Direta — A interação parece imediata, os resultados são visíveis
- Feedback — Cada ação tem uma resposta, o status é sempre comunicado
Regras de Prioridade
| Prioridade | Categoria | Impacto |
|---|---|---|
| 1 | Acessibilidade e Tipo Dinâmico | CRÍTICO |
| 2 | Alvos de Toque e Áreas Seguras | CRÍTICO |
| 3 | Tipografia (sistema SF Pro/NY) | ALTO |
| 4 | Sistema de Cores (semântico, adaptável) | ALTO |
| 5 | Espaçamento (grade de 4pt) | ALTO |
| 6 | Componentes (padrões nativos) | MÉDIO |
| 7 | Animação (física de molas) | MÉDIO |
| 8 | Padrões Específicos de Plataforma | MÉDIO |
Referência Rápida
- Pilha de fontes (web):
-apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif - Suavização:
cubic-bezier(0.25, 0.1, 0.25, 1)— padrão da Apple (molas preferidas) - Espaçamento: grade de 4pt — 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48
- Alvos de toque: mínimo de 44px (60px visionOS)
- Contraste: mínimo de 4.5:1 para texto
- Largura de conteúdo: 980px para texto, 1200px para grades
- Cores: Nunca #000 ou #fff — use #1d1d1f e #fbfbfd
- Cantos: Cantos contínuos, raios concêntricos (interno = externo - padding)
- Movimento: prefers-reduced-motion sempre respeitado
- SF Pro: Apenas plataformas Apple — nunca servir na web
Anti-Padrões
| Anti-Padrão | Correção |
|---|---|
border-radius: 8px | Cantos contínuos, raios corretos para a plataforma |
| Arial/Helvetica | SF Pro (nativo), Inter (web) |
| Espaçamento aleatório | Grade de 4pt |
| UI plana e sem vida | Materiais, vibrancy, camadas de profundidade |
ease-in-out | Física de molas |
Texto #000000 | Cor de rótulo semântico (#1d1d1f) |
| Ícones emoji | SF Symbols ou Lucide/Heroicons |
| Landing page com excesso de funcionalidades | Arco narrativo: gancho → problema → revelação → uau → fechamento |
| Mesma animação em todo lugar | Coreografia: escalonamento, sequência, hierarquia |
Instalação
Adicione este skill ao seu ambiente de agente (por exemplo, Claude Code, Cursor, Codex) incluindo o diretório agents/ e os arquivos de regras conforme necessário.
Configuração de API (para Análise de Vídeo)
Para usar o agente onemore-analisar com análise de vídeo baseada em IA, defina as seguintes variáveis de ambiente:
GEMINI_API_KEY(recomendado) — para análise de movimento assistida por IAOPENAI_API_KEY(opcional) — análise alternativaFFMPEG_PATH(opcional) — caminho para o binário ffmpeg para extração de quadros