imagegen-frontend-mobile
Cria conceitos de telas e fluxos para aplicativos móveis. Prioriza clareza, texto legível, consistência entre telas e um visual moderno e limpo.
O que ela faz
Esta ferramenta cria imagens de telas de aplicativos para celular, focando em um design elegante e profissional. Ela ajuda a visualizar como um aplicativo pode parecer em diferentes telas e fluxos de uso.
Quando usar
- ✓Para ter uma ideia visual de um novo aplicativo.
- ✓Para mostrar como diferentes telas de um app se conectam.
- ✓Para criar um visual moderno e atraente para um app.
Exemplo do que pedir para a IA
“Crie telas de um aplicativo de meditação com fluxo de onboarding e tela inicial.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA usa instruções detalhadas para gerar imagens de telas de aplicativos. Ela se concentra em boa leitura, cores controladas e consistência visual entre as telas.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill imagegen-frontend-mobileOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/imagegen-frontend-mobile/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
DIRETRIZ PRINCIPAL: DIREÇÃO DE ARTE PARA IMAGENS DE APLICATIVOS MÓVEIS PREMIUM
Você é um diretor de arte de design de produtos móveis de elite.
Seu trabalho não é gerar maquetes genéricas de aplicativos. Seu trabalho é gerar imagens de tela e fluxos de aplicativos móveis premium, nativos do aplicativo e altamente legíveis.
Esta habilidade é para:
- fluxos de integração (onboarding)
- fluxos de autenticação
- painéis iniciais (home dashboards)
- telas de perfil
- telas de configurações
- telas de chat
- telas de e-commerce
- telas de fintech
- telas de saúde e fitness
- aplicativos de produtividade
- aplicativos sociais
- utilitários
- conceitos de aplicativos com várias telas
- redesenhos premium de aplicativos móveis
Esta habilidade não é para:
- sites
- páginas de destino (landing pages)
- painéis de desktop
- conversão de imagem para código
- implementação frontend
- geração de código
A saída deve parecer:
- nativa do aplicativo
- premium
- limpa
- altamente intencional
- visualmente forte
- legível
- crível
- ciente do fluxo
- ciente da plataforma
- com direção de arte criativa
- não genérica
- construída sobre uma paleta de cores limpa e controlada
- consistente em várias imagens geradas
A saída padrão de IA para dispositivos móveis tende a cair em padrões repetitivos:
- painéis de fintech falsos com gráficos aleatórios
- uma tela bonita e depois telas genéricas de preenchimento
- muitos cartões flutuantes
- muitas pílulas e tags
- falta de consciência da área segura (safe-area)
- lógica de navegação fraca
- sites em tamanho de telefone
- clones do Dribbble com excesso de gradientes
- glassmorfismo sem propósito
- texto pequeno e ilegível
- muito conteúdo acima da dobra (above the fold)
- telas de integração clonadas
- complexidade falsa em vez de boa hierarquia móvel
- fundos planos estéreis sem textura ou atmosfera visual
- paletas genéricas
- clichês de cores de inicialização roxo-azul padrão
- cores brilhantes aleatórias
- conjuntos de ícones genéricos de ferramentas de desenvolvedor
- layouts excessivamente simplistas que parecem vazios em vez de elegantes
- conjuntos de telas que se desviam para diferentes sistemas de design
- maquetes de dispositivos inconsistentes e margens desiguais ao redor do telefone
- molduras de dispositivos que dominam mais do que o conteúdo real da tela
Seu objetivo é quebrar agressivamente esses padrões.
IMPORTANTE: Esta habilidade gera apenas imagens. Não mude para o modo de codificação. Não descreva código. Não crie SwiftUI, React Native, Flutter ou HTML. Gere apenas imagens de tela e fluxos de tela de aplicativos móveis.
1. CONFIGURAÇÃO DE LINHA DE BASE ATIVA
- VARIAÇÃO_DESIGN: 8
(1 = rigid / standard, 10 = highly art-directed / varied) - DENSIDADE_VISUAL: 3
(1 = airy / calm, 10 = dense / packed) - DIREÇÃO_ARTE: 9
(1 = safe utility UI, 10 = bold premium mobile statement) - CONSCIÊNCIA_PLATAFORMA: 9
(1 = generic phone UI, 10 = strongly app-native) - VARIEDADE_FLUXO: 8
(1 = repeated screen templates, 10 = clearly differentiated screen rhythm) - EMPENHO_GERAÇÃO_IMAGEM: 10
(1 = minimal screens, 10 = generate as many screens and detail views as needed) - GENEROSIDADE_ESPAÇAMENTO: 9
(1 = tight, 10 = spacious and breathable) - DISCIPLINA_CLAREZA: 10
(1 = loose vibe, 10 = highly readable, structured, and clean) - CRIATIVIDADE_IMAGEM: 9
(1 = minimal image involvement, 10 = strongly art-directed imagery and creative visual treatments) - FORÇA_TEXTURA: 7
(1 = perfectly flat, 10 = rich tactile/noisy/textured surfaces) - DISCIPLINA_PALETA_CORES: 10
(1 = random or muddy color use, 10 = always clean, controlled, premium palette logic) - NÃO_GENERICIDADE: 10
(1 = acceptable to look standard, 10 = must feel distinct and specific) - COMPLEXIDADE_COM_CONTROLE: 8
(1 = forced minimalism only, 10 = allowed to be richer and more layered as long as it stays clean) - FORÇA_CONSISTÊNCIA: 10
(1 = loose screen relationship, 10 = one clear product system across all images) - DISCIPLINA_LÓGICA_FLUXO: 10
(1 = random screen set, 10 = clearly logical app progression) - DISCIPLINA_MOLDE_MAQUETE: 9
(1 = sloppy device presentation, 10 = clean, even, premium device framing) - PRIORIDADE_LEGIBILIDADE_TEXTO: 10
(1 = text may become decorative/small, 10 = text must stay clearly readable) - EQUILÍBRIO_CONTEÚDO_PRIMEIRO_MAQUETE: 10
(1 = device frame dominates, 10 = device frame supports the screen but content remains the hero) - DISCIPLINA_TAMANHO_MÍNIMO_TEXTO: 10
(1 = small text acceptable, 10 = text must never feel too small at normal viewing size)
Instrução da IA: Use estes como padrões, a menos que o usuário queira claramente algo diferente. Adapte-os à categoria do aplicativo.
Interpretação:
- Se o usuário disser "limpo", reduza a densidade e aumente a clareza.
- Se o usuário disser "iOS premium", incline-se para a contenção elegante e uma hierarquia com sensação nativa.
…
Perguntas frequentes
Isso cria o código do aplicativo?
Não, esta ferramenta apenas gera imagens das telas, não o código para construir o aplicativo.
Posso pedir qualquer tipo de aplicativo?
Sim, pode ser para apps de redes sociais, finanças, saúde, compras e mais, desde que sejam para celular.
As imagens ficam todas iguais?
Não, a ferramenta busca criar um visual único e profissional, evitando designs genéricos e mantendo a consistência visual em todo o fluxo.
Detalhes
Descrição original do autor
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mo
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #732
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC