Illustration Stylepor Owl-Listener

Illustration Style Skill.

Dê às ilustrações encomendadas ou recorrentes uma linguagem visual compartilhada e uma função clara na interface.

UX
Orientação de design

Revisão da fonte · Illustration StyleSKILL.md

Tarefa UX Produz • Um guia de linguagem visual para ilustração • Regras de paleta, personagens e elementos reutilizáveis • Orientações de aplicação por contexto e de acessibilidade Antes de começar Um agente capaz de analisar referências visuais, cores do produto e as telas e tamanhos em que as ilustrações vão aparecer.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Illustration Style: Defina uma linguagem visual

Define o estilo visual, a paleta, os personagens e o uso de uma família de ilustrações nas telas do produto.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Illustration Style especifica como uma família de ilustrações deve ser e onde ela se encaixa. Aborda forma geométrica versus orgânica, tratamento plano versus dimensional, nível de detalhe, abstração e estilo de linha.

A fonte conecta essa linguagem visual às cores do produto, a regras opcionais para personagens e a contextos como imagem principal, estados vazios, onboarding e erros. Também pede elementos reutilizáveis e orientações de criação. É uma especificação de direção de arte, não um modelo de geração de imagens nem um pacote de ativos prontos.

Entregas esperadas

Um guia de linguagem visual para ilustração
Regras de paleta, personagens e elementos reutilizáveis
Orientações de aplicação por contexto e de acessibilidade

Ver o briefing de exemplo

Do briefing à revisão

01
Defina os eixos de estilo
Escolha forma, dimensão, detalhe, abstração e tratamento de linha com referências concretas.
02
Estabeleça as regras da família
Limite a paleta, defina sombras ou gradientes e inclua orientações de personagens apenas onde forem relevantes.
03
Mapeie as aplicações
Explique como ilustrações de destaque, pontuais, de estado vazio e de outros tipos diferem em escala e finalidade.

02 Quando usar

Quando usar

Use antes de encomendar uma série ou quando as ilustrações existentes do produto precisarem de uma direção visual consistente.

Boa indicação

Encomendar uma sérieDê aos colaboradores restrições suficientes para produzirem artes relacionadas.
Imagens de produto inconsistentesAlinhe famílias de ilustrações sem forçar todos os contextos a uma composição idêntica.

Limites a verificar

Não é um gerador de imagensO resultado documentado é uma orientação; a arte final exige um processo de criação separado.
Não é um padrão de íconesA iconografia simbólica pequena da interface tem uma especificação de sistema própria.

Traga estes insumos

Referências de marcaForneça as cores do produto e exemplos visuais aprovados.
Inventário de aplicaçõesListe as superfícies e os tamanhos em que a arte aparece.
Necessidades de conteúdoIdentifique conceitos, personagens e requisitos de representação.

03 Decisões importantes

Decisões importantes

Consistência com variedade
Uma linguagem compartilhada pode sustentar vários tipos de ilustração sem repetir a mesma cena.
Posicionamento com propósito
As regras de uso explicam quando a ilustração ajuda e quando se torna decoração desnecessária.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com o seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo-fonte upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md

Forneça referências visuais aprovadas e os locais onde as ilustrações vão aparecer. A skill produz orientação de direção de arte, não imagens finalizadas.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use illustration-style para escrever um guia para nossas artes de onboarding e de estados vazios. Defina regras de forma, dimensão, detalhe, linha e paleta; inclua variantes para modo escuro e orientações de representação onde houver personagens. Especifique verificações de tamanho de exibição e alternativas em texto, sem afirmar que ativos foram gerados.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

As decisões de estilo são concretas o bastante para outro ilustrador seguir.
Cada aplicação tem orientação de tamanho e finalidade.
Informações essenciais não dependem apenas de imagens.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos originais podem mudar.

Autor da fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/illustration-style/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Define o estilo visual, a paleta, os personagens e o uso de uma família de ilustrações nas telas do produto.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela gera ilustrações finalizadas?

Não. Ela produz um guia de estilo; ilustrações finalizadas exigem um processo de criação separado.

Todo estilo precisa usar personagens?

Não. As regras de personagens são explicitamente condicionais.

A arte de destaque e a de estado vazio devem ser idênticas?

Podem compartilhar uma linguagem visual, mas seguindo requisitos diferentes de escala e comunicação.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha briefing, material de origem e trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de incluí-la no seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design