micro-ui-illustration

Kit de Ferramentas para Ilustração Vetorial

Combine as ideias do usuário com imagens de referência de design, esclarecendo gradualmente o foco por meio de perguntas e, em seguida, utilizando as ferramentas de desenho aqui fornecidas. Por padrão, utilize as restrições de estilo Micro-UI abaixo; as diretrizes e especificações do projeto explicitamente definidas pelo usuário têm prioridade.

Estilo e Composição Padrão do Micro-UI

Este conjunto de regras restaura os limites de estilo de versões anteriores, aplicando-se a novas ilustrações Micro-UI; não são limitações da tecnologia SVG em geral.

• Fatias de Controles Reais: O assunto principal deve ter uma estrutura de ferramenta ou controle reconhecível. Não crie uma interface apenas com barras cinza repetidas, cartões vazios e ícones sem significado; extraia primeiro as características de identidade do objeto de referência.
• Corpo Sem Contorno: Utilize superfícies de cor sólida, sobreposição e sombras suaves para delimitar as formas grandes. Linhas para ícones essenciais, linhas-guia de régua e traços ambientais muito sutis podem ser usados; o tamanho do ícone e a espessura do traço devem obedecer às especificações do projeto alvo.
• Composição em Camadas Padrão: Organize o espaço como 'placa de base de suporte -> fatia de controle do plano médio -> foco do primeiro plano', sendo a camada de ambiente opcional. Papéis, documentos e relatórios podem usar a placa de base; se o próprio controle já constitui uma entidade completa, a placa de base extra pode ser omitida. Cada camada deve servir ao tema, sem adicionar acessórios apenas para criar mais camadas.
• Átomo de Camada Única e Proibição de Recursão: Se o assunto principal já é composto por vários submódulos, os submódulos devem manter entidades sólidas de cor completa, sem aninhar um terceiro nível de microcontroles, pseudográficos ou pequenos símbolos. A hierarquia estrutural é calculada com base na função visual, não no número de aninhamentos de tags <g> no SVG.
• Componente Mínimo de 16px: No tamanho de exibição alvo, a largura e a altura de blocos de cor independentes devem ser de no mínimo 16px; exceções para traços de ícones essenciais, linhas-guia de régua e pontos de indicação de estado (diâmetro não superior a 3px). Não contorne esta regra aumentando a resolução de exportação. Se o tamanho pequeno não puder acomodar, reduza os componentes ou simplifique a expressão.
• Detalhes Contidos: Por padrão, um único contêiner não deve ter mais de três componentes principais; não desenhe pseudotexto denso, nem use contêineres altos e vazios para conter pouco conteúdo. Use texto apenas quando necessário para expressar identidade, estado ou ação.
• Cores por Token: O código-fonte deve referenciar papéis de cor definidos centralmente, que são então mapeados para os tokens do projeto; não escreva valores hexadecimais ou outras literais de cor dispersas. Um SVG independente pode resolver os papéis para cores reais durante a exportação, mantendo a origem do mapeamento para garantir que ainda seja exibível fora do ambiente host.

Para o assunto atual, selecione os materiais relevantes da Imagem de Referência e Registro de Análise. Quando precisar de parâmetros de luz/sombra ou exemplos de código, consulte Construção e Exemplos Completos. As regras de estilo são aplicadas por padrão; se uma exceção for realmente necessária, o agente deve julgar com base na referência e no tamanho de exibição, explicando o objeto da exceção, o motivo e o resultado da verificação visual, sem precisar pedir permissão repetidamente para desenhos comuns.

Aprendendo com o Fluxo de Referência do Usuário

Quando o usuário fornecer uma imagem de referência e quiser que suas características sejam adotadas, siga estas etapas para analisar e registrar:

1. Receber a Intenção: O usuário envia uma imagem de referência e declara quais características deseja adotar (por exemplo, "adotar a sensação de espessura da abertura da pasta" ou "adotar a proporção de área desta combinação de cores azul-esverdeado").
2. Analisar os Pontos-chave: O agente examina a imagem e a decompõe em cinco aspectos:
   • Forma: Como o controle é fatiado, o contorno externo e o tamanho dos cantos arredondados;
   • Cor: Contraste de área entre a placa de base clara, a cor funcional principal e o ponto focal de destaque;
   • Camadas: Relações de sobreposição frontal e traseira, deslocamento de camadas e espaço em branco;
   • Composição: O centro de gravidade do assunto na tela e o fluxo visual;
   • Luz/Sombra: Deslocamento da sombra suave, tamanho da dispersão e transparência.
3. Salvar e Registrar:
   • Armazene a imagem no diretório assets/reference-images/;
   • Adicione as conclusões da análise ao references/visual-reference-map.md, especificando claramente o que pode ser adotado e o que é conteúdo de negócio específico da imagem original (não copiar diretamente).
4. Troca de Estilo e Ausência de Imagem:
   • Quando o usuário solicitar explicitamente uma troca de estilo, ajuste os parâmetros de acordo com a nova solicitação, evitando conflitos entre regras antigas e novas;
   • Se não houver imagem de referência, desenhe de acordo com as regras e exemplos existentes, sem exigir que o usuário forneça uma imagem.
5. Esclarecimento Conceitual:
   • "Aprender" aqui significa analisar a imagem de referência e registrar os pontos-chave para consulta durante o desenho, não treinar o modelo, e não se declara que o modelo aprendeu permanentemente o estilo.

Focando a Imagem Gradualmente Através do Esclarecimento

Quando a direção de uma nova imagem ainda não estiver clara, o agente deve guiar ativamente o usuário para expressar suas ideias passo a passo, não gerando uma imagem diretamente ao receber uma palavra-chave. Primeiro, organize as informações já fornecidas pelo usuário: propósito, cenário, referências, preferências e limitações. Esclareça apenas as lacunas que afetarão o julgamento do design atual; informações já confirmadas devem ser reutilizadas, sem perguntar novamente.

Você pode apresentar algumas opções específicas para ajudar o usuário a expressar suas preferências e, em seguida, aprofundar-se gradualmente com base na escolha e explicação do usuário. A cada rodada, faça uma pergunta curta e específica sobre uma decisão de design chave, oferecendo algumas direções com diferenças práticas, explicando como cada uma resultaria em uma imagem diferente e fornecendo uma recomendação. A próxima rodada deve dar continuidade ao que o usuário acabou de confirmar, focando ainda mais no cenário, assunto ou composição que ainda não estão claros, sem repetir opções genéricas. Permita que o usuário descreva, combine ou rejeite essas direções livremente, sem limitá-lo às opções. Não apresente um questionário completo de necessidades de uma só vez, nem transfira o trabalho profissional de composição para o usuário.

Com base nas informações faltantes, prossiga gradualmente de acordo com o seguinte raciocínio; pule as partes que o usuário já deixou claras:

1. Foco no Conteúdo Expresso: A partir do propósito e tema, descubra o que o usuário mais quer que o espectador entenda, esclarecendo o objeto, ação, estado ou relação. Converta palavras de função amplas em cenários específicos e peça confirmação ao usuário com uma frase clara de intenção visual.
2. Foco na Direção Visual: Combinando a análise do material, mostre referências relevantes, aponte as partes que podem ser adotadas (forma, cor, espaço ou textura) e pergunte ao usuário o que ele gosta e não gosta especificamente. Diferencie a base do estilo da composição do cenário; não presuma copiar o layout de uma referência só porque ela é apreciada.
3. Foco na Composição da Imagem: Através do diálogo, entenda gradualmente as ideias do usuário sobre o assunto, relações entre objetos, foco e sensação geral. Dê sugestões específicas com base na referência para ajudar o usuário a definir suas escolhas.

Continue esclarecendo apenas o que ainda não está claro; não siga a lista de perguntas mecanicamente. Depois que a ideia estiver focada, repita a intenção da imagem e a composição principal acordadas em poucas palavras e aguarde o usuário declarar explicitamente "pode começar", "pode prosseguir" ou autorização equivalente antes de começar a desenhar. Se a autorização já foi dada e a direção está clara, execute diretamente, sem confirmar novamente. Os detalhes subsequentes são controlados pelo usuário; continue ajustando conforme as modificações solicitadas, sem definir estágios de aprovação de amostra ou refinamento de feedback. Para modificações locais, esclareça apenas o alvo ambíguo, sem reiniciar todo o processo.

Da Referência à Forma e Composição

Primeiro, identifique a estrutura reconhecível do objeto na experiência do usuário: não apenas o contorno e as partes, mas também as proporções-chave, ordem de disposição e relações de conexão. Texto e retângulos arredondados genéricos não podem substituir essas características. Escolha o objeto completo ou uma fatia local de acordo com o propósito; a simplificação deve priorizar o enquadramento e a omissão; ao exagerar, mantenha as relações estruturais que tornam o objeto crível, não desenhando o nome da função como um fluxo por padrão.

Com base no objeto atual e no problema de forma que você deseja resolver, selecione referências relevantes e abra as imagens de fato. Quando precisar entender a implementação, leia o SVG correspondente e veja o resultado renderizado. Não é necessário percorrer toda a biblioteca de materiais. A análise deve se concentrar em "qual relação específica na referência a torna válida e como usá-la desta vez", como contraste de escala, sustentação ou sobreposição, em vez de apenas listar efeitos como cantos arredondados e sombras suaves. A base do estilo não equivale a copiar o layout do cenário; quando a imagem não possui código-fonte, o método de implementação é uma suposição a ser verificada.

Com base nisso, decida o que manter, o que remover e onde exagerar. Em seguida, organize o assunto principal, auxiliares e espaço em branco com formas grandes. Primeiro, julgue se o objeto é crível e se a hierarquia principal está estabelecida; depois, adicione detalhes e texturas. Se só puder ser salvo com texto explicativo ou sombras, volte à forma. O julgamento é feito pelo agente, sem adicionar etapas de confirmação do usuário. Para saber como os efeitos específicos se transformam em caminhos, coordenadas e filtros, consulte Convertendo Referência em Desenho.

Variações devem alterar a relação entre os assuntos, a perspectiva ou a composição; apenas trocar linhas, texturas e cores constitui uma variação de material dentro da mesma composição, não podendo ser chamado de nova cena. Não transforme a combinação de objetos do tema atual em um modelo fixo para trabalhos futuros.

Objetos no mesmo espaço compartilham sombra, espessura e iluminação; ícones e texto no plano são primeiro posicionados em coordenadas locais e depois mapeados na superfície como um todo; desenhe primeiro a entidade posterior e depois a anterior. Contornos adjacentes devem estar claramente separados ou claramente sobrepostos, evitando tangências, fendas estreitas e ícones cortados pela metade. A geometria unificada é tratada pela ferramenta de construção; a adequação do assunto principal ainda é julgada pela análise de referência e renderização no tamanho real.

Verificação de Conformidade e Revisão Local

Etapas de verificação interna: Renderizar -> Olhar a imagem de fato -> Encontrar problemas -> Revisar novamente. Após concluir o desenho ou modificação, use scripts/render.mjs para gerar PNGs em 1x e 3x a partir do SVG ou página de exibição. Abra as duas imagens de fato e verifique item por item de acordo com a 'Inspeção Visual Pré-entrega' abaixo, registrando problemas específicos. Verifique a identificação do assunto, composição, proporção e espaço em branco na imagem 1x; verifique cantos arredondados, sobreposições, juntas, cortes e sombras na imagem 3x. A taxa de pixels de exportação não substitui o tamanho de exibição alvo; quando o tamanho alvo for diferente do tamanho inerente do SVG, especifique com --width, --height.

Realize pelo menos uma verificação inicial e uma verificação de acompanhamento após a revisão. Se nenhum problema for encontrado na verificação inicial, realize uma segunda revisão independente, sem necessidade de modificar deliberadamente. Após cada ajuste, re-renderize e abra a imagem para confirmar que o problema específico foi resolvido. Se ainda houver problemas insolúveis ou o ambiente não puder ser renderizado, declare claramente, sem afirmar que a inspeção visual foi aprovada. Este processo é uma verificação de qualidade interna do agente, não adiciona estágios de aprovação de amostra ou refinamento de feedback do usuário.

Ao envolver variáveis de função CSS (role variables), passe o mapeamento JSON gerado pelo projeto via --vars. Variáveis ausentes sem um fallback válido devem ser resolvidas, sem que o agente as preencha com cores próprias. O mapeamento do projeto e a imagem exportada são salvos no diretório da tarefa; os valores de cor do projeto não devem ser escritos na skill. Para comandos, dependências e escopo de captura de tela da página de exibição, consulte Renderização e Visualização.

Veja a imagem final lado a lado com a referência selecionada, comparando contorno, proporção, cantos arredondados, área de cor, sombras e densidade de detalhes para determinar se a linguagem visual é coerente.

Após a renderização, aponte problemas visuais específicos e, em seguida, modifique-os. Verifique a identificação do objeto, proporção, sobreposição, alinhamento e limites; não use um arquivo válido ou exportação bem-sucedida como substituto para o julgamento visual.

Antes de modificar, localize o objeto apontado pelo usuário e seu escopo, utilizando a estrutura vetorial existente para ajustes locais. Após a modificação, compare as imagens antes e depois para confirmar que a forma e o layout já aprovados foram preservados.

Inspeção Visual Pré-entrega

Após a renderização, verifique os itens abaixo; se encontrar problemas, primeiro ajuste o desenho e depois entregue. O fato de um arquivo ser analisável ou exportado com sucesso não constitui aprovação visual.

• As proporções-chave, disposição e conexão estão de acordo com a experiência real do objeto; após omissão ou exagero, a estrutura de identificação ainda é preservada, em vez de depender apenas de um título ou alguns símbolos para indicar o tema.
• O fundo, o plano médio e o primeiro plano padrão têm tamanhos e sobreposições com hierarquia principal; se a placa de base for omitida, o assunto principal tem um contorno completo por si só.
• A altura do contêiner é proporcional ao conteúdo; o primeiro plano não rouba o centro de gravidade devido a uma grande área de espaço vazio.
• Submódulos compostos não possuem microcontroles aninhados; blocos de cor independentes atendem a 16px no tamanho de exibição alvo, com exceções para linhas essenciais e micropontos já distinguidos.
• Formas adjacentes estão claramente separadas ou sobrepostas, sem tangências, fendas estreitas ou interseções acidentais; texto e ícones não são acidentalmente cobertos pelo primeiro plano.
• As sombras distinguem as camadas, mas não são pretas sujas; a área de cor é coerente com a referência; todas as cores podem ser rastreadas até a configuração de função ou token do projeto.
• Ao lado da referência selecionada, verifique se as relações de escala, contorno, espaço ou material adotadas são válidas na imagem final, em vez de apenas verificar se o mesmo tipo de efeito foi usado; examine tanto o tamanho original quanto o tamanho de exibição real, explique as correções específicas, sem inventar pontuações ou aprovação do usuário.

Processo de Coleta de Exemplos

Após a conclusão e verificação, pergunte ativamente uma vez. Somente colete se o usuário concordar explicitamente.

1. Regra de Pergunta:
   • Após terminar a ilustração e concluir a verificação interna, o agente pergunta ativamente uma vez: "Ficou satisfeito com esta ilustração? Gostaria de adicioná-la à biblioteca de exemplos para referência futura?"
   • Se o usuário ainda estiver solicitando modificações, primeiro ajuste o desenho, não pergunte repetidamente.
   • Se o usuário recusar, não responder, ou disser apenas "satisfeito" sem concordar explicitamente com a coleta, não execute a coleta.
   • Não colete automaticamente todos os resultados gerados.
2. Execução da Coleta:
   • Verifique os arquivos: devem existir tanto o código-fonte .svg editável quanto a imagem de visualização .png renderizada; verifique se há duplicação de nomes, não sobrescreva arquivos existentes.
   • Execute o script de coleta: scripts/collect-example.mjs;
   • Atualize automaticamente o references/example-guide.md, registrando o nome do tema, características de construção e cenários de aplicação.

Métodos de Desenho SVG Combináveis

A ferramenta de construção SVG explica o uso do scripts/build-kit.mjs local: contorno, câmera unificada, extrusão de sólido, mapeamento de superfície, caixa delimitadora e exportação de papéis de cor. Use conforme a necessidade da imagem; não é necessário que toda imagem seja tridimensional.

Índice de Ferramentas

O que você quer fazer	Ferramenta e Exemplo
Contornos retos, arcos, curvas orgânicas	Caminhos e Curvas
Unir, fazer furos, cortar localmente, transições transparentes	Combinação de Formas e Máscaras
Deslocamento, rotação, escala, cisalhamento, projeção plana	Coordenadas e Transformações
Superfície de cor, gradiente, sombra, textura repetida	Preenchimento e Materiais
Largura do texto, tamanho da etiqueta, caixa de linha e limites	Ferramentas de Texto e Layout
Visualização no navegador, re-renderização local, comparação de imagens	Renderização e Visualização
Coleta segura de exemplos e atualização de índice	Guia de Coleta de Exemplos

Exemplos e Materiais Editáveis

Ao observar referências, combine as imagens abertas de fato com os SVGs correspondentes, relacione os efeitos locais ao método de implementação e, em seguida, considere como aplicá-los ao tema atual. Ângulos de observação específicos e exemplos podem ser encontrados em Convertendo Referência em Desenho.

• Construção e Exemplos de Código: Limites de uso de escala do objeto, luz/sombra, papéis de cor e exemplos históricos.
• Modelos de Tema: Cinco imagens de Tipografia e imagens SVG e PNG de filtro de pesquisa.
• Biblioteca de Exemplos Originais: SVGs e PNGs de marcadores, calendários, uploads e conteúdo móvel.
• Materiais de Estilo: Referências visuais disponíveis.
• Imagem de Referência e Registro de Análise: Análise de referências do usuário e índice de características.

Os parâmetros nos exemplos são implementações de trabalhos específicos e podem ser modificados. O que desenhar, quais técnicas combinar, como comunicar e entregar são decididos pela tarefa atual.