Huedi dominikmartn

Hue Skill.

Crea le regole che guidano il lavoro futuro sulle interfacce, non solo una schermata finita.

Design system
Creazione di Skill
Design token

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · HueSKILL.md

Attività Design system Produce • Una Skill di design riutilizzabile con design-model.yaml come fonte di riferimento. • File di riferimento per token, componenti e mappature di piattaforma. • Anteprime HTML di dashboard, libreria di componenti, landing page e schermata di app. Prima di iniziare Servono accesso ai file, strumenti adeguati per ispezionare i riferimenti, Node per validate.mjs e una revisione nel browser per avere certezza visiva. La disponibilità degli strumenti influisce sulla fedeltà dell'estrazione.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Trasforma un linguaggio di design in una Skill riutilizzabile

Genera una skill di design riutilizzabile a partire dall'analisi dei riferimenti, da un modello YAML condiviso, dalla documentazione e da quattro anteprime validate.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Come funziona

Hue è una meta-Skill che produce un'altra Skill di linguaggio di design. Può partire da un brand, un URL, una codebase, screenshot, una descrizione o una Skill esistente da remixare. Separa i fatti di design osservati dalle scelte derivate, registra le decisioni in design-model.yaml e genera da quel modello la documentazione e le anteprime successive.

Il risultato comprende più di colori e font. La fonte copre inventari dei componenti, ragionamenti sulle alternative per le icone, composizione dell'hero stage, token chiari e scuri, mappature di piattaforma e quattro dimostrazioni visive. Richiede inoltre validazione e revisione visiva. La fonte esaminata contiene indicazioni non coerenti sull'origine dei font, quindi licenze e disponibilità esatte dei font vanno verificate, senza considerare compatibile ogni raccomandazione.

Risultati attesi

Una Skill di design riutilizzabile con design-model.yaml come fonte di riferimento.
File di riferimento per token, componenti e mappature di piattaforma.
Anteprime HTML di dashboard, libreria di componenti, landing page e schermata di app.

Vedi il brief di esempio

Dal brief alla revisione

01
Analizza l'input
Raccogli valori reali dalla fonte o dagli stili calcolati quando possibile e segnala le osservazioni con minore affidabilità ricavate da screenshot o dal recupero del testo.
02
Conferma la direzione
Rivedi l'interpretazione estetica e i token principali prima di generare un insieme di file più ampio.
03
Costruisci prima il modello
Registra in YAML primitive, ruoli semantici, componenti, alternative per le icone e decisioni sull'hero stage.
04
Genera e valida
Produci riferimenti e anteprime dal modello, esegui il validatore fornito e controlla i risultati renderizzati in entrambe le modalità.

02 Quando usarlo

Quando usarla

Servono accesso ai file, strumenti adeguati per ispezionare i riferimenti, Node per validate.mjs e una revisione nel browser per avere certezza visiva. La disponibilità degli strumenti influisce sulla fedeltà dell'estrazione.

Quando è adatta

Linee guida di brand riutilizzabiliUtile quando sessioni ripetute con l'assistente richiedono un linguaggio visivo più esplicito.
Remix di Skill di designPermette di cambiare alcune dimensioni scelte mantenendo la filosofia esistente e le regole non coinvolte.

Limiti da verificare

Non conferisce la proprietà degli assetFont proprietari, icone, fotografie e render di prodotto osservati non sono automaticamente concessi in licenza per la ridistribuzione.
Non è una clonazione esatta del brandI kit di ripiego e i componenti derivati devono essere indicati con onestà.
Analisi dipendente dall'ambienteL'ispezione degli stili calcolati, gli screenshot del browser e la validazione locale richiedono strumenti disponibili; input più deboli riducono l'affidabilità.

Cosa portare

Riferimento di designFornisci l'URL di un brand, una codebase, screenshot, una direzione scritta o una Skill esistente.
Ambito e piattaformaSpecifica il dominio del prodotto e se le mappature per CSS, Tailwind o SwiftUI sono utili.
Vincoli su asset e brandIndica materiali proprietari, alternative approvate e decisioni che devono restare invariate.

03 Decisioni importanti

Decisioni importanti

Osservato o derivato
Un pulsante trovato nella fonte e un toggle appena dedotto non vanno presentati come ugualmente verificati.
Un solo modello limita le divergenze
Generare documenti e anteprime dallo stesso YAML riduce le discrepanze tra token dichiarati e valori renderizzati.
Prova sulle schermate applicative
Un linguaggio di design che funziona solo su un hero può fallire su una schermata applicativa densa; la quarta anteprima verifica proprio questa differenza.

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.

Controlla la configurazione

Usa il repository completo del generatore con i suoi template e lo script di validazione. Le cartelle delle Skill generate hanno propri nomi di rilevamento e percorsi di installazione, che variano a seconda dell'agente.

File sorgente originale

https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Parti da un solo risultato

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

Brief di esempio

Usa hue per creare una Skill di linguaggio di design riutilizzabile dal codice UI locale e dagli screenshot forniti. Distingui i componenti osservati da quelli derivati, mantieni il nostro vero colore di accento e il trattamento degli angoli e proponi alternative con licenza adeguata per font e icone. Conferma la direzione e i token principali, poi genera il modello, i riferimenti e quattro anteprime con le prove di validazione.

Controlla il risultato

Verifica l'output effettivo rispetto a questi criteri osservabili.

Ogni token renderizzato è riconducibile a design-model.yaml.
Gli asset proprietari osservati e le alternative scelte sono chiaramente distinti.
Tutti i file HTML generati superano la validazione strutturale e un'effettiva revisione visiva.

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

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata, collegata sotto. Il comportamento e i requisiti upstream possono cambiare.

Autore della fonte: dominikmartn
Repository: dominikmartn/hue
File della Skill: SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · a910e31cd24b

Sintesi editoriale della fonte

Genera una skill di design riutilizzabile a partire dall'analisi dei riferimenti, da un modello YAML condiviso, dalla documentazione e da quattro anteprime validate.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un segnale di popolarità datato, non un dato di utilizzo della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Hue crea solo una landing page?

No. L'anteprima della landing è una dimostrazione di una Skill di design generata, insieme a dashboard, libreria di componenti e schermata di app.

Può rivedere una Skill di design esistente?

Sì. Il percorso di remix della fonte modifica prima il modello e rigenera solo i file interessati, senza sostituire l'intero sistema.

Sostiene che il brand di origine usi il kit di icone di ripiego?

Non dovrebbe. La fonte distingue esplicitamente lo stile di icone osservato dal kit con licenza libera scelto per le anteprime.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale 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 OpenDesign Sfoglia le Skill di design