Stylepack
Za darmo. Pakiety dziennie: 3 bez konta, 10 z kontem

Zamień dowolną stronę w pakiet designu, z którego zbuduje AI

Wklej URL. Stylepack mierzy stronę tak, jak się renderuje (kolory, typografię, odstępy, zaokrąglenia, cienie, komponenty) oraz jak się zachowuje: hover i focus, menu i tooltipy, drugi motyw i cztery szerokości ekranu. W jednym pliku zip dostajesz DESIGN.md, BEHAVIOR.md, tokeny, motyw Tailwind, SKILL.md i zrzuty ekranu.

Zmierzone, nie zgadywane

Każda wartość pochodzi z działającej strony i jest ważona tym, co faktycznie widać na ekranie. Żadnego zgadywania ze zrzutu, żadnego modelu zmyślającego kod hex.

Zachowanie, nie tylko kolory

Stany hover i focus, położenie tooltipów i czas ich zanikania, menu, odsłanianie przy przewijaniu, przyklejone paski, tabele, formularze, zawijanie tekstu, tryb ciemny i każdy breakpoint.

Formaty gotowe dla agentów

DESIGN.md od Google, SKILL.md, tokeny W3C, zmienne CSS i motyw Tailwind v4. Wrzuć folder do projektu i wskaż go agentowi.

Wyodrębnij design system z dowolnej strony

  1. Wklej URL

    Dowolna publiczna strona, na przykład stripe.com. Subdomeny, takie jak docs.stripe.com, liczą się jako osobne strony.

  2. Zmierz tę stronę

    Strona otwiera się w prawdziwej przeglądarce, w czterech szerokościach ekranu i w obu motywach. Po niecałej minucie pakiet jest gotowy.

  3. Przekaż to swojej AI

    Pobierz zip, wrzuć folder do projektu i poproś agenta, by przeczytał DESIGN.md i BEHAVIOR.md, zanim napisze jakikolwiek kod.

Co jest w pakiecie

Jeden folder, gotowy dla każdego agenta AI do kodowania lub aplikacji czatu.

DESIGN.md
Design system w formacie DESIGN.md od Google: kolory, typografia, odstępy, zaokrąglenia, cienie i komponenty.
BEHAVIOR.md
Hover, focus, tooltipy, menu, animacje, przewijanie, tabele, formularze, zawijanie tekstu, reguły responsywności i tryb ciemny.
SKILL.md
Skill dla Claude Code i Cursor, który prowadzi agenta przez pakiet we właściwej kolejności.
tokens.json
Tokeny designu W3C (DTCG) dla Style Dictionary i wtyczek Figma do tokenów.
tokens.css
Każda wartość jako zmienne CSS.
tailwind.css
Te same wartości jako blok @theme z Tailwind v4.
screenshots/
Strona w szerokościach 1440, 1024, 768 i 390 pikseli oraz drugi motyw, jeśli jest.
README.md, PROMPT.md
Jak przekazać pakiet każdemu narzędziu AI oraz prompt do wklejenia.

Działa z narzędziami AI, których już używasz

Przewodnik krok po kroku dla każdego z nich:

Przykładowe pakiety designu

Zobacz całą galerię
Strona główna linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS i produktywnośćCiemny + jasny
Strona główna resend.com
resend.com
domaine + aBCFavorit
Narzędzia dla programistówCiemny + jasny
Strona główna supabase.com
supabase.com
Manrope + Inter
Narzędzia dla programistówJasny + ciemny
Strona główna figma.com
figma.com
figmaSans + figmaMono
Narzędzia do projektowaniaJasny
Strona główna framer.com
framer.com
GT Walsheim Medium + Inter Variable
Narzędzia do projektowaniaCiemny
Strona główna apple.com
apple.com
SF Pro Text + SF Pro Display
Technologie konsumenckieCiemny + jasny
Strona główna arc.net
arc.net
Marlin Soft SQ + -apple-system
Technologie konsumenckieJasny

Pytania

Czym jest Stylepack?

Stylepack (stylepack.ai) to darmowe narzędzie internetowe, które zamienia dowolną publiczną stronę w pakiet designu dla agentów AI do kodowania: DESIGN.md, BEHAVIOR.md, SKILL.md, tokeny designu, motyw Tailwind i zrzuty ekranu, wszystko w jednym pliku zip.

Jak skopiować design strony do Cursor lub Claude Code?

Wklej adres strony do Stylepack i pobierz pakiet. Wrzuć folder do projektu, a potem poproś agenta, by przeczytał DESIGN.md i BEHAVIOR.md oraz obejrzał zrzuty ekranu, zanim cokolwiek zbuduje. Każda strona pakietu zawiera dokładne kroki i prompt do skopiowania.

Czym jest DESIGN.md?

DESIGN.md to otwarty format Google do opisywania tożsamości wizualnej agentom do kodowania w jednym pliku Markdown: kolory, typografia, odstępy, zaokrąglenia, cienie i komponenty. Stylepack tworzy taki plik dla każdej publicznej strony.

Jak wyodrębnić tokeny designu ze strony?

Wklej jej adres do Stylepack. Pakiet zawiera tokens.json w formacie tokenów designu W3C (DTCG), te same wartości jako zmienne CSS w tokens.css oraz motyw Tailwind v4 w tailwind.css.

Co obejmuje BEHAVIOR.md?

To, jak strona się zachowuje, a nie tylko jak wygląda: stany hover i focus, tooltipy, menu, animacje, przewijanie, tabele, formularze, zawijanie tekstu, układ w szerokościach 1440, 1024, 768 i 390 pikseli oraz tryb ciemny.

Czy to darmowe?

Tak. Dostajesz 3 pakiety dziennie bez konta i 10 dziennie z darmowym kontem. Pakiety, które są już w galerii, nie liczą się do limitu.

Z jakimi narzędziami AI działa?

Z Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable i Bolt, a także z każdym innym narzędziem, które czyta Markdown i CSS.

Czy Stylepack jest powiązany ze stronami z galerii?

Nie. Pakiet opisuje publiczny design strony jako materiał referencyjny. Logo, czcionki, obrazy i teksty należą do ich właścicieli, a sprawdzenie licencji czcionek leży po Twojej stronie.