Configuração: um comando, um servidor MCP
Três guias, todas baseadas na API do Art Institute of Chicago. A galeria navega e pesquisa as obras de arte do museu e abre uma tela detalhada em toda a largura. Os artistas exploram os artistas e suas obras. Favoritos permanece um espaço reservado vazio durante todo o tutorial e se torna seu exercício no final.
Pré-requisitos: Claude Code, JDK 21+, python3 no PATH (o passo de design usa-o para extração de tokens). Em seguida, instale o modelo:
curl -fsSL https://github.com/ThisIsSadeghi/KMPilot/releases/download/v0.1.3/install.sh | bashO instalador solicita dois valores: o nome do aplicativo e o prefixo de pacote. Eu respondi Loupe e com.yourname.loupe,, esses são apenas meus valores, use os seus próprios e cada comando abaixo funcionará da mesma maneira.
cd Loupe && claudeVocê recebe um esqueleto completo de Kotlin Multiplatform: conexões Gradle, UI compartilhada via Compose Multiplatform, um módulo design-system, os sete comandos, as hooks e as definições do agente. É uma cópia e renomeação, então termina em segundos.
Este tutorial está fixado na versão v0.1.3 para que o que você lê é o que você executa; a wiki é a versão em constante evolução. O KMPilot escreve o código; para construir e executar o que ele escreve, você usa as ferramentas padrão de Kotlin Multiplatform, Android Studio para o alvo Android e um Mac com Xcode para iOS.
Uma única configuração inicial: /design-ui dirige o Google Stitch, a ferramenta de design AI do Google, através do seu servidor MCP. Obtenha uma chave API em stitch.withgoogle.com/settings (faça login, encontre a seção de chaves API, clique em Criar chave API), então registre o servidor no escopo do usuário para que todos os projetos possam vê-lo:
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
--header "X-Goog-Api-Key: YOUR_API_KEY" -s userclaude mcp list # → stitch: … ✔ ConectadoDois registros de campo. A chave deve vir da própria página de configurações do Stitch: chaves criadas em aistudio.google.com parecem idênticas, mas o API do Stitch as rejeita. E o servidor do Stitch tem dias difíceis; se claude mcp list mostra erros de conexão ou esquema, provavelmente é problema da sua parte e não da configuração. Tente novamente mais tarde antes de debugar a sua configuração.
A pipeline: sete comandos, sem oitavo passo
Cada comando recebe uma seção abaixo, mostrando a funcionalidade real que ele construiu e o tempo real. Não há um oitavo passo onde você conserta tudo manualmente; um hook impede edições diretas ao código da funcionalidade, então mudanças só chegam através da pipeline.
A pipeline roda duas vezes e em uma ordem diferente cada vez. No gallery, o design vem primeiro: /design-ui, então /create-feature constrói contra esse design. No artists, o código vem primeiro e o design é acoplado depois. Duas ordens, mesmo trilhos, e a segunda rodada mostra o que os trilhos realmente economizam.
Uma coisa entre cada comando: /clear
Cada comando lhe diz para rodar /clear antes do próximo. KMPilot é ciente de continuar: sua memória vive no disco, não na janela de contexto, então você limpa toda a conversa entre etapas e perde nada.