83.3K+Scarica
Vai alla guida all’uso
ui-ux-pro-maxdi nextlevelbuilder

UI UX Pro Max Skill.

Uno skill per Claude Code e Codex per il design UI: intelligenza di design UI/UX per web, mobile e desktop: layout, colore, tipografia e regole UX.

  • Web & UI
  • Codice UI
Scarica OpenDesignGuida all'uso
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 15.922 caratteri in totale

01 Cosa fa

Cosa fa lo skill ui-ux-pro-max 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

UI/UX Pro Max è uno skill di intelligenza del design interrogabile per interfacce web, mobile e desktop. Interroga 79 stili (50 attivi), 192 palette prodotto con profili di ragionamento, 74 abbinamenti tipografici, 119 linee guida UX, 105 icone, 17 preset GSAP, 25 tipi di grafico e 22 stack tecnologici. Utilizzatelo per progettare pagine, scegliere colori e tipografia, revisionare l'UI per accessibilità e coerenza, implementare navigazione e animazione o migliorare l'usabilità.

Rileva automaticamente lo stack da package.json, pubspec.yaml o xcodeproj e genera un design system con persistenza opzionale per il recupero tra sessioni. Tre manopole di design (variance, motion, density) regolano l'output. Lo skill fornisce ricerche specifiche per dominio per UX, colori, tipografia, icone, GSAP e linee guida di implementazione specifiche per stack.

Che cosa produce

  • Design system con pattern, stile, colori, tipografia, effetti e anti-pattern in formato ASCII, markdown o JSON
  • design-system/project-slug/pages/page-name.md per override specifici della pagina quando viene passato --page
  • Risultati specifici per dominio (linee guida UX, palette di colori, abbinamenti tipografici, icone, preset GSAP, raccomandazioni sui grafici, guida all'implementazione dello stack)
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Analizzare i requisiti

    Estrarre il tipo di prodotto (SaaS, e-commerce, dashboard), il pubblico target, le parole chiave di stile (giocoso, minimal, dark mode) e rilevare lo stack da package.json, pubspec.yaml, xcodeproj o app.json.

  2. 02
    Generare il design system

    Eseguire search.py con --design-system per nuove pagine o progetti.

  3. 03
    Persistere come master con override

    Aggiungere --persist e --output-dir puntato alla root del progetto per scrivere design-system/project-slug/MASTER.md. Gli override specifici della pagina vanno in pages/page-name.md.

  4. 04
    Integrare con ricerche di dominio

    Interrogare un singolo dominio (ux, color, typography, icons, gsap, chart, landing, google-fonts) con 2-5 termini significativi e un vincolo.

  5. 05
    Linee guida per l'interrogazione dello stack

    Usa --stack con lo stack rilevato (react, nextjs, vue, swiftui, flutter, ecc.) per indicazioni specifiche all'implementazione.

  6. 06
    Verifica le regole pre-consegna

    Prima di consegnare l'UI dell'app, leggi references/pro-rules.md e segui la sua Pre-Delivery Checklist canonica relativa a disciplina delle icone, feedback di interazione, contrasto light/dark, layout con safe-area e accessibilità per l'UI di app native/mobile.

02 Trova la tua applicazione

Quando usare la skill ui-ux-pro-max

Usa la skill ui-ux-pro-max in Claude Code o Codex quando il lavoro riguarda UI design di questo tipo. Adattamento e limiti sono presi dal file della skill.

Buona applicazione

  • Progettazione di nuove pagine o creazione e refactoring di componenti UI
  • Scelta di colore, tipografia, spaziatura o sistemi di layout
  • Revisione dell'UI per UX, accessibilità o coerenza
  • Implementazione di navigazione, animazione o comportamento responsive
  • Miglioramento della qualità percepita e dell'usabilità di un'interfaccia

Conosci i limiti

  • Logica backend pura, progettazione di API o database
  • Lavoro sulle prestazioni non visivo, infrastruttura o DevOps
  • Script non visivi, a meno che l'attività non cambi l'aspetto, la sensazione, il movimento o l'interazione di qualcosa

Cosa fornire

  • Tipo di prodotto e pubblicoSaaS, e-commerce, portfolio, dashboard, entertainment, tool o produttività, oltre a fascia d'età e contesto d'uso (spostamenti, tempo libero, lavoro)
  • Parole chiave di stileGiocoso, vivace, minimale, dark mode, content-first, immersivo o altri aggettivi che descrivono la direzione visiva desiderata
  • Nome del progetto per la persistenzaPassa -p "Project Name" a --design-system per nominare la sottodirectory del design system e il file MASTER.md
  • Regolatori di design (opzionali)Tre slider da 1 a 10: --variance (centrato a audace/asimmetrico), --motion (sottile a coreografia complessa), --density (spazioso a denso/scala di spaziatura da dashboard)

03 Dentro la skill

Regole che la skill ui-ux-pro-max 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.

  1. Accessibilità prima di tutto

    Priorità 1 (CRITICA). Garantisca un contrasto di 4,5:1, testo alternativo, navigazione da tastiera e aria-label. Non rimuova mai gli anelli di focus né utilizzi pulsanti solo icona senza etichetta.

  2. Aree tattili minime 44×44px

    Priorità 2 (CRITICA). Il tocco e l'interazione devono avere dimensione minima 44×44px, spaziatura di almeno 8px e feedback di caricamento. Eviti di basarsi solo sull'hover e sui cambiamenti di stato istantanei (0ms).

  3. Riprovi una volta in caso di risultati vuoti

    Se la ricerca restituisce 0 risultati, riprovi una volta con una query più ristretta o un dominio/stack esplicito.

  4. Usi la modalità di ricerca più ridotta

    Scegliere --design-system per un nuovo progetto o pagina, un singolo --domain esplicito per un problema o bug di componente specifico, --stack per uno stack di implementazione noto.

  5. Non Assumere Mai uno Stack

    Rilevare lo stack da package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json o app.json. Se non è rilevabile nulla e le indicazioni sullo stack sono importanti, chiedere all'utente.

  6. Invocare Search con il Percorso Completo

    Eseguire sempre python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" con il percorso completo, non relativo.

  7. Non Sovrascrivere il Master Senza Autorizzazione

    Se design-system/project-slug/MASTER.md esiste, --persist salta la scrittura e lo lascia intatto a meno che non venga passato --force.

  8. Interrogare l'Esito Semantico Prima dello Stack

    Per bug di layout del testo e di componenti compatti, cercare prima l'esito semantico UX (bilanciamento riga di titolo orfana, avvolgimento etichetta badge chip), poi lo stack rilevato per l'implementazione.

04 Mettila al lavoro

Installa ui-ux-pro-max in Claude Code o Codex

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

Aggiungi ui-ux-pro-max 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/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Forma generica della CLI skills per .claude/skills/ui-ux-pro-max/SKILL.md; il repository potrebbe 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 dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

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 il domain restituito, l'identità del primo risultato e l'adeguatezza al prodotto e alla piattaforma dell'utente prima di applicare i risultati della ricerca
  • Riprovare una volta con una riscrittura più ristretta o un domain/stack esplicito quando l'output è vuoto o fuori tema.
  • Leggere un MASTER.md esistente prima di decidere se --force è giustificato per rigenerarlo
  • Per il lavoro sull'accessibilità, interrogare un esito osservabile alla volta usando termini espliciti di esito di accessibilità e verificare che il risultato corrisponda alla specifica interazione o al criterio WCAG

In OpenDesign ui-ux-pro-max è integrato: Plugins → Skills, selezionarlo nella barra superiore.

Scarica OpenDesignLeggi 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
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
File della skill
.claude/skills/ui-ux-pro-max/SKILL.md Checksum del contenuto registrato alla verifica; commit 7f69fed
License
MIT Da LICENSE.
Stelle del repository
127.450 Snapshot GitHub preso il 2026-09-14 per l'intero repository nextlevelbuilder/ui-ux-pro-max-skill, che contiene 7 skill in questo catalogo. Non è un punteggio o conteggio d'uso per ui-ux-pro-max.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Quando ApplicarloDa usare per struttura UI, design visivo, interazione, qualità UX. Da saltare per backend, API, infrastruttura.
  2. Categorie di Regole per Priorità10 categorie da Accessibility (CRITICAL) a Charts (LOW) con controlli chiave e anti-pattern
  3. Eseguire lo strumento di ricercaInvocare search.py con il percorso completo dalla directory della skill. Richiede Python 3.x, senza dipendenze esterne.
  4. Contratto della QueryScegliere la modalità di ricerca più ridotta. Un'intenzione dominante, 2-5 termini, verificare domain/adeguatezza, riprovare una volta se vuoto.
  5. Fase 1: Analizzare i Requisiti dell'UtenteEstrarre il tipo di prodotto, il pubblico, le parole chiave di stile e rilevare lo stack da package.json o equivalente.
  6. Fase 2: Generare il Design SystemUsare --design-system per nuove pagine/progetti. Aggrega corrispondenze di prodotto/stile/colore/landing/tipografia.
  7. Fase 2b: Salvare il Design SystemAggiungere --persist e --output-dir per scrivere MASTER.md. Il Master esistente viene saltato a meno che non sia autorizzato --force.
  8. Fase 2c: Design DialsSlider opzionali da 1 a 10 per varianza, movimento, densità per regolare l'output di --design-system.
  9. Fase 3: Integrare con Ricerche DettagliateInterrogare i domain product, style, color, typography, google-fonts, chart, ux, landing, icons, gsap, react, web.
  10. Passo 4: Linee Guida per lo StackUsa --stack con lo stack rilevato per indicazioni specifiche di implementazione. 22 stack disponibili.
  11. Se una ricerca restituisce 0 risultatiRiprova una volta con una query più ristretta. Se resta vuota, ricorri alla tabella delle priorità e informa l'utente.
  12. Consigli per Risultati MiglioriUn intento, 2-5 termini per query. Riprova una volta. Usa --design-system per il nuovo, --domain per il mirato.
Descrizione della skill
"Intelligenza per il design UI/UX per web, mobile e desktop. Questa skill va usata quando si progettano, costruiscono, revisionano o correggono interfacce, incluse pagine, componenti, design system, accessibilità, interazione, layout responsive, tipografia, colore, grafici e implementazione UI specifica per lo stack. Dati locali ricercabili: 79 stili ricercabili (50 attivi), 192 palette di prodotto e profili di ragionamento, 74 abbinamenti di font, 119 linee guida UX, 105 icone, 17 preset GSAP, 25 tipi di grafico e 22 stack."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 15.922 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill ui-ux-pro-max

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

Di cosa ha bisogno la skill per funzionare?

Lo script di ricerca richiede Python 3.x senza dipendenze esterne. Deve essere invocato con il suo percorso completo dalla directory della skill usando python, python3 o py -3. Il README contiene le istruzioni di installazione se Python non è presente.

Come posso sovrascrivere il design system per una pagina specifica?

Passa --page "page-name" durante la persistenza per creare design-system/project-slug/pages/page-name.md. Quando costruisce quella pagina, l'agente legge prima MASTER.md, poi verifica se esiste pages/page-name.md. Se esiste, le sue regole sovrascrivono Master. Altrimenti vengono usate esclusivamente le regole di Master.

UI UX Pro Max

Esegui ui-ux-pro-max su un task di design UI reale.

La skill ui-ux-pro-max è inclusa in OpenDesign. Scarica l'app, seleziona la skill in Plugins → Skills, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max