Poniższy artykuł stanowi notatki z webinaru „A Product Leader’s Guide to AI-enabled Design Systems and Product Design” prowadzonego przez ekspertów z Super Friendly i South Left. Wszystkie przedstawione przemyślenia, obserwacje i wnioski pochodzą od prowadzących: Johna (CEO Super Friendly), TJ (founder i CEO South Left) oraz Tony’ego (design systems author and consultant).
TL;DR
- Firmy implementujące AI w zespołach produktowych odnotowują 2-4x wzrost tempa i oszczędzają średnio 10 godzin tygodniowo na osobę
- Design systems muszą ewoluować – przejść od wizualnych bibliotek do semantycznych struktur z zakodowanymi intencjami
- Kluczowe narzędzia obejmują: Figma Lint do oceny komponentów, MCP do integracji Figma-kod, generative UI do tworzenia layoutów
- Nowy model współpracy: od linear handoffs do collaborative shaping, gdzie designer-dev-PM pracują razem w czasie rzeczywistym
- Strategiczne zastosowania: asystenci design systems, automatyzacja dokumentacji, background helpers orkiestrujące zadania
- Maturity curve: większość firm znajduje się między fazą eksperymentów a skalowaniem – kluczowe jest przejście do AI-first thinking
- Implementacja: rozpocznij od audytu struktury danych, skup się na konkretnych use cases zamiast „gotowania oceanu”
Największy przełom w budowaniu produktów cyfrowych od dekady
John z Super Friendly rozpoczął prezentację od stwierdzenia: „To największy przełom w sposobie budowania produktów cyfrowych od ponad dekady”. Najnowsze badania McKinsey i Section AI pokazują konkretne rezultaty – średnio 10 godzin oszczędności tygodniowo na osobę oraz 2-4x wzrost tempa produktowego w firmach koordynujących strategię AI.
Wzrost produktywności dotyczy wszystkich ról: designerów, inżynierów, strategów i product managerów. Najpopularniejsze aplikacje AI w product development obejmują contextual design (nazywane też Generative UI), automatyzację dokumentacji, demokratyzację wiedzy organizacyjnej, usprawnienie przepływu pracy design-dev oraz telemetry compliance i observability implementacji komponentów.
Krzywa dojrzałości – pozycja większości firm
John przedstawił krzywą dojrzałości AI, wskazując, że większość firm pozostaje między pierwszą a drugą fazą:
Faza 1-2 (obecna pozycja większości firm):
- Eksperymentowanie z narzędziami, oszczędzanie czasu wewnętrznie
- Kluczowi championsi lub biegli specjaliści będący źródłem wiedzy
- Realizacja ciekawych projektów, jednak bez znaczącego wpływu na biznes
Faza 3 (początek rzeczywistych rezultatów):
- Skalowanie praktyk między zespołami i funkcjami
- Koordynacja międzyfunkcyjna
- Rzeczywiste rezultaty biznesowe
Faza 4 (cel długoterminowy):
- Operacjonalizacja przepływów pracy AI
- AI-first thinking
- Prawdziwa transformacja organizacji
Jak wyjaśnia John: „Dopiero gdy zaczynasz skalować te praktyki przez zespoły, wtedy widzisz rzeczywiste rezultaty biznesowe”.
Design systems jako najbogatsze źródło strukturalnych danych
John podkreślił fundamentalną obserwację: „Design systems to jeden z najbogatszych zestawów strukturalnych danych i kontekstu, jaki możesz mieć w organizacji, a używany właściwie staje się prawdziwym force multiplier dla zespołów produktowych”.
Tony dodał perspektywę architektoniczną – agenci AI funkcjonują w centrum ekosystemu z dostępem do Figma, GitHub, external APIs i wszystkich źródeł informacji. Agenci istnieją na styku różnych systemów i pośredniczą w przepływie informacji.
Uczynienie systemu czytelnym dla maszyn
TJ wyjaśnił fundamentalną zmianę: „Większość design systems jest dziś budowana dla ludzi i pomaga designerom oraz developerom w synchronizacji, jednak słabo komunikuje się z inteligentnymi systemami czy agentami”.
Kluczowy przełom nie dotyczy jedynie narzędzi – chodzi o uczynienie systemu czytelnym dla maszyn. Gdy to osiągniemy, odblokowujemy nowy poziom szybkości, pewności i kreatywności.
Checklist: Czy Twój design system jest AI-ready?
Semantic structure:
- Komponenty nazwane według funkcji (nie wyglądu)
- AI może samodzielnie wybrać właściwy komponent
Token architecture:
- Tokeny posiadają hierarchię i znaczenie
- AI może inteligentnie skalować designs, nie tylko duplikować
Design-led przepływy pracy:
- Figma jako centralne źródło prawdy wyznacza ton dla wszystkiego downstream
Centralized documentation:
- Zasady i uzasadnienia przy komponentach, AI może interpretować intencje
- Im bardziej rozrzucona dokumentacja, tym bardziej AI traci intencje
Design-code parity:
- „Gdy kod i design się nie zgadzają, AI się psuje”
- MCP jako łącznik utrzymujący jedność
Kodowanie większej ilości informacji zwiększa możliwości agenta
TJ zobrazował praktyczną różnicę między standardowym komponentem a AI-ready, używając analogii: „To jakby dać komuś zdjęcie kierownicy i powiedzieć 'zbuduj mi samochód’ versus podanie pełnego blueprintu samochodu, włączając informacje o tym, co robi każda część”.
Komponent AI-ready zawiera funkcjonalną intencję (co robi step), informacje kontekstowe (gdzie w flow się pojawia), znaczenie biznesowe (to onboarding step), uwagi o accessibility (ARIA labels) oraz wskazówki behawioralne (submit action).
„Im więcej kodujesz, tym bardziej zdolny staje się agent”, podkreśla TJ.
Figma Lint – praktyczne narzędzie oceny AI-readiness
TJ zaprezentował Figma Lint – darmową wtyczkę dostępną w Figma Community. W demonstracji banner component otrzymał 91/100 punktów z rekomendacją dodania size property.
Historycznie developerzy zawsze mieli serie kontroli i równowagi w procesie developmentu – testowanie end-to-end, unit testing, visual regression testing, pull requesty, linting. Jednak po stronie designu istnieje duża elastyczność i możliwość przekazywania projektów, które mogą nie być gotowe dla developerów.
Wtyczka dodaje warstwę testowania rzeczywistych designów i zapewnia, że Figma pozostaje źródłem prawdy nawet w AI-driven przepływach pracy.
Przepływ pracy: od Figma do kodu w minutach
Demonstracja pokazała pełny przepływ pracy wykorzystujący MCP (Model Context Protocol):
- Stworzenie banner component w Figma
- Analiza w Figma Lint (score 91/100)
- Skopiowanie canonical link z Figma
- Wklejenie w Cursor z kontekstem
- Automatyczne wygenerowanie React component + Storybook story
TJ używał Claude Sonnet w trybie max dla większego context window przy złożonych komponentach z multiple composition.
Generative UI – od komponentów do pełnych layoutów
Demonstracja pokazała spektrum możliwości od prostych komponentów po złożone interfejsy. „Niebo to granica z tym narzędziem. Możesz wczytać je do swojego component directory i szaleć”, komentuje TJ.
Narzędzie jest kompatybilne z popularnymi systemami jak Mantine, SHAD, Ant Design, Chakra, GitHub Primer, Shopify Polaris i Adobe Spectrum.
Strategiczne zastosowania: kontekst + instrukcje
John przedstawił ramy dwóch kluczowych dźwigni dla każdego zastosowania AI: „Każde dobre użycie AI wymaga dwóch głównych dźwigni – dobrego kontekstu i dobrych instrukcji”.
Kontekst obejmuje miejsca, gdzie istnieją dobre dane: design system w Figma i kod, atomic design structure zrozumiałą dla AI, standardized code patterns z thoughtful props i variables, patterns i recipes pokazujące kiedy i jak używać komponentów, intencje – dlaczego i co za komponentami, oraz dane testowe i QA z kryteriami pass/fail.
Z kolei instrukcje dotyczą kierowania AI: system-level prompts konfigurujące zachowanie AI, cursor rules dla struktury kodu, biblioteki promptów dla zespołów, agent przepływy pracy łączące multiple tasks oraz human-in-the-loop pętle opinii zwrotnej dla ciągłego doskonalenia.
Trzy kluczowe persony AI w design systems
Bibliotekarz – Design Systems Assistant
John stworzył assistanta z bazą wiedzy setek najlepszych praktyk z książek i company-specific praktyk. „To świetny sposób na demokratyzację wiedzy i uczynienie jej bardziej dostępną. Staje się potężniejszy, gdy integrujesz najlepsze praktyki swojej firmy”.
PM Helper
Product Manager może promptować system do budowania przypadków testowych. System wie, że jesteś PM, zna Twój design system, rozumie patterns i kontekst użycia, zna samples z Twojej firmy, test scripts i kryteria pass/fail.
Background Helper
AI połączone z automatyzacją używającą narzędzi jak Zapier, Make, N8N. Przykład: pobranie najnowszej aktualizacji wersji designu w Figma, automatyczne stworzenie przypadku testowego, utworzenie ticketu w Jira, powiadomienie zespołu w Slack – wszystko z rozumieniem kontekstu i celu aktualizacji designu.
Ewolucja: od statycznych bibliotek do dynamicznych systemów
John przedstawił wizję przyszłości: „Design systems muszą być czytelne zarówno dla ludzi, jak i maszyn. Ewolucja prowadzi od statycznych bibliotek do dynamicznych systemów. Komponenty to nie tylko informacje o stylizacji, ale rozumieją cel i ograniczenia oraz adaptują się i generują na podstawie kontekstu”.
Koniec double diamond, czas na shape up
John skrytykował „paradę artefaktów”: PRDs → wireframes → mockups → design annotations → prototypes → meetings → more meetings → shippable code. Problem polega na linearności, długości procesu, zbyt wielu spotkaniach oraz handoff culture, gdzie wartość i intencje gubią się w przekazie.
Shape Up jako rozwiązanie kładzie nacisk na mniejsze, bardziej kompaktowe, seniorskie zespoły głębokiego myślenia pracujące kolaboratywnie, aby podejmować zakłady z góry i kształtować rozwiązanie. Mniej artefaktów, mniej rozdętych ceremonii sprintowych. Jest idealnie dostosowany do ery AI.
Międzyfunkcyjna współpraca w erze AI
John przedstawił nowy model współpracy: „Inżynierowie i designerzy mogą pracować razem w Figma i Cursor. PM i designerzy współpracują nad user flows opartymi na żywym design system. PM i inżynierowie mogą skierować AI na dane użytkowników i ocenić, jak priorytetizować konkretne kwestie techniczne”.
Największy przełom myślowy to idea wspólnej pracy nad kształtowaniem i prototypowaniem rozwiązań, wiedząc, że te przepływy pracy mogą pomóc przetestować wiele podejść w ułamku czasu.
Pierwsza i ostatnia mila designu
John wyjaśnił nową rolę designerów: „Istnieje koncepcja pierwszej i ostatniej mili designu – to naprawdę myślenie wysokiej wartości z przodu oraz ostatnie szlify na końcu, zapewniające, że jest human QA i upewniające się, że wynik jest taki jak oczekiwany”.
Messy middle może zostać zautomatyzowany – te części, do których można zastosować rozwiązania AI, zautomatyzować i pozbyć się większości powtarzalnej pracy, rzeczy, do których można zastosować strukturę i zasady.
Gdzie zacząć: systemy ważniejsze od narzędzi
Mapa drogowa implementacji AI w design systems
Kluczowe motto: „Systemy są ważniejsze od narzędzi”, radzi John.
Faza 1: Audit istniejących narzędzi
- Figma, GitHub, project management, komunikacja, spotkania, dane z user research
- Jak dobrze ustrukturyzowane? Dostępne? Niezawodne?
Faza 2: Matrix workshop
- Structured vs unstructured data × skomplikowane vs proste zadania
- Low hanging fruit: mniej skomplikowane + dobre structured data
- Większe zakłady: bardziej skomplikowane + mniej structured data
Faza 3: Focus na konkretne use cases
- Zamiast próbować „gotować ocean”
- Konkretne use cases, które przynoszą największą wartość
Faza 4: Skalowanie między zespołami
- „Co będzie największym bang for your buck”
Studium przypadku: podwojenie tempa w 90 dni
Konkretny przykład z pracy Super Friendly pokazuje, że w ciągu 90 dni po ocenie i implementacji rekomendacji firma była w stanie podwoić swoje tempo produktowe, używając większości rzeczy, które zostały zaprezentowane i zademonstrowane.
AI diagnostic obejmuje 2-3 tygodnie oceny, wgląd w systemy, benchmark score, szczegółową listę rekomendacji i możliwości oraz taktyczny plan działania.
„Zespoły często uważają to za bardzo pomocne, gdy robią dużo eksperymentów, ale mają problemy z zdobyciem poparcia interesariuszy lub zabezpieczeniem zasobów od innych zespołów”, wyjaśnia John.
Biblioteka promptów z demonstracji
Generative UI – tworzenie komponentów i layoutów
Prompt: "Generate a grid of various banner styles with an even mix of expandable" Zastosowanie: Do szybkiego prototypowania różnych wariantów komponentów w jednym miejscu
Prompt: "Show me all the variations of button components" Zastosowanie: Do kompletnego audytu wszystkich stanów konkretnego komponentu
Prompt: "Generate a three column layout of recipe cards and a call to action, get the recipe. Let's make each one of the recipes various cheesecake style recipes and include a little bit of metadata in those recipe cards" Zastosowanie: Do tworzenia layoutów z realistic content i strukturą – kombinuje specyfikację komponentów z wymaganiami treści
Prompt: "Generate a login screen with SSO options, email password inputs, and a Remember me toggle" Zastosowanie: Do tworzenia functional screens z wieloma interactive elements
Prompt: "Generate a clone of LinkedIn's homepage" Zastosowanie: Do rapid prototyping złożonych layoutów bez specyfikowania konkretnych komponentów
Kluczowe zasady skutecznego promptowania w design systems:
- Bądź konkretny w nazewnictwie: Używaj „button components” zamiast „buttons”
- Łącz specyfikację komponentów z kontekstem biznesowym: Dodawaj informacje o użyciu i celu
- Uwzględnij interactive elements: Zawsze wspominaj o interakcjach, jeśli istnieją
- Dostarczaj kontekst: Im więcej kontekstu o existing codebase, tym lepsze rezultaty
- Wykorzystuj realistic content: Zamiast placeholder text, użyj meaningful examples
Kluczowe spostrzeżenie
Design systems dla maszyn
Standardowo myślimy: Design systems są dla ludzi – designerów i developerów, żeby lepiej współpracowali i mieli spójne komponenty.
W praktyce okazuje się, że: Design systems muszą być przede wszystkim dla maszyn. Jak mówi TJ: „Większość design systems jest dziś budowana dla ludzi, ale słabo komunikuje się z inteligentnymi systemami”. Im bardziej Twój system jest „machine readable” z zakodowanymi intencjami, tym potężniejsze stają się możliwości AI.
Dlaczego to jest istotne: Każda minuta spędzona na dokumentowaniu „dlaczego” i „kiedy” komponentów zwraca się dziesiątkami minut zaoszczędzonych przez AI. „Im więcej kodujesz, tym bardziej zdolny staje się agent”.
Test na jutro: Następnym razem, gdy tworzysz komponent, zamiast skupiać się tylko na tym, jak wygląda, dodaj metadane o jego purpose, kontekście i business logic i sprawdź, jak dużo lepiej AI radzi sobie z jego wykorzystaniem.
Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło, znajdziesz je tutaj: https://www.youtube.com/watch?v=Nh04soZjFkg
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.