web-design-pro

Modern web design engineering skills including design tokens, advanced UI/UX methodologies, accessibility, and game-specific UI patterns. Use for building commercial-grade, performant, and accessible web interfaces.

1. 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.

2. 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.

3. 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.

4. 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: ...).

5. 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.

6. 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.