106.9K+Scarica
Vai alla guida all’uso
Critique Compositiondi owl-listener

Critique Composition Skill.

Spiega perché un layout renderizzato sembra sbilanciato o scollegato.

  • Composizione
  • Gerarchia
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · critique-compositionSKILL.md
Attività Spiega perché un layout renderizzato sembra sbilanciato o scollegato. Risultati Una revisione della composizione organizzata in quattro dimensioni esplicite. Prima di iniziare La skill valuta la composizione renderizzata, senza inventare rilievi basandosi solo su un brief.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Spiega perché un layout renderizzato sembra sbilanciato o scollegato

Valuta equilibrio, spazi vuoti, ritmo e raggruppamento percettivo di una schermata renderizzata con osservazioni precise e correzioni attuabili.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Critique Composition esamina le qualità spaziali di una schermata renderizzata. Considera peso visivo, spazio vuoto, intervalli ripetuti e raggruppamento percettivo per spiegare perché il layout sembra instabile o scollegato. È particolarmente utile quando la gerarchia di base è comprensibile, ma la disposizione resta poco convincente.

Il rapporto distingue osservazione, problema e correzione per quattro dimensioni: equilibrio, spazi vuoti, ritmo e Gestalt. Questa struttura trasforma «la pagina sembra strana» in una discussione concreta su una sezione affollata, un controllo isolato o uno schema ripetuto la cui spaziatura cambia senza motivo.

Risultati attesi

  • Una revisione della composizione organizzata in quattro dimensioni esplicite.
  • Osservazioni neutrali collegate a problemi spaziali specifici.
  • Correzioni attuabili e un livello di gravità per ciascuna dimensione.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Leggi la composizione completa

    Esamina la schermata renderizzata e la distribuzione del peso visivo. Valuta se simmetria o asimmetria sembrano intenzionali e dove si trova il baricentro della composizione.

  2. 02
    Esamina spaziatura e ritmo

    Confronta gli intervalli ampi tra sezioni con quelli ridotti dentro i gruppi. Cerca padding incoerente, ripetizioni che perdono regolarità e passaggi bruschi tra aree dense e vuote.

  3. 03
    Verifica il raggruppamento percettivo

    Esamina prossimità, somiglianza, separazione figura-sfondo, continuità e chiusura. Individua elementi separati dai contenuti correlati o raggruppati con controlli estranei.

  4. 04
    Scrivi correzioni mirate

    Per equilibrio, spazi vuoti, ritmo e Gestalt, fornisci osservazione, problema e soluzione specifica. Valuta ogni dimensione senza trasformare una critica mirata in un rifacimento completo non motivato.

02 Quando usarlo

Quando usarla

La skill valuta la composizione renderizzata, senza inventare rilievi basandosi solo su un brief.

Adatta a

  • Un layout appare instabileI contenuti ci sono, ma peso, distanze o raggruppamenti rendono difficile leggere la composizione.
  • Una rifinitura mirataIl team vuole correzioni spaziali mantenendo la direzione visiva approvata.

Limiti da verificare

  • Serve una schermata realeLa skill valuta la composizione renderizzata, senza inventare rilievi basandosi solo su un brief.
  • Ambito specificoLa fonte rimanda enfasi e percorso dello sguardo a una critica separata della gerarchia visiva.
  • Le proposte richiedono verificaUna correzione di spaziatura va comunque esaminata dopo l’implementazione.

Cosa portare

  • Vista renderizzataFornisci la schermata e i viewport o stati del contenuto pertinenti.
  • Contesto di designSpiega equilibrio, raggruppamenti previsti e direzione visiva consolidata.
  • Sistema di spaziaturaIncludi i valori noti di griglia e spaziatura quando le correzioni devono riferirsi a essi.

03 Decisioni importanti

Le decisioni importanti

  1. Linguaggio spaziale concreto

    Il feedback nomina la relazione che rende il layout poco convincente.

  2. Dimensioni separate

    Spazi vuoti e ritmo possono essere valutati indipendentemente dal peso visivo.

  3. Critica attuabile

    Ogni problema è accompagnato da una modifica proposta.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Fornisci la schermata e i viewport o stati del contenuto pertinenti.

File sorgente originale
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa critique-composition per esaminare la panoramica del progetto renderizzata. Mantieni contenuti e direzione visiva, concentrandoti su equilibrio, spazi vuoti, ritmo e raggruppamento percettivo. Individua aree affollate, scollegate o visivamente più pesanti del previsto. Confronta spaziature ripetute di schede e sezioni con la scala esistente. Per ogni dimensione, fornisci un’osservazione neutrale, spiegane la conseguenza e proponi un aggiustamento concreto. Valutala come conforme, problema minore o problema maggiore. Non riprogettare la pagina durante la revisione e segnala giudizi che dipendono da viewport non osservati.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Le osservazioni descrivono relazioni spaziali visibili e specifiche.
  • Le correzioni proposte riguardano la dimensione individuata, non stili estranei.
  • Viewport non osservati e raccomandazioni non implementate rimangono chiaramente segnalati.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
owl-listener
Repository
owl-listener/designer-skills
File della skill
SKILL.md
Licenza
MIT
Snapshot esaminato
2026-11-02 · 9a6930cf84a8
Sintesi editoriale della fonte
Spiega perché un layout renderizzato sembra sbilanciato o scollegato.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Sostituisce la revisione della gerarchia?

Si concentra sulla composizione. La fonte considera enfasi e percorso dello sguardo un ambito di critica separato.

Che cosa comprende il ritmo?

La revisione analizza spaziature, dimensioni, righe, schede e separazioni tra sezioni ripetute che creano una cadenza visiva coerente.

Qual è il formato previsto del rapporto?

Ognuna delle quattro dimensioni riceve osservazione, problema, correzione e valutazione conforme/minore/maggiore.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md