high-end-visual-designdi Leonxlnx

High End Visual Design Skill.

Una skill per Claude Code e Codex dedicata al design UI: insegna i dettagli da agenzia di alto livello: tipografia, spaziature, ombre, card e animazioni.

Web & UI

Scarica OpenDesign Guida all'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

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 10.545 caratteri in totale

01 Cosa fa

Cosa Fa la Skill high-end-visual-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill insegna agli agenti di codice a produrre un design visivo di livello agenzia da 150.000 $+ definendo scelte tipografiche precise, ritmo spaziale, tecniche di ombreggiatura, strutture delle card e pattern di movimento fluidi. Vieta i default generici (Inter, Roboto, icone a tratto spesso, ombre dure, easing standard) e impone alternative premium come Geist o Clash Display, icone ultra-sottili e transizioni cubic-bezier personalizzate.

Ogni output deve combinare un Vibe Archetype unico (Ethereal Glass, Editorial Luxury o Soft Structuralism) con un Layout Archetype (Asymmetrical Bento, Z-Axis Cascade o Editorial Split) per evitare ripetizioni. I componenti utilizzano contenitori Double-Bezel annidati, icone finali Button-in-Button, spazi bianchi massivi (py-24 a py-40) e animazioni di ingresso interpolate allo scroll. Ogni movimento simula la fisica del mondo reale usando solo transform e opacity, con vincoli di performance rigorosi per il mobile.

Che cosa produce

Codice React/Tailwind/HTML impeccabile e pixel-perfect che implementa gli Archetipi di Vibe e Layout selezionati con strutture di componenti Double-Bezel, motion cubic-bezier personalizzato e collasso responsive per mobile

Vedi l'esempio di prompt ↗

Come funziona

01
Attiva il Variance Engine
Prima di scrivere il codice, l'agente seleziona silenziosamente un Vibe Archetype e un Layout Archetype da combinazioni premium predefinite in base al contesto del prompt, per garantire un output unico e su misura.
02
Struttura Sfondo e Tipografia
Stabilisce la texture scelta (nero OLED con gradienti radiali, crema calda con overlay di rumore, o grigio argento con ombre morbide) e imposta dimensioni tipografiche enormi con macro-spaziatura esagerata.
03
Progetta Strutture di Componenti Nidificati
Costruisce tutte le card, gli input e le grid principali usando la tecnica Double-Bezel: un guscio esterno con bordo sottile e padding avvolge un nucleo interno con sfondo proprio e un raggio più piccolo calcolato matematicamente.
04
Coreografa il Movimento Fluido
Inserisce transizioni cubic-bezier personalizzate per tutti i cambi di stato, rivelazioni di navigazione scaglionate con spostamenti translate-y e opacity, e fisica di hover magnetico sui bottoni con traslazione diagonale e scaling.
05
Applica l'Interpolazione allo Scroll
Gli elementi entrano nel viewport con una delicata animazione fade-up (translate-y-16 blur-md opacity-0 che si risolve in 800ms+) usando IntersectionObserver o whileInView di Framer Motion, mai listener di scroll su window.
06
Convalida rispetto alla Checklist Pre-Output
Valuta il codice rispetto a una matrice di 11 punti che garantisce l'assenza di pattern vietati, la corretta selezione dell'archetipo, l'architettura Double-Bezel, l'easing personalizzato, il collasso mobile e animazioni sicure per la GPU prima della consegna.

02 Trova la tua applicazione

Quando usare la skill high-end-visual-design

Usa la skill high-end-visual-design in Claude Code o Codex quando il lavoro è il design UI di questo tipo. Compatibilità e limiti sono presi dal file della skill.

Buona applicazione

Realizzare esperienze digitali di livello agenzia da 150.000$+ per progetti SaaS, AI, tech, lifestyle, immobiliare, consumer, salute o portfolio che richiedono micro-interazioni ossessive e un ritmo spaziale cinematografico
Costruire interfacce che devono trasmettere profondità aptica e movimento fluido impeccabile con transizioni cubic-bezier personalizzate e animazioni di ingresso interpolate allo scroll

Conosci i limiti

I progetti che richiedono Inter, Roboto, Arial, Open Sans o Helvetica come tipografia non possono usare questa skill
I design che necessitano delle classiche icone a tratto spesso Lucide, FontAwesome o Material Icons sono incompatibili con il requisito di icone ultra-leggere di questa skill
Le interfacce con navbar sticky edge-to-edge incollate in alto o grid simmetriche a 3 colonne in stile Bootstrap senza ampi spazi bianchi violano i vincoli di layout
I pattern di movimento con transizioni lineari o ease-in-out standard, oppure cambi di stato istantanei senza interpolazione, sono espressamente vietati

Cosa fornire

Contesto del prompt per la selezione dell'archetipoLa richiesta dell'utente dovrebbe indicare il tipo di progetto (SaaS, lifestyle, portfolio, ecc.) affinché l'agente possa selezionare la combinazione appropriata di Vibe e Layout Archetype dal Variance Engine.

03 Dentro la skill

Regole che la Skill high-end-visual-design fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Vieta Tutti i Default Generici
Non usare mai Inter, Roboto, Arial, Open Sans, Helvetica, icone a tratto spesso Lucide o Material Icons, bordi grigi 1px solid, ombre drop dure (shadow-md, rgba(0,0,0,0.3)), navbar sticky edge-to-edge, grid Bootstrap simmetriche o transizioni linear/ease-in-out.
Non Ripetere Mai lo Stesso Layout Due Volte
L'agente deve combinare dinamicamente diversi archetipi di layout premium e profili di texture, attenendosi rigorosamente al linguaggio di design elite, assicurando che nessun output risulti identico a un altro.
Usare Solo Tipografia e Icone Premium
Presupporre la disponibilità di Geist, Clash Display, PP Editorial New o Plus Jakarta Sans come font. Usare solo icone a linea ultra-sottile e precisa come Phosphor Light o Remix Line.
Applicare il Double-Bezel a Tutti i Componenti Principali
Non posizionare mai card o container premium in modo piatto.
Raddoppiare il Padding Standard per un macro-whitespace
Usare py-24 fino a py-40 per il padding delle sezioni, per permettere al design di respirare ampiamente. Il padding standard non è sufficiente per una resa premium.
Animare Solo Transform e Opacity
Non animare mai top, left, width o height poiché innescano ricalcoli del layout. Usare esclusivamente transform e opacity per un movimento accelerato dalla GPU e performante.
Limitare backdrop-blur agli Elementi Fissi
Applicare backdrop-blur esclusivamente a elementi fixed o sticky come navbar e overlay.
Far Collassare Tutti i Layout Asimmetrici Sotto i 768px
Qualsiasi layout asimmetrico sopra il breakpoint md: deve tornare in modo aggressivo a w-full, px-4, py-8 su viewport sotto i 768px.

04 Mettila al lavoro

Installa high-end-visual-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi high-end-visual-design a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per skills/soft-skill/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verificare che non siano presenti font vietati (Inter, Roboto, Arial, Open Sans, Helvetica), icone (Lucide a tratto spesso, FontAwesome, Material), bordi (1px solid gray), ombre (shadow-md, ombre nette), layout (navbar sticky edge-to-edge, griglie simmetriche) o pattern di movimento (linear, ease-in-out)
Confermare che un Vibe Archetype (Ethereal Glass, Editorial Luxury o Soft Structuralism) e un Layout Archetype (Asymmetrical Bento, Z-Axis Cascade o Editorial Split) siano stati scelti e applicati consapevolmente
Controllare che tutte le card e i container principali utilizzino l'architettura nidificata Double-Bezel, con shell esterno (bordo hairline, padding, raggio ampio) che racchiude un core interno (sfondo distinto, raggio più piccolo calcolato)
Assicurarsi che il padding delle sezioni sia almeno py-24 e che il layout respiri con un macro-whitespace esagerato
Validare che tutte le transizioni usino curve cubic-bezier personalizzate e che non sia presente alcun easing linear o ease-in-out
Confermare che siano presenti animazioni di ingresso allo scroll, affinché nessun elemento appaia in modo statico, e che tutte le animazioni usino solo transform e opacity, senza animare proprietà che innescano il layout come top, left, width o height

In OpenDesign importi high-end-visual-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
File della skill: skills/soft-skill/SKILL.md Checksum del contenuto registrato alla verifica; commit ccbc156
License: MIT Da LICENSE.
Stelle del repository: 86.946 Snapshot GitHub acquisito il 14-09-2026 per l'intero repository Leonxlnx/taste-skill, che contiene 11 skill in questo catalogo. Non è un punteggio o conteggio d'uso per high-end-visual-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Informazioni Meta e Direttiva PrincipaleDefinisce la persona Vanguard_UI_Architect, l'obiettivo da agenzia da $150k+ e il Variance Mandate che richiede output unici
LA DIRETTIVA "ABSOLUTE ZERO" (ANTI-PATTERN RIGOROSI)Elenca tutti i font, icone, bordi, ombre, layout e pattern di movimento vietati che causano un fallimento immediato del design
IL CREATIVE VARIANCE ENGINESpecifica tre Vibe Archetype e tre Layout Archetype da combinare per ottenere output premium unici, con regole di collasso per mobile
MICRO-ESTETICA HAPTICA (PADRONANZA DEI COMPONENTI)Descrive l'architettura nidificata Double-Bezel, il pattern dell'icona finale Button-in-Button e il ritmo spaziale macro-whitespace con tag eyebrow
COREOGRAFIA DEL MOVIMENTO (DINAMICHE FLUIDE)Definisce transizioni cubic-bezier personalizzate, la Fluid Island Nav con morph a hamburger, la fisica di hover magnetico dei bottoni e le animazioni di interpolazione allo scroll
LINEE GUIDA DI PERFORMANCELimita le animazioni a transform e opacity, applica backdrop-blur solo agli elementi fissi e impone disciplina sullo z-index
PROTOCOLLO DI ESECUZIONEFornisce la sequenza esatta in cinque passaggi, dalla selezione silenziosa dell'archetipo allo scaffolding, all'architettura, alla coreografia, fino alla consegna di un output pixel-perfect
CHECKLIST PRE-OUTPUTElenca undici controlli di validazione obbligatori su pattern vietati, applicazione dell'archetipo, architettura Double-Bezel, qualità del movimento, collasso mobile e performance

Descrizione della skill

"Insegna all'AI a progettare come un'agenzia di alto livello. Definisce i font esatti, la spaziatura, le ombre, le strutture delle card e le animazioni che fanno sembrare un sito web di lusso. Blocca tutti i valori predefiniti comuni che fanno sembrare i design AI economici o generici."

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 10.545 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill high-end-visual-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Questa skill include librerie o framework JavaScript?

La skill si concentra sui pattern di design visivo e consiglia di usare IntersectionObserver o whileInView di Framer Motion per i reveal allo scroll, ma non include né installa queste librerie.

Indica esplicitamente di non usare mai window.addEventListener('scroll'), poiché causa reflow continui e compromette le performance su mobile. Dovete fornire voi stessi le librerie di animazione.

High End Visual Design

Esegui high-end-visual-design su un progetto UI reale.

Scarica OpenDesign, importa high-end-visual-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa Fa la Skill high-end-visual-design in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare la skill high-end-visual-design

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la Skill high-end-visual-design fornisce a Claude Code e Codex

Vieta Tutti i Default Generici

Non Ripetere Mai lo Stesso Layout Due Volte

Usare Solo Tipografia e Icone Premium

Applicare il Double-Bezel a Tutti i Componenti Principali

Raddoppiare il Padding Standard per un macro-whitespace

Animare Solo Transform e Opacity

Limitare backdrop-blur agli Elementi Fissi

Far Collassare Tutti i Layout Asimmetrici Sotto i 768px