Pular para o conteúdo
Skillpedia
Interfaces (UI/UX)101 mil · #732

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

https://github.com/nexu-io/open-design/blob/main/skills/imagegen-frontend-mobile/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/skills/imagegen-frontend-mobile/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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-mobile

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/imagegen-frontend-mobile/SKILL.md -o SKILL.md
Conteú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

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas