high-end-visual-designpor Leonxlnx

High End Visual Design Skill.

Uma skill para Claude Code e Codex voltada a design de UI: ensina detalhes de alto nível profissional: tipografia, espaçamento, sombras, cards e movimento.

Web & UI

Baixar OpenDesign Ver guia de uso

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

--- name: high-end-visual-design description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS

Cabeçalhos de metadados e seção lidos do arquivo upstream em 2026-09-14 · 10.545 caracteres no total

01 O que faz

O que a Skill high-end-visual-design 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

Essa skill ensina agentes de código a produzir design visual de nível de agência de US$ 150 mil+, definindo escolhas tipográficas exatas, ritmo espacial, técnicas de sombra, estruturas de cartões e padrões de movimento fluido. Ela proíbe padrões genéricos (Inter, Roboto, ícones de traço grosso, sombras duras, easing padrão) e impõe alternativas premium como Geist ou Clash Display, ícones ultrafinos e transições cubic-bezier personalizadas.

Toda saída deve combinar um Vibe Archetype único (Ethereal Glass, Editorial Luxury ou Soft Structuralism) com um Layout Archetype (Asymmetrical Bento, Z-Axis Cascade ou Editorial Split) para evitar repetição. Os componentes usam invólucros Double-Bezel aninhados, ícones à direita Button-in-Button, espaços em branco generosos (py-24 a py-40) e animações de entrada interpoladas por scroll. Todo o movimento simula física do mundo real apenas via transform e opacity, com diretrizes estritas de desempenho para dispositivos móveis.

O que ele produz

Código React/Tailwind/HTML impecável e pixel-perfect, implementando os Arquétipos de Vibe e Layout selecionados com estruturas de componentes Double-Bezel, movimento cubic-bezier personalizado e colapso responsivo para dispositivos móveis

Veja o exemplo de prompt ↗

Como funciona

01
Acionar o Variance Engine
Antes de escrever código, o agente seleciona silenciosamente um Arquétipo de Vibe e um Arquétipo de Layout dentre combinações premium predefinidas, com base no contexto do prompt, para garantir um resultado exclusivo e personalizado.
02
Estruturar Fundo e Tipografia
Estabelecer a textura escolhida (preto OLED com gradientes radiais, tons creme quentes com sobreposição de ruído, ou cinza-prateado com sombras suaves) e definir tamanhos tipográficos massivos com macro-espaçamento exagerado.
03
Arquitetar Estruturas de Componentes Aninhados
Construir todos os cards, inputs e grids principais usando a técnica Double-Bezel: uma casca externa com borda fina e padding envolve um núcleo interno com fundo próprio e raio menor calculado matematicamente.
04
Coreografar Movimento Fluido
Injetar transições cubic-bezier personalizadas para todas as mudanças de estado, revelações de navegação escalonadas com deslocamentos translate-y e opacidade, e física de hover magnético em botões com translação diagonal e escala.
05
Aplicar Interpolação de Rolagem
Os elementos entram na viewport com uma animação suave de fade-up (translate-y-16 blur-md opacity-0 resolvendo-se em mais de 800ms) usando IntersectionObserver ou whileInView do Framer Motion, nunca listeners de window scroll.
06
Validar em Relação à Checklist Pré-Entrega
Avaliar o código em uma matriz de 11 pontos garantindo ausência de padrões banidos, seleção correta de arquétipo, arquitetura Double-Bezel, easing personalizado, colapso mobile e animações seguras para GPU antes da entrega.

02 Encontre o ideal para você

Quando usar o high-end-visual-design Skill

Use a skill high-end-visual-design no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Ajuste e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Engenharia de experiências digitais de nível agência de US$150k+ para projetos de SaaS, IA, tecnologia, lifestyle, imóveis, consumo, saúde ou portfólio que exigem microinterações obsessivas e ritmo espacial cinematográfico
Construção de interfaces que precisam transmitir profundidade háptica e movimento fluido impecável, com transições cubic-bezier personalizadas e animações de entrada interpoladas por rolagem

Conheça os Limites

Projetos que exigem Inter, Roboto, Arial, Open Sans ou Helvetica como tipografia não podem usar este skill
Designs que precisam dos ícones padrão de traço grosso Lucide, FontAwesome ou Material Icons são incompatíveis com o requisito de ícones ultra-finos deste skill
Interfaces com navbars fixas de ponta a ponta coladas ao topo ou grids simétricos de 3 colunas no estilo Bootstrap sem grandes vãos de espaço em branco violam as restrições de layout
Padrões de movimento que usam transições lineares ou ease-in-out padrão, ou mudanças de estado instantâneas sem interpolação, são explicitamente proibidos

O Que Fornecer

Contexto do prompt para seleção de arquétipoA solicitação do usuário deve indicar o tipo de projeto (SaaS, lifestyle, portfólio etc.) para que o agente possa selecionar a combinação apropriada de Arquétipo de Vibe e Layout a partir do Variance Engine.

03 Dentro da skill

Regras que o skill high-end-visual-design 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.

Banir Todos os Padrões Genéricos
Nunca usar Inter, Roboto, Arial, Open Sans, Helvetica, ícones de traço grosso Lucide ou Material Icons, bordas cinza sólidas de 1px, sombras pesadas (shadow-md, rgba(0,0,0,0.3)), navbars fixas de ponta a ponta, grids simétricos estilo Bootstrap, ou transições lineares/ease-in-out.
Nunca Repetir o Mesmo Layout Duas Vezes
O agente deve combinar dinamicamente diferentes arquétipos de layout premium e perfis de textura, mantendo estrita aderência à linguagem de design de elite, garantindo que nenhum output final seja idêntico a outro.
Use Apenas Tipografia e Ícones Premium
Assuma que Geist, Clash Display, PP Editorial New ou Plus Jakarta Sans estão disponíveis para as fontes. Use apenas linhas de ícone ultra-finas e precisas, como Phosphor Light ou Remix Line.
Aplique o Double-Bezel a Todos os Componentes Principais
Nunca posicione cards ou containers premium de forma plana.
Padding em Dobro para macro-whitespace
Use py-24 a py-40 para o padding das seções, permitindo que o design respire intensamente. O padding padrão é insuficiente para a sensação premium.
Anime Apenas Transform e Opacity
Nunca anime top, left, width ou height, pois disparam recálculos de layout. Use exclusivamente transform e opacity para movimento seguro em performance, acelerado por GPU.
Restrinja o backdrop-blur Apenas a Elementos Fixos
Aplique backdrop-blur exclusivamente a elementos fixed ou sticky, como navbars e overlays.
Colapse Todos os Layouts Assimétricos Abaixo de 768px
Qualquer layout assimétrico acima do breakpoint md: deve retornar de forma agressiva para w-full, px-4, py-8 em viewports abaixo de 768px.

04 Coloque em prática

Instale high-end-visual-design no Claude Code ou Codex

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

Adicione high-end-visual-design ao Claude Code, Codex ou Seu Agent

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

Formato genérico da CLI de skills para skills/soft-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

Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

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 não há fontes proibidas (Inter, Roboto, Arial, Open Sans, Helvetica), ícones (Lucide de traço espesso, FontAwesome, Material), bordas (1px solid gray), sombras (shadow-md, drop shadows pesadas), layouts (navbars sticky de ponta a ponta, grids simétricos) ou padrões de movimento (linear, ease-in-out)
Confirme que um Vibe Archetype (Ethereal Glass, Editorial Luxury ou Soft Structuralism) e um Layout Archetype (Asymmetrical Bento, Z-Axis Cascade ou Editorial Split) foram conscientemente selecionados e aplicados
Verifique se todos os cards e containers principais usam a arquitetura aninhada Double-Bezel, com shell externa (borda hairline, padding, raio grande) envolvendo o núcleo interno (background distinto, raio menor calculado)
Garanta que o padding das seções seja no mínimo py-24 e que o layout respire com macro-whitespace exagerado
Valide que todas as transições usam curvas cubic-bezier customizadas e que não há easing linear ou ease-in-out
Confirme que as animações de entrada no scroll estão presentes, de modo que nenhum elemento apareça de forma estática, e que todas as animações usem apenas transform e opacity, sem animar propriedades que disparam recálculo de layout, como top, left, width ou height

No OpenDesign, importe o high-end-visual-design a partir do link do seu 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/soft-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 classificação ou contagem de uso para high-end-visual-design.
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

Informações Meta e Diretiva PrincipalDefine a persona Vanguard_UI_Architect, o objetivo de agência de US$150 mil+ e o Variance Mandate que exige outputs únicos
A DIRETIVA "ABSOLUTE ZERO" (ANTIPADRÕES ESTRITOS)Lista todas as fontes, ícones, bordas, sombras, layouts e padrões de movimento proibidos que causam falha imediata de design
O CREATIVE VARIANCE ENGINEEspecifica três Vibe Archetypes e três Layout Archetypes a serem combinados para outputs premium únicos, com regras de colapso mobile
MICROESTÉTICA HÁPTICA (DOMÍNIO DE COMPONENTES)Detalha a arquitetura aninhada Double-Bezel, o padrão de ícone final Button-in-Button e o ritmo espacial de macro-espaço em branco com etiquetas de eyebrow
COREOGRAFIA DE MOVIMENTO (DINÂMICA FLUIDA)Define transições personalizadas com cubic-bezier, Fluid Island Nav com morph de hambúrguer, física de hover magnético em botões e animações de interpolação de scroll
LIMITES DE PERFORMANCERestringe a animação apenas a transform e opacity, limita o backdrop-blur a elementos fixos e impõe disciplina de z-index
PROTOCOLO DE EXECUÇÃOFornece a sequência exata de cinco etapas, desde a seleção silenciosa do arquétipo até o scaffolding, a arquitetura, a coreografia e a entrega de um resultado pixel-perfect
CHECKLIST PRÉ-ENTREGALista onze verificações obrigatórias contra padrões proibidos, aplicação do arquétipo, arquitetura Double-Bezel, qualidade do movimento, colapso no mobile e performance

A Descrição da Própria Skill

Ensina a IA a projetar como uma agência de alto nível. Define as fontes exatas, espaçamento, sombras, estruturas de cartão e animações que fazem um site parecer caro. Bloqueia todos os padrões comuns que fazem designs de IA parecerem baratos ou genéricos.

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

06 Antes de instalar

Perguntas sobre a skill high-end-visual-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Essa skill inclui alguma biblioteca ou framework JavaScript?

A skill foca em padrões de design visual e recomenda o uso de IntersectionObserver ou do whileInView do Framer Motion para revelações no scroll, mas não inclui nem instala essas bibliotecas.

Ela instrui explicitamente a nunca usar window.addEventListener('scroll'), pois isso causa reflows contínuos e prejudica a performance no mobile. Você precisa fornecer as bibliotecas de animação por conta própria.

High End Visual Design

Execute high-end-visual-design em uma tarefa de design de UI real.

Baixe o OpenDesign, importe high-end-visual-design a partir do link SKILL.md, 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 high-end-visual-design

O que a Skill high-end-visual-design Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando usar o high-end-visual-design Skill

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o skill high-end-visual-design dá ao Claude Code e ao Codex

Banir Todos os Padrões Genéricos

Nunca Repetir o Mesmo Layout Duas Vezes

Use Apenas Tipografia e Ícones Premium

Aplique o Double-Bezel a Todos os Componentes Principais

Padding em Dobro para macro-whitespace

Anime Apenas Transform e Opacity

Restrinja o backdrop-blur Apenas a Elementos Fixos

Colapse Todos os Layouts Assimétricos Abaixo de 768px