Install
npx skills add google-labs-code/stitch-skillsPara quem
Se já usa Google Stitch para interfaces e quer que um agent de programação, segundo o padrão aberto Agent Skills, gere ecrãs novos, edite os existentes ou produza variantes de design, este conjunto encaixa. É um pacote de habilidades e plugins para Google Stitch. A página explicativa é
https://github.com/google-labs-code/stitch-skills
O produto em si é
https://stitch.withgoogle.com/
O perfil mais adequado já registou o Stitch MCP, tem variáveis de ambiente e credenciais prontas segundo as notas oficiais, e aceita só o comando de instalação de habilidade abaixo. Estas habilidades exigem que o Stitch MCP esteja configurado e a correr no ambiente do agent; sem MCP não há backend de design para chamar. Notas de instalação:
https://stitch.withgoogle.com/docs/mcp/setup/
A primeira passagem deve ser uma geração ou variante pequena e verificável, não reescrever de imediato um sistema de design de produção. O texto oficial nomeia vários ambientes de programação; um indica instalação manual, mas sem esses passos. Não leia o roster nomeado como os únicos ambientes usáveis, e não invente instaladores não escritos. O pacote segue o padrão aberto Agent Skills. Os nomes aparecem como stitch::generate-design; não complete outros nomes stitch:: que não estejam escritos. Se ainda não tem conta Stitch ou credenciais MCP, vá primeiro aos documentos Setup, não execute npx primeiro.
Primeira tentativa em 3 minutos
As habilidades só usam este comando oficial opcional:
npx skills add google-labs-code/stitch-skills
Não procure outro mercado, plugin nem um segundo instalador de habilidade. Depois de instalar, reinicie o agent e confirme que a habilidade aparece.
Pré-requisito: o Stitch MCP está registado segundo os documentos Setup acima, as variáveis de ambiente e credenciais estão definidas, e o processo corre. Se o MCP não estiver pronto, pare na verificação de configuração; não chame gerar. Esta máquina também deve conseguir executar npx.
Num agent com a habilidade instalada e o MCP a correr, faça uma tarefa de baixo risco: chame stitch::generate-design, descreva um ecrã de teste num texto curto (por exemplo «uma página de estado vazio só com título e botão principal») e primeiro faça repetir o prompt que irá para o Stitch, se vai editar um ecrã existente e se vai escrever ficheiros locais. Depois de confirmar que só gerará um rascunho novo e não sobrescreverá um formal, permita continuar.
Sinal de sucesso: no Stitch aparece um ecrã novo correspondente ou um resultado de design que se pode abrir, não um HTML falso alheio ao Stitch. Se a habilidade disser que o backend está indisponível, volte a se o MCP corre e se as credenciais seguem os documentos oficiais. Não mude o comando de instalação para tentar fontes não documentadas. Se pedir marcadores de segredo que não aparecem nos documentos, pare. Use só os nomes de variáveis de ambiente escritos na página Setup.
Casos de uso
Caso 1: gerar um ecrã novo a partir de texto ou de uma imagem. A nota de stitch::generate-design é gerar ecrãs novos a partir de texto ou imagens. Prepare uma descrição de interface, ou uma imagem de referência que tenha o direito de usar, e deixe a habilidade tirar um primeiro rascunho no Stitch. Pare se o caminho da imagem ou o texto não estiverem prontos. A geração cai do lado do Stitch e é uma chamada de saída; confirme o prompt antes de executar. O texto oficial não dá modelos de prompt nem limites de tamanho de imagem. Sem esses detalhes, mantenha a descrição curta e não invente parâmetros.
Caso 2: editar um ecrã existente ou tirar variantes. A mesma habilidade também diz que pode editar ecrãs existentes e criar variantes de design. Indique um rascunho existente no Stitch e peça só uma ou duas variantes; não sobrescreva em lote. O texto oficial não dá teto de variantes nem botão de reverter, por isso primeiro faça dizer que ecrã vai alterar e se vai guardar uma variante à parte; execute só depois de confirmar. É outra operação da mesma habilidade do caso 1, não outra instalação. Se o agent propor um comando de plugin não documentado para o mesmo trabalho, recuse e continue só com o nome de habilidade instalado.
Limites de uso
Sem um Stitch MCP a correr, este conjunto não serve como habilidade de desenho comum. Primeiro é preciso terminar o registo do servidor mais variáveis de ambiente e credenciais; o texto oficial não dá contorno se faltar alguma peça. Também não trate o comando de instalação de habilidade como comando de instalação de MCP.
A instalação oficial de habilidade é só npx skills add google-labs-code/stitch-skills. A página também tem uma forma npx plugins add com --target para um anfitrião dado; isso é um pouso de plugin, não a entrada de instalação de habilidade deste guia. Em ambientes cujo roster diz «instalação manual», o texto oficial não dá passos copiáveis; não invente copiar diretórios nem ordens de mercado.
generate-design cria ou altera ecrãs no Stitch e é uma chamada externa com efeitos secundários. Confira o prompt, o ecrã-alvo e se vai guardar à parte antes de executar. O texto oficial não autoriza enviar o resultado gerado direto para uma app de produção, nem enumera nomes de habilidade fora da tabela; não adivinhe capacidades não escritas. Ao gerar a partir de uma imagem, use só uma referência que tenha o direito de usar. Antes de editar um ecrã existente, confirme no Stitch que ainda é rascunho, para não sobrescrever uma interface já entregue.