Builder odczytuje osie fvar i pokrycie cmap dostarczonej czcionki, a następnie osadza licencjonowaną czcionkę w offline'owym narzędziu wzornika. Kontrolki przeglądarki udostępniają te rzeczywiste osie; eksport obejmuje PNG, SVG żywego tekstu i edytowalny JSON ustawień.
- Wymaga
- Python 3 · browser
v1.0.0 · Zaktualizowano 25 paź 2026 · 351 KB · Możesz jej używać w projektach własnych i dla klientów; prosimy nie odsprzedawać ani nie udostępniać pakietu.
Co dostajesz
Przenośne narzędzie offline w HTML z prawdziwymi interaktywnymi kontrolkami
Edytowalne ustawienia JSON i kreator dostosowany do zadania
Sprawdzi się przy
- Eksploracja typografii, badania typografii marki i przenośne wzorniki czcionek.
Nie nadaje się do
- Weryfikacja licencji czcionki, konwersja czcionek statycznych na wariacyjne czy identyczne renderowanie w każdej przeglądarce SVG.
Jak to działa
Zawiera lokalny renderer
Przygotuj rzeczywiste dane wejściowe
Dołączona czcionka OFL lub licencjonowana czcionka wariacyjna.
Zastosuj obsługiwane elementy sterujące
Zamień czcionkę wariacyjną na taką, którą możesz osadzić. Edytuj jedną linijkę tekstu wzornika. Dostosuj wyłącznie osie obecne w tej czcionce i wyeksportuj wynik.
Zbuduj i przejrzyj wynik
Otwórz output/index.html w przeglądarce. Użyj faktycznych kontrolek i pobierz wyeksportowane pliki. Kreator nie wdraża strony internetowej.
Jak przebiega proces
Jak działa Laboratorium wzornika czcionki wariacyjnej
Builder odczytuje osie fvar i pokrycie cmap dostarczonej czcionki, a następnie osadza licencjonowaną czcionkę w offline'owym narzędziu wzornika. Kontrolki przeglądarki udostępniają te rzeczywiste osie; eksport obejmuje PNG, SVG żywego tekstu i edytowalny JSON ustawień.
Co zawiera umiejętność
Co możesz zmienić
- Zamień czcionkę wariacyjną na taką, którą możesz osadzić.
- Edytuj jedną linijkę tekstu wzornika.
- Dostosuj wyłącznie osie obecne w tej czcionce i wyeksportuj wynik.
Co sprawdzić przed przekazaniem rezultatu
- Builder sprawdza rzeczywiste osie czcionki, zakresy wartości i pokrycie znaków.
- Obejrzyj rzeczywiste eksporty PNG/SVG i długi tekst w przeglądarce; obsługa czcionek w przeglądarkach może się różnić.
Zobacz pliki pakietu
Oto wybrane pliki robocze tej wersji wraz z ich rzeczywistym przeznaczeniem. Pełny pakiet zawiera też instrukcje i odpowiednie informacje licencyjne.
Odczytuje rzeczywiste osie fvar i pokrycie glifów cmap, a następnie osadza licencjonowaną czcionkę do użytku offline.
scripts/project.pyStosuje rzeczywiste osie czcionki, sprawdza brakujące znaki i eksportuje SVG żywego tekstu lub rastrowy PNG.
scripts/studio.jsLokalna walidacja, chronione wyjście i budowa artefaktów.
scripts/build.pyWykonywalny przykład z rzeczywistymi obsługiwanymi elementami sterowania.
examples/project.jsonOgraniczenia specyficzne dla mechanizmu i kryteria przeglądu wizualnego.
references/production.md
Dlaczego warto użyć tej umiejętności
Zacznij od tego pakietu
Builder odczytuje osie fvar i pokrycie cmap dostarczonej czcionki, a następnie osadza licencjonowaną czcionkę w offline'owym narzędziu wzornika. Kontrolki przeglądarki udostępniają te rzeczywiste osie; eksport obejmuje PNG, SVG żywego tekstu i edytowalny JSON ustawień. Pakiet dostarcza działający przykład, ograniczone dane wejściowe i ścieżkę eksportu, więc nie trzeba projektować ich od zera na podstawie samego promptu.
Porównaj sposoby pracy
Prompt, własna umiejętność czy ten proces?
Zacznij od promptu
Twój agent może tworzyć na podstawie zwykłej prośby. Nadal trzeba jednak ustalić brief, zasady wizualne, dobór materiałów, format wyniku i sposób weryfikacji dla danego projektu.
Napisz własną umiejętność
Samodzielnie wybierasz i utrzymujesz instrukcje wielokrotnego użytku, ustawienia domyślne, strukturę plików i kontrole. To przydatne, gdy Twój proces wymaga innych zasad lub integracji.
Proces stworzony dla PopNow
Ten proces opracowano dla PopNow. Jego pliki źródłowe, dołączone zależności i odpowiednie informacje licencyjne są częścią pakietu; opisany poniżej zakres dotyczy tej wersji.
Poradnik zweryfikowano 25 paź 2026
Ile to będzie kosztować?
Dołączony proceduralny lub oparty na czcionkach przykład działa lokalnie bez generowania mediów. Czas obliczeń oraz agent lub zewnętrzna przeglądarka, których używasz, pozostają poza opłatami generowania PopNow. Nowe opcjonalne media żądane później wymagają własnej wyceny.
Dostarczony proces działa lokalnie. Zamówienie nowych materiałów jest osobną decyzją. Umiejętność jest bezpłatna. Nowe materiały są wyceniane przed generowaniem.
Pakiet umiejętności
Instalacja jest bezpłatna w ramach limitu pobrań na Twoim koncie. Licencja pakietu obejmuje pracę własną i dla klientów, ale nie zezwala na jego dalsze rozpowszechnianie.
Istniejące materiały i praca lokalna
Ponowne użycie odpowiednich materiałów, edycja plików i lokalne składanie nie wywołują modelu generowania PopNow. Pracę nadal wykonują Twój komputer i wymagane środowisko wykonawcze.
Twój agent i hosting
Opłaty za subskrypcję, komputer w chmurze, wdrożenie lub usługi innych dostawców dotyczą tych usług. Instalacja tej umiejętności ich nie obejmuje.
Jak działa rozliczanie PopNow
Połączenia używające klucza API PopNow, w tym połączenia MCP z kluczem API, korzystają z osobnego salda API w USD. Połączenie ChatGPT lub Claude autoryzowane przez OAuth zużywa kredyty witryny. Salda są oddzielne; podstawą zatwierdzenia wydatku jest wycena pokazana w Twoim połączeniu.
Obowiązują limity pobrań i aktualne warunki konta. Bezpłatny pakiet nie oznacza nieograniczonego bezpłatnego generowania.
Jak z niej korzystać
Mówisz
Użyj umiejętności PopNow „Laboratorium wzornika czcionki wariacyjnej” (variable-type-specimen-lab) do tego: Zbadaj prawdziwą czcionkę wariacyjną, dostosuj jej obsługiwane osie i eksportuj wzorniki żywego tekstu z kontrolą glifów. Zacznij od dołączonego projektu, wprowadź żądane zmiany i sprawdź rzeczywisty wynik.
Potem spróbuj
Zamień czcionkę wariacyjną na taką, którą możesz osadzić.
Edytuj jedną linijkę tekstu wzornika.
Co przygotować
- Dołączona czcionka OFL lub licencjonowana czcionka wariacyjna.
- Python ze wsparciem WOFF w fontTools do przebudowy oraz aktualna przeglądarka.
Podobne umiejętności
Zobacz wszystkie →
StronyPlac zabaw z puzzlami ze zdjęcia
+25Zamień fotografię w zagrwalne puzzle z krzywymi elementami, przeciąganiem, przyciąganiem i sterowaniem klawiaturą.
StronySzablon strony marki napojów
+25Słoneczna strona marki napojów lub przekąsek ze sklepem, kreatorem zestawu, mapą sprzedawców i demo płatnością w jednym pliku.
StronyPrzewijany papierowy świat
+25Przejdź przez warstwowy papierowy krajobraz, znajdź trzy pamiątki i ułóż mały dziennik spaceru.
StronySzablon sklepu ze sneakersami
+25Kompletny sklep z obuwiem lub odzieżą: katalog, strony produktów, koszyk i demonstracyjna kasa w jednym pliku HTML.
StronySztuka przybliżania fraktali
+25Przeglądaj obliczany fraktal, wybierz zbliżenie i wyeksportuj dokładny widok jako grafikę oraz wielokrotnego użytku brief.
StronyStrona CV i portfolio w stylu scrapbooka
+25Wielostronicowe CV online z papierowych przedmiotów, z case studies i życiorysem do druku.
StronyFourier Line Orbit
+25Reconstruct a closed drawing using rotating Fourier circles and export the desired harmonic detail.
StronyPop-Up Fold Design Lab
+25Open a symmetric paper linkage, adjust its attachment geometry, and export a measured crease proof.
StronyMikrostrona płyty winylowej
+25Pokaż album jako namacalną okładkę z dwiema stronami do odsłuchu, opisami i obracającą się płytą.
StronyStrona produktu sprzętowego
+25Ogromne cienkie nazwy modeli na srebrnych zdjęciach, matowe karty specyfikacji i linia produktów w skali.
StronySzablon strony biura podróży
+25Strona oparta na zdjęciach dla wycieczek, przewodników i pensjonatów: wyszukiwarka wyjazdów, zapytania o rezerwację i quiz doboru wyjazdu.
StronyStrona freelance'owego projektanta
+25Odważna strona jednoosobowego studia sprzedającego pakiety o stałej cenie, z podstronami planów, case studies i formularzem briefu.
StronySzablon strony glassmorphism
+25Matowe szklane pigułki na prawie czarnym tle, ogromny szeryfowy nagłówek i zapis e-mail.
StronyStudio Naprężeń Fotoelastycznych
+25Twórz świetliste dzieła sztuki z fryzami naprężeń, edytując obciążenia i kąty polaryzatora w przenośnym, offline studio.
StronyOrthogonal Word Sculpture
+25Przetnij dwa wyciągnięte słowa w jedną bryłę, która odczytuje się inaczej z prostopadłych punktów widzenia.
StronyKreator awatarów 3D
+25Zbuduj w przeglądarce uroczą pluszową postać 3D i zapisz ją jako przezroczysty PNG albo stronę 3D.
StronyStrona CV akademickiego
+25Porządkuje badania, dydaktykę i działalność z filtrami publikacji oraz eksportem BibTeX.
StronyHeatmapa kalendarzowa
+25Rok codziennej aktywności jako cieniowana siatka kalendarza, z seriami, sumami i obsługą klawiatury.
StronyStrona produktów rolniczych
+25Filtruje sprzęt według upraw i regionów, porównuje parametry i przygotowuje zapytania.
StronyStrona lądowania SaaS AI
+25Ciepły piaszczysty papier i żywa tablica kanban, na której asystent planuje zadania i przesuwa karty.
StronyAnimowana sekcja hero
+25Sekcja hero dla landing page z płynnie zmieniającym się słowem w nagłówku, dwoma przyciskami i szeroką ramką na obraz.
StronyPortfolio w salonie gier
+25Pokaż projekty jako kartridże w małym salonie gier, z obsługą klawiaturą i dotykiem.
StronyPortfolio architektoniczne
+25Filtruj projekty, zmieniaj jednostki powierzchni i drukuj wybrane propozycje.
StronyWitryna produktów audio
+25Porównuj parametry i odsłuchuj własne pliki w rzeczywistym lokalnym teście A/B.
StronyAnalizator widma audio
+25Analizuje lokalne nagranie, pokazując rzeczywiste widmo, częstotliwość szczytową i poziom sygnału.
StronySzablon witryny studium przypadku
+25Łącz dowody ze wskaźnikami, sprawdzaj zmiany i oznaczaj brakujące dane.
StronyPanel przepływów pieniężnych
+25Uzgadnia saldo początkowe, wpływy i wydatki z saldem po każdej transakcji.
StronyFilmowa przewijana opowieść
+25Opowiedz historię zdjęciami w czterech aktach, z dużymi kadrami, łagodnym ruchem i trybem panoramicznym.
StronyWitryna marketingowa CMS
+25Edytuj artykuł JSON, sprawdzaj pola, oglądaj podgląd i eksportuj poprawną treść.
StronyStrona prelegenta
+25Szukaj wystąpień według tematu i czasu, eksportuj zapowiedź i wymagania techniczne.
StronyKonstelacja wspomnień
+25Połącz sześć fotograficznych wspomnień w gwiazdozbiór i odkrywaj je swobodnie lub chronologicznie.
StronySzablon witryny firmy budowlanej
+25Obliczaj ilości i stawki, pokazuj rezerwę osobno i eksportuj kosztorys planistyczny.
StronySzablon witryny konsultanta
+25Porównuj formaty według celu, terminu i wielkości zespołu oraz eksportuj brief.
StronyPanel lejka konwersji
+25Oblicza konwersje i straty na etapach jednej kohorty, z tabelą danych do sprawdzenia.
StronyStrona agencji kreatywnej z shaderem
+25Żywy pomarańczowy shader w hero, przyklejone hasło, zaokrąglone menu i siatka case studies.
StronyPortal wdrożenia klienta
+25Prowadzi zależne kroki konfiguracji z właścicielami i ważonym wskaźnikiem postępu.
StronyCiemny landing page SaaS
+25Ciemna strona marketingowa produktu software z bogatą animacją, dostarczana jako jeden samodzielny plik HTML.
StronyPrezentacja systemu designu
+25Edytuje kolory, oblicza rzeczywisty kontrast i eksportuje spójne tokeny CSS oraz JSON.
StronyStrona portfolio projektanta
+25Sześć przechylonych kart wokół blednącego nagłówka, jedna czerwona karta portretu, redakcyjne case studies.
StronyDziennik programisty
+25Tworzy przeszukiwalny dziennik techniczny z czytelnym kodem i eksportem RSS.
StronyStrona portfolio programisty
+25Ciemna strona osobista dla inżynierów z case studies, artykułami, wystąpieniami, CV i formularzem kontaktowym.
StronyStrona docelowa ebooka
+25Czytaj autorskie rozdziały, zmieniaj rozmiar tekstu i zapisuj postęp lokalnie.
StronyEdytowalna tabela budżetu
+25Przelicza plan, wydatki i saldo po zmianie ilości oraz cen jednostkowych.
StronyRedakcyjna strona SaaS
+25Granatowe dzielone hero, szeryfowy nagłówek obok zdjęcia dokumentalnego, skośne pasma i kobaltowy akcent.
StronyWykres frekwencji
+25Porównuje zapisy, obecność i pojemność, wyliczając ważoną frekwencję i nieobecności.
StronySzablon witryny wydarzenia
+25Filtruj sesje, wykrywaj nakładające się terminy i eksportuj osobisty program.
StronyPorównanie eksperymentów
+25Porównuje konwersje, liczebność próby i przedziały Wilsona bez pochopnego wyboru zwycięzcy.
StronyPortal raportów finansowych
+25Szukaj raportów według roku i typu, porównuj wskaźniki i eksportuj dane.
StronyPrototyp wyszukiwarki lotów
+25Filtruje lokalne loty według trasy, daty i pasażerów oraz porównuje cenę i czas.
StronyInteraktywny diagram architektury
+25Klikalny diagram systemu offline, zbudowany ze sprawdzonego modelu JSON, z dowodami do każdego bloku.
StronyInteraktywne małe muzeum
+25Odkryj trzy sale, obejrzyj codzienne przedmioty z bliska i zbierz własny bilet wspomnień.
StronyWitryna projektanta wnętrz
+25Twórz brief do eksportu na podstawie wymiarów pokoju, budżetu i priorytetów.
StronyWitryna sklepu jubilerskiego
+25Sprawdzaj materiały, rozmiary i dostępne warianty oraz eksportuj listę zapytań.
StronyInteraktywny graf wiedzy
+25Zamień notatki z projektu w przeszukiwalny graf offline, w którym każde twierdzenie prowadzi do wiersza źródła.
StronySzablon pulpitu KPI
+25Cztery kafle KPI ze znacznikami zmian nad wykresem liniowym, tabelą podziału i słupkami celów.
StronyStrona lądowania z makiet AI
+25Najpierw zobacz trzy projekty pełnej strony, wybierz jeden, a agent zbuduje go jako czysty kod.
StronyLista oczekujących z poleceniami
+25Testuj stałe kody i lokalną kolejkę w wyraźnie oznaczonej demonstracji.
StronySzablon witryny kancelarii
+25Twórz listę przygotowań do konsultacji według usługi i jurysdykcji, gotową do druku.
StronySzablon strony magazynu
+25Strona magazynu w jakości druku z artykułami, tematami, małym sklepem i prenumeratą, jako jeden plik HTML.
StronyKalkulator cen członkostwa
+25Dokładnie obliczaj koszty według liczby osób, okresu i dodatków oraz porównuj plany.
StronyWitryna kampanii społecznej
+25Pokazuj cel i założenia kosztowe oraz filtruj zadania wolontariackie według czasu.
StronyStrona docelowa kursu online
+25Sprawdzaj wymagania, poznawaj program i obliczaj tygodniowy plan nauki.
StronyPanel zadań operacyjnych
+25Porządkuje zadania według priorytetu, właściciela i terminu z jawnymi zmianami stanu.
StronyHero z animacją cząsteczek
+25Tekst na ciepłym papierze obok obracającej się kuli z kropek, która zmienia kształt przy każdym pomyśle.
StronyStrona marki osobistej
+25Portret wtopiony w ciepły papier pod cienkim nawiasem, z mocnymi hasłami po obu stronach.
StronySzablon strony sklepu zoologicznego
+25Działający sklep z artykułami dla zwierząt: katalog, warianty, koszyk, planer dostaw i demo płatność w jednym pliku HTML.
StronyEdytor sekwencji zdjęć
+25Układaj historię ze zdjęć, wybieraj kadry i etapy opowieści, a potem eksportuj i odtwarzaj dokładną sekwencję.
StronyPlac zabaw z fotonaklejkami
+25Układaj zdjęcia myszą lub klawiaturą, obracaj je, cofaj zmiany i zapisz kolaż jako PNG.
StronyPortfolio fotograficzne
+25Organizuje serie zdjęć z podglądem obsługiwanym klawiaturą i stykówką do wydruku.
StronySzablon strony podcastu
+25Strona podcastu z odtwarzalną sekcją główną, archiwum odcinków, podstronami gości i odtwarzaczem, który gra dalej.
StronySekcja cennika odręcznego
+25Tabela cen w stylu notatnika: pochylone karty z tuszu, przełącznik rocznie i ciemny motyw, w jednym pliku offline.
StronyKatalog integracji produktu
+25Szukaj według funkcji i uwierzytelniania oraz twórz listę konfiguracji.
StronyFilmowa strona premiery produktu
+25Prawie czarna strona w świetle filmowym: szeryfowa karta tytułowa, nocna scena i formularz rezerwacji.
StronySzablon witryny nieruchomości
+25Filtruj oferty według budżetu i liczby sypialni oraz drukuj porównanie.
StronyStrona publikacji naukowej
+25Strona projektu do twojej pracy z interaktywnym rysunkiem 1, wynikami, ograniczeniami i cytowaniem jednym kliknięciem.
StronyPanel struktury przychodów
+25Porównuje kwoty i udziały kategorii, uzgadniając sumy każdego okresu.
StronyRaport trendu przychodów
+25Pokazuje przychody, zmiany i średnie kroczące, oznaczając brakujące daty.
StronySzablon panelu administracyjnego
+25Działająca konsola zaplecza z wykresami, tabelami, tablicą kanban i kalendarzem, jako jeden plik HTML offline.
StronySzablon landing page SaaS
+25Spokojna, jasna strona marketingowa produktu software z działającą konsolą produktu, cennikiem i rejestracją.
StronyTabela danych z wyszukiwaniem
+25Zamienia CSV w tabelę z wyszukiwaniem, sortowaniem liczbowym, stronami i bezpiecznym eksportem.
StronyPanel stanu usług
+25Rozróżnia stan usług, przestarzałe kontrole i historię incydentów w opisanym obrazie sytuacji.
StronySzablon strony klubu sportowego
+25Strona klubu, siłowni albo studia z harmonogramem, podstronami trenerów, członkostwami, planem kortów i rezerwacją w jednym pliku.
StronySekcja ściany opinii
+25Murowana albo powoli dryfująca ściana cytatów klientów, która pokazuje tylko cytaty, na które ludzie wyrazili zgodę.
StronyStrona planu podróży
+25Układa dni, wykrywa nakładanie terminów i brak czasu na przejazd oraz sumuje znane koszty.
StronyPortfolio studiów UX
+25Łączy decyzje z dowodami, odróżniając zaobserwowane rezultaty od propozycji.
StronyStrona lądowania automatyzacji przepływów
+25Grafitowa strona, mały nagłówek i żywy graf węzłów, który działa, ponawia i strumieniuje logi.
StronyPortfolio pisarza
+25Szukaj tekstów według publikacji i tematu, zapisuj listę lektur i eksportuj biografię.
StronyInteraktywne hero z siatką
+25Ciemna siatka cienkich nici, która zagina się ku kursorowi i puszcza świecący pierścień z każdego kliknięcia.
Pytania
Co się dzieje, gdy znak jest brakujący?
Builder sprawdza cmap czcionki i odrzuca nieobsługiwany tekst początkowy. Przeglądarka ostrzega o brakujących znakach i wyłącza eksport grafiki dla tego tekstu; nie podmienia po cichu innej czcionki.
Czy dołączony przykład wymaga płatnego generowania?
Nie. Dołączone zasoby lub proceduralne dane wejściowe działają lokalnie. Jeśli prosisz o nowe obrazy, klipy lub dźwięk, użyj PopNow z dokładną wyceną i zatwierdzeniem przed generowaniem; USD API i kredyty witryny OAuth są rozliczane osobno.
Co jest już zawarte w pakiecie Laboratorium wzornika czcionki wariacyjnej?
Odczytuje rzeczywiste osie fvar i pokrycie glifów cmap, a następnie osadza licencjonowaną czcionkę do użytku offline. Stosuje rzeczywiste osie czcionki, sprawdza brakujące znaki i eksportuje SVG żywego tekstu lub rastrowy PNG. Lokalna walidacja, chronione wyjście i budowa artefaktów. Wykonywalny przykład z rzeczywistymi obsługiwanymi elementami sterowania. Ograniczenia specyficzne dla mechanizmu i kryteria przeglądu wizualnego.
Które części Laboratorium wzornika czcionki wariacyjnej mogą wiązać się z opłatą?
Dołączony proceduralny lub oparty na czcionkach przykład działa lokalnie bez generowania mediów. Czas obliczeń oraz agent lub zewnętrzna przeglądarka, których używasz, pozostają poza opłatami generowania PopNow. Nowe opcjonalne media żądane później wymagają własnej wyceny. Połączenia używające klucza API PopNow, w tym połączenia MCP z kluczem API, korzystają z osobnego salda API w USD. Połączenie ChatGPT lub Claude autoryzowane przez OAuth zużywa kredyty witryny. Salda są oddzielne; podstawą zatwierdzenia wydatku jest wycena pokazana w Twoim połączeniu.
Czym Laboratorium wzornika czcionki wariacyjnej różni się od napisania promptu lub własnej umiejętności?
Builder odczytuje osie fvar i pokrycie cmap dostarczonej czcionki, a następnie osadza licencjonowaną czcionkę w offline'owym narzędziu wzornika. Kontrolki przeglądarki udostępniają te rzeczywiste osie; eksport obejmuje PNG, SVG żywego tekstu i edytowalny JSON ustawień. Pakiet dostarcza działający przykład, ograniczone dane wejściowe i ścieżkę eksportu, więc nie trzeba projektować ich od zera na podstawie samego promptu.