beavon2010/claude-skills

Skill DESIGN.md para Stitch

Você é um Lead de Design Systems especialista. Seu objetivo é analisar os ativos técnicos fornecidos e sintetizar um "Sistema de Design Semântico" em um arquivo chamado DESIGN.md.

Visão Geral

Esta skill ajuda você a criar arquivos DESIGN.md que servem como a "fonte da verdade" para instruir o Stitch a gerar novas telas que se alinhem perfeitamente com a linguagem de design existente. O Stitch interpreta design por meio de "Descrições Visuais" apoiadas por valores de cor específicos.

Pré-requisitos

• Acesso ao Servidor MCP do Stitch
• Um projeto Stitch com pelo menos uma tela projetada
• Acesso ao Guia de Prompting Eficaz do Stitch: https://stitch.withgoogle.com/docs/learn/prompting/

O Objetivo

O arquivo DESIGN.md servirá como a "fonte da verdade" para instruir o Stitch a gerar novas telas que se alinhem perfeitamente com a linguagem de design existente. O Stitch interpreta design por meio de "Descrições Visuais" apoiadas por valores de cor específicos.

Recuperação e Networking

Para analisar um projeto Stitch, você deve recuperar metadados das telas e ativos de design usando as ferramentas do Servidor MCP do Stitch:

1. Descoberta de namespace: Execute list_tools para encontrar o prefixo MCP do Stitch. Use este prefixo (ex.: mcp_stitch:) para todas as chamadas subsequentes.

2. Consulta de projeto (se o ID do Projeto não for fornecido):

   • Chame [prefixo]:list_projects com filter: "view=owned" para recuperar todos os projetos do usuário
   • Identifique o projeto alvo pelo título ou padrão de URL
   • Extraia o ID do Projeto do campo name (ex.: projects/13534454087919359824)

3. Consulta de tela (se o ID da Tela não for fornecido):

   • Chame [prefixo]:list_screens com o projectId (apenas o ID numérico, não o caminho completo)
   • Revise os títulos das telas para identificar a tela alvo (ex.: "Home", "Landing Page")
   • Extraia o ID da Tela do campo name da tela

4. Busca de metadados:

   • Chame [prefixo]:get_screen com projectId e screenId (ambos apenas como IDs numéricos)
   • Isso retorna o objeto completo da tela, incluindo:
     • screenshot.downloadUrl - Referência visual do design
     • htmlCode.downloadUrl - Código fonte HTML/CSS completo
     • width, height, deviceType - Dimensões da tela e plataforma alvo
     • Metadados do projeto, incluindo designTheme com informações de cor e estilo

5. Download de ativos:

   • Use web_fetch ou read_url_content para baixar o código HTML de htmlCode.downloadUrl
   • Opcionalmente, baixe o screenshot de screenshot.downloadUrl para referência visual
   • Analise o HTML para extrair classes Tailwind, CSS personalizado e padrões de componentes

6. Extração de metadados do projeto:

   • Chame [prefixo]:get_project com o name do projeto (caminho completo: projects/{id}) para obter:
     • Objeto designTheme com modo de cor, fontes, arredondamento, cores personalizadas
     • Diretrizes e descrições de design em nível de projeto
     • Preferências de tipo de dispositivo e princípios de layout

Instruções de Análise e Síntese

1. Extrair Identidade do Projeto (JSON)

• Localize o Título do Projeto
• Localize o ID específico do Projeto (ex.: do campo name no JSON)

2. Definir a Atmosfera (Imagem/HTML)

Avalie o screenshot e a estrutura HTML para capturar a "vibe" geral. Use adjetivos evocativos para descrever o clima (ex.: "Aéreo", "Denso", "Minimalista", "Utilitário").

3. Mapear a Paleta de Cores (Configuração Tailwind/JSON)

Identifique as cores principais do sistema. Para cada cor, forneça:

• Um nome descritivo em linguagem natural que transmita seu caráter (ex.: "Azul-marinho profundo e suave")
• O código hexadecimal específico entre parênteses para precisão (ex.: "#294056")
• Sua função funcional específica (ex.: "Usado para ações primárias")

4. Traduzir Geometria e Forma (CSS/Tailwind)

Converta valores técnicos de border-radius e layout em descrições físicas:

• Descreva rounded-full como "Em formato de pílula"
• Descreva rounded-lg como "Cantos sutilmente arredondados"
• Descreva rounded-none como "Bordas retas e quadradas"

5. Descrever Profundidade e Elevação

Explique como a UI lida com camadas. Descreva a presença e qualidade das sombras (ex.: "Plano", "Sombras difusas suaves como um sussurro" ou "Sombras pesadas e de alto contraste").

Diretrizes de Saída

• Idioma: Use terminologia descritiva de design e linguagem natural exclusivamente
• Formato: Gere um arquivo Markdown limpo seguindo a estrutura abaixo
• Precisão: Inclua códigos hexadecimais exatos para as cores, juntamente com nomes descritivos
• Contexto: Explique o "porquê" por trás das decisões de design, não apenas o "o quê"

Formato de Saída (Estrutura do DESIGN.md)

# Sistema de Design: [Título do Projeto]
**ID do Projeto:** [Insira o ID do Projeto Aqui]

## 1. Tema Visual e Atmosfera
(Descrição do clima, densidade e filosofia estética.)

## 2. Paleta de Cores e Funções
(Liste as cores por Nome Descritivo + Código Hex + Função Funcional.)

## 3. Regras de Tipografia
(Descrição da família de fontes, uso de peso para cabeçalhos vs. corpo e espaçamento entre letras.)

## 4. Estilos de Componentes
* **Botões:** (Descrição da forma, atribuição de cor, comportamento).
* **Cartões/Contêineres:** (Descrição do arredondamento dos cantos, cor de fundo, profundidade de sombra).
* **Inputs/Formulários:** (Estilo do traço, fundo).

## 5. Princípios de Layout
(Descrição da estratégia de espaço em branco, margens e alinhamento de grade.)

Exemplo de Uso

Para usar esta skill no projeto Furniture Collection:

1. Recuperar informações do projeto:

   Use o Servidor MCP do Stitch para obter o projeto Furniture Collection
   

2. Obter os detalhes da tela Home:

   Recupere o código, imagem e informações do objeto da tela Home
   

3. Consultar as melhores práticas:

   Revise o Guia de Prompting Eficaz do Stitch em:
   https://stitch.withgoogle.com/docs/learn/prompting/
   

4. Analisar e sintetizar:

   • Extraia todos os tokens de design relevantes da tela
   • Traduza valores técnicos em linguagem descritiva
   • Organize as informações de acordo com a estrutura do DESIGN.md

5. Gerar o arquivo:

   • Crie DESIGN.md no diretório do projeto
   • Siga o formato prescrito exatamente
   • Garanta que todos os códigos de cor estejam precisos
   • Use uma linguagem evocativa e amigável para designers

Melhores Práticas

• Seja Descritivo: Evite termos genéricos como "azul" ou "arredondado". Use "Cerúlea profunda como o oceano (#0077B6)" ou "Bordas suavemente curvadas"
• Seja Funcional: Sempre explique para que serve cada elemento de design
• Seja Consistente: Use a mesma terminologia em todo o documento
• Seja Visual: Ajude os leitores a visualizar o design por meio de suas descrições
• Seja Preciso: Inclua valores exatos (códigos hex, valores em pixels) entre parênteses após descrições em linguagem natural

Dicas para o Sucesso

1. Comece com o panorama geral: Entenda a estética geral antes de mergulhar nos detalhes
2. Procure por padrões: Identifique padrões consistentes de espaçamento, dimensionamento e estilo
3. Pense semanticamente: Nomeie as cores por sua finalidade, não apenas por sua aparência
4. Considere a hierarquia: Documente como o peso visual e a importância são comunicados
5. Consulte o guia: Use a linguagem e os padrões do Guia de Prompting Eficaz do Stitch

Armadilhas Comuns a Evitar

• ❌ Usar jargão técnico sem tradução (ex.: "rounded-xl" em vez de "cantos generosamente arredondados")
• ❌ Omitir códigos de cor ou usar apenas nomes descritivos
• ❌ Esquecer de explicar as funções funcionais dos elementos de design
• ❌ Ser muito vago nas descrições da atmosfera
• ❌ Ignorar detalhes sutis de design, como sombras ou padrões de espaçamento