stitch::generate-designpor Google Labs

Stitch Generate Design Skill.

Uma skill para Claude Code e Codex focada em design de UI: gera, edita e cria variações de telas no Stitch a partir de texto ou imagens de referência.

Web & UI
Arquivo de design

Baixar OpenDesign Ver guia de uso

google-labs-code/stitch-skills · plugins/stitch-design/skills/generate-design/SKILL.mdSKILL.md

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

Front matter e títulos de seção lidos do arquivo upstream em 14/09/2026 · 10.959 caracteres no total

01 O que faz

O Que a Skill stitch::generate-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Essa skill conduz o Stitch MCP por meio de quatro fluxos: gerar uma nova tela a partir de texto, recriar uma imagem ou mockup, editar uma tela existente e gerar variantes. Antes de qualquer chamada de geração ou edição, ela executa um pipeline de aprimoramento de prompt que resolve o projeto e o design system, substitui termos vagos por terminologia de UI/UX vinda de seus mapeamentos de design, e formata o prompt em torno de layout, conteúdo e estrutura, usando um template com seções PLATFORM e PAGE STRUCTURE.

O estilo visual permanece no nível do projeto, então os prompts de geração não devem trazer códigos hex, fontes ou valores de arredondamento. O feedback da IA é exibido após cada chamada e os assets são baixados para .stitch/designs.

O que ele produz

O HTML e a captura de tela da tela gerada, baixados no diretório .stitch/designs.
A descrição textual e as sugestões da IA retornadas em outputComponents, exibidas ao usuário.
Telas de variantes para a direção escolhida, em lotes de um a cinco.

Veja o exemplo de prompt ↗

Como funciona

01
Aprimore o Prompt Antes de Qualquer Outra Coisa
O pipeline é obrigatório, não opcional: o agente reescreve a solicitação do usuário antes de poder chamar uma ferramenta de geração ou edição do Stitch.
02
Verifique o Que o Projeto Já Estiliza
Se o projeto já possui um design system, cores, fontes e arredondamento são aplicados no nível do projeto, então o prompt aprimorado deve deixar o estilo visual totalmente de fora.
03
Formate o Prompt como Plataforma Mais Seções de Página
Novas telas seguem um template que informa primeiro o propósito geral, depois PLATFORM, e então um PAGE STRUCTURE numerado indo do Header ao Footer.
04
Escolha Um dos Quatro Fluxos
A solicitação é direcionada para Generate from Text, Generate from Image, Edit ou Generate Variants antes que qualquer ferramenta seja chamada.

02 Encontre o ideal para você

Quando Usar a Skill stitch::generate-design

Use a skill stitch::generate-design no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Iniciando uma tela totalmente nova a partir de uma descrição escrita da página.
Recriando algo que você já tem como imagem, captura de tela ou mockup.
Fazer uma alteração pontual em uma tela que já existe no projeto.
Explorar layouts, esquemas de cores ou textos alternativos para uma tela que você já tem.

Conheça os Limites

Não gera telas antes de existir um design system: se o projeto não tiver nenhum, o trabalho é primeiro passado para a skill manage-design-system.
O upload de uma imagem não é feito aqui; a imagem primeiro se torna conteúdo de tela por meio da skill de upload, e só então é refinada com edições.

O Que Fornecer

EntradaÉ isso que o pipeline de enriquecimento reescreve em um prompt Stitch estruturado.
O projeto de destinoO agente busca o projeto pelo id e só cria um novo quando nenhum projeto adequado existe.
A tela para edições ou variantesEdições e variantes precisam tanto do projectId quanto do screenId, encontrados ao listar ou buscar telas.

03 Dentro da skill

Regras que a Skill stitch::generate-design Dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Sem Vazamento de Tema nos Prompts de Geração
Nunca coloque códigos hex, nomes de fontes ou papéis de cor em um prompt de geração; o design system cuida de toda a estilização visual e dos conflitos de duplicação.
Códigos Hex Somente ao Editar
Valores hex exatos são permitidos para correspondência precisa de cores em prompts de edição, que é o único lugar onde a proibição do prompt de geração não se aplica.
Sempre Exibir outputComponents
Depois de qualquer chamada à ferramenta Stitch, o agente deve mostrar ao usuário a Text Description e as Suggestions retornadas, e não apenas a tela resultante.
Editar em Vez de Regenerar
A regeneração completa é reservada para quando o layout fundamental está errado; todo o resto deve passar por edições pontuais.
Sobrescrever as Cópias Locais Após uma Edição
As urls atualizadas de HTML e screenshot são baixadas novamente sobre os arquivos anteriores, para que os arquivos locais reflitam as edições mais recentes.
Manter o .stitch/metadata.json Sincronizado
Depois de baixar os assets, o metadata é atualizado com os títulos de tela alterados ou os novos IDs de tela; o arquivo rastreia todas as telas, tipos de dispositivo e informações do design system.

04 Coloque em prática

Instale stitch::generate-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione stitch::generate-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::generate-design

Forma genérica da CLI skills para plugins/stitch-design/skills/generate-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Observe a tela de saída e confirme que as alterações solicitadas realmente foram aplicadas.
Se o resultado não for exatamente o esperado, continue no fluxo de Edição em vez de regenerar; repita com um novo prompt específico quando for necessário mais polimento.
Antes de gerar, verifique se já existe um design system para o projeto.

No OpenDesign importe stitch::generate-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Arquivo da skill: plugins/stitch-design/skills/generate-design/SKILL.md Checksum do conteúdo registrado na verificação; commit 0337446
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 8.304 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório google-labs-code/stitch-skills, que contém 12 skills neste catálogo. Não é uma avaliação ou contagem de uso do stitch::generate-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

🎨 Pipeline de Aprimoramento de PromptAnalisa o contexto, substitui termos vagos, estrutura o prompt, expõe insights de IA
EtapasSeleção de modo mais fluxos de texto, imagem, edição e variantes com suas chamadas de ferramenta
💡 DicasSeja estrutural, conteúdo primeiro, polimento iterativo, sem vazamento de tema, edições focadas
📚 ReferênciasMapeamentos de design, palavras-chave de prompting e um exemplo de prompt aprimorado antes/depois

A Descrição da Própria Skill

"- Gera novas telas a partir de prompts de texto ou imagens, edita telas existentes com prompts e tokens do sistema de design, e gera variantes de design usando Stitch MCP. Inclui pipeline de aprimoramento de prompt, mapeamentos de design, terminologia profissional de UI/UX, design tokens e capacidades de sistema de temas."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 10.959 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill stitch::generate-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso configurar nomes de ferramentas antes de funcionar?

A skill chama ferramentas MCP do Stitch como list_projects, generate_screen_from_text e edit_screens, e sua própria nota diz para seguir seu system prompt sobre como os prefixos de ferramentas MCP são tratados. Portanto, a convenção de prefixo vem da sua configuração, não da skill.

Em que as variantes diferem das edições?

Edições alteram a tela que você já tem; variantes exploram alternativas em torno dela por meio da ferramenta generate_variants. Você pode direcionar a abordagem com creativeRange — REFINE para sutil, EXPLORE para equilibrado, REIMAGINE para radical — e restringir os aspectos ou deixá-los vazios para todos.

Posso partir de uma captura de tela ou mockup em vez de uma descrição?

Sim. A imagem é entregue à skill upload-to-stitch para inseri-la no projeto, após o que o agente encontra o novo screenId e refina o design com um prompt de edição descrevendo o que ajustar ou recriar.

Stitch Generate Design

Execute stitch::generate-design em uma Tarefa Real de Design de Interface.

Baixe o OpenDesign, importe stitch::generate-design a partir do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills