Taste Design skill

Um DESIGN.md com regras exatas de cor, fonte e layout pro Google Stitch gerar telas que não parecem feitas por IA.

por Google LabsPublicada pela própria empresa

instalações: 20,2 mil
estrelas no GitHub: 8.594
No skills.sh desde: março de 2026
Licença: Apache-2.0

Atualizada no GitHub em 17 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Google Labs
taste-design
Um DESIGN.md com regras exatas de cor, fonte e layout pro Google Stitch gerar telas que não parecem feitas por IA.OficialAuditada20,2 mil instalações, grátis

O que ela faz

O Google Stitch gera telas a partir de texto. A skill escreve o DESIGN.md, o arquivo que o Stitch segue em todas as telas: clima visual, paleta com nome, código hexadecimal e função de cada cor, tipografia, componentes, layout, regras de celular e movimento.

Ela vem com opinião forte. Só uma cor de destaque, nada de roxo neon nem preto puro. A fonte Inter é proibida, com Geist, Outfit, Cabinet Grotesk ou Satoshi no lugar. A fileira de três cards iguais é vetada, e no padrão dela o topo centralizado também. Abaixo de 768px, todo layout vira uma coluna só.

A lista de proibições inclui emoji, nome genérico como John Doe, frase batida como Elevate e Seamless e número inventado. Sem dado real, o DESIGN.md manda usar um marcador como [métrica] em vez de criar estatística.

Nas palavras de quem fez

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography,…

Google Labs, no SKILL.md

Quando usar

Começar um projeto no Stitch com uma identidade visual definida
Fazer o Stitch parar de gerar telas com cara de template
Manter várias telas de um mesmo app ou site com o mesmo visual
Entregar um padrão visual claro pra quem vai gerar as próximas telas

Depois de instalar, é só pedir assim

Cria um DESIGN.md pro Stitch do meu app de agendamento: visual limpo, uma cor de destaque verde, pouco texto por tela
Gera o DESIGN.md da landing page da minha mentoria, com clima de estúdio de arquitetura e movimento suave
Olha o visual do meu site atual e escreve um DESIGN.md pro Stitch a partir dele, cortando o que parece genérico

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Taste Design no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Taste Design, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Precisa do Google Stitch?

Sim. A skill escreve o arquivo pensando no Stitch, então você precisa de acesso a ele em labs.google.com/stitch. O servidor MCP do Stitch é opcional e liga o Stitch direto a ferramentas como Cursor, Antigravity e Gemini CLI.

Ela gera as telas?

Não. A entrega é o DESIGN.md, com as regras e os valores exatos; quem gera as telas é o Stitch, seguindo esse arquivo.

Roda no Codex e no Antigravity?

O texto cita o Antigravity, o Cursor e o Gemini CLI entre as ferramentas que se conectam ao Stitch pelo MCP; o Codex não aparece. Fora o Stitch, a skill só lê e escreve arquivos, sem programa próprio.

Levar essa skill

1x taste-designR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/google-labs-code/stitch-skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.