Repolode
Enviar
google-labs-code

google-labs-code/stitch-skills

Coleção de Agent Skills e plugins que permitem a agentes de programação trabalhar com projetos de design do Google Stitch pelo servidor Stitch MCP.

Alternativa open source a:Figma

Ver no GitHubSite
Estrelas
8,546
Forks
1,115
Issues abertas
17
Último commit
há 2 meses

O que é?

Stitch Skills é um conjunto de agent skills para o Google Stitch, uma ferramenta de design. Cada skill é uma pasta com instruções que um agente de programação, como Claude Code, Cursor, Codex ou Gemini CLI, pode carregar para executar um fluxo de trabalho específico no Stitch. As skills exigem que o servidor Stitch MCP esteja configurado no ambiente do agente.

As skills estão organizadas em três plugins: stitch-design abrange a geração e edição de telas, o gerenciamento de sistemas de design, a extração de arquivos DESIGN.md do código-fonte e o envio de assets; stitch-build abrange a conversão de telas do Stitch em código de dashboard com React, React Native ou React + Vite, além de orientações sobre shadcn/ui e tutoriais em vídeo com Remotion; stitch-utilities abrange o aprimoramento de prompts, a geração de DESIGN.md e a criação de sites com várias páginas.

As skills podem ser instaladas pelo marketplace do Codex, pelos comandos npx plugins ou skills, ou copiadas manualmente para o OpenCode. Algumas skills dependem umas das outras, então instalações seletivas precisam incluir as dependências.

Recursos principais

  • 01Gera novas telas no Stitch a partir de texto ou imagens e edita telas existentes.
  • 02Extrai arquivos de sistema de design DESIGN.md do código-fonte de interfaces frontend.
  • 03Converte telas do Stitch em código de dashboard com React, React Native ou React + Vite.
  • 04Envia arquivos HTML, imagens e mockups locais para projetos do Stitch.
  • 05Instala em Claude Code, Cursor, Codex, Gemini CLI e outros agentes compatíveis com Agent Skills.

Casos de uso

  • Transformar uma base de código frontend existente em um design no Stitch para revisão e iteração.
  • Gerar componentes React a partir de telas do Stitch mantendo consistentes os tokens de design.
  • Criar um DESIGN.md que documente o sistema visual de um projeto para ser seguido por outros agentes.
  • Criar um vídeo tutorial de um projeto do Stitch.

Início rápido

  1. 1

    Adicione o marketplace Stitch Skills ao Codex pela CLI

    codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities
  2. 2

    Ou instale apenas as skills desejadas com npx

    npx skills add google-labs-code/stitch-skills

Antes de usar

  • Para que as skills funcionem, é necessário configurar o servidor MCP do Stitch e as credenciais antes.
  • Este não é um produto com suporte oficial do Google.

Tópicos

#ai-agents#design-to-code#mcp#react#design-system#coding-agents#ui-generation

Perguntas frequentes

O que é stitch-skills?
Coleção de Agent Skills e plugins que permitem a agentes de programação trabalhar com projetos de design do Google Stitch pelo servidor Stitch MCP. Stitch Skills é um conjunto de agent skills para o Google Stitch, uma ferramenta de design. Cada skill é uma pasta com instruções que um agente de programação, como Claude Code, Cursor, Codex ou Gemini CLI, pode carregar para executar um fluxo de trabalho específico no Stitch. As skills exigem que o servidor Stitch MCP esteja configurado no ambiente do agente.
stitch-skills é gratuito? Qual é a licença?
stitch-skills é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
stitch-skills ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de stitch-skills foi em 17 de ago. de 2026.
Para que posso usar stitch-skills?
Transformar uma base de código frontend existente em um design no Stitch para revisão e iteração. Gerar componentes React a partir de telas do Stitch mantendo consistentes os tokens de design. Criar um DESIGN.md que documente o sistema visual de um projeto para ser seguido por outros agentes. Criar um vídeo tutorial de um projeto do Stitch.
Como instalar stitch-skills?
Adicione o marketplace Stitch Skills ao Codex pela CLI: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities Ou instale apenas as skills desejadas com npx: npx skills add google-labs-code/stitch-skills
Onde consigo stitch-skills?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/google-labs-code/stitch-skills

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados