stitch::manage-design-systempor Google Labs

Stitch Manage Design System Skill.

Uma skill para Claude Code e Codex focada em trabalho de marca e sistema de design: cria, atualiza e aplica sistemas de design no Stitch através de ferramentas MCP.

Marca e Sistemas de Design
Sistema de design

Baixar OpenDesign Ver guia de uso

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

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

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

01 O que faz

O que o Skill stitch::manage-design-system 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

Gerencia o design system que atua como fonte de verdade do projeto no Stitch, usando ferramentas MCP. Ele recupera metadados do projeto e ativos de tela (list_projects, list_screens, get_screen, read_url_content), sintetiza tokens a partir de telas existentes via o skill design-md ou a partir de uma descrição simples, grava .stitch/DESIGN.md, depois envia o markdown e chama create_design_system_from_design_md.

Um checkpoint obrigatório exige a aprovação do usuário sobre o nome de exibição, as cores, as fontes e o arredondamento antes de qualquer envio. Após a criação, apply_design_system aplica os tokens às telas existentes usando apenas ids de instância de tela, e .stitch/metadata.json registra o projeto, as telas e um resumo do design system.

O que ele produz

Um arquivo de design DESIGN.md gerado para o projeto.
Um arquivo .stitch/metadata.json que rastreia o id do projeto, o título, todas as telas conhecidas e um resumo do design system.
Tokens de design em nível de projeto mantidos dentro do Stitch, que prompts de geração posteriores não precisam repetir.

Veja o exemplo de prompt ↗

Como funciona

01
Recuperar Ativos do Projeto e das Telas
list_projects encontra o projectId de destino, list_screens exibe telas representativas como Home ou Main Dashboard, e get_screen retorna as URLs de download da captura de tela e do htmlCode antes de o HTML ser buscado.
02
Sintetizar o Design System
Telas existentes são interpretadas com o skill design-md; um projeto totalmente novo ou uma descrição direta é tratado mapeando primeiro as palavras vagas do usuário para valores precisos.
03
Enviar o DESIGN.md e Criar o Design System
O script de upload recomendado codifica o markdown em base64 no processo e o envia para o endpoint batchCreate do projeto, contornando os limites de tokens de saída; create_design_system_from_design_md então é executado com o projectId e a instância de tela retornada.
04
Aplicar o Sistema às Telas Existentes
apply_design_system recebe o projectId, o assetId e uma lista de instâncias de tela para que as telas já construídas adotem os tokens armazenados.

02 Encontre o ideal para você

Quando Usar a Skill stitch::manage-design-system

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

Boa Combinação

Um projeto que precisa de uma linguagem de design autoritativa unindo as telas futuras.
Um novo projeto Stitch sem telas ainda, em que o usuário fornece apenas uma descrição de estilo por escrito.
Fazer engenharia reversa de um design system a partir de telas que já existem no projeto.

Conheça os Limites

Qualquer DESIGN.md com mais de aproximadamente 5KB não pode passar pela ferramenta de upload direto do MCP e precisa do caminho via script.
A orientação sobre como descrever elementos de design não está neste arquivo; ela é delegada a outro skill.
O esquema completo do objeto designSystem não está descrito aqui; ele reside em um arquivo de referência separado.

O Que Fornecer

O id do projeto StitchIdentifica a qual projeto o design system pertence, e é necessário para o script de upload e para todas as chamadas MCP subsequentes.
Telas representativasTelas como Home ou Main Dashboard servem como fonte visual quando os tokens são extraídos de um projeto existente.
Uma descrição de estilo em linguagem simplesUsada quando não há telas, por exemplo uma frase curta indicando paleta, arredondamento e fonte.
Argumentos do script para o uploadO script de upload precisa do id do projeto, caminho do arquivo, chave de API e um valor generated-by passados na linha de comando.

03 Dentro da skill

Regras que o Skill stitch::manage-design-system 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.

Parar para Aprovação do Usuário Antes do Upload
O skill deve pausar e perguntar antes de enviar qualquer coisa ao Stitch, apresentando nome de exibição, cores principais, fontes e arredondamento, e aguardar aprovação explícita.
Enviar Apenas Id e sourceScreen ao Aplicar
selectedScreenInstances não carrega nenhum dado de posição ou dimensão, apenas os dois campos identificadores.
Excluir Instâncias design-system da Lista de Destino
Instâncias do tipo DESIGN_SYSTEM_INSTANCE são filtradas; apenas telas reais são passadas para apply_design_system.
Marcar Quem Gerou o Markdown
O argumento generated-by nomeia o skill ou ferramenta que produziu o DESIGN.md; omiti-lo recorre a um rótulo padrão fixo.
Criar o Sistema Imediatamente Após o Upload
create_design_system_from_design_md é chamado imediatamente após a etapa de upload, com o projectId e o selectedScreenInstance.
Ler o Id do Asset no Nome do Design System
list_design_systems retorna um nome no formato assets/{assetId}; a parte após assets/ é o assetId usado ao aplicar.

04 Coloque em prática

Instalar stitch::manage-design-system no Claude Code ou Codex

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

Adicionar stitch::manage-design-system 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::manage-design-system

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

Dê ao Skill uma primeira tarefa de marca e design-system

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

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

Confirme que o upload realmente retornou os dois identificadores antes de continuar.
Verifique se tanto o script de upload quanto a chamada de criação foram concluídos, pois só então os tokens são armazenados no nível do projeto.
Obtenha os ids das instâncias de tela a partir de get_project em vez de adivinhá-los, para que apply_design_system tenha alvos válidos.
Verifique o DESIGN.md gerado em relação à estrutura definida em outro lugar antes de enviá-lo.

No OpenDesign importe stitch::manage-design-system a partir do link do seu 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/manage-design-system/SKILL.md Checksum de conteúdo registrado na verificação; commit 0337446
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 8.304 Snapshot do GitHub tirado em 2026-09-14 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 para stitch::manage-design-system.
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

📥 RetrievalQuatro etapas ordenadas para extrair ativos de projeto, tela e HTML por meio das ferramentas Stitch MCP.
🧠 Synthesis from DescriptionQuando reutilizar a skill design-md e como transformar termos vagos em valores concretos.
📝 Output StructureDiz que o DESIGN.md segue a estrutura definida na skill design-md.
🚀 Create or Update Design System in StitchFluxo de upload e criação em duas etapas, com um checkpoint obrigatório de confirmação do usuário.
🎨 Apply Design System to ScreensFormato exato do JSON, além das três etapas para reunir os ids necessários.
📋 Update Project MetadataGrava .stitch/metadata.json com id do projeto, título, telas e resumo do sistema.
Schema ReferenceAponta para reference/tool-schema.md para o schema completo do objeto designSystem.
💡 Best PracticesDelega as orientações sobre descrição de elementos de design para a skill design-md.

A Descrição da Própria Skill

"- Gerencie design systems no Stitch usando ferramentas MCP. Inclui recuperação de ativos, criação/atualização de design systems no Stitch e aplicação deles a telas."

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

06 Antes de instalar

Perguntas Sobre a Skill stitch::manage-design-system

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

Algo é enviado ao Stitch sem que eu concorde?

Não. Há um checkpoint explícito: a skill precisa apresentar um resumo do design system que está prestes a criar, cobrindo nome de exibição, cores principais, fontes e arredondamento, e esperar aprovação antes de enviar.

E se o meu DESIGN.md for maior que alguns KB?

Use o script de upload recomendado em vez da ferramenta MCP direta. Ele codifica o markdown em base64 no próprio processo e o envia para o endpoint batchCreate, o que evita os limites de tokens de saída.

De onde vêm os ids para aplicar um design system?

get_project retorna os screenInstances com seu id e sourceScreen, novamente filtrados apenas para telas reais.

Isso funciona em um projeto novo, sem nenhuma tela?

Sim. Quando não há telas ou o usuário fornece uma descrição direta, a skill mapeia os termos vagos para valores precisos, escolhendo códigos hexadecimais concretos, famílias de fontes e arredondamento, e então gera o DESIGN.md.

Stitch Manage Design System

Execute stitch::manage-design-system em uma Tarefa de Trabalho real de Marca e design-system.

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

Baixar OpenDesign Ver todas as skills