Vai alla guida all’uso
improve-uidi Julien Thibeaut

Improve UI Skill.

Uno skill Claude Code e Codex per design review: verifica una superficie di prodotto rispetto alla propria evidenza progettuale e scrive piani di implementazione.

  • Design Review & Accessibility
  • Report di revisione
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
Metadati iniziali e intestazioni di sezione letti dal file upstream il 14/09/2026 · 7.816 caratteri in totale

01 Cosa fa

Cosa fa lo skill improve-ui 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

Improve UI verifica una superficie di prodotto coerente rispetto al design system che effettivamente la governa, poi scrive piani di implementazione autosufficienti da eseguire da parte di un altro agente. È di sola lettura sul codice sorgente del prodotto: i file vengono creati o modificati solo sotto design-plans, e non sono consentiti dipendenze, formattatori, commit o push.

I risultati devono superare tre prove, contratto, runtime e correzione, più un successivo passaggio di falsificazione, e il report si ferma a tre, ordinati per affidabilità, impatto sull'utente, portata e costo di correzione. È adatto a designer e sviluppatori che revisionano, affinano o puliscono un'interfaccia senza sostituirne l'identità, indagano una deriva del design system, o preparano una consegna di design. I problemi di accessibilità, comportamento, performance e architettura sono fuori ambito salvo richiesta esplicita.

Rapporto di revisione
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Selezionare Un'Unica Superficie Coerente

    Una richiesta generica viene ristretta a un'unica applicazione distribuibile e a un'unica famiglia di superfici coerenti per un compito primario del prodotto; lo skill dichiara questa selezione invece di trattare il repository come un unico prodotto.

  2. 02
    Ricostruire Il Sistema Locale

    Usa una fonte solo dopo aver verificato che sia attuale e governi la superficie selezionata; bozze, proposte, migrazioni ed elenchi di attività descrivono intenti futuri a meno che non siano esplicitamente accettati e attuali.

  3. 03
    Richiedere Tre Prove per Ogni Candidato

    Ogni candidato mantenuto necessita di un contratto, un percorso runtime e una correzione deterministica; risultati di ricerca, ripetizioni e differenze di implementazione producono candidati, non risultati.

  4. 04
    Verificare e Falsificare

    I candidati vengono nuovamente attaccati prima della rendicontazione, e solo quelli che superano questo passaggio sono ammessi nella tabella dei risultati.

  5. 05
    Report, Ordinato e Limitato

    I risultati sono ordinati per affidabilità, impatto sull'utente, portata e costo di correzione, e l'elenco viene troncato a tre.

  6. 06
    Specificare Le Modifiche Selezionate

    Prima della scrittura, le fonti citate vengono riaperte, il commit corrente viene registrato quando disponibile, e vengono identificati primitivi riutilizzabili ed esempi esatti nelle superfici interessate.

02 Trova la tua applicazione

Quando usare la skill improve-ui

Usa la skill improve-ui in Claude Code o Codex quando il compito è una design review di questo tipo. Ambito e limiti seguenti sono tratti dal file della skill stessa.

Buona applicazione

  • Quando ti viene chiesto di rivedere, raffinare, migliorare o ripulire un'interfaccia senza sostituirne l'identità

Conosci i limiti

  • Non modificare mai il codice sorgente del prodotto. Crea o modifica file solo sotto design-plans/.
  • Non installare dipendenze, eseguire formatter, fare commit, push o mutare in altro modo l'albero di lavoro.
  • Non aggiornare la documentazione di design. Registra le modifiche accettate alla documentazione nel piano per chi lo eseguirà.
  • Usa evidenza renderizzata solo quando l'utente la fornisce o richiede esplicitamente un'ispezione visiva.

03 Dentro la skill

Cosa porta la skill improve-ui alla design review

4 cose che il SKILL.md istruisce Claude Code o Codex a fare, nell'ordine delle sezioni del file.

  1. 1. Seleziona la superficie

    Rispetta l'ambito indicato dall'utente. Se la richiesta è ampia, seleziona un'applicazione distribuibile e una famiglia di superfici coerente che rappresenti un compito di prodotto primario.

  2. 2. Ricostruisci il sistema locale

    Controlla DESIGN.md, le linee guida del repository e la documentazione di design locale alla superficie.

  3. Linguaggio di design

    Scrivi Nessuna documentata sotto Eccezioni esplicite a meno che una fonte citata non identifichi esplicitamente l'eccezione.

  4. 3. Dimostra i risultati

    Prima di applicare il gate di prova, ispeziona le etichette visibili all'utente, la presentazione degli stati attivi, i branch responsivi e le varianti sibling di ogni superficie tracciata per contraddizioni interne.

04 Mettila al lavoro

Installa improve-ui in Claude Code o Codex

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

Aggiungi improve-ui 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/ibelick/ui-skills --skill improve-ui

Forma generica della CLI skills per skills/improve-ui/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo task di revisione del design

Il SKILL.md non include un prompt di esempio; questo starter è scritto dalla riga riassuntiva del catalogo. Sostituisci la riga del task con il tuo brief reale.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Fonte: prompt iniziale scritto dall'uso in una riga del catalogo (non dal SKILL.md).

Verifica il primo risultato

Prima di accettare l'output, cerca questi elementi nella trascrizione e nei file:

  • Il risultato viene consegnato come report di revisione, come elencato nel catalogo per questo skill.
  • L'agente nomina la skill improve-ui nel suo piano o trascrizione prima di produrre il risultato.
  • I tuoi contenuti, nomi e numeri appaiono invariati nell'output.

In OpenDesign importa improve-ui dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

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

Repository
github.com/ibelick/ui-skills Branch main
File della skill
skills/improve-ui/SKILL.md Checksum del contenuto registrato alla verifica; commit 79081ab
License
MIT Da LICENSE.
Stelle del repository
8.402 Snapshot GitHub del 14 settembre 2026 per l'intero repository ibelick/ui-skills, che contiene 5 skill presenti in questo catalogo. Non è una valutazione né un conteggio d'uso per improve-ui.
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.
Descrizione della skill
«Verifica una superficie di prodotto esistente rispetto alla sua stessa evidenza di design, identifica problemi UI verificati e scrivi piani di implementazione autonomi per un altro agente. Rigorosamente in sola lettura sul codice di prodotto. Usa quando ti viene chiesto di rivedere, raffinare, migliorare o sistemare un'interfaccia senza sostituirne l'identità; investigare drift del design-system; o preparare una consegna di design.»

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

Improve UI

Esegui improve-ui su un vero compito di design review.

Scarica OpenDesign, importa improve-ui dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Terminale
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows