mobile-onboarding
Ajuda seu agente a criar um fluxo de integração para aplicativos móveis. Ele mostra várias telas em sequência, como splash, proposta de valor e login. É útil para projetar a primeira experiência do usuário em um app.
O que ela faz
Cria um fluxo de boas-vindas para aplicativos de celular, mostrando três telas em sequência dentro de molduras de telefone. Ele inclui elementos como barra de status, botões e textos explicativos.
Quando usar
- ✓Quando você precisa mostrar como um novo app funciona.
- ✓Para criar uma página de cadastro de celular.
- ✓Ao descrever o processo de entrada em um aplicativo.
Exemplo do que pedir para a IA
“Crie um fluxo de boas-vindas para um aplicativo de meditação.”
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 lê as instruções, identifica o aplicativo e o público, e monta três telas de celular lado a lado. Cada tela tem uma barra de status, imagem, texto, indicadores de progresso e um botão principal.
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 mobile-onboardingOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/mobile-onboarding/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.
Habilidade de Onboarding Mobile
Produza um fluxo de onboarding mobile de três telas em uma única página HTML.
Fluxo de Trabalho
- Leia o arquivo DESIGN.md.
- Identifique o aplicativo + público-alvo.
- Layout: três molduras de telefone lado a lado. Cada telefone:
- Barra de status (hora, bateria, sinal).
- Arte principal ou ícone.
- Título + parágrafo de apoio.
- Paginação de 3 pontos.
- CTA principal (botão em forma de pílula em largura total).
- Ação "Pular" ou alternativa no canto superior direito.
- O último telefone é a tela de login / continuar com opções.
- Tipografia forte, gradientes suaves, contraste acessível.
Contrato de Saída
<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>
Perguntas frequentes
O que são as 'três telas'?
São as telas iniciais que um usuário vê ao abrir um aplicativo pela primeira vez, como uma introdução, explicação de benefícios e a tela de login/cadastro.
O que é 'barra de status'?
É aquela barra no topo do celular que mostra a hora, a bateria e o sinal da operadora.
O que é 'CTA'?
É a sigla para 'Call To Action', que significa 'Chamada para Ação'. É o botão principal que incentiva o usuário a fazer algo, como 'Começar' ou 'Entrar'.
Detalhes
Descrição original do autor
A multi-screen mobile onboarding flow rendered as three phone frames side by side — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. Use when the brief mentions "mobile onboarding", "iOS onboarding", "phone signup", or "移动端引导".
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #483
- 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