Elysia Tools
Navegação
Workflow Playbook
Capture uma página pública autorizada, confira as observações de CSS na imagem e entregue propostas de tokens revisadas, com evidências, decisões e limitações registradas.
Temas
Anote URL, horário, viewport, preferência clara ou escura solicitada e espera adicional. Solicitar um tema não comprova que a página o aplicou. Preserve o ZIP e seus arquivos design.md, screenshot.png, tokens.json e tokens.css sem modificações, com hashes. Antes de resumir os resultados, procure sobreposições de carregamento, fontes ausentes e recursos bloqueados.
A imagem mostra um viewport fixo, enquanto a amostragem limitada pode alcançar elementos renderizados abaixo dele. Isso não substitui rolagem, cliques ou investigação de áreas autenticadas. Avisos e listas truncadas fazem parte da evidência e devem acompanhar a entrega.
Escolha títulos, texto corrido, botões e cartões representativos. Mantenha componente, estado e declaração observada em um registro próprio. As coordenadas da imagem ajudam a conferir a observação, mas suavização de bordas, transparência, gradientes, imagens e gerenciamento de cores podem produzir pixels diferentes do CSS. Prefira uma área uniforme para amostrar e preserve as duas medidas.
As frequências representam declarações observadas, não área visual nem importância de marca. Uma sequência de fontes não demonstra qual delas foi carregada. Uma largura não define uma escala responsiva. Identificadores como observed-1 são mecânicos e não constituem identidade estável. Expressões CSS não suportadas podem permanecer no relatório sem virar tokens; não complete lacunas inventando valores.
Converta somente representações suportadas e mantenha o valor original e os avisos de limite de gama. Passar para um espaço menor não garante aparência idêntica. O contraste exige conhecer o primeiro plano e o fundo efetivos. Para transparência, confirme a composição; fundos com imagem ou gradiente precisam de outra verificação. Não substitua um fundo desconhecido por uma cor opaca conveniente.
Formate uma cópia do CSS, sem sobrescrever o site. Use um esquema JSON compatível para verificar a estrutura combinada; aprovação não equivale a certificação geral de um padrão de tokens. Compare capturas com viewport, tema e condições de carregamento equivalentes. A ordem da coleta pode mudar numeração e posições. Interprete cada diferença após conferir valor, componente e estado; falhas de recursos podem gerar ruído sem mudança real no design.
Mantenha no registro manual a referência da captura, componente, declaração, coordenada quando útil, nome proposto, situação, justificativa e responsável. Esse vínculo documentado não é um identificador permanente produzido automaticamente. Separe originais imutáveis, propostas aprovadas e casos ainda pendentes.
Reabra e valide os arquivos alterados, calculando hashes dos arquivos efetivamente entregues. Inclua evidências locais, não apenas links temporários. Liste larguras, estados de hover, foco, erro e autenticação, frames e páginas não examinados. A equipe receptora deve verificar a implementação no navegador antes da publicação. Para criar paletas, escolher fontes ou implementar regras CSS, use os workflows relacionados, sem apresentar este inventário como substituto dessas etapas.
Guia de fluxo de trabalho
Capture a página autorizada com viewport e espera definidos. Guarde o arquivo exportado sem alterações e calcule seu hash.
Revise títulos, textos, botões e cartões. Registre coordenadas e pixels separadamente dos valores observados no CSS.
Converta representações suportadas mantendo os originais. Verifique os fundos reais; transparência ou imagens sem composição confirmada ficam pendentes.
Formate uma cópia do CSS, valide o JSON com um esquema compatível e compare versões equivalentes. Reconcilie manualmente o significado das diferenças.
Confira carregamento, sobreposições e recursos bloqueados. Repita uma captura incompleta ou registre claramente sua limitação.
Trate o valor como evidência. Nomes como cor primária exigem confirmação humana; frequência de uso não determina função.
Exija condições equivalentes. Mudanças na numeração dos valores observados não comprovam alterações no design.
Separe originais e propostas aprovadas, confira novamente arquivos editados e calcule os hashes finais. Inclua pendências e responsáveis pela aceitação.