stitch::code-to-designpor Google Labs

Stitch Code to Design Skill.

Uma skill para Claude Code e Codex focada em design de UI: converte código frontend em um design Stitch via HTML estático e extração de sistema de design.

Web & UI
Arquivo de design

Baixar OpenDesign Ver guia de uso

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

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

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

01 O que faz

O que a Skill stitch::code-to-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

Converte uma base de código frontend existente (React + Vite, Next.js, Angular, Vue) em um Stitch Design encadeando três skills: extract-static-html, extract-design-md e upload-to-stitch. É destinada a designers e desenvolvedores que querem levar um app em funcionamento ou um diretório web já construído para o Stitch, para poder iterar sobre ele lá.

O workflow extrai um arquivo HTML autocontido, grava um design system em .stitch/DESIGN.md, cria o design system no Stitch e depois envia o HTML como uma tela com título baseado no caminho de rota da página. É o caminho obrigatório para pedidos de salvar, migrar ou enviar, e a verificação do HTML é opcional e nunca bloqueia a execução.

O que ele produz

Um arquivo HTML autocontido, por exemplo /path/to/extracted/standalone.html.
Uma descrição de design system escrita como DESIGN.md.
Uma tela enviada ao Stitch cujo nome e título identificam a rota de onde ela veio na aplicação.

Veja o exemplo de prompt ↗

Como funciona

01
Extrair um Arquivo HTML Autocontido
Delega à skill extract-static-html, que trabalha a partir do build de saída ou de um servidor de desenvolvimento em execução, como Vite ou Angular CLI ng serve, e produz um único arquivo HTML autônomo.
02
Oferecer Verificação Sem Pausar
Após a extração, você informa ao usuário onde está o arquivo para que ele possa verificar por conta própria no navegador, e a execução continua para a próxima etapa independentemente disso.
03
Analisar a Origem em um Sistema de Design
O skill extract-design-md lê os componentes, folhas de estilo e configurações de tema do projeto, e o resultado é gravado em um arquivo de sistema de design.
04
Criar o Sistema de Design no Stitch
O skill manage-design-system faz o upload do DESIGN.md e chama create_design_system_from_design_md com os schemas exigidos.
05
Fazer Upload do HTML como uma Tela
O mesmo script de upload envia o HTML autônomo usando a chave de API do Stitch e o projectId, com o argumento title definido como a rota da página, para que a tela seja identificável no Stitch.

02 Encontre o ideal para você

Quando Usar a Skill stitch::code-to-design

Use a skill stitch::code-to-design no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Um aplicativo existente escrito em React + Vite, Next.js, Angular ou Vue que o usuário deseja migrar para o Stitch e continuar aprimorando lá.
Um pedido formulado de maneira vaga como salvar, migrar ou enviar, em vez de uma tarefa explícita de conversão.
Um projeto já em execução em um servidor de desenvolvimento Vite ou servido pelo Angular CLI ng serve.
Um workspace Angular organizado com angular.json, templates .html externos, arquivos de tema e componentes, todos os quais alimentam a extração do sistema de design.

Conheça os Limites

Não há nada executável para apontar: o workflow precisa de um servidor de desenvolvimento local em execução ou de um diretório de aplicação web compilado contendo index.html e assets.

O Que Fornecer

O projectId de destino no StitchOs uploads precisam de um projeto de destino; se não for conhecido, consulte-o primeiro com list_projects.
O caminho para o HTML extraídoO arquivo autônomo produzido na etapa 1 precisa ser passado para a etapa de upload, junto com a chave de API e o projectId.
Os arquivos de origem do projetoComponentes, folhas de estilo e configurações de tema são o que a análise do sistema de design lê para derivar o DESIGN.md.

03 Dentro da skill

Regras que o Skill stitch::code-to-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.

Sempre Usá-lo para Intenção de Salvar, Migrar ou Enviar
Qualquer migração de aplicativos web existentes ou componentes React/Angular/Vue para o Stitch deve passar por esse skill, mesmo um simples salvamento, pois é o único caminho que também extrai o sistema de design e vincula os assets.
Gravar o Sistema de Design em .stitch/DESIGN.md
O arquivo de sistema de design fica em .stitch/DESIGN.md e deve seguir a estrutura definida pelo skill extract-design-md.
Nunca Bloquear na Verificação
A verificação do HTML extraído é conduzida pelo usuário e opcional; o agente deve seguir diretamente para a etapa do sistema de design, em vez de esperar.
Marcar o Upload do Sistema de Design
Passe o argumento --generated-by 'stitch::code-to-design' ao fazer upload do DESIGN.md, para que a origem do artefato gerado seja registrada.
Marcar o Upload do HTML de Forma Diferente
O upload de HTML usa o outro marcador, --generated-by 'stitch::extract-static-html', não o de código-para-design.
Reutilize Uma Chave de API Para Ambos os Uploads
A chave de API do Stitch fornecida na etapa 4 é a mesma chave exigida para o upload de HTML; não há uma segunda credencial.

04 Coloque em prática

Instalar stitch::code-to-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::code-to-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::code-to-design

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

Dê ao Skill uma Primeira Tarefa de Design de UI

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

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

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:

Abra o arquivo extraído em um navegador para confirmar que a página é renderizada como esperado.
Se o usuário retornar com problemas após revisar a extração, corrija-os antes de continuar o workflow.

No OpenDesign importe stitch::code-to-design 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/code-to-design/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::code-to-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

WorkflowInstrui o agente a seguir as etapas listadas para converter código existente.
Pré-requisitosNecessita de um servidor de desenvolvimento em execução ou de um diretório de aplicativo compilado, além de um projectId do Stitch.
EtapasCinco etapas ordenadas, cada uma delegando a outra skill ou script.

A Descrição da Própria Skill

"- Converter código frontend (Vite, React, Angular, Vue, etc.) para um Stitch Design encadeando extração de HTML estático, extração de design system e upload de arquivo. **SEMPRE** use essa skill quando a intenção do usuário for mover aplicativos web existentes ou componentes React/Angular/Vue para o Stitch (por exemplo, solicitações para "salvar", "migrar" ou "fazer upload"). Você deve usar essa skill mesmo para operações simples de "salvar", pois é a única maneira de garantir que o design system seja extraído e os assets sejam vinculados corretamente."

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

06 Antes de instalar

Perguntas Sobre a Skill stitch::code-to-design

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

Ela apenas envia uma tela, ou também constrói o sistema de design?

Ambos. O arquivo DESIGN.md é enviado e o sistema de design é criado no Stitch por meio do workflow manage-design-system, que usa o script de upload e a chamada create_design_system_from_design_md com os schemas necessários.

Qual skill realmente extrai o HTML do meu aplicativo?

A extract-static-html realiza a extração, produzindo um único arquivo HTML autocontido a partir da saída de build ou de um servidor de desenvolvimento em execução, como o do Vite.

Stitch Code to Design

Execute stitch::code-to-design em uma Tarefa Real de Design de UI.

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

Baixar OpenDesign Ver todas as skills