Jak użyć designu dowolnej strony w ChatGPT, Claude lub Gemini
Stylepack zamienia dowolną publiczną stronę w pakiet designu: DESIGN.md, BEHAVIOR.md, tokeny designu, motyw Tailwind i zrzuty ekranu. Oto jak przekazać go narzędziu ChatGPT, Claude lub Gemini, aby to, co zbuduje, wyglądało i działało jak wybrana przez Ciebie strona.
Kroki
Ścieżki poniżej używają example.com. Na stronie pakietu zawierają nazwę wybranej przez Ciebie strony.
- Wklej adres strony do Stylepack i pobierz jej pakiet. Pakiety z galerii są gotowe od razu.
- Rozpakuj pakiet.
- Zacznij nowy czat i dołącz DESIGN.md, BEHAVIOR.md, tokens.css oraz dwa zrzuty pierwszego ekranu (desktop-1440-fold.png i phone-390-fold.png).
- Wklej poniższy prompt i uzupełnij, co ma zostać zbudowane.
Prompt
Prompt zostaje po angielsku: wymienia pliki z pakietu, a Twoja AI czyta go w każdym języku.
Use the attached design pack files as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.
1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every attached screenshot and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with the variables in tokens.css (or the Tailwind v4 theme in tailwind.css). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.
Now build: [describe the page or app you want]
When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.