83.3K+Baixar
Ir para o guia de uso
design-mdpor Google Labs

Design MD Skill.

Uma skill para Claude Code e Codex voltada para trabalho de marca e sistemas de design: analisa projetos Stitch e escreve um DESIGN.md semântico.

  • Marca e Sistemas de Design
  • DESIGN.md
Baixar OpenDesignVer guia de uso
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 7.644 caracteres no total

01 O que faz

O que a skill design-md 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 transforma um projeto existente do Stitch em um DESIGN.md que serve como fonte da verdade para solicitar ao Stitch a geração de novas telas na mesma linguagem de design. É destinada a designers e desenvolvedores com acesso ao Stitch MCP e pelo menos uma tela projetada: a skill descobre o namespace MCP, resolve os IDs do projeto e da tela, busca o objeto da tela junto com seu HTML e captura de tela, e lê o designTheme do projeto.

Em seguida, ela documenta o tema visual e a atmosfera, as cores como nomes descritivos com códigos hex e funções, a tipografia, os estilos dos componentes e os princípios de layout, em uma linguagem de design evocativa em vez de valores técnicos brutos.

O que ele produz

  • Um sistema de design em cinco partes que abrange tema visual e atmosfera, a paleta de cores com suas funções, regras de tipografia, estilos de componentes para botões, cards e campos de entrada, e princípios de layout.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Descobrir o Namespace MCP

    Execute list_tools para encontrar o prefixo MCP do Stitch e, em seguida, reutilize esse prefixo em todas as chamadas posteriores ao servidor.

  2. 02
    Resolver Projeto e Tela

    Liste os projetos possuídos quando nenhum ID de projeto for informado, depois liste as telas do ID numérico do projeto e faça a correspondência com um título de tela como Home ou Landing Page.

  3. 03
    Buscar o Objeto da Tela e os Recursos

    get_screen retorna as URLs de download do screenshot e do HTML, as dimensões da tela, o tipo de dispositivo e o designTheme; o HTML é então baixado e analisado em busca de classes Tailwind e padrões de componentes.

  4. 04
    Ler o Design Theme em nível de projeto

    Uma chamada get_project com o caminho completo projects/{id} retorna o objeto designTheme com modo de cor, fontes, arredondamento e cores personalizadas.

  5. 05
    Sintetizar o Sistema Semântico

    Extraia tokens de design da tela, capture a atmosfera geral com adjetivos evocativos e traduza valores técnicos em linguagem descritiva.

  6. 06
    Escrever DESIGN.md

    Crie o DESIGN.md no diretório do projeto seguindo exatamente o formato prescrito de cinco seções.

02 Encontre o ideal para você

Quando usar a Skill design-md

Use o skill design-md no Claude Code ou Codex quando o trabalho for de marca e design-system desse tipo. Adequação e limites abaixo são extraídos do próprio arquivo do skill.

Boa Combinação

  • Você já tem um projeto Stitch contendo pelo menos uma tela projetada e quer um sistema de design escrito extraído dela.
  • Você quer uma fonte de verdade para orientar o Stitch a gerar novas telas que correspondam a uma linguagem de design existente.
  • Você conhece o projeto apenas pelo título ou URL e quer que o skill encontre o Project ID entre seus projetos possuídos.
  • Você quer que o clima seja nomeado por meio de adjetivos evocativos, em vez de uma repetição do CSS.

Conheça os Limites

  • Não pode funcionar sem o Stitch MCP Server e um projeto Stitch que já tenha uma tela projetada.
  • Ele produz um sistema de design em Markdown, não novas telas; o DESIGN.md é a entrada para um prompting posterior no Stitch.
  • Jargão técnico não traduzido, como rounded-xl, é explicitamente listado como uma armadilha a evitar.
  • Descartar os códigos hexadecimais e manter apenas nomes descritivos de cores é apontado como uma falha.

O Que Fornecer

  • Project ID (opcional)Se não for fornecido, o skill lista os projetos possuídos e corresponde o alvo pelo título ou padrão de URL.
  • Screen ID (opcional)Se não for fornecido, o skill analisa os títulos das telas para identificar a tela alvo.
  • Stitch Effective Prompting GuideReferência para a linguagem e os padrões que o texto de design deve usar.

03 Dentro da skill

Regras que o Skill design-md Dá ao Claude Code e ao Codex

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

  1. Somente IDs Numéricos

    Passe projectId e screenId como IDs numéricos, nunca o caminho completo projects/{id}, exceto para get_project, que recebe o nome completo.

  2. Nunca uma Cor Isolada

    Cada cor recebe um nome descritivo em linguagem natural, o código hexadecimal exato entre parênteses e sua função, como Deep Muted Teal-Navy (#294056) usado para ações primárias.

  3. Traduza a Geometria, Não a Cite Literalmente

    Converta valores de border-radius e layout em descrições físicas: rounded-full se torna Em forma de pílula, rounded-lg se torna Cantos levemente arredondados, rounded-none se torna Bordas nítidas e retas.

  4. Proíba Vocabulário Genérico

    Evite termos como azul ou arredondado; prefira Cerúleo Profundo do Oceano (#0077B6) ou Bordas suavemente curvadas.

  5. Mantenha a Estrutura Prescrita

    O arquivo abre com o título do projeto e o Project ID, seguido de cinco seções numeradas: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Explique o Porquê, Não Apenas o Quê

    Inclua valores exatos entre parênteses após a descrição textual e sempre declare para que cada elemento de design é usado.

  7. Mantenha a Terminologia Consistente

    Use a mesma terminologia em todo o documento para que o design system seja lido como um sistema único.

04 Coloque em prática

Instalar design-md no Claude Code ou Codex

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

Adicionar design-md 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 design-md

Formato genérico do CLI skills para plugins/stitch-utilities/skills/design-md/SKILL.md; o repositório pode documentar seu próprio caminho.

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

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

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

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

Verifique o Primeiro Resultado

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

  • Confirme que o formato corresponde exatamente à estrutura prescrita do DESIGN.md, em vez de um layout improvisado.
  • Verifique se todo código de cor está correto e se cada cor mantém tanto um nome descritivo quanto seu valor hexadecimal.
  • Verifique se o papel funcional de cada elemento está declarado, não apenas sua aparência.
  • Verifique se a seção de atmosfera é específica em vez de vaga, e se sombras e espaçamentos não foram omitidos.

No OpenDesign o design-md já vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer 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-utilities/skills/design-md/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 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 para design-md.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Visão GeralDefine o DESIGN.md como a fonte da verdade para o prompting de novas telas no Stitch.
  2. Pré-requisitosRequer acesso ao Stitch MCP, uma tela projetada e o guia de prompting.
  3. O ObjetivoReafirma que o Stitch interpreta descrições visuais apoiadas por valores de cor específicos.
  4. Recuperação e RedeSeis etapas: namespace, projeto, tela, metadados, download de assets, designTheme do projeto.
  5. Instruções de Análise e SínteseExtraia identidade, atmosfera, paleta de cores, geometria e elevação.
  6. Diretrizes de SaídaApenas linguagem descritiva, Markdown limpo, códigos hexadecimais exatos, explique o porquê.
  7. Formato de Saída (Estrutura do DESIGN.md)Esqueleto de Markdown com cinco seções em modelo, a ser preenchido na íntegra.
  8. Exemplo de UsoPasso a passo usando o projeto Furniture Collection e sua página Home.
  9. Boas PráticasSeja descritivo, funcional, consistente, visual e preciso.
  10. Dicas para o sucessoPrimeiro a visão geral, procure padrões, nomeie de forma semântica, documente a hierarquia.
  11. Erros comuns a evitarSem jargão não traduzido, sem códigos ausentes, sem descrições vagas ou incompletas.
A Descrição da Própria Skill
"Analise projetos Stitch e sintetize um sistema de design semântico em arquivos DESIGN.md"

Descrição do cabeçalho do SKILL.md. O arquivo completo tem cerca de 7.644 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre a skill design-md

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

Quais ferramentas a skill usa para acessar o Stitch?

Ela declara as ferramentas do stitch, além de Read, Write e web_fetch. Na prática, executa list_tools primeiro para encontrar o prefixo MCP, depois chama list_projects, list_screens, get_screen e get_project com esse prefixo.

O que exatamente eu obtenho no final?

Um arquivo DESIGN.md criado no diretório do projeto, estruturado como título e ID do projeto seguidos de seções sobre tema visual e atmosfera, paleta de cores e funções, regras de tipografia, estilizações de componentes e princípios de layout. Ele deve ser reutilizado como fonte de verdade ao solicitar novas telas ao Stitch.

Ela substitui fazer isso manualmente?

Ela faz a extração e a redação para você, mas com um requisito específico de vocabulário: as cores recebem nomes evocativos além dos códigos hexadecimais exatos e das funções, e os valores de raio se tornam frases como Formato de pílula ou Bordas retas e afiadas em vez de nomes de classes brutos. Também pede que você explique o porquê de cada decisão.

Design MD

Execute design-md em uma Tarefa de Trabalho real de Marca e design-system.

A skill design-md vem dentro do OpenDesign. Baixe o app, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md