The builder reads the supplied font's fvar axes and cmap character coverage, then embeds the authorized font in an offline specimen tool. Browser controls expose those actual axes; exports include a PNG, live-text SVG, and editable settings JSON.
- Richiede
- Python 3 · browser
v1.0.0 · Aggiornata il 25 ott 2026 · 351 KB · Usala per lavori personali e per clienti; per favore non rivendere né condividere il pacchetto.
Cosa ottieni
Uno strumento HTML offline portatile con controlli interattivi reali
Impostazioni JSON modificabili e builder specifico per l'attività
Ideale per
- Type exploration, brand typography studies, and portable font specimens.
Non adatta a
- Font licensing clearance, converting static fonts to variable fonts, or identical rendering in every SVG viewer.
Come funziona
Include un renderer locale
Prepare the actual input
Il font OFL incluso oppure un font variabile con licenza.
Apply the supported controls
Replace the variable font with one you are licensed to embed. Edit one line of specimen text. Adjust only axes present in that font and export the result.
Build and review the result
Apri output/index.html in un browser. Usa i controlli reali e scarica gli artefatti esportati. Il builder non pubblica un sito web.
Come funziona il flusso
Come funziona Variable Type Specimen Lab
The builder reads the supplied font's fvar axes and cmap character coverage, then embeds the authorized font in an offline specimen tool. Browser controls expose those actual axes; exports include a PNG, live-text SVG, and editable settings JSON.
Cosa contiene la skill
Cosa puoi modificare
- Replace the variable font with one you are licensed to embed.
- Modifica una riga di testo campione.
- Regola solo gli assi presenti in quel font ed esporta il risultato.
Cosa verificare prima della consegna
- The builder checks real font axes, value ranges, and character coverage.
- Ispeziona le esportazioni PNG/SVG reali e il testo lungo nel browser; il supporto dei font del visualizzatore può variare.
Vedi i file del pacchetto
Questi sono alcuni file operativi di questa versione, con il loro ruolo effettivo. Il pacchetto completo contiene anche istruzioni e le note di licenza applicabili.
Legge gli assi fvar reali e la copertura dei glifi cmap, poi incorpora il font con licenza per l'uso offline.
scripts/project.pyApplies the actual font axes, checks for missing characters, and exports live-text SVG or raster PNG.
scripts/studio.jsLocal validation, protected output, and artifact construction.
scripts/build.pyEsempio eseguibile con controlli realmente supportati.
examples/project.jsonLimiti specifici del meccanismo e criteri di revisione visiva.
references/production.md
Perché usare questa skill
Partire da questo pacchetto
The builder reads the supplied font's fvar axes and cmap character coverage, then embeds the authorized font in an offline specimen tool. Browser controls expose those actual axes; exports include a PNG, live-text SVG, and editable settings JSON. The package supplies the working example, bounded inputs, and export route so these do not need to be designed from a plain prompt.
Confronta le opzioni
Un prompt, una skill scritta da te o questo flusso?
Partire da un prompt
Il tuo agente può creare contenuti a partire da una semplice richiesta. Per quel progetto occorre comunque definire il brief, le regole visive, la scelta dei materiali, il formato finale e il processo di revisione.
Scrivere la tua skill
Scegli e mantieni le istruzioni riutilizzabili, le impostazioni predefinite, la struttura dei file e i controlli. È utile se il tuo processo richiede regole o integrazioni diverse.
Un flusso di lavoro creato per PopNow
Questo flusso di lavoro è stato sviluppato per PopNow. I file sorgente, le dipendenze incluse e le note applicabili fanno parte del pacchetto; le funzionalità descritte di seguito si riferiscono a questa versione.
Guida verificata il 25 ott 2026
Quanto costerà?
L'esempio procedurale o basato su font incluso viene eseguito localmente senza generazione di media. Il tempo di calcolo e l'agente o il visualizzatore esterno utilizzati sono al di fuori degli addebiti di generazione di PopNow. I nuovi media opzionali richiesti in seguito necessitano di un proprio preventivo.
Il percorso fornito viene eseguito in locale. Richiedere nuovi contenuti è una scelta separata. La skill è gratuita. Il costo dei nuovi contenuti viene indicato prima della generazione.
Il pacchetto della skill
Installazione gratuita entro il limite di download del tuo account. La licenza del pacchetto copre i lavori personali e per i clienti; la ridistribuzione è esclusa.
Materiali esistenti e lavoro locale
Riutilizzare materiali adatti, modificare file ed eseguire l'assemblaggio locale non richiede chiamate a un modello di generazione PopNow. Il lavoro viene comunque svolto dal tuo computer e dall'ambiente di esecuzione necessario.
Il tuo agente e l'hosting
Abbonamenti, computer ospitati, distribuzione online o altri costi di fornitori appartengono ai rispettivi servizi. L'installazione di questa skill non include tali servizi.
Come funziona la fatturazione PopNow
Le connessioni che usano una chiave API PopNow, comprese quelle MCP con chiave API, utilizzano il saldo API separato in USD. Una connessione ChatGPT o Claude autorizzata tramite OAuth utilizza i crediti del sito. I saldi sono separati; approvi la spesa in base al preventivo mostrato dalla tua connessione.
Si applicano i limiti di download e le condizioni attuali dell'account. Un pacchetto gratuito non significa generazione gratuita illimitata.
Come usarla
Tu dici
Usa la skill PopNow “Variable Type Specimen Lab” (variable-type-specimen-lab) per questo: Inspect a real variable font, adjust its supported axes, and export live-text specimens with glyph checks. Start with the bundled project, make the requested edits, and inspect the actual output.
Poi prova
Replace the variable font with one you are licensed to embed.
Modifica una riga di testo campione.
Cosa tenere pronto
- Il font OFL incluso oppure un font variabile con licenza.
- Python con supporto WOFF di fontTools per la ricostruzione, più un browser aggiornato.
Skill simili
Vedi tutte →
WebJigsaw photo playground
+25Trasforma una fotografia in un puzzle giocabile con pezzi curvi, con trascinamento, aggancio e controlli da tastiera.
WebModello di sito per marchio di bevande
+25Sito solare per marchi di bibite e snack con negozio, configuratore di confezioni, mappa dei rivenditori e checkout demo in un file.
WebMondo di carta da scorrere
+25Esplora un paesaggio di carta a strati, trova tre ricordi e componi un piccolo diario della passeggiata.
WebTemplate sito e-commerce di sneaker
+25Un negozio completo di scarpe o abbigliamento con catalogo, pagine prodotto, carrello e checkout demo in un unico file HTML.
WebFractal zoom art
+25Esplora un frattale calcolato, scegli un dettaglio ingrandito ed esporta la vista esatta come opera d'arte e brief riutilizzabile.
WebSito portfolio in stile scrapbook
+25Un CV online su più pagine fatto di oggetti di carta, con case study e un curriculum stampabile.
WebFourier Line Orbit
+25Reconstruct a closed drawing using rotating Fourier circles and export the selected harmonic detail.
WebLaboratorio di design pieghe pop-up
+25Apri un collegamento di carta simmetrico, regola la geometria degli attacchi ed esporta una prova di piega misurata.
WebMicrosito per disco in vinile
+25Presenta un album come una copertina tattile con due lati da ascoltare, note e un disco che gira.
WebSito di prodotti hardware
+25Nomi dei modelli enormi e sottili su scatti da studio argentati, card di specifiche e una gamma in scala.
WebModello di sito per agenzia di viaggi
+25Un sito centrato sulle foto per tour, guide o rifugi, con ricerca dei viaggi, richieste di prenotazione e un quiz per trovare il viaggio.
WebSito per designer freelance
+25Un sito audace per un designer solista che vende pacchetti a prezzo fisso: pagine dei piani, casi di studio e modulo di brief.
WebTemplate sito glassmorphism
+25Pillole di vetro su fondo quasi nero, titolo serif enorme con una parola in corsivo e iscrizione via email.
WebStudio dello Stress Fotoelastico
+25Componi opere luminose con frange di stress, carichi modificabili e angoli del polarizzatore in uno studio portatile offline.
WebOrthogonal word sculpture
+25Interseca due parole estruse in un unico solido che si legge diversamente da punti di vista perpendicolari.
WebCreatore di avatar 3D
+25Crea nel browser un personaggio 3D tenero come un peluche e salvalo come PNG trasparente o pagina 3D.
WebSito di CV accademico
+25Organizza ricerca, didattica e incarichi con filtri delle pubblicazioni ed export BibTeX.
WebCalendario heatmap
+25Un anno di attività quotidiana come griglia di calendario sfumata, con serie, totali e accesso da tastiera.
WebSito di prodotti agricoli
+25Filtra attrezzature per coltura e regione, confronta specifiche e prepara richieste tecniche.
WebLanding page SaaS per l’AI
+25Carta sabbia calda, binari sottili e tratteggi attorno a una kanban dal vivo dove un assistente pianifica.
WebSezione hero animata
+25Una hero per landing page con una parola del titolo che ruota con delicatezza, due pulsanti e un riquadro immagine largo.
WebPortfolio sala giochi
+25Mostra i progetti come cartucce in una piccola sala giochi, con navigazione touch e da tastiera.
WebPortfolio di architettura
+25Filtra i progetti, cambia le unità di superficie e stampa una selezione.
WebSito per prodotti audio
+25Confronta le specifiche e ascolta i tuoi file in un vero test A/B locale.
WebAnalizzatore di spettro audio
+25Analizza registrazioni locali con spettro reale, frequenza dominante e livello del segnale.
WebModello di sito per casi studio
+25Collega prove e indicatori, verifica i cambiamenti e segnala i dati mancanti.
WebDashboard del flusso di cassa
+25Riconcilia saldo iniziale, entrate e uscite con un saldo aggiornato per ogni operazione.
WebRacconto a scorrimento cinematografico
+25Racconta una storia fotografica in quattro atti con immagini ampie, movimento lieve e modalità panoramica.
WebSito marketing per CMS
+25Modifica articoli JSON, verifica i campi, visualizza ed esporta contenuti validi.
WebPagina per relatori
+25Trova interventi per tema e durata ed esporta la presentazione e le esigenze tecniche.
WebCostellazione di ricordi
+25Collega sei ricordi fotografici come stelle ed esplorali liberamente o nell’ordine del racconto.
WebModello di sito per imprese edili
+25Calcola quantità e prezzi unitari, separa gli imprevisti ed esporta il preventivo indicativo.
WebModello di sito di consulenza
+25Confronta i formati per obiettivo, tempi e dimensione del gruppo ed esporta un brief.
WebDashboard di conversione
+25Calcola conversioni e abbandoni per fase della stessa coorte, con una tabella verificabile.
WebSito per agenzia creativa con hero shader
+25Hero shader WebGL dal vivo dietro un’affermazione in basso, navigazione a pillola e griglia di casi di studio.
WebPortale onboarding clienti
+25Guida le fasi dipendenti con responsabili, avanzamento ponderato e lista esportabile.
WebLanding page SaaS scura
+25Un sito di marketing scuro e ricco di animazioni per un prodotto software, consegnato come un unico file HTML autonomo.
WebVetrina del design system
+25Modifica colori, calcola contrasti reali ed esporta token coerenti in CSS e JSON.
WebSito portfolio per designer
+25Sei card inclinate attorno a un titolo sfumato su grigio calmo, una card ritratto rossa e casi di studio.
WebDiario dello sviluppatore
+25Crea un diario tecnico ricercabile con codice leggibile e feed RSS esportabile.
WebSito portfolio per sviluppatori
+25Un sito personale scuro per ingegneri, con case study, articoli, talk, curriculum e modulo di contatto.
WebLanding page per ebook
+25Leggi capitoli originali, regola il testo e salva i progressi in locale.
WebTabella budget modificabile
+25Ricalcola preventivo, spesa effettiva e residuo modificando quantità e prezzi unitari.
WebSito SaaS editoriale
+25Hero diviso blu notte, titolo serif accanto a una foto documentaria, fasce inclinate e un accento cobalto.
WebGrafico delle presenze
+25Confronta iscrizioni, accessi e capienza, calcolando partecipazione ponderata e assenze.
WebModello di sito per eventi
+25Filtra le sessioni, rileva sovrapposizioni ed esporta un programma personale.
WebConfronto di esperimenti
+25Confronta conversioni, campioni e intervalli di Wilson senza proclamare un vincitore.
WebPortale di rapporti finanziari
+25Cerca per anno e tipo, confronta indicatori ed esporta dati.
WebPrototipo di ricerca voli
+25Filtra voli locali per tratta, data e viaggiatori e confronta totale, durata e scali.
WebDiagramma di architettura interattivo
+25Un diagramma di sistema cliccabile e offline, costruito da un modello JSON verificato, con le evidenze dietro ogni riquadro.
WebPiccolo museo interattivo
+25Esplora tre sale, osserva gli oggetti da vicino e raccogli il tuo personale biglietto di visita.
WebSito di interior design
+25Crea un brief esportabile con dimensioni, budget e priorità della stanza.
WebSito per gioiellerie
+25Verifica materiali, misure e varianti disponibili ed esporta una lista di richieste.
WebEsploratore di knowledge graph
+25Trasforma gli appunti di progetto in un grafo offline e ricercabile, dove ogni affermazione rimanda alla sua riga di origine.
WebTemplate dashboard KPI
+25Quattro KPI con variazioni, un grafico a linee, una tabella di dettaglio e barre obiettivo.
WebLanding page da mockup AI
+25Vedi prima tre progetti a pagina intera, scegline uno: il tuo agente lo costruisce come codice pulito.
WebLista d’attesa con inviti
+25Prova codici stabili e una coda locale in una dimostrazione chiaramente indicata.
WebModello di sito per studi legali
+25Crea una lista stampabile per preparare un colloquio in base a servizio e giurisdizione.
WebTemplate sito web per rivista
+25Un sito di rivista con qualità da stampa, articoli, temi, un piccolo shop e abbonamenti, in un unico file HTML.
WebCalcolatore dei prezzi di adesione
+25Calcola costi esatti per persone, periodo ed extra e confronta i piani.
WebSito per campagne non profit
+25Mostra obiettivo e ipotesi di costo e filtra le attività di volontariato per durata.
WebLanding page per corsi online
+25Verifica i prerequisiti, esplora il programma e calcola un piano di studio settimanale.
WebDashboard operativa
+25Ordina attività per priorità, responsabile e scadenza con passaggi di stato espliciti.
WebHero con animazione di particelle
+25Testo su carta calda accanto a una sfera di punti inchiostro e verde acqua che cambia forma per ogni idea.
WebSito personal brand
+25Un ritratto sfumato su carta calda sotto una sottile parentesi, con affermazioni leggere e grassetto ai lati.
WebModello di sito per negozio di animali
+25Negozio funzionante di prodotti per animali: catalogo, varianti, carrello, pianificatore delle ricariche e checkout demo in un file HTML.
WebEditor di sequenze fotografiche
+25Ordina un racconto fotografico, scegli tagli e momenti narrativi, poi esporta e ripristina la sequenza esatta.
WebLaboratorio di adesivi fotografici
+25Disponi le foto con mouse o tastiera, ruotale, annulla le modifiche e salva il collage in PNG.
WebPortfolio fotografico
+25Organizza serie fotografiche con visualizzatore da tastiera e provino a contatto stampabile.
WebModello di sito per podcast
+25Un sito per podcast con un hero riproducibile, archivio degli episodi, pagine degli ospiti e un lettore che continua a suonare.
WebSezione prezzi disegnata a mano
+25Una tabella prezzi in stile quaderno, con card inclinate a inchiostro, interruttore annuale e tema scuro, in un unico file offline.
WebDirectory di integrazioni prodotto
+25Cerca per funzioni e autenticazione e crea una lista di configurazione.
WebPagina di lancio cinematografica di prodotto
+25Pagina quasi nera in stile film: titolo serif su luci in movimento, scena notturna, modulo di prenotazione.
WebModello di sito immobiliare
+25Filtra gli immobili per budget e camere e stampa un confronto.
WebSito per articolo di ricerca
+25Una pagina di progetto per il tuo articolo con Figura 1 interattiva, risultati, limiti e citazione con un clic.
WebDashboard della composizione ricavi
+25Confronta importi e quote per categoria riconciliando i totali di ogni periodo.
WebRapporto sui ricavi
+25Mostra ricavi, variazioni e medie mobili, segnalando le date prive di dati.
WebTemplate dashboard di amministrazione
+25Una console di back office funzionante con grafici, tabelle, kanban e calendario, in un unico file HTML offline.
WebTemplate landing page SaaS
+25Un sito di marketing chiaro e sobrio per un prodotto software, con console di prodotto funzionante, prezzi e iscrizione.
WebTabella di dati ricercabile
+25Trasforma CSV in tabelle con ricerca, ordinamento numerico, paginazione ed export sicuro.
WebDashboard stato dei servizi
+25Distingue stato, incidenti e controlli obsoleti in un’istantanea documentata del servizio.
WebModello di sito per società sportiva
+25Sito per club, palestra o studio con orario, pagine degli allenatori, abbonamenti, planimetria dei campi e prenotazione in un unico file.
WebSezione muro delle testimonianze
+25Un muro a colonne o lentamente in movimento di citazioni dei clienti, che pubblica solo le citazioni che le persone hanno approvato.
WebSito di itinerari di viaggio
+25Organizza le giornate, controlla sovrapposizioni e trasferimenti e somma i costi noti.
WebPortfolio di casi UX
+25Collega decisioni e vincoli alle prove, separando risultati osservati e proposte.
WebLanding page per automazione di workflow
+25Pagina in grafite con titolo piccolo a sinistra e sotto un grafo di nodi dal vivo che esegue e riprova.
WebPortfolio per scrittori
+25Cerca testi per pubblicazione e tema, salva una lista di lettura ed esporta una biografia.
WebHero con griglia interattiva
+25Una griglia scura di fili sottili che si piega verso il cursore e fa partire un anello luminoso a ogni clic.
Domande
Cosa accade quando manca un carattere?
The builder checks the font's cmap and rejects unsupported starting text. The browser warns about missing characters and disables artwork export for that text; it does not silently substitute a different font.
L'esempio incluso richiede una generazione a pagamento?
No. The included assets or procedural inputs run locally. If you ask for new images, clips, or sound, use PopNow with an exact quote and approval before generation; API USD and OAuth website credits are separate.
Cosa è già incluso nel pacchetto Variable Type Specimen Lab?
Legge gli assi fvar reali e la copertura dei glifi cmap, poi incorpora il font con licenza per l'uso offline. Applies the actual font axes, checks for missing characters, and exports live-text SVG or raster PNG. Local validation, protected output, and artifact construction. Esempio eseguibile con controlli realmente supportati. Limiti specifici del meccanismo e criteri di revisione visiva.
Quali parti di Variable Type Specimen Lab possono comportare un costo?
L'esempio procedurale o basato su font incluso viene eseguito localmente senza generazione di media. Il tempo di calcolo e l'agente o il visualizzatore esterno utilizzati sono al di fuori degli addebiti di generazione di PopNow. I nuovi media opzionali richiesti in seguito necessitano di un proprio preventivo. Le connessioni che usano una chiave API PopNow, comprese quelle MCP con chiave API, utilizzano il saldo API separato in USD. Una connessione ChatGPT o Claude autorizzata tramite OAuth utilizza i crediti del sito. I saldi sono separati; approvi la spesa in base al preventivo mostrato dalla tua connessione.
In cosa Variable Type Specimen Lab differisce da un prompt o da una skill scritta da me?
The builder reads the supplied font's fvar axes and cmap character coverage, then embeds the authorized font in an offline specimen tool. Browser controls expose those actual axes; exports include a PNG, live-text SVG, and editable settings JSON. The package supplies the working example, bounded inputs, and export route so these do not need to be designed from a plain prompt.