stitch-design-tastepor Leonxlnx

Stitch Design Taste Skill.

Um skill de Claude Code e Codex para trabalho de marca e design system: escreve um DESIGN.md para Google Stitch com ênfase em distinção visual.

Marca e Sistemas de Design
DESIGN.md

Baixar OpenDesign Ver guia de uso

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Frontispício e cabeçalhos de seção lidos do arquivo upstream em 14/09/2026 · 11.732 caracteres no total

01 O que faz

O que o skill stitch-design-taste 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

Este skill gera arquivos DESIGN.md otimizados para a geração de telas do Google Stitch. Ele traduz diretrizes de engenharia frontend anti-slop para a linguagem de design semântica nativa do Stitch — regras descritivas em linguagem natural combinadas com valores precisos que o agente de IA do Stitch consegue interpretar. O arquivo serve como a única fonte de verdade para orientar o Stitch a gerar interfaces premium e não genéricas.

Ele impõe regras estritas de tipografia, paletas de cores calibradas, layouts assimétricos, micro-movimento perpétuo e desempenho acelerado por hardware. O skill inclui listas explícitas de anti-padrões que proíbem clichês de design de IA, como a fonte Inter, brilhos neon, seções hero centralizadas e conteúdo de espaço reservado genérico.

O que ele produz

Um arquivo DESIGN.md com sete seções estruturadas: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Motion & Interaction e Anti-Patterns

Veja o exemplo de prompt ↗

Como funciona

01
Defina a Atmosfera
Avalie a intenção do projeto-alvo usando adjetivos evocativos do espectro de estilo em três dimensões: Densidade (1-10, de Arejado a Cockpit Denso), Variação (1-10, de Simétrico a Caótico) e Movimento (1-10, de Estático a Cinemático).
02
Mapeie a Paleta de Cores
Para cada cor, forneça nome descritivo, código hexadecimal e função. No máximo uma cor de destaque com saturação abaixo de 80%.
03
Defina a Seção Hero
Crie primeiras impressões marcantes usando tipografia com imagens embutidas (pequenas fotos incorporadas entre palavras na altura do tipo), estruturas assimétricas quando a variação exceder 4 e no máximo um CTA principal.
04
Descreva as Estilizações de Componentes
Especifique forma, cor, profundidade de sombra e comportamento de interação para botões, cards, campos de entrada, estados de carregamento e estados de erro.
05
Codifique a Filosofia de Movimento
Defina padrões de física de spring (rigidez: 100, amortecimento: 20), micro-interações perpétuas para componentes ativos, orquestração escalonada para revelações de listas e restrições de desempenho limitando a animação apenas a transform e opacity.

02 Encontre o ideal para você

Quando Usar a Skill stitch-design-taste

Use a skill stitch-design-taste no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Geração de arquivos DESIGN.md otimizados para a geração de telas do Google Stitch que codificam padrões de design premium e não genéricos
Projetos que exigem aplicação estrita de anti-padrões para evitar clichês de design de IA, como brilhos neon, fonte Inter e conteúdo de espaço reservado genérico
Dashboards de alta densidade ou interfaces estilo cockpit que exigem numerais monoespaçados e boa capacidade de leitura rápida em espaço compacto

Conheça os Limites

Projetos que exigem a fonte Inter ou fontes genéricas do sistema para contextos premium
Interfaces que usam layouts de hero centralizados quando a variância excede 4 ou layouts de três colunas com cards iguais
Designs com emojis, sombras de brilho neon externo, cursores de mouse personalizados ou clichês de copywriting de IA como Elevate, Seamless, Unleash

O Que Fornecer

Intenção do projeto-alvoCompreensão de se o projeto é uma galeria de arte, um app do dia a dia, uma interface de cockpit ou outra categoria, para avaliar a densidade, a variância e o espectro de movimento adequados.

03 Dentro da skill

Regras que o skill stitch-design-taste Dá ao Claude Code e ao Codex

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

Linha de Base de Atmosfera Padrão
A linha de base padrão para novos projetos é Variância 8, Movimento 6, Densidade 4. Esses valores devem ser adaptados dinamicamente com base na descrição de vibe do usuário.
Sem Seções de Hero Centralizadas Acima de Variância 4
Layouts de Hero Centralizado são proibidos quando a variância excede 4. Force layouts de Tela Dividida, Alinhado à Esquerda ou Espaço em Branco Assimétrico.
Viewport Mobile Usa min-h-[100dvh]
Seções de altura total devem usar min-h-[100dvh], nunca h-screen, para evitar o comportamento catastrófico de salto da barra de endereço do Safari no iOS.
Alvos de Toque Mínimos de 44px
Todos os elementos interativos devem ter um alvo de toque mínimo de 44px para garantir acessibilidade e usabilidade em dispositivos móveis.
Sem Elementos Sobrepostos
Texto nunca deve se sobrepor a imagens ou outro texto. Cada elemento ocupa sua própria zona espacial limpa, com separação espacial clara. Não é permitido o empilhamento de conteúdo com posicionamento absoluto.

04 Coloque em prática

Instale stitch-design-taste 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-design-taste 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/Leonxlnx/taste-skill --skill stitch-design-taste

Forma genérica de CLI skills para skills/stitch-skill/SKILL.md; o repositório pode documentar seu próprio caminho.

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

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

Starter prompt

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

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:

Verifique se todas as entradas de cor incluem nome descritivo, código hexadecimal e função, com no máximo uma cor de destaque com saturação abaixo de 80%
Confirme se a lista de anti-padrões proíbe explicitamente a fonte Inter, serifas genéricas, preto puro, brilhos neon, emojis e clichês de copywriting de IA
Garanta que as regras de responsividade mobile imponham colapso em coluna única abaixo de 768px, alvos de toque mínimos de 44px e min-h-[100dvh] para seções de altura total

No OpenDesign importe o stitch-design-taste pelo link do 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Arquivo da skill: skills/stitch-skill/SKILL.md Checksum de conteúdo registrado na verificação; commit ccbc156
License: MIT De LICENSE. Quase duplicata do taste-design do Google Stitch; a versão do Google não é contada separadamente.
Estrelas do repositório: 86.946 Snapshot do GitHub capturado em 2026-09-14 para todo o repositório Leonxlnx/taste-skill, que contém 11 skills neste catálogo. Não é uma classificação ou contagem de uso para stitch-design-taste.
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

Visão geralDefine o propósito do skill: gerar arquivos DESIGN.md para o Stitch usando linguagem de design semântica e padrões anti-genéricos.
Pré-requisitosLista os requisitos de acesso: Google Stitch via labs.google/stitch e, opcionalmente, o Stitch MCP Server para integração programática.
O ObjetivoDescreve sete alvos de codificação: atmosfera visual, calibração de cores, arquitetura tipográfica, comportamentos de componentes, princípios de layout, filosofia de movimento, anti-padrões.
1. Definir a AtmosferaUse adjetivos evocativos nos espectros de densidade, variância e movimento, com a linha de base padrão Variância 8, Movimento 6, Densidade 4.
2. Mapear a Paleta de CoresForneça nome descritivo, código hex e função com no máximo uma cor de destaque abaixo de 80% de saturação, proibindo estéticas neon.
3. Estabelecer Regras de TipografiaProíba Inter em contextos premium e serifas genéricas; imponha fontes distintivas com hierarquia por peso e cor, não por tamanho.
4. Definir a Seção HeroCrie primeiras impressões marcantes usando tipografia integrada à imagem, estruturas assimétricas acima de variância 4 e no máximo um CTA.
5. Descrever os Estilos dos ComponentesEspecifique forma, cor, profundidade de sombra e comportamento de interação, usando cards apenas quando a elevação comunica hierarquia.
6. Definir Princípios de LayoutSem elementos sobrepostos, heróis centralizados proibidos acima de variância 4, CSS Grid em vez de Flexbox, contenção por max-width, min-h-[100dvh] para altura total.
7. Definir Regras de ResponsividadeColapso mobile-first para coluna única abaixo de 768px, áreas de toque de 44px, escalonamento tipográfico com clamp, imagens integradas empilham no mobile.
8. Codificar a Filosofia de MovimentoFísica de mola padrão com stiffness 100 e damping 20, microinterações perpétuas, orquestração escalonada, apenas transformações aceleradas por hardware.
9. Listar Antipadrões (Sinais de IA)Regras explícitas de NUNCA FAZER: sem emojis, Inter, serifas genéricas, preto puro, brilhos neon, elementos sobrepostos, clichês de IA, texto de preenchimento.

A Descrição da Própria Skill

"Skill de Sistema de Design Semântico para Google Stitch. Gera arquivos DESIGN.md compatíveis com agentes que impõem padrões de UI premium e anti-genéricos — tipografia rigorosa, cor calibrada, layouts assimétricos, micro-movimento perpétuo e desempenho acelerado por hardware."

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

Stitch Design Taste

Execute stitch-design-taste em uma Marca Real e Tarefa de Trabalho de design-system.

Baixe OpenDesign, importe stitch-design-taste do seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills