beavon2010/código-para-design

Código para Design

Transforme seu código frontend existente (React + Vite, Next.js, Angular, Vue, etc.) em um Design Stitch para que você possa iterar e melhorá-lo usando o Stitch.

Esta skill orquestra três outras skills em sequência:

1. extract-static-html: Extrair um único arquivo HTML autossuficiente da sua build ou servidor de desenvolvimento em execução (ex.: servidor de desenvolvimento Vite ou Angular CLI ng serve).
2. extract-design-md: Analisar o código-fonte (incluindo angular.json do Angular, templates .html externos, arquivos de tema e componentes) para criar um sistema de design (DESIGN.md).
3. upload-to-stitch: Fazer upload desse arquivo HTML e do sistema de design para o seu projeto Stitch.

Fluxo de Trabalho

Siga estas etapas para converter seu código existente.

Pré-requisitos

• Um servidor de desenvolvimento local em execução (ex.: npm run dev, ng serve) OU um diretório de aplicação web compilado contendo index.html e ativos.
• projectId alvo do Stitch (use list_projects se desconhecido).

Etapas

1. Extrair HTML Autossuficiente

Delegue à skill extract-static-html para gerar um arquivo HTML independente. Leia skills/extract-static-html/SKILL.md para instruções detalhadas e uso do script.

Saída esperada: Um único arquivo como /caminho/para/extracted/standalone.html.

2. Verificar HTML (Opcional — Orientado pelo Usuário)

Após a extração, informe ao usuário o caminho do arquivo de saída para que ele possa verificar manualmente no navegador, se desejar. Não bloqueie na verificação — prossiga diretamente para a Etapa 3.

Se o usuário relatar problemas após a revisão, corrija-os antes de continuar.

3. Extrair Sistema de Design (Arquivo)

Delegue à skill extract-design-md para analisar os arquivos fonte do projeto (componentes, folhas de estilo, configurações de tema) e produzir um sistema de design. Leia skills/extract-design-md/SKILL.md para o fluxo de trabalho completo de análise.

Escreva .stitch/DESIGN.md seguindo a estrutura de saída da skill extract-design-md.

4. Fazer Upload do DESIGN.md e Criar Sistema de Design no Stitch

Delegue à skill manage-design-system para fazer upload do DESIGN.md e criar o sistema de design no Stitch. Leia skills/manage-design-system/SKILL.md para o fluxo de trabalho completo (uso do script de upload, chamada create_design_system_from_design_md e esquemas necessários). Passe --generated-by 'stitch::code-to-design' ao fazer upload.

5. Fazer Upload do HTML para o Stitch

Use o mesmo script da skill upload-to-stitch para fazer upload do arquivo HTML extraído. Leia skills/upload-to-stitch/SKILL.md para instruções detalhadas e uso do script.

Você precisará de:

• O caminho para o arquivo HTML independente gerado na Etapa 1.
• Sua chave de API do Stitch (mesma chave usada na Etapa 4).
• O projectId alvo.
• O argumento --generated-by definido como 'stitch::extract-static-html'.
• O argumento --title definido como o caminho da rota da página (ex.: '/dashboard', '/settings/profile', '/inbox') para que o nome/título da tela no Stitch identifique claramente sua rota na aplicação.