Stitch Design skill

Você descreve a tela do seu jeito e o Claude pede ao Stitch uma versão caprichada, coerente com o resto do projeto, e baixa o HTML e a imagem.

por Google LabsPublicada pela própria empresa

instalações: 25,1 mil
estrelas no GitHub: 8.594
No skills.sh desde: março de 2026
Licença: Apache-2.0

Atualizada no GitHub em 17 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Google Labs
stitch-design
Você descreve a tela do seu jeito e o Claude pede ao Stitch uma versão caprichada, coerente com o resto do projeto, e baixa o HTML e a imagem.Oficial25,1 mil instalações, grátis

O que ela faz

Trabalha com o Stitch, ferramenta de design de telas do Google, pelo servidor MCP dele. Antes de gerar qualquer coisa, reescreve o seu pedido em termos de design: clima da página, plataforma, paleta com código de cor, cantos, sombra e a estrutura de cabeçalho, destaque, conteúdo e rodapé.

Tem três caminhos: criar uma tela a partir de texto, editar telas que já existem e montar o .stitch/DESIGN.md, um documento com cores, fontes e estilo do projeto que vira a referência das próximas telas. Se o DESIGN.md existe, todo prompt novo usa o que está nele.

Depois de cada geração, mostra a descrição e as sugestões que o Stitch devolveu e baixa o HTML e a captura da tela pra pasta .stitch/designs. Pra ajuste pontual, prefere editar a tela em vez de gerar tudo de novo. O que sai é o design; virar código do seu site é outra etapa.

Nas palavras de quem fez

Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and…

Google Labs, no SKILL.md

Quando usar

Desenhar a página de vendas ou o app antes de programar
Fazer várias telas que precisam parecer do mesmo produto
Ajustar uma tela já gerada sem perder o resto
Documentar o visual de um projeto do Stitch pra outras pessoas ou agentes seguirem

Depois de instalar, é só pedir assim

Desenha uma landing page pra minha mentoria, clima sério e premium, versão pra celular
Cria o DESIGN.md do meu projeto no Stitch a partir das telas que já tenho
Na tela de preços, deixa o fundo branco e o botão de compra maior

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykAlerta

Perguntas

Como instalar a Stitch Design no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Stitch Design, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Precisa de conta ou chave?

Precisa do servidor MCP do Stitch configurado no seu agente e de um projeto no Stitch. Sem o MCP, a skill não tem como gerar tela.

Ainda dá pra instalar?

O Google dividiu essa skill em outras menores, como generate-design, manage-design-system e extract-design-md, no plugin stitch-design do mesmo repositório. Se o comando de instalação não achar a stitch-design, instale essas no lugar.

Roda no Codex e no Antigravity?

Sim, desde que o agente esteja conectado ao MCP do Stitch. As instruções são texto comum.

Levar essa skill

1x stitch-designR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/google-labs-code/stitch-skills

Aprenda a usar

O que é o Google Antigravity (IDE) e como usar
O Google Antigravity é a IA do Google que trabalha direto na pasta do seu computador. O que é, os quatro jeitos de usar, se é grátis e se roda o MazyOS.