Jakie dane przygotować?

Sześciocyfrowe kolory HEX, promienie i odstępy dla tła, powierzchni, tekstu i przycisków.

Czy działa bez klucza API?

Tak. Szablon, walidacja i eksport działają lokalnie bez klucza. Tylko opcjonalne media PopNow wymagają wyceny i wyraźnego zatwierdzenia budżetu API USD.

Jak zachować zmiany?

Wyeksportuj bieżący JSON przed zamknięciem strony. Lokalny plik nie synchronizuje się automatycznie z serwerem.

Editable design tokens with calculated contrast ratios and CSS export — working example

Edytuje kolory, oblicza rzeczywisty kontrast i eksportuje spójne tokeny CSS oraz JSON. Opcjonalne media PopNow po wycenie i zatwierdzeniu budżetu API USD. Kontrola kontrastu nie zastępuje pełnego audytu dostępności.

Korzysta z PopNow do: Obrazy
Wymaga: Node.js

Umiejętność jest darmowa. Opcjonalne obrazy, wideo lub dźwięk AI są wyceniane do zatwierdzenia przed generowaniem. Wywołania z kluczem API obciążają oddzielne saldo API w dolarach amerykańskich (USD); generowanie przez ChatGPT lub Claude połączony przez OAuth/MCP zużywa kredyty witryny.

v1.0.0 · Zaktualizowano 24 paź 2026 · 40 KB · Możesz jej używać w projektach własnych i dla klientów; prosimy nie odsprzedawać ani nie udostępniać pakietu.

Darmowa umiejętnośćStrony

Prezentacja systemu designu

Edytuje kolory, oblicza rzeczywisty kontrast i eksportuje spójne tokeny CSS oraz JSON.

Mówisz

Utwórz „Prezentacja systemu designu” z moich rzeczywistych danych i dostarcz sprawdzalne wyniki oraz edytowalne pliki.

Używaj umiejętności w aplikacji czatu przez PopNow. Bez instalowania.

W agencie do programowania

+21

Instalacja
Pobierz ZIP
Wklej tekst do Codex, Claude Code, Cursor lub innego agenta. Pobierze umiejętność i umieści ją we właściwym folderze.
Potem poproś o użycie umiejętności
/popnow-design-system-showcase Utwórz „Prezentacja systemu designu” z moich rzeczywistych danych i dostarcz sprawdzalne wyniki oraz edytowalne pliki.
Możesz też po prostu opisać zadanie, a agent sam dobierze umiejętność.

Instalacja ręczna

Zainstaluj w

Folder umiejętności: ~/.agents/skillsWiększość agentów odczytuje ~/.agents/skills

Zainstaluj ręcznie

mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
  https://api.popnow.ai/api/v1/agent-skills/design-system-showcase/download -o popnow-design-system-showcase.zip
unzip -o popnow-design-system-showcase.zip && rm popnow-design-system-showcase.zip

Wymaga klucza API PopNow w POPNOW_API_KEY · Zdobądź klucz API

Umiejętność jest darmowa. Obrazy, wideo i dźwięk, które tworzy, zużywają kredyty PopNow, a cenę widzisz wcześniej.

Co dostajesz

Edytuje kolory, oblicza rzeczywisty kontrast i eksportuje spójne tokeny CSS oraz JSON.
Samodzielny HTML z edytowalnymi danymi i kodem źródłowym
Lokalna walidacja, reprezentatywne przykłady i uruchamialne kontrole
Opcjonalne media PopNow po wycenie i zatwierdzeniu budżetu API USD

Sprawdzi się przy

Ocena palety, komponentów i przekazanie tokenów
Zespoły potrzebujące sprawdzania, eksportu i przekazywania wyników offline

Nie nadaje się do

Kontrola kontrastu nie zastępuje pełnego audytu dostępności.
Usługi wymagające serwera na żywo, kont lub wspólnej synchronizacji

Jak z niej korzystać

Mówisz

Użyj umiejętności PopNow „Prezentacja systemu designu” (design-system-showcase) do tego: Utwórz „Prezentacja systemu designu” z moich rzeczywistych danych i dostarcz sprawdzalne wyniki oraz edytowalne pliki.

Potem spróbuj

Sprawdź przypadki brzegowe i wyjaśnij odrzucone pola.
Dopasuj układ do marki i najpierw wyceń media PopNow.

Co przygotować

Sześciocyfrowe kolory HEX, promienie i odstępy dla tła, powierzchni, tekstu i przycisków.
Odbiorcy, końcowe etykiety i miejsce publikacji
Własne materiały i dowody dla twierdzeń publikowanych publicznie