Mocker
Mocker è il tool gratuito che mostra in tempo reale come palette di colori e tipografia funzionano insieme su un sito completo, prima ancora di scrivere una riga di codice. L’abbiamo creato per allinearci con i clienti sull’aspetto del sito fin dall’inizio, e poi reso pubblico.
Il problema
Prima di iniziare un progetto serve mettere d’accordo cliente e team su una cosa difficile da spiegare a parole: che aspetto avrà il sito. Colori e font descritti a voce o visti su una palette isolata non rendono l’idea, e si rischia di scoprire solo a lavoro avanzato che la direzione non era quella giusta — con tempo perso da entrambe le parti.
La soluzione
Abbiamo costruito Mocker per far vedere ai clienti, prima di partire, che tipo di sito, palette e font volevano davvero. Selezioni i colori e i caratteri e li vedi subito applicati a un sito completo e funzionante: bottoni, form, badge, tipografia. Una volta definito l’aspetto, lo esporti e si va in produzione molto più velocemente, senza ambiguità.
Anteprima dal vivo, non su una tavolozza isolata
La forza di Mocker è il contesto: invece di guardare cinque quadratini di colore, vedi quei colori e quei font su componenti reali di un sito. Questo rende immediato capire se una palette funziona davvero o se un font è leggibile, e accorcia drasticamente le discussioni iniziali su look & feel.
Dal design al codice in un export
Quando le scelte sono definite, Mocker esporta il design system in CSS Variables, Tailwind Config, JSON o Markdown — o lo copia negli appunti. Usa un sistema essenziale a 5 colori (sfondo, testo, primario, secondario, accento) che copre la maggior parte dei casi, con un contrast checker che indica la conformità AA/AAA per l’accessibilità.
Gratuito, senza registrazione
Mocker è completamente gratuito, non richiede registrazione e non ha limiti d’uso. Include preset pronti (Modern, Minimal, Playful, Corporate, Creative) e salva i progetti localmente nel browser, con export JSON per i backup. È nato come strumento interno e l’abbiamo aperto a chiunque progetti interfacce.
Come funziona
- 1
Scegli
Selezioni palette e tipografia, oppure parti da un preset (Modern, Minimal, Corporate…).
- 2
Visualizza
Vedi colori e font applicati in tempo reale a un sito completo e funzionante.
- 3
Verifica
Controlli i rapporti di contrasto con gli indicatori di conformità AA/AAA.
- 4
Esporta
Scarichi il design system in CSS Variables, Tailwind Config, JSON o Markdown.
- 1
Scegli
Selezioni palette e tipografia, oppure parti da un preset (Modern, Minimal, Corporate…).
- 2
Visualizza
Vedi colori e font applicati in tempo reale a un sito completo e funzionante.
- 3
Verifica
Controlli i rapporti di contrasto con gli indicatori di conformità AA/AAA.
- 4
Esporta
Scarichi il design system in CSS Variables, Tailwind Config, JSON o Markdown.
In sintesi
Anteprima in tempo reale di colori e font su un sito completo
Export in CSS Variables, Tailwind Config, JSON e Markdown
Sistema a 5 colori con contrast checker AA/AAA
Preset pronti e salvataggio locale nel browser
Gratuito e senza registrazione
Tecnologie
Risultati
Allineamento col cliente sull’aspetto del sito prima dello sviluppo
Riduzione dei tempi di avvio progetto e dei refusi di direzione
Strumento interno trasformato in tool pubblico gratuito
Continua a esplorare
Hai un’idea simile?
Raccontaci il tuo progetto: ti rispondiamo con una proposta concreta e un preventivo chiaro, senza impegno.
Contattaci