design-taste-frontendpor Leonxlnx

Design Taste Frontend Skill.

Uma skill do Claude Code e Codex para design de UI: design frontend anti-genérico para landing pages, portfólios e redesigns.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

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

--- name: design-taste-frontend description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check. --- ## 0. BRIEF INFERENCE (Read the Room Before Anything Else) ## 1. THE THREE DIALS (Core Configuration) ## 2. BRIEF → DESIGN SYSTEM MAP ## 3. DEFAULT ARCHITECTURE & CONVENTIONS ## 4. DESIGN ENGINEERING DIRECTIVES (Bias Correction) ## 5. CONTEXT-AWARE PROACTIVITY

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 87.126 caracteres no total

01 O que faz

O que a Skill design-taste-frontend 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

Uma skill de frontend anti-slop para landing pages, portfólios e redesigns. O agente lê o briefing, infere uma direção de design e então define três diais (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) que controlam toda decisão de layout, movimento e densidade. Ela mapeia briefings para sistemas de design reais quando existe um (Fluent, Carbon, GOV.UK, Polaris) e rotula honestamente direções puramente estéticas.

As regras rígidas cobrem o encaixe do hero na viewport, contenção do eyebrow, um acento e um tema por página, marcas de IA banidas, e bibliotecas específicas de ícones, fontes e animação. Redesigns começam com uma auditoria. Encerra com um Pre-Flight Check mecânico em que todas as caixas precisam ser marcadas antes de o código ser entregue.

O que ele produz

Uma Leitura de Design em uma linha declarada antes de qualquer código: tipo de página, público, linguagem de estilo e o sistema de design ou família estética que está sendo adotada.
Código de frontend em Tailwind v4 por padrão, recorrendo à v3 apenas quando o projeto existente exigir.
Comentários no código que indicam claramente quais partes são inspiração emprestada e quais são material oficial.
Espaços reservados claramente rotulados quando não há fonte de imagem disponível, além de uma lista final das imagens reais ainda necessárias.

Veja o exemplo de prompt ↗

Como funciona

01
Leia o Briefing Antes de Qualquer Coisa
O agente infere o que o usuário realmente quer a partir do tipo de página, palavras de estilo, referências, público, ativos de marca existentes e restrições implícitas, em vez de recorrer a uma estética padrão.
02
Defina os Três Diais
A base é 8 / 6 / 4, substituída de forma conversacional pela leitura de design. Existem presets por caso de uso, de serviço do setor público (3 / 2 / 5) a landing de agência (9 / 8 / 3).
03
Escolha uma Base com Honestidade
Se o briefing sugerir Microsoft, IBM, GitHub, Shopify, Atlassian ou setor público, instale e use o pacote oficial em vez de recriar seu CSS manualmente.
04
Aplique a Stack Padrão
React ou Next.js com Server Components, Tailwind v4 e Motion importado de motion/react, com a animação isolada em componentes client leaf.
05
Execute o Pre-Flight Check
Antes de gerar qualquer código, todas as caixas da matriz da Seção 14 precisam ser marcadas; uma única caixa não marcada significa que o trabalho não está concluído.

02 Encontre o ideal para você

Quando Usar o Skill design-taste-frontend

Use o skill design-taste-frontend no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo do skill.

Boa Combinação

Landing pages, portfólios e redesigns, explicitamente não dashboards, tabelas de dados ou UI de produto com múltiplas etapas.
Trabalho de redesign em que a marca precisa sobreviver: auditar primeiro, extrair tokens de marca, evoluir gradualmente em vez de reimaginar.
Serviços do setor público e centrados em confiança, em que o sistema de design oficial é esperado e os diais caem para um contido 3 / 2 / 5.
Briefings de consumo premium, desde que a paleta se afaste da família quente-artesanal do projeto anterior.

Conheça os Limites

Dashboards, UI de produto densa e painéis administrativos pertencem ao Fluent, Carbon, Atlassian ou Polaris.
Tabelas de dados estão fora do escopo e devem usar TanStack Table ou AG Grid.
Não existe um pacote oficial Apple Liquid Glass para a web; qualquer implementação só pode ser rotulada como uma aproximação.
Um design system por projeto: Fluent React e Carbon não podem compartilhar uma árvore, e componentes do shadcn/ui não podem ser inseridos em um app Material 3.

O Que Fornecer

O vocabulário do próprio briefingPalavras de "vibe" orientam a inferência dos controles, então palavras como minimalista, brutalista, estilo Apple ou B2B sério devem ser passadas exatamente na formulação do usuário.
Ativos de marca existentes para redesignsLogo, cor, tipografia e fotografia são tratados como material de partida, e não como entrada opcional, o que é o que permite o modo de preservação funcionar.
Restrições silenciosasPúblicos com foco em acessibilidade, setor público, indústrias regulamentadas, comércio baseado em confiança e produtos infantis sobrepõem totalmente a preferência estética.

03 Dentro da skill

Regras que o Skill design-taste-frontend dá ao Claude Code e ao Codex

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

Zero travessões longos
O caractere de travessão longo é proibido em toda a página: títulos, eyebrows, pills, texto do corpo, citações, atribuições, legendas, texto de botões e texto alternativo.
Verifique o package.json primeiro
Antes de importar qualquer biblioteca de terceiros, verifique se ela existe no package.json e imprima o comando de instalação se estiver ausente. Nunca presuma que uma biblioteca está presente.
Racione o Eyebrow
No máximo um pequeno rótulo em versalete acima de um título de seção a cada três seções, e o hero conta como uma, então uma página de nove seções tem no máximo três.
Limite a Pilha do Hero
O título do hero tem no máximo 2 linhas no desktop e o subtexto no máximo 20 palavras, com os CTAs visíveis sem rolagem.
Nunca use h-screen
Seções de hero em altura total usam min-h-[100dvh] em vez de h-screen, o que evita saltos de layout quando a barra de endereço do Safari no iOS se move.
Motion Values, não State
Valores contínuos controlados por entrada, como posição do mouse, progresso de rolagem e hover magnético, devem passar por useMotionValue e useTransform, nunca por useState.
Duas serifas de display banidas
Serifas são muito desencorajadas como padrão, e Fraunces e Instrument_Serif são especificamente banidas como as duas serifas de display favoritas de LLMs.
Trave um único tema de página
Escolha claro, escuro ou automático em nível de página e trave essa escolha. Tons no nível de seção dentro da mesma família de tema são aceitáveis, mas nenhuma seção alterna para o modo invertido no meio da rolagem.

04 Coloque em prática

Instalar design-taste-frontend no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar design-taste-frontend 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 design-taste-frontend

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

Dê ao Skill uma Primeira Tarefa de Design de UI

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

Starter prompt

Build a landing page for [product name], aimed at [audience, e.g. technical buyers at mid-size companies]. The vibe should be [minimalist / premium consumer / agency-y] and here are my references: [URLs or screenshots]. It is a redesign, so preserve the existing brand colors and keep the nav labels as they are.

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:

Execute a matriz completa da Seção 14 antes de gerar código; é o último filtro e cada item precisa ser marcado com honestidade.
Conte os micro-rótulos em caixa alta acima dos títulos de seção em todos os componentes e confirme que o total permanece em no máximo um a cada três seções.
Releia cada string visível na página antes de declarar a tarefa concluída, sinalizando gramática incorreta, referências confusas e texto falsamente ponderado.
Execute o Lighthouse antes de considerar a página finalizada, verificando LCP abaixo de 2,5s, INP abaixo de 200ms e CLS abaixo de 0,1.
Abra a página nos modos claro e escuro durante o desenvolvimento e nunca publique uma página vista em apenas um deles.
Um único travessão longo ou meio-travessão visível ao usuário reprova a Verificação Pré-Voo e obriga a reescrita.

No OpenDesign design-taste-frontend já está incluso: Plugins → Skills, 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/taste-skill/SKILL.md Checksum de conteúdo registrado na verificação; commit ccbc156
License: MIT De LICENSE.
Estrelas do repositório: 86.946 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório Leonxlnx/taste-skill, que contém 11 skills neste catálogo. Não é uma avaliação ou contagem de uso para design-taste-frontend.
Verificado pelo OpenDesign: 2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

0. INFERÊNCIA DO BRIEFING (Leia o Ambiente Antes de Tudo)Infere o tipo de página, palavras de estilo, público e restrições implícitas, então declara uma Leitura de Design em uma linha.
1. OS TRÊS AJUSTES (Configuração Principal)Define DESIGN_VARIANCE, MOTION_INTENSITY e VISUAL_DENSITY com tabela de inferência e predefinições de caso de uso.
2. MAPA BRIEFING → SISTEMA DE DESIGNMapeia briefings para pacotes oficiais como Fluent ou GOV.UK, ou rotula a estética com honestidade.
3. ARQUITETURA E CONVENÇÕES PADRÃOPadrões de stack, estado, ícones, emoji, responsividade e dependências quando nenhum sistema oficial é usado.
4. DIRETRIZES DE ENGENHARIA DE DESIGN (Correção de Viés)Tipografia, cor, layout, materialidade, estados de UI, disciplina de hero, imagens

A Descrição da Própria Skill

Skill frontend anti-modelo para landing pages, portfólios e redesigns. O agente lê o briefing, infere a direção de design correta e entrega interfaces que não parecem templates. Usa design systems reais quando aplicável, começa com auditoria em redesigns, verificação rigorosa pré-execução.

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

Design Taste Frontend

Execute design-taste-frontend em uma tarefa de design de UI real.

A skill design-taste-frontend já vem dentro do OpenDesign. Baixe o app, selecione a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

O que a Skill design-taste-frontend Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar o Skill design-taste-frontend

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o Skill design-taste-frontend dá ao Claude Code e ao Codex

Zero travessões longos

Verifique o package.json primeiro

Racione o Eyebrow

Limite a Pilha do Hero

Nunca use h-screen

Motion Values, não State

Duas serifas de display banidas

Trave um único tema de página