Darmowy skill do Claude

AI Designer
Design System
w jednym pliku

Wrzuć screeny lub URL do Claude, a dostaniesz kompletny opis design systemu: kolory, fonty, komponenty, layout i gotowe prompty do generowania UI.

✅
Skill jest Twój! Sprawdź email.
Pobierz .zip →

Chcesz budować profesjonalny design system? Sprawdź kurs:

Design System Masterclass →
Co znajdziesz w DESIGN.md

Wszystko, czego AI potrzebuje
żeby odtworzyć styl.

🎨
Paleta kolorów
Każdy kolor z hex-em i rolą. Primary, akcenty, neutralne, cienie.
Aa
Typografia
Fonty, rozmiary, wagi, letter-spacing. Cała hierarchia w tabeli.
◻️
Komponenty
Przyciski, karty, inputy, nawigacja. Dokładne wartości CSS.
⊞
Layout i spacing
Grid, odstępy, maksymalna szerokość, skala border-radius.
◐
Cienie i głębia
Każdy poziom elevacji z dokładnymi wartościami box-shadow.
✓✗
Do's i don'ts
Co robić, czego nie. Żeby AI nie łamało stylu przy kolejnych ekranach.
📱
Responsywność
Breakpointy, jak elementy się zwijają, touch targets na mobile.
✦
Atmosfera
Charakter produktu w 2-3 zdaniach. Co go wyróżnia od reszty.
⌘
Gotowe prompty
Kopiujesz, wklejasz do Claude/Cursor i generujesz nowy ekran w tym stylu.
Do czego to wykorzystać

DESIGN.md to instrukcja dla AI.

Bez niego każdy wygenerowany ekran wygląda inaczej. Z nim AI trzyma się jednego stylu.

🖥️
Generujesz nowe ekrany z AI
Dajesz Claude/Cursor plik DESIGN.md i mówisz "zrób stronę cennika". Wynik pasuje do reszty produktu, bo AI zna kolory, fonty i komponenty.
📋
Dokumentujesz istniejący produkt
Masz produkt bez dokumentacji designu? Wrzuć screeny, a dostaniesz kompletną specyfikację. Zamiast ręcznie wyciągać tokeny z Figmy.
🔄
Chcesz odtworzyć styl innej strony
Podoba Ci się jak wygląda Vercel, Linear albo Stripe? Wrzuć screeny ich strony i dostaniesz ich design system w pliku tekstowym.
👋
Onboardujesz nowego designera
Zamiast tłumaczyć "u nas tak się robi", dajesz mu DESIGN.md. Kolory, fonty, zasady, do's i don'ts. Wszystko w jednym pliku.
Jak użyć

3 kroki. 2 minuty.

01

Pobierz skill

Podaj email i pobierz plik. Jeden plik .md z instrukcjami dla Claude.

→
02

Dodaj do Claude

Wrzuć plik do projektu w Claude. Nic nie trzeba konfigurować.

→
03

Wrzuć screeny lub URL

Napisz "zrób DESIGN.md" i dodaj screeny strony. Claude wygeneruje kompletny plik.

Zamień stronę w DESIGN.md

Pobierz skill, wrzuć screeny dowolnej strony i dostaniesz gotową dokumentację stylu. Za darmo.

AI Designer Darmowy skill AI
⚡
Zanim wyjdziesz...
Pobierz skill AI Designer za darmo. Zamień dowolną stronę w plik DESIGN.md z kolorami, fontami i komponentami.
Zero spamu. Wypisujesz się jednym klikiem.