web-design-pro
Profesjonalne umiejętności projektowania stron – design tokens, dostępność i responsywność na poziomie komercyjnym.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Web Design Pro to zestaw zaawansowanych technik inżynierii projektowania stron internetowych. Obejmuje systemy designu oparte na tokenach, nowoczesne metodologie UX takie jak Jobs to be Done i Design Thinking, responsywne wzorce CSS (clamp, container queries), oraz pełną zgodność ze standardami dostępności WCAG 2.1. Narzędzie pozwala budować interfejsy o wysokiej wydajności, dostępne dla wszystkich użytkowników, z konsystentnym systemem designu zarządzanym przez dane.
Jak używać
Zainstaluj umiejętność web-design-pro z repozytorium openclaw/skills. Upewnij się, że masz dostęp do dokumentacji README zawierającej szczegółowe wytyczne dla każdego modułu.
Rozpocznij od zdefiniowania design tokenów dla swojego projektu. Utwórz trzy warstwy tokenów: Primitive Tokens (wartości bazowe, np. kolory), Semantic Tokens (role i kontekst, np. action-primary), oraz Component Tokens (tokeny specyficzne dla komponentów). Użyj CSS Custom Properties jako natywnego rozwiązania przeglądarki, aby umożliwić dynamiczną zmianę tematu w czasie rzeczywistym.
Zastosuj metodologie UX do zrozumienia rzeczywistych potrzeb użytkowników. Wykorzystaj Jobs to be Done, aby zidentyfikować, co użytkownik naprawdę chce osiągnąć (np. szybko ocenić, czy gra jest interesująca), zamiast projektować na podstawie założeń. Przeprowadź Design Sprint, aby w ciągu 2–5 dni zweryfikować kluczowe hipotezy projektowe.
Implementuj responsywne wzorce CSS używając nowoczesnych technik. Zastosuj funkcję clamp() do płynnej typografii i rozmiarów bez mediaqueries, np. font-size: clamp(2rem, 5vw + 1rem, 4rem). Rozważ Container Queries do komponentów reagujących na rozmiar kontenera rodzica, a nie viewport. Projektuj mobilnie jako podstawę (320px), a następnie rozszerzaj dla większych ekranów za pomocą @media (min-width: ...).
Zapewnij pełną dostępność zgodnie z WCAG 2.1. Używaj semantycznego HTML (nav, main, article, section zamiast div), utrzymuj kontrast kolorów na poziomie co najmniej 4.5:1 dla tekstu (standard AA), oraz upewnij się, że wszystkie interakcje są dostępne z klawiatury. Testuj z czytnikami ekranu i narzędziami do audytu dostępności.
Zautomatyzuj zarządzanie tokenami za pomocą narzędzi takich jak Tokens Studio w Figmie (do ekstrakcji JSON/CSS ze źródła designu) lub Style Dictionary (do dystrybucji tokenów na różne platformy podczas budowania). To eliminuje rozbieżności między designem a kodem i przyspiesza iteracje.