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

Tag: Ai Design Systems

Context-based design systems – jak AI rewolucjonizuje przepływ pracy od Figmy do kodu #EN254

AI-enabled Design Systems: Jak zwiększyć produktywność zespołów nawet 4 razy #EN214