Systemy projektowe dla startupów: jak zbudowałem swój od końca

Zbudowałem swój system projektowy od końca. Większość porad mówi „poczekaj na product-market fit”. Ja zacząłem od CSS custom properties pierwszego dnia, ponieważ błąd CLS na mojej stronie osobistej uświadomił mi koszt pomijania tokenów: Cumulative Layout Shift wynoszący 0,493, którego wyśledzenie zajęło dwie sesje debugowania i doprowadziło do niespójnej wartości odstępu. Naprawa zajęła 15 minut. Śledztwo zajęło 3 godziny. Tokeny zapobiegłyby temu błędowi całkowicie.¹

TL;DR

Systemy projektowe rozwiązują problemy koordynacji. Samodzielni programiści z jednym projektem nie mają problemów koordynacji między ludźmi, ale mają problemy koordynacji między swoim przeszłym i przyszłym „ja”. Po zbudowaniu systemu tokenów projektowych dla blakecrosley.com — 10 tokenów kolorów, 13 kroków skali typograficznej, 8 wartości odstępów — nauczyłem się, że właściwa kolejność to: tokeny natychmiast (pierwszego dnia), wzorce gdy powtórzą się trzy razy, formalny system nigdy (w przypadku projektów solowych). Inwestycja w tokeny zwraca się za pierwszym razem, gdy niespójność odstępów powoduje błąd układu.

Mój system projektowy: tokeny i nic więcej

Nie-paleta kolorów

Cała moja strona działa na 10 CSS custom properties bez kolorów marki:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Cztery poziomy przezroczystości (100%, 65%, 40%, 10%) budują całą hierarchię wizualną. Każdy poziom tekstu spełnia wymagania kontrastu WCAG AAA względem tła #000000. Żadnych gradientów, żadnych kolorów semantycznych, żadnego przełącznika trybu ciemnego/jasnego. Ograniczenie tworzy spójny system, którego biblioteka komponentów nie byłaby w stanie poprawić.²

Decyzja o pominięciu kolorów marki była wyborem projektowym, nie technicznym. Podczas moich 16 studiów projektowych produktów zauważyłem, że produkty, które szanowałem najbardziej (Linear, Vercel, Raycast), używały powściągliwych palet, w których typografia wykonywała pracę hierarchizacji.

8-punktowy system odstępów

Każda wartość odstępu wywodzi się z bazy 8-punktowej:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Żadnych dowolnych wartości. System zawiera osiem kroków. Jeśli układ wymaga odstępu, który nie istnieje w systemie, to projekt jest błędny, nie system.

Błąd --spacing-2xs

Tę zasadę poznałem na własnej skórze. Użyłem --spacing-2xs dla margin-top podtytułu. Token nie istniał w mojej definicji :root. CSS custom properties zawodzą po cichu — przeglądarka zastosowała zerowy margines zamiast zgłosić błąd. Podtytuł przykleił się do nagłówka, układ przesunął się podczas ładowania, a mój wynik Cumulative Layout Shift skoczył do 0,493.³

Ścieżka debugowania: Lighthouse zgłosił CLS. DevTools zidentyfikowało przesuwający się element. Inspekcja obliczonych stylów ujawniła margin-top: 0 tam, gdzie oczekiwałem 4px. Przeszukanie arkusza stylów pod kątem --spacing-2xs pokazało jedno użycie i zero definicji.

Naprawa: zamiana --spacing-2xs na --spacing-xs. Szersza naprawa: ścisłe przestrzeganie systemu tokenów bez wyjątków.

Skala typograficzna

13 kroków od 12px do 80px, z użyciem czcionek systemowych:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:      0.75rem;   /* 12px */
  --font-size-sm:      0.875rem;  /* 14px */
  --font-size-base:    1rem;      /* 16px */
  --font-size-lg:      1.125rem;  /* 18px */
  --font-size-xl:      1.3125rem; /* 21px */
  --font-size-2xl:     1.5625rem; /* 25px */
  --font-size-3xl:     1.875rem;  /* 30px */
  --font-size-4xl:     2.25rem;   /* 36px */
  --font-size-5xl:     2.7rem;    /* 43.2px */
  --font-size-6xl:     3.25rem;   /* 52px */
  --font-size-7xl:     3.875rem;  /* 62px */
  --font-size-display: 5rem;      /* 80px */
}

Czcionki systemowe całkowicie eliminują opóźnienia ładowania fontów. Brak FOIT (Flash of Invisible Text), brak FOUT (Flash of Unstyled Text), zero żądań sieciowych dotyczących czcionek. Ten wybór przyczynia się do mojego wyniku 100/100 w Lighthouse.⁴

Problem z wyczuciem momentu

Za wcześnie: pułapka przedwczesnej abstrakcji

Startupy na etapie seed stoją w obliczu skrajnej niepewności co do tego, czym stanie się produkt. System projektowy kodyfikuje założenia dotyczące wzorców interakcji, hierarchii komponentów i języka wizualnego. Gdy produkt się pivotuje, system projektowy staje się obciążeniem, które opiera się zmianom.⁵

Zespół trzech inżynierów i jednego projektanta nie potrzebuje biblioteki komponentów z dokumentacją, wersjonowaniem i instancją Storybook. Narzut koordynacyjny przewyższa problem koordynacyjny.

Ale tokeny są inne. Tokeny nie są abstrakcjami — są wartościami. Token koloru nie narzuca struktury komponentów. Token odstępu nie ogranicza wzorców interakcji. Tokeny przetrwają pivoty, ponieważ działają poniżej warstwy komponentów.

Za późno: spirala długu projektowego

Firmy na etapie Series B z 30 inżynierami i bez wspólnych wzorców projektowych stoją przed odwrotnym problemem. Każdy zespół funkcjonalny wymyśla własne style przycisków, układy formularzy i wartości odstępów. Produkt sprawia wrażenie trzech różnych aplikacji zszytych razem.⁶

Widzę ten sam wzorzec w mniejszej skali we własnych projektach. Gdy zaczynam nowy projekt bez skopiowania moich tokenów z :root, niespójności pojawiają się w ciągu pierwszego tygodnia. Tokeny to tanie ubezpieczenie od spirali długu, której odwrócenie staje się kosztowne.

Ramowy model progresywnej inwestycji

Etap 1: Tylko tokeny (pierwszy dzień, dowolna wielkość zespołu)

Zdefiniuj i udostępnij jedynie podstawowe wartości. Moja implementacja:

41 tokenów łącznie. Zero komponentów. Zero strony z dokumentacją. Celem jest zapobieganie rozbieżnościom na poziomie wartości przy zachowaniu maksymalnej elastyczności eksperymentowania.⁷

Etap 2: Ekstrakcja wzorców (gdy wzorzec powtórzy się 3 razy)

Gdy ten sam element UI pojawia się w trzech różnych funkcjonalnościach, wyodrębnij wzorzec. Moja strona ma wyodrębnione wzorce dla: - Układy kart (karty projektów, karty bloga, karty społecznościowe): spójny padding, border-radius, stany hover - Podkreślenia nawigacyjne (linki nawigacji, breadcrumbs): przejście scaleX(0) → scaleX(1) przy hover - Nagłówek glassmorphism: backdrop-filter: blur(20px) z border-bottom

Każdy wzorzec istnieje, ponieważ zbudowałem tę samą rzecz trzy razy i zauważyłem duplikację. Wyodrębniam wzorce z kodu produkcyjnego zamiast projektować je z wyprzedzeniem. Wzorce produkcyjne kodyfikują rzeczywiste wymagania.⁸

Etap 3: Formalny system (25+ inżynierów, nigdy w projektach solowych)

Na dużą skalę problem koordynacyjny uzasadnia biblioteki komponentów, odzwierciedlenie w Figma, procesy kontrybucji i wersjonowane changelogi. Nie osiągnąłem tego etapu w żadnym projekcie osobistym i nie spodziewam się tego. Dla samodzielnych programistów tokeny + wyodrębnione wzorce zapewniają wystarczającą strukturę bez narzutu utrzymaniowego formalnego systemu.

Co pomijam całkowicie

Strona dokumentacji

Publiczne strony dokumentacji systemów projektowych pochłaniają czas inżynieryjny, który nie przynosi żadnej wartości użytkownikowi w projektach solowych. Moją „dokumentacją” jest blok :root w critical.css. Każdy programista (lub agent AI) czytający ten plik natychmiast rozumie system.

Wsparcie dla wielu frameworków

Moja strona używa czystego CSS. Żadnych komponentów React, żadnych wrapperów Vue, żadnych Web Components. Tokeny działają w każdym frameworku, ponieważ CSS custom properties są niezależne od frameworka. Warstwą abstrakcji jest sam CSS.

Przedwczesny teatr dostępności

Dostępność ma znaczenie — moja strona osiąga kontrast WCAG AAA na każdym poziomie tekstu. Ale najpierw zbudowałem system kontrastów (tokeny o znanych proporcjach), a dopiero potem zweryfikowałem zgodność. Rozpoczęcie od tokenów z wbudowaną dostępnością (każdy poziom tekstu przekracza kontrast 7:1) jest skuteczniejsze niż audytowanie dowolnych wyborów kolorów po fakcie.⁹

Kluczowe wnioski

Dla samodzielnych programistów: - Zdefiniuj CSS custom properties dla kolorów, typografii, odstępów i przejść pierwszego dnia; inwestycja w 41 tokenów zapobiega błędom i niespójnościom, których debugowanie kosztuje godziny - Pomiń biblioteki komponentów, strony z dokumentacją i Storybook; w projektach solowych narzut utrzymaniowy przewyższa korzyści z koordynacji - Wyodrębniaj wzorce z kodu produkcyjnego, gdy ten sam element pojawia się w trzech miejscach; przedwczesna ekstrakcja marnuje wysiłek na wzorce, które mogą nie przetrwać następnej iteracji

Dla liderów projektowania w startupach: - Zacznij od tokenów przed product-market fit; tokeny przetrwają pivoty, ponieważ działają poniżej warstwy komponentów - Powstrzymaj się od formalnego systemu, dopóki 25+ inżynierów nie stworzy prawdziwego problemu koordynacyjnego; formalizacja przed tym progiem tworzy narzut utrzymaniowy, który spowalnia iterację

Źródła