- Published on
brand-guidelines.md: Jeden plik, który każde narzędzie AI musi znać o Twojej marce
Zapłaciłeś sporo za wytyczne marki. Leżą w 47-stronicowym PDF gdzieś w Google Drive — tym, które Twoja agencja projektowa dostarczyła 18 miesięcy temu. Twoi programiści nigdy go nie otworzyli. Twoje narzędzia AI nie mogą go otworzyć. I za każdym razem, gdy ktoś tworzy landing page w Cursor, pisze e-mail marketingowy z Claude lub buduje komponent w v0, zaczyna od zera: „Jaki był nasz główny kolor? Inter czy Plus Jakarta Sans? Zaokrąglone czy ostre narożniki?"
Ta pętla — tłumaczenie marki, nadzieja że zostanie zapamiętana, poprawianie tego co nie gra — kosztuje godziny każdego tygodnia. W całym zespole, tylko w przeróbkach, kosztuje tysiące miesięcznie.
Format Stitch design-md Google eliminuje tę pętlę. A Branding5 generuje Twój kompletny brand-guidelines.md automatycznie — pobierz jednym kliknięciem, wrzuć do repozytorium, i każde narzędzie AI, którego używa Twój zespół, natychmiast zna Twoją markę.
Czym jest design-md? (I dlaczego nazywają go DESIGN.md?)
Design-md to oparty na Markdown format specyfikacji w zwykłym tekście dla wytycznych marki i designu. Zamiast PDF-a, który tylko ludzie mogą (teoretycznie) czytać, jest to ustrukturyzowany plik .md, który zarówno ludzie jak i systemy AI mogą parsować, rozumieć i budować na jego podstawie.
Google stworzył format jako część Stitch — ich platformy do generowania UI opartej na AI — z prostym założeniem: jeśli dasz AI dobrze ustrukturyzowany opis systemu Twojej marki, może generować UI, pisać treści i podejmować decyzje projektowe, które już są zgodne z marką. Koniec z powtarzaniem się w każdej sesji.
Dwie nazwy, jedna idea
Pliki napisane w tym formacie mają dwie nazwy:
DESIGN.md— skrót w społecznościach programistów. Leży obokREADME.mdiCONTRIBUTING.mdw katalogu głównym projektu, a Cursor, Windsurf i inne narzędzia do kodowania AI szukają go automatycznie.brand-guidelines.md— nazwa używana przez Branding5, bo plik zawiera znacznie więcej niż wizualne specyfikacje. Zawiera Twoje pozycjonowanie, archetypy, ICPs, głos i strategię — pełny system marki, nie tylko kolory i czcionki.
Obie nazwy działają. Format i moc są takie same.
Co wchodzi do brand-guidelines.md
Kompletny plik obejmuje każdą warstwę Twojej marki, od strategii po specyfikacje pikselowe. Oto jak wygląda w praktyce brand-guidelines.md wygenerowany przez Branding5:
# Acme Analytics
## Fundamenty marki
- **Pozycjonowanie:** Jedyna platforma analityczna stworzona dla
nietechnicznych zespołów marketingowych, które potrzebują wglądów
klasy enterprise bez krzywej uczenia.
- **Archetyp:** Mędrzec — mądry, godny zaufania, oparty na danych
- **Misja:** Uczynić umiejętności danych dostępnymi dla każdego marketera.
- **Wartości:** Jasność przed złożonością. Dokładność przed szybkością.
Empowerment przed zależnością.
## Idealne profile klientów
### ICP 1: Growth Marketing Manager
- 28–38 lat, mid-market SaaS (50–500 pracowników)
- Sfrustrowany złożonymi narzędziami BI; potrzebuje dashboardów, które
może budować sam
- Wzorce językowe: „actionable insights", „self-serve", „time-to-value"
- Główny zarzut: „Czy to zastąpi nasz istniejący stack BI?"
### ICP 2: VP Marketingu
- 35–50 lat, raportuje do CMO lub CEO
- Interesuje się atrybucją cross-channel i raportowaniem dla zarządu
- Kupuje na podstawie dowodu ROI i szerokości integracji
## Identyfikacja wizualna
### Kolory
| Rola | Hex | Użycie |
| ----------- | --------- | ---------------------------------------- |
| Główny | `#2563eb` | CTA, aktywne stany, kluczowe elementy UI |
| Drugorzędny | `#f8fafc` | Tła, karty, kontenery |
| Akcent | `#16a34a` | Stany sukcesu, pozytywne metryki |
| Neutral 900 | `#0f172a` | Tekst główny, nagłówki |
| Neutral 400 | `#94a3b8` | Tekst zastępczy, wyłączone stany |
| Błąd | `#dc2626` | Stany błędów, destrukcyjne akcje |
| Ostrzeżenie | `#f59e0b` | Stany ostrzeżeń, alerty uwagi |
### Typografia
| Rola | Rodzina | Waga | Rozmiar | Interlinia | Śledzenie |
| ------- | ----------------- | ---- | ------- | ---------- | --------- |
| H1 | Plus Jakarta Sans | 800 | 48px | 1.1 | -0.02em |
| H2 | Plus Jakarta Sans | 700 | 36px | 1.2 | -0.01em |
| H3 | Plus Jakarta Sans | 700 | 24px | 1.3 | 0 |
| Tekst | Inter | 400 | 16px | 1.6 | 0 |
| Caption | Inter | 500 | 13px | 1.4 | 0.01em |
| Kod | JetBrains Mono | 400 | 14px | 1.5 | 0 |
## Głos i ton marki
- **Głos:** Bezpośredni, pewny, bez żargonu. Wyjaśniamy, nie wykładamy.
- **Zmiany tonu:** Cieplejszy w onboardingu, bardziej asertywny w copy
sprzedażowym, precyzyjny i neutralny w dokumentacji.
- **Styl zdań:** Krótkie zdania. Strona czynna. Zacznij od korzyści.
- **Unikaj:** Zdań w stronie biernej, „wykorzystywać", „synergia",
wypełniaczy, wykrzykników w UI produktu.
### Przykłady
- ✅ „Zobacz, które kampanie generują przychód — jednym kliknięciem."
- ❌ „Nasza innowacyjna platforma wykorzystuje najnowocześniejsze technologie,
aby wyposażyć Twój zespół marketingowy w najlepsze rozwiązania analityczne."
## Wskazówki dotyczące komponentów
### Przyciski
- Główny: wypełniony, `#2563eb`, biały tekst, rounded-full, min wysokość 44px
- Drugorzędny: outlined, obramowanie 1px `#2563eb`, przezroczyste tło
- Ghost: bez obramowania, tylko tekst, używany w nav i akcjach trzeciorzędnych
- Wszystkie przyciski: padding poziomy 16px, font-weight 600, bez wielkich liter
## Dos and Don'ts
- ✅ Zawsze jeden jasny CTA na sekcję
- ✅ Używaj prawdziwych danych w przykładach i zrzutach ekranu, nigdy „Lorem ipsum"
- ✅ Testuj współczynniki kontrastu — minimum WCAG AA (4,5:1 dla tekstu)
- ❌ Nigdy nie używaj więcej niż 3 kolorów w jednym komponencie
- ❌ Nie używaj zdjęć stockowych ludzi wskazujących na ekrany
- ❌ Unikaj wyrównania do środka tekstu dłuższego niż 2 linie
To jest anatomia. Oto jak wygląda prawdziwy output — wygenerowany przez Branding5 dla Oscar Stories, platformy historyjek na dobranoc dla dzieci zasilanej przez AI z archetypem Jester (Błazen).
Front matter YAML — warstwa odczytywalna maszynowo
---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
Dla rodziców, którzy chcą przemienić czas przed snem w radosną
przygodę, Oscar Stories używa inteligentnej AI do tworzenia
spersonalizowanych opowiadań, w których Twoje dziecko jest gwiazdą.
usp: >
Natychmiast tworzy unikalne, zasilane AI opowiadania, w których
Twoje dziecko jest zabawnym bohaterem, czyniąc czas przed snem
magicznym, łatwiejszym dla rodziców i inspirując każdej nocy
wyobraźnię i wartości.
voice:
tone: 'Przyjazny, wyobraźniowy i zachęcający...'
personality: 'Zabawny, wyobraźniowy, opiekuńczy, innowacyjny i godny zaufania.'
promise: 'Sprawić, by czas przed snem był magicznym, więziotwórczym momentem...'
values:
- 'Joyful Connection'
- 'Trustworthy Innovation'
- 'Nurturing Education'
typography:
primary_font: 'Nunito Sans'
secondary_font: 'Lora'
colors:
primary: '#5e219c' # Midnight Plum
darker: '#332145'
---
Co zawiera reszta pliku
Poniżej front matter YAML pełny plik — ponad 14 000 słów — kontynuuje ze wszystkim, czego AI potrzebuje do podejmowania decyzji zgodnych z marką:
- Narracja marki: deklaracja pozycjonowania, misja, wizja, USP i historia „dlaczego to robimy"
- Głębsze spojrzenie na archetyp: kluczowe cechy Błazna, podstawowe strategie, potencjalne pułapki i przykładowe marki (Ben & Jerry's, M&M's, Old Spice)
- Identyfikacja wizualna: pełny system kolorów z hex, CMYK, HSL i stanami hover; hierarchia typografii z wagami i zasadami użycia
- Idealny profil klienta: kompletna persona — „Uważny Nowoczesny Rodzic" — z demografią, psychografią, punktami bólu, celami i preferowanymi kanałami
- Analiza SWOT: mocne strony, słabości, szanse, zagrożenia i ogólna ocena strategiczna
- Copy marketingowy: 8 nagłówków napisanych głosem Błazna, 5 CTA z taktykami pilności i pełna copy landing page w formacie PAS
- Strategia treści: plan treści Hero/Hub/Higiena z konkretnymi tytułami, kanałami i celami
- Kampanie marketingowe: kampanie świadomości, zainteresowania i pożądania zmapowane na framework AIDA
Programista, który nigdy nie spotkał zespołu Oscar Stories, może wrzucić ten plik do Cursor, poprosić o landing page i otrzymać copy brzmiącą jak marka — zabawna, wyobraźniowa, nigdy mentorska — z właściwą fioletową paletą i nagłówkami Nunito Sans. Żadnego briefingu. Żadnych dyskusji.
Tak wyglądają wytyczne marki odczytywalne maszynowo w praktyce. Nie PDF. Jeden plik, który każde narzędzie AI Twojego zespołu może czytać, rozumieć i budować na jego podstawie.
Dlaczego to ważne teraz
Trzy siły zbiegły się, aby uczynić wytyczne marki odczytywalne maszynowo pilnymi, a nie opcjonalnymi:
1. Narzędzia AI piszą teraz większość kodu i copy
Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — programiści i marketerzy dostarczają szybciej niż kiedykolwiek z pomocą AI. Ale te narzędzia nie mają żadnej wiedzy o Twojej marce, chyba że im o niej powiesz. Przy każdej sesji, przy każdym prompcie, ponownie tłumaczysz swoją paletę kolorów. To nie jest workflow — to podatek od szybkości.
Jeden brand-guidelines.md w Twoim repo eliminuje ten podatek na zawsze.
2. Google promuje design-md jako standard
Gdy Google dostarcza specyfikację formatu przez produkt taki jak Stitch, ekosystem zwraca uwagę. Wtyczki Figma, rozszerzenia VS Code i generatory komponentów AI już zaczynają szukać DESIGN.md w katalogu głównym projektu. Prawidłowe skonfigurowanie pliku dziś oznacza, że jutrzejsze narzędzia będą po prostu działać — bez migracji ani przeróbek.
3. Spójność marki z prędkością AI wymaga reguł odczytywalnych maszynowo
Jeśli Twój zespół generuje 50 artykułów blogowych miesięcznie, 20 wariantów reklam tygodniowo i nową landing page każdy sprint, PDF w Google Drive jest bezużyteczny. Reguły marki muszą żyć tam, gdzie odbywa się generowanie — w repozytorium, w kontekście promptu, w pamięci narzędzia.
PDF vs. brand-guidelines.md: bezpośrednie porównanie
| Wymiar | PDF marki | brand-guidelines.md |
|---|---|---|
| Odczytywalny przez AI | ❌ Wymaga OCR; traci strukturę | ✅ Parsowany natywnie przez każdy LLM |
| Żyje w repo | ❌ W Drive/Notion/Dropbox | ✅ Wersjonowany obok kodu |
| Zawsze aktualny | ❌ Ręczne aktualizacje, zamieszanie wersji | ✅ git diff pokazuje dokładnie co się zmieniło |
| Szybkość onboardingu | ⏱ 30+ min na przeczytanie i przyswojenie | ⏱ 5 min na przejrzenie; AI używa go natychmiast |
| Stosowany automatycznie | ❌ Polega na ludzkiej recenzji | ✅ AI stosuje reguły przy każdym generowaniu |
| Czytelny dla człowieka | ✅ Ładny, ale gęsty | ✅ Czytelny Markdown, łatwy do przejrzenia |
| Koszt aktualizacji | 💸 Retainer agencji lub godziny designu | ✍️ Edytuj plik tekstowy w dowolnym edytorze |
PDF nie umarł dla prezentacji interesariuszom. Ale w codziennym wykonaniu — gdzie narzędzia AI wykonują generowanie — zwykły tekst wygrywa zdecydowanie.
Jak używać brand-guidelines.md z Google Stitch
Google Stitch czyta Twój brand-guidelines.md i używa go do ograniczania generowania UI. Zamiast produkować generyczne komponenty Material, generuje UI pasujące do Twojego systemu kolorów, typografii, odstępów i konwencji komponentów.
Workflow w trzech krokach:
- Prześlij lub umieść plik. Umieść
brand-guidelines.mdw katalogu głównym projektu lub prześlij go bezpośrednio w interfejsie Stitch. - Promptuj naturalnie. Zapytaj o to, czego potrzebujesz: „Wygeneruj sekcję cennika z trzema poziomami i wyróżnionym popularnym planem."
- Otrzymaj output zgodny z marką. Stitch automatycznie stosuje Twoje kolory, hierarchię typografii, style przycisków i odstępy. Żadnego przeglądu designu dla podstaw.
Wynik jest nie tylko bliższy Twojej marce — jest szybszy do dostarczenia, bo pomijasz passę korekt, która normalnie zjada całe popołudnie.
Użycie z Cursor, Copilot i innymi narzędziami do kodowania AI
Wrzuć DESIGN.md (lub brand-guidelines.md) do katalogu głównego repo i odwołuj się w promptach:
Cursor:
@DESIGN.md Wygeneruj sekcję hero dla strony głównej.
Użyj głównego stylu CTA, typografii nagłówków i systemu kolorów
zdefiniowanych w pliku.
GitHub Copilot (tryb workspace):
#file:DESIGN.md Zbuduj komponent siatki kart testimonials
używając wytycznych kart i systemu odstępów zdefiniowanych tutaj.
Claude / ChatGPT (wklej lub dołącz plik):
Oto moje wytyczne marki [dołączone: brand-guidelines.md].
Napisz trzy opcje nagłówków strony głównej pasujące do głosu marki
i adresujące ICP 1 (Growth Marketing Manager).
v0 / Bolt / Lovable: Prześlij brand-guidelines.md jako plik projektu lub wklej odpowiednie sekcje do promptu. Te narzędzia zastosują Twoje kolory, typografię i specyfikacje komponentów do każdego generowania.
Zysk: programiści, którzy nigdy nie czytali wytycznych marki, produkują kod zgodny z marką od pierwszego promptu. Ograniczenie jest wbudowane w workflow — nie egzekwowane przez cykle recenzji i wiadomości na Slacku.
Poza wizuałami: dlaczego strategia w pliku zmienia wszystko
Większość plików design system zatrzymuje się na kolorach i czcionkach. Brand-guidelines.md z Branding5 idzie głębiej — i ta głębokość jest tym, co transformuje output AI z „wygląda dobrze" na „brzmi dobrze".
Fundamenty marki mówią AI dlaczego marka podejmuje decyzje, które podejmuje. Gdy AI wie, że jesteś archetypem Mędrca skierowanym do nietechnicznych marketerów, nie wybiera tylko właściwego koloru przycisku — pisze copy, które jest jasne i pewne, zamiast napędzonego hype'em.
Idealne profile klientów dają AI kontekst odbiorcy do generowania odpowiednich wiadomości. Nagłówek dla VP Marketingu czyta się bardzo inaczej niż dla Growth Marketing Managera. Bez ICP w pliku AI zgaduje. Z nimi celuje precyzyjnie.
Wytyczne głosu i tonu z konkretnymi przykładami (dobrymi i złymi) są sekcją o najwyższej dźwigni dla jakości copy. Jeden dobrze napisany przykład „zrób/unikaj" uczy AI więcej niż sto słów abstrakcyjnego opisu głosu.
Dos i Don'ts działają jako twarde ograniczenia. „Nigdy nie używaj więcej niż 3 kolorów w komponencie" i „zawsze dołączaj CTA w każdej sekcji" to reguły, które AI może dosłownie przestrzegać, za każdym razem. Żadnej niejednoznaczności, żadnego dryfu.
Jak Branding5 generuje Twój
Po ukończeniu analizy marki w Branding5, Twój brand-guidelines.md jest gotowy do pobrania z dashboardu. Oto co dzieje się za kulisami:
- Twoja strategia marki zasila plik. Pozycjonowanie, archetyp, ICPs, analiza konkurencji, ton głosu — wszystko, co zbudowałeś w Branding5, przepływa bezpośrednio do ustrukturyzowanego outputu Markdown.
- Specyfikacje wizualne są wyvedzone z Twojego pozycjonowania. Kolory, typografia i konwencje komponentów są generowane, aby pasowały do osobowości Twojej marki — nie pobierane z ogólnego szablonu.
- Output podąża za specyfikacją design-md. Stitch i kompatybilne narzędzia parsują go natywnie. Żadnej konwersji, żadnego przeformatowania.
- Jest gotowy do użycia natychmiast. Wrzuć do repo, dołącz do narzędzia AI lub udostępnij swojemu zespołowi. Jeden plik, każde narzędzie, od pierwszego dnia.
30 minut spędzonych w Branding5 produkuje:
- PDF strategii dla Twoich interesariuszy i inwestorów
- Frameworki wiadomości dla Twojego zespołu marketingowego
- brand-guidelines.md dla każdego narzędzia AI, którego Twój zespół inżynierski i projektowy będzie kiedykolwiek używał
Żadnego copywritingu. Żadnego ręcznego formatowania. Żadnej wiedzy o Markdown potrzebnej.
Pierwsze kroki: pięciominutowa lista kontrolna
Masz już strategię marki? Oto jak przejść od zera do systemu marki gotowego na AI w pięć minut:
- Wygeneruj swój plik. Uruchom analizę marki w Branding5 i pobierz
brand-guidelines.mdz dashboardu. - Wrzuć do katalogu głównego repo. Nazwij go
DESIGN.md, jeśli Twój zespół preferuje konwencję programistów, lub zachowajbrand-guidelines.mddla jasności. - Poinformuj swój zespół. Udostępnij jednowierszową wiadomość: „Nasze wytyczne marki są teraz w
DESIGN.mdw katalogu głównym projektu. Odwołuj się do nich w każdym prompcie AI." - Odwołuj się w każdej sesji AI. Używaj
@DESIGN.mdw Cursor, dołączaj w Claude lub ChatGPT, przesyłaj w v0 lub Bolt. - Aktualizuj na bieżąco. Gdy Twoja marka się zmienia, zaktualizuj plik i commituj. Git śledzi zmianę. Każde narzędzie natychmiast ją pobiera.
To wszystko. Żadnego decku onboardingowego. Żadnych wąskich gardeł przeglądu designu. Nigdy więcej „jaki jest nasz kolor marki?" na Slacku.
Podsumowanie
Narzędzia AI piszą Twój kod, generują Twoje copy i budują Twoje komponenty. Jedyne pytanie brzmi, czy robią to zgodnie z marką — czy improwizują.
Brand-guidelines.md odpowiada na to pytanie raz. Potem odpowiada automatycznie, przy każdym generowaniu, w każdym narzędziu, dla każdej osoby w Twoim zespole.
Format Stitch Google sprawia, że wytyczne marki odczytywalne maszynowo stają się standardem. DESIGN.md staje się plikiem, którego programiści oczekują w katalogu głównym projektu. Marki, które adoptują go teraz, będą dostarczać szybciej, pozostawać bardziej spójne i marnować mniej czasu na korygowanie outputu AI, który chybił celu.
Twoja strategia marki jest już w Branding5. Twój brand-guidelines.md jest o jeden klik.
Często zadawane pytania
Jaka jest różnica między DESIGN.md a brand-guidelines.md?
To ten sam format. DESIGN.md to skrót popularny w społecznościach programistów — odzwierciedla konwencje nazewnictwa README.md. brand-guidelines.md jest bardziej opisowy i sygnalizuje, że plik zawiera strategię marki (pozycjonowanie, głos, ICP), a nie tylko specyfikacje wizualne. Używaj nazwy, którą preferuje Twój zespół; narzędzia AI parsują obie identycznie.
Czy muszę znać Markdown, aby tworzyć lub edytować plik?
Nie. Branding5 generuje plik automatycznie z Twojej analizy marki. Jeśli chcesz dokonać ręcznych zmian później, Markdown to zwykły tekst z prostym formatowaniem (# dla nagłówków, - dla list, ** dla pogrubienia). Każdy może nauczyć się podstaw w dwie minuty.
Które narzędzia AI obsługują design-md / DESIGN.md?
Google Stitch czyta go natywnie. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt i Lovable działają z nim wszystkie, gdy odwołujesz się do pliku lub dołączasz go. Ponieważ jest to zwykły Markdown, każde narzędzie zasilane przez LLM może go parsować i podążać za nim — żadne wtyczki ani integracje nie są wymagane.
Jak szczegółowy powinien być mój brand-guidelines.md?
Wystarczająco szczegółowy, aby usunąć niejednoznaczność. Minimum: Twoja paleta kolorów z zasadami użycia, specyfikacje typografii, konwencje przycisków/kart/formularzy i wytyczne głosu z przykładami. Im bardziej konkretne Twoje dos i don'ts, tym bardziej spójny output AI. Branding5 domyślnie generuje kompleksowy plik — zawsze możesz usunąć sekcje, których nie potrzebujesz.
Jak utrzymać plik zsynchronizowany, gdy moja marka się zmienia?
Traktuj go jak każdy inny plik źródłowy: edytuj, commituj, pushuj. Ponieważ żyje w Git, Twój zespół widzi dokładnie co i kiedy się zmieniło. Jeśli ponownie uruchomisz analizę marki w Branding5, możesz pobrać zaktualizowaną wersję i zastąpić stary plik. Żadnego retainera agencji, żadnego miesięcznego cyklu rewizji.
Czy mogę używać brand-guidelines.md do zadań niekodowych, takich jak pisanie artykułów blogowych lub copy reklamowego?
Absolutnie. Dołącz plik (lub wklej sekcje Brand Voice i ICP) przy promptowaniu Claude, ChatGPT lub dowolnego asystenta pisania. Wytyczne głosu, przykłady tonu i szczegóły odbiorcy są specjalnie zaprojektowane do poprawy copy generowanego przez AI — nie tylko kodu.
Pobierz swój brand-guidelines.md
Uruchom analizę marki w Branding5 i pobierz zgodny z design-md brand-guidelines.md (DESIGN.md) — gotowy dla Google Stitch, Cursor, Copilot i całego Twojego stosu narzędzi AI.