/ Diretório / Playground / Taste Skill
← Todos os servidores ↗ GitHub
● Comunidade Leonxlnx ⚡ Instantâneo

Taste Skill

por Leonxlnx · Leonxlnx/taste-skill

Codifica gosto em design — tipografia, espaçamento, cor, regras de composição — para que o Claude pare de entregar UI genérica e produza trabalho que parece de sênior.

O Taste Skill é um conjunto pequeno e opinativo de regras que previne os erros de design mais comuns de IA: fontes demais, texto de corpo a 14px em um site de marketing, três acentos concorrentes, hero stack que parece Bootstrap 4 de 2018. Ele roda como uma etapa de revisão e reescrita sobre UI gerada, aplicando suas regras e explicando o porquê. Utilizável em qualquer agente que suporte skills.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: Taste Skill

Revisar uma landing page gerada pelo Claude pelo filtro de gosto

👤 Qualquer dev que entrega uma página de marketing construída pelo Claude ⏱ ~30 min intermediate

Quando usar: O output inicial parece aceitável, mas sem personalidade.

Fluxo
  1. Criticar
    Use a taste-skill em /pages/landing.tsx. Liste cada violação de gosto com severidade e a regra que ela quebrou.✓ Copiado
    → 10 a 20 violações, cada uma com tag
  2. Corrigir tier-1
    Aplique apenas as correções de severidade alta. Não altere o texto — apenas o visual/estrutural.✓ Copiado
    → Diff aplicado; site não parece mais 'genérico'
  3. Iterar
    Execute a crítica novamente no resultado. Pare quando restar apenas críticas de tier-3.✓ Copiado
    → Converge em 2 passagens

Resultado: Uma página que parece elaborada, não gerada.

Armadilhas
  • Skill força um estilo que conflita com a marca — Passe --brand /design/brand.md para que ela respeite as diretrizes
Combine com: filesystem

Auditar um único componente para problemas de gosto

👤 Devs que mexem no design system ⏱ ~15 min beginner

Quando usar: Antes de incluir um novo componente no sistema.

Fluxo
  1. Criticar
    Execute a taste-skill em /components/Card.tsx. Há problemas de gosto no nível do componente?✓ Copiado
    → Problemas com linhas citadas
  2. Verificar variantes
    Compare os estados hover, focus e disabled para coerência visual.✓ Copiado
    → Desvio detectado, se houver

Resultado: Componente lançado com menos tickets 'por que isso parece estranho'.

Armadilhas
  • Crítica ignora escolhas de design intencionais (ex.: estilo brutalista) — Passe --style brutalist ou similar para relaxar algumas regras

Usar a taste-skill para definir uma baseline para um novo design system

👤 Equipes iniciando um novo produto ⏱ ~60 min intermediate

Quando usar: Você está escolhendo uma escala de tokens, fonte e paleta e quer um padrão sensato.

Fluxo
  1. Gerar baseline
    Gere um conjunto de tokens alinhado ao gosto — tipo, espaçamento, cor — para um dashboard SaaS.✓ Copiado
    → tokens.json com justificativa por escolha
  2. Testar sob pressão
    Gere páginas de exemplo (login, dashboard, configurações) usando a baseline. Critique seu próprio output.✓ Copiado
    → Páginas + autocrítica com possíveis refinamentos

Resultado: Um ponto de partida defensável que você não precisou negociar com stakeholders.

Armadilhas
  • Baseline gerada é 'segura demais' — Forneça inputs de marca (humor, referências) para que o output não seja insípido
Combine com: design-extract-mcp

Combinações

Combine com outros MCPs para 10× de alavancagem

taste-skill-leon + design-extract-mcp

Extrair tokens de um site de referência e executar a taste-skill para refinar

Extraia tokens de https://linear.app e execute crítica de gosto em uma página que os utilize.✓ Copiado
taste-skill-leon + filesystem

Persistir críticas como registros de revisão de design

Salve cada crítica em /design/reviews/$(date +%F)-<page>.md.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
critique path_or_url, brand? Revisão pré-lançamento 0
fix path, severity_threshold Após crítica, para tier-1/2 0
baseline context: {product, audience} Iniciar um design system do zero 0

Custo e limites

O que custa rodar

Cota de API
N/A
Tokens por chamada
Moderado — crítica de página completa é de 5 a 10 mil tokens
Monetário
Gratuito
Dica
Criticar no nível de componente é mais barato que página completa; itere assim

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-read filesystem-write
Armazenamento de credenciais: Nenhum
Saída de dados: Local

Solução de problemas

Erros comuns e correções

Crítica não retorna violações em UI obviamente genérica

Skill pode estar no modo 'permissivo' — passe --strict

Correção quebra o layout

Execute com --diff-preview primeiro e aplique seletivamente

Conflita com diretrizes de marca

Passe markdown da marca via --brand para que a skill respeite as exceções

Alternativas

Taste Skill vs. outros

AlternativaQuando usarTroca
stevembarclay/pencilplaybookVocê quer gosto em design de UI enraizado no produto PencilEspecífico para o Pencil; a taste-skill é geral
Apenas um prompt brand.mdVocê lança apenas um produtoNão captura os padrões genéricos de IA contra os quais esta skill foi moldada

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills