--- title: "Sleek: o agente de código que desenha telas de app via API" description: "A skill design-mobile-apps instala no agente de código o fluxo completo do Sleek — criar projeto, descrever a tela em linguagem natural e receber screens renderizados com export para Figma, HTML ou React." canonical: "https://ronanrodrigo.dev/notes/sleek-design-mobile-apps" markdown: "https://ronanrodrigo.dev/notes/sleek-design-mobile-apps.md" last-updated: "2026-09-24" --- ## design-mobile-apps: a skill que ensina o agente a desenhar no Sleek A skill publicada como design-mobile-apps transforma o agente de código em cliente da API do Sleek: ele cria projetos, descreve em linguagem natural o que deve ser construído e recebe de volta as telas renderizadas. O texto da skill é direto sobre o contrato — base em `https://sleek.design`, todos os pedidos a `/api/v1/*` com `Authorization: Bearer $SLEEK_API_KEY`, conteúdo em JSON, CORS habilitado e o spec OpenAPI como fonte para qualquer detalhe não coberto. Traz também a armadilha de shell que estraga a integração na primeira tentativa: salvar o corpo da resposta em arquivo e ler o arquivo, nunca passar o JSON por `echo`, porque o zsh expande os `\n` escapados dentro das strings e invalida o JSON. As auditorias de segurança da página (Socket, Snyk e Agent Trust Hub) passam. Instalação: `npx skills add https://github.com/designed-by-ai/skills --skill design-mobile-apps`. [Acesse a fonte original](https://www.skills.sh/designed-by-ai/skills/design-mobile-apps) ## Sleek: da ideia às telas de app em minutos O produto por trás da skill é um designer de app mobile por IA: descreva a ideia ou anexe uma imagem de referência e ele gera telas de iOS e Android com layout, componentes, texto e estilo, tudo editável visualmente depois. A exportação é o ponto prático: um clique para o Figma, com as telas chegando como camadas nativas e editáveis, sem plugin, ou exportação para HTML e React com Tailwind CSS. O plano gratuito inclui um projeto e uso limitado da IA sem cartão de crédito, e existe uma biblioteca de referências escolhidas a dedo para clonar como ponto de partida. A página afirma que o produto é feito especificamente para mobile — convenções do iOS Human Interface Guidelines, Material Design, navegação nativa, dimensões reais de dispositivo e tamanho de área de toque — em vez de um gerador genérico de UI que também cobre celular. [Acesse a fonte original](https://sleek.design/) ## Repositório designed-by-ai/skills O repositório com a skill, sob licença MIT, é explícito sobre o que é preciso para ela funcionar: uma conta Sleek e uma chave de API guardada na variável `SLEEK_API_KEY`, criada em `sleek.design/agents/setup` ou gerenciada no painel de chaves. Contas gratuitas só têm os créditos de teste, suficientes para cerca de uma execução de design; uso contínuo é parte do plano Pro, que inclui a API REST e a skill oficial. Detalhe que costuma passar batido: o `npx skills add` instala a skill em `.agents/skills/` do diretório de trabalho — se o agente não descobrir skills ali, aponte o `SKILL.md` instalado explicitamente. [Acesse a fonte original](https://github.com/designed-by-ai/skills) ## A API REST e o spec OpenAPI A documentação descreve o ciclo completo de um design por API: `POST /projects` cria o projeto, `POST /projects/{id}/chat/messages` recebe o pedido do usuário e dispara a execução de IA, e `GET /projects/{id}/chat/runs/{runId}` é consultado até a conclusão. A partir daí, `GET /projects/{id}/components` devolve os componentes gerados em HTML, `POST /screenshots` renderiza as telas em imagem e `GET /references` abre a biblioteca de referências em destaque. Há ainda `share-cards` e o fluxo de dispositivo (`device/start` e `device/poll`). O spec está em `sleek.design/api/v1/spec.json`, com versão navegável em `sleek.design/api/v1/docs` — o lugar para conferir qualquer detalhe de contrato antes de escrever a integração. [Acesse a fonte original](https://sleek.design/api/v1/docs) ## Instruções para agentes: device flow, um pedido só e o link ao vivo A página de onboarding para agentes dá o roteiro que evita as duas falhas mais comuns de quem integra um agente a uma ferramenta paga. A primeira é credencial: o caminho preferido é o device flow, em que o agente chama `POST /device/start`, mostra ao usuário a URL de verificação e o código, e consulta `POST /device/poll` no intervalo indicado até a aprovação devolver a chave uma única vez — códigos expiram em 15 minutos. A segunda é a forma do pedido: mandar a solicitação do usuário como uma única mensagem de chat, sem decompor em telas, porque o Sleek planeja melhor com a intenção inteira, sempre com o campo `source` identificando o agente. O roteiro pede ainda compartilhar `sleek.design/project/{id}` já no começo, para o usuário acompanhar o design ao vivo, e renderizar screenshots de todas as telas criadas ou alteradas ao final. A página de agentes traz prompts prontos para Claude Code, Cursor, Codex e OpenClaw, além de um servidor MCP para Claude.ai e ChatGPT. [Acesse a fonte original](https://sleek.design/agents.md)