O que Iconsaz: pacotes de ícones personalizados faz?
Crie um pacote de ícones original que pareça pertencer à marca do usuário: mesma sensação de traçado da tipografia, mesma linguagem de cantos da interface, mesmo clima do marketing. O padrão de qualidade é definido pelos melhores pacotes públicos (Lucide, Phosphor, Tabler, Heroicons, Material Symbols, Untitled UI): uma grade, uma regra de traçado, um tamanho óptico, nomes previsíveis. O resultado é o pacote do usuário, não uma cópia de nenhum deles.
Arquivos neste skill
| Arquivo | Leia quando |
|---|---|
references/question-flow.md | Passo 1: texto exato, opções, padrões e lotes para as 14 perguntas |
references/style-rules.md | Passos 2–7: regras de referência, mapeamento marca-para-estilo, regras de construção, catálogo inicial, banco de metáforas |
references/rtl-and-culture.md | Passo 8, e sempre que o produto for RTL ou enviado para várias regiões |
templates/style-brief.md | Passo 3: copie e preencha; é também o arquivo que o usuário mantém |
scripts/validate_icons.py | Passos 6, 7 e 9: verifica grade, padding, traçado, viewBox, currentColor, camadas ocultas, nomenclatura, completude, pares RTL |
scripts/preview_sheet.py | Passos 6 e 9: gera preview.html (tamanhos, zoom na grade, claro/escuro, cor, alternância RTL) |
scripts/package_pack.py | Passo 10: valida, depois compacta SVGs + cópias planas prontas para Figma + pré-visualização + briefing + guia de importação |
Os scripts são Python 3.8+ puro, sem dependências. Execute-os com python scripts/<nome>.py --help.
Dois modos
- Novo pacote: execute todo o fluxo abaixo.
- Estender um pacote: o usuário compartilha um briefing de estilo feito anteriormente por este skill (ele contém um bloco JSON
icon-spec). Pule a entrevista e a varredura da marca. Leia o briefing, pergunte apenas quais ícones adicionar (e ofereça metáforas para os abstratos), desenhe-os seguindo exatamente os números do briefing, valide contra ele, adicione-os à lista de ícones, incremente a versão secundária e adicione uma linha de changelog. Nunca altere grade, traçado, padding ou raio neste modo: corresponder exatamente aos ícones antigos é o objetivo principal. Se o usuário quiser uma mudança de estilo, isso é uma nova versão principal e todos os ícones devem ser redesenhados.
Fluxo de trabalho
Mantenha o usuário informado em três pontos de verificação: a varredura da marca (passo 2), o briefing (passo 3) e os ícones de teste (passo 6). Desenhar 60 ícones com uma suposição errada gasta muito mais tempo do que uma confirmação extra.
1. Entrevista
Faça as 14 perguntas em references/question-flow.md, em ordem, três ou quatro de cada vez. Use uma ferramenta de perguntas estruturadas (como AskUserQuestion) para perguntas de múltipla escolha quando disponível, e chat comum para uploads e respostas digitadas.
- Se o usuário pular uma pergunta, escolha o padrão da referência, diga o que escolheu e por que em uma linha, e prossiga. Não pergunte novamente.
- Não peça os ícones existentes do usuário e, se ele os oferecer, agradeça e os guarde. Este é um novo conjunto; ícones antigos puxam o estilo de volta para o que a equipe está tentando deixar. As regras do sistema de design (grade, traçado, raio) são bem-vindas, que é o que a pergunta 9 pede.
- As capturas de tela enviadas conterão ícones atuais. Use-as apenas para saber onde os ícones são necessários (passo 4), nunca como devem parecer.
2. Varredura do DNA da marca
Estude tudo o que foi enviado: logotipo, guia de marca, cores, tipografia, quadros de humor, marketing e capturas de tela. Derive o estilo a partir de evidências usando as tabelas de mapeamento em references/style-rules.md ("Da marca ao estilo do ícone"). Observe:
- Tipografia: espessura da haste em tamanhos de interface, terminais (redondos, retos, angulares), arredondamento das curvas, altura-x, geométrica vs. humanista. Isso define a largura do traçado e as extremidades/uniões.
- Logotipo: peso da linha em relação ao seu tamanho, formas dos cantos, ângulos (45° vs. livres), qualquer motivo característico (um entalhe, um enrolamento, um canto cortado) que possa se tornar uma característica sutil em todo o pacote.
- Capturas de tela da interface: raio do canto dos componentes, largura da borda, densidade, espaçamento. Isso define o raio do canto do ícone e o conjunto de tamanhos.
- Cor e imagens: informam apenas o clima. Os ícones são entregues em
currentColor.
Mostre as descobertas em uma tabela e peça ao usuário para confirmá-las ou corrigi-las:
| Sinal | Evidência | Decisão | Confiança |
|---|---|---|---|
| Traçado | A fonte do corpo é Nunito Regular, hastes ≈ 1,6 px em texto de 16 px | 2 px em 24, 1,75 em 20 | Alta |
Diga claramente quando a evidência é escassa ("nenhuma tipografia fornecida, então o traçado foi inferido apenas a partir do logotipo, confiança média").
3. Briefing de estilo
Copie templates/style-brief.md, preencha todas as seções e mostre ao usuário. Ele cobre grade e padding, traçado por tamanho, extremidades e uniões, raio do canto, estilos e estados, tamanhos, clima, nomenclatura, decisões RTL e a lista completa de ícones agrupados por categoria. O bloco JSON icon-spec no final é o que os scripts leem, então mantenha-o sincronizado com o texto. Obtenha aprovação explícita antes de desenhar qualquer coisa.
4. Localizador de ícones ausentes
Percorra cada captura de tela região por região (navegação, cabeçalhos, barras de ferramentas, botões, linhas de lista, campos de formulário, estados vazios, toasts e status, linhas de configurações, cartões) e liste cada ponto que precisa de um ícone. Apresente uma tabela (tela, localização, ícone necessário, já na lista?) e adicione os ausentes à lista de ícones do briefing após o usuário concordar. Se não houver capturas de tela, use o catálogo inicial em references/style-rules.md mais o contexto do produto.
5. Opções de metáfora
Para cada conceito abstrato (reembolso, consulta, sincronização, integração, assinatura, fidelidade, conformidade, etc.), ofereça duas ou três ideias visuais com uma justificativa de uma linha cada, e sinalize qualquer risco cultural usando references/rtl-and-culture.md. O "Banco de metáforas" em references/style-rules.md tem pontos de partida. Deixe o usuário escolher e registre a escolha no briefing, porque o próximo designer precisa saber por que reembolso é uma moeda com uma seta de retorno.
6. Ícones de teste
Desenhe três ou quatro amostras primeiro: home, search, settings e o ícone mais característico específico do produto. Faça cada um em todos os estilos aprovados, em todos os tamanhos. Em seguida, execute:
python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html
Corrija todos os erros, observe a pré-visualização você mesmo (abra-a em um navegador se tiver um e verifique os tamanhos 1×, não apenas o zoom), depois mostre ao usuário. Pergunte o que parece estranho. Ajustes típicos nesta fase: traçado um pouco mais grosso ou mais fino, cantos mais suaves, mais ou menos detalhes. Atualize o briefing se algo mudar. Não inicie o conjunto completo até que o usuário aprove as amostras.
7. Conjunto completo
Desenhe cada ícone no briefing seguindo "Como desenhar" abaixo. Trabalhe categoria por categoria e execute o validador após cada uma, para não encontrar um erro sistemático 80 ícones depois.
8. RTL e cultura
Se a direção do texto for RTL ou ambas, crie uma versão espelhada -rtl de cada ícone direcional (setas, voltar e avançar, enviar, responder, desfazer e refazer, sair, recuo de lista, etc.). Deixe ícones não direcionais inalterados; espelhar um relógio ou botão de play é um erro. Verifique cada ícone contra a lista de riscos culturais. Ambas as listas estão em references/rtl-and-culture.md. Marque os ícones direcionais na lista directional da especificação para que o validador verifique os pares.
9. Verificação final
Execute o validador sem --samples. Ele deve relatar zero erros. Em seguida, verifique visualmente, porque um script não pode julgar a reconhecibilidade:
- Cada ícone no briefing existe em todos os estilos e tamanhos (validador: completude).
- Cada ícone segue o briefing: grade, padding, traçado, extremidades, uniões, raio (validador).
- O tamanho óptico é uniforme em todo o conjunto; nada parece maior ou menor que seus vizinhos na grade de pré-visualização (validador avisa sobre discrepâncias).
- Cada ícone ainda é claro no menor tamanho: veja a linha 1× da pré-visualização. Se dois detalhes se fundem, remova um naquele tamanho em vez de afinar o traçado.
- Os nomes seguem
categoria/nome/variante/tamanho, em kebab-case minúsculo, e significam a mesma coisa em todo lugar (validador: nomenclatura). - Os pares RTL existem e realmente se espelham (validador: RTL).
- Nenhum símbolo culturalmente arriscado foi inserido.
Corrija qualquer coisa que falhe e execute as verificações novamente antes de entregar.
10. Entrega
Figma Professional (ou superior): construa a biblioteca com o Figma MCP. Se suas ferramentas estiverem ausentes ou não autenticadas, informe ao usuário que é necessário conectar e ofereça o zip como alternativa. Se um skill Figma como figma-use estiver disponível, carregue-o antes da primeira chamada de escrita.
- Crie um novo arquivo com três páginas: Capa, Ícones e Uso.
- Em Ícones, faça uma seção por categoria. Para cada ícone, transforme cada SVG em um nó (
figma.createNodeFromSvg), converta cada um em um componente, nomeie os componentes com propriedades de variante (style=outline, state=default, size=24) e combine-os comfigma.combineAsVariantsem um conjunto de componentes chamadocategoria/nome. Mantenha os traçados como traçados; não os converta em contornos. - Construa uma categoria por chamada de escrita. Lotes grandes excedem o tempo limite, e uma falha custa uma categoria, não o pacote inteiro. Tire uma captura de tela após cada categoria e compare com a pré-visualização.
- Capa: nome do pacote, versão, palavras de clima e uma grade de ícones heróis. Uso: tamanhos e quando usar cada um, espaçamento próximo ao texto, regra ativo/inativo, regra RTL, nomenclatura, exemplos de fazer/não fazer, e "para adicionar ícones, compartilhe o briefing de estilo com o skill".
- Também entregue o zip do próximo caminho, já que os desenvolvedores precisam dos SVGs de qualquer forma.
Figma Free (ou sem Figma): o Figma MCP não pode escrever arquivos de biblioteca em planos gratuitos, então entregue os arquivos:
python scripts/package_pack.py icons/ --brief style-brief.md --out dist/
Ele se recusa a empacotar com erros, e também com avisos até que você os revise; adicione --allow-warnings apenas quando cada aviso restante for intencional. Em seguida, ele escreve dist/<pacote>-v<versão>.zip contendo svg/ (a árvore categoria/nome/variante/tamanho.svg), figma/ (cópias planas categoria__nome__variante__tamanho.svg que se tornam nomes com barra no Figma após uma renomeação em lote), preview.html, manifest.json, o briefing de estilo e IMPORT-TO-FIGMA.md com instruções passo a passo para importar os ícones e transformá-los em componentes com variantes. Resuma esses passos também no chat.
11. Salve o briefing
Salve o briefing de estilo final ao lado do entregável (nomeado <pacote>-style-brief.md) e diga ao usuário, nestas palavras ou próximas a elas: "Mantenha este arquivo. Da próxima vez que precisar de ícones, compartilhe-o comigo primeiro e os novos irão corresponder exatamente a este pacote."
Como desenhar
Escreva SVGs manualmente na grade acordada, como você construiria vetores em uma ferramenta de design. Cada tamanho é desenhado em sua própria tela nativa (viewBox="0 0 20 20" para 20 px e assim por diante), para que tamanhos pequenos possam ter seu próprio traçado e detalhes simplificados, como os tamanhos ópticos do Material e os conjuntos de 20 e 16 px do Heroicons.
- Raiz:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">. Defina a cor na raiz e deixe as formas herdarem, o que mantém cada ícone idêntico. - Use primitivas (
circle,rectcomrx,line,pathcom arcos) na grade. Mantenha as coordenadas em unidades inteiras ou metades (no máximo quartos de unidade). Pontos fora da grade ficam borrados em 1×. - A cor é apenas
currentColor. Formas preenchidas usamfill="currentColor". O segundo tom do duotone écurrentColorna opacidade do briefing, nunca uma segunda cor. - Sem transformações, elementos ocultos,
<text>, imagens embutidas,<style>, IDs ou metadados do editor. Achate tudo em geometria simples. - Ajuste a forma à sua linha-chave (círculo, quadrado, retrato ou paisagem retangular; veja style-rules), para que um ícone redondo e um ícone quadrado pareçam do mesmo tamanho.
- Lacunas internas têm pelo menos a largura de um traçado, maiores em 16 px.
- Variantes preenchidas seguem a mesma silhueta da versão outline, com detalhes removidos como lacunas. Elas devem ser lidas como o mesmo ícone, "ligado".
- Para fazer um tamanho menor, comece da geometria de 24 px escalada para a nova tela, ajuste os pontos à grade, defina o traçado daquele tamanho a partir do briefing, depois remova detalhes que não cabem mais. Nunca apenas escale o arquivo.
- Combine com a tipografia da marca: extremidades e uniões espelham seus terminais, curvas espelham suas curvas, e uma assinatura em todo o pacote (um entalhe, um canto cortado) pode ecoar o logotipo se o briefing pedir.
Um ícone outline mínimo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="7"/>
<path d="M15.5 15.5 21 21"/>
</svg>
Layout do diretório
icons/<categoria>/<nome>/<variante>/<tamanho>.svg e.g. icons/nav/home/outline/24.svg
icons/nav/arrow-back-rtl/outline/24.svg gêmeo RTL espelhado
style-brief.md template preenchido com o bloco icon-spec
preview.html gerado
dist/<pacote>-v<versão>.zip gerado
O nome canônico do ícone é o caminho sem .svg, então nav/home/outline/24. Esse é também o nome do componente Figma, o que mantém código, design e arquivos em sincronia.
Conversando com o usuário
Muitas pessoas que usam isso são designers, não desenvolvedores. Diga "espessura da linha" junto com "traçado", "arredondamento dos cantos" junto com "raio", e explique qualquer saída de script em uma frase em vez de colar o texto bruto. Mantenha cada interação curta: algumas perguntas, uma decisão ou uma coisa para revisar.