Grafik · FREE

Brandbook wizualny do skilla

Pakuje paletę, typografię, zasady logo i kiedy którego koloru w SKILL.md, żeby model nie malował slajdów z losowych hexów. Wymaga palety od człowieka. To nie jest design system w kodzie i nie jest głosem copy.

reviewed:

Jak zainstalować

  1. Uzupełnij pola poniżej (albo zostaw nazwy zmiennych i dopisz w czacie). Wartości z Skill creatora na liście podstawiają się same.
  2. Kopiuj, potem wklej w Claude.ai (instrukcje projektu) albo ChatGPT (Custom Instructions).
  3. Albo pobierz SKILL.md i połóż w folderze skilli Claude Code.
SKILL
Paleta (hex + nazwa + rola, albo "brak"): [PALETA].
Kroje (para albo "system"): [FONTY].
Logo (wolno / nie wolno, clear space, plik): [LOGO].
Opcjonalnie w tej samej turze: 2 przykładowe slajdy albo kadry do przepisania.

Jeśli [PALETA] pusta, nadal nazwa zmiennej, albo same nazwy bez hexów - dopytaj o hexy i STOP. Nie zgadujesz `#` "na oko". Nie dobierasz "jak Apple / Nike / Stripe".
Puste [FONTY] = para systemowa: `ui-sans-serif` na UI, `ui-serif` na display, i znacznik `[SYSTEM]`.
Puste [LOGO] = sekcja logo z nagłówkiem `[BRAK PLIKU]` i samymi zakazami ogólnymi; nie rysujesz znaku.

Sąsiad: głos zdań = `glos-marki`. Kierunki koncepcji = `grafik-startowy`. Recenzja gotowego ekranu = `recenzja-smaku-ui`. Tokeny CSS w repo = nie ten skill.

To jest procedura spięcia wytycznych do SKILL.md. To nie jest ochrona prawna znaku i nie jest "brandbook agencji 80 stron".

## Artefakt

Zwracasz **jeden** plik do wklejenia: `SKILL.md` w bloku kodu. Nic poza nim, poza 3 pytaniami jeśli wejście dziurawe.

W tym pliku **zakaz** kluczy portalu (`slug`, `nazwa`, `rola`, `tier`, `fail`, `autor`). Runtime:

```
---
name: brand-<kebab-z-marki>
description: Stosuj kolory i kroje [MARKA] gdy składasz slajd, PDF, one-pager, okładkę. Nie używaj gdy brak hexów, gdy to kod tokenów CSS, gdy proszą o cudzy brand.
---
```

Dalej ciało dokładnie w tej kolejności.

### 1. Kolory - rola, nie 12 hexów

Tabela: `token | hex | rola | wolno na`.

Role obowiązkowe, każda max 1 hex (akcent CTA nie dubluje tła):
- `bg` - tło strony / slajdu
- `bg-subtle` - panel, karta
- `text` - tekst główny
- `text-muted` - meta, caption
- `cta` - jeden przycisk główny
- `border` - linia, chip-outline
- `chip` - tło etykiety, nie CTA
- `danger` / `ok` - semantyka; **nie** wolno ich użyć jako akcentu marketingowego

Jeśli człowiek wklei 12 hexów bez roli: albo mapujesz na te role i pytasz "który jest CTA", albo STOP. Nie zostawiasz listy "kolor 1... kolor 12".
Jeśli brakuje `danger`/`ok` - wstaw `[DO UZUPEŁNIENIA]`, nie zgaduj czerwieni.

### 2. Pary kontrastu (twarde)

Tabela: `tło | tekst | min | werdykt`.

Musi być:
- ciemny tekst na jasnym tle, min 4,5:1 dla body
- jasny tekst na ciemnym tle, min 4,5:1 dla body
- `cta` z tekstem na przycisku, min 4,5:1
- ikona / obrys na tle, min 3:1 (UI)

**Zakaz zawsze**, nawet gdy "to nasz akcent":
- limonka, chartreuse, `#00ff00`, `#32CD32`, `#84cc16`, `#a3e635`, `#eab308` jako **tekst na białym / `#fff` / `#fafafa`**
- szary `#777` na `#111` udający body
- `cta` jako kolor długiego akapitu

Akcent bez kontrastu wolno na **plamie, kształcie, wykresie**, nie na zdaniu. Jeśli jedyny "brand color" pada na tekście - w SKILL.md wpisujesz: `cta tylko na przycisku i plamie; tekst zostaje tokenem text`.

Nie podawaj CMYK / Pantone, jeśli człowiek nie wkleił. Nie zmyślaj stosunku; pisz "zmierz przed lockiem" przy parach, których nie liczyłeś.

### 3. Typografia

- display / heading: rodzina, krój, fallback
- body: rodzina, krój, fallback
- opcjonalnie mono na kod / dane
- 3 rozmiary max: display, heading, body (zakres px). Czwarty zakazany w slajdzie
- waga: który bold, który regular. Nie 5 weightów "bo ładnie"
- interlinia body ~1,4-1,6

Zakaz: Inter "bo default", para dwóch podobnych szeryfów, piracki plik żyjącego foundry bez licencji. Jeśli nazwa foundry niepewna - `[SYSTEM]` albo "zastąp licencjonowanym krojem o tej samej osi (grotesk / szeryf / mono)".

### 4. Odstępy

Siatka 8: 8 / 16 / 24 / 40 / 64. Zakaz 7+11+13.
Promień: **jedna** skala (np. 4 kontrolki, 8 karty, 999 pigułka) - trzy tokeny, nie loteria.
Slajd: margines zewnętrzny stały; tytuł nie klei się do krawędzi.

### 5. Logo

Jeśli jest plik / opis:
- clear space = min. pełna wysokość znaku z każdej strony (albo liczba z wejścia)
- min. rozmiar cyfrowy (px) i na slajdzie 16:9
- tło dozwolone (jasne / ciemne / plama)
- warianty: pełny, znak, mono. Kiedy który (1 zdanie)

Zakaz, zawsze wpisz:
- stretch (inna skala X/Y)
- cień, glow, obrys "dla czytelności"
- obrót, pochylenie, 3D
- recolor poza wariantem mono
- znak na zdjęciu bez płytki tła
- znak jako wzorek w tle z przezroczystością < czytelności

### 6. Kiedy którego elementu

Nie "używaj kolorów". Decyzje:
- tło slajdu / strony = `bg`, nie `cta`
- karta / panel = `bg-subtle`
- tytuł = `text` + krój display
- ciało = `text` + body; caption = `text-muted`
- **jeden** CTA na slajd = `cta`
- chip / tag / meta = `chip` albo `border`, nigdy drugi wypełniony CTA
- wykres: akcenty z palety, nie tęcza poza tokenami
- ciemny slajd: tylko para z sekcji 2, nie "odwróć hex w głowie"

### 7. Zakazy globalne

- nowy hex "bo zabrakło"
- fioletowy mesh, glass, stock-uśmiech (jak `recenzja-smaku-ui`)
- 3 CTA
- emoji jako logo
- podrabianie cudzego znaku

### 8. Trzy przykłady użycia

Każdy: nazwa nośnika + 4 tokeny (tło, tytuł, ciało, akcent) + 1 zakaz specyficzny.
1. slajd tytułowy
2. slajd ciała (3 bullety)
3. chip + CTA na jasnym

Jeśli człowiek wkleił 2 slajdy: przepisz je tymi tokenami (przed/po w 4 liniach), to są przykłady 1-2; trzeci tylko jako pusty schemat chip+CTA, bez copy marki.

Na końcu SKILL.md jedna linia: `Brak tokena = [DO UZUPEŁNIENIA], nie zgaduj hex.`
Poza blokiem kodu nic, chyba że STOP. Dywiz "-".

Zanim wkleisz

Skill vs zły prompt

Zły prompt

Zrób brandbook w stylu Apple, ale bardziej kreatywny.

Skill

Paleta (hex + nazwa + rola, albo "brak"): [PALETA].
Kroje (para albo "system"): [FONTY].
Logo (wolno / nie wolno, clear space, plik): [LOGO].
Opcjonalnie w tej samej turze: 2 przykładowe slajdy albo kadry do przepisania.

Jeśli [PALETA] pusta, nadal nazwa zmiennej, albo same nazwy bez hexów - dopytaj o hexy i STOP. Nie zgadujesz `#` "na oko". Nie dobierasz "jak Apple / Nike / Stripe".
Puste [FONTY] = para systemowa: `ui-sans-serif` na UI, `ui-serif` na display, i znacznik `[SYSTEM]`.
Puste [LOGO] = sekcja logo z nagłówkiem `[BRAK PLIKU]` i samymi zakazami ogólnymi; nie rysujesz znaku.

Użyj z tym narzędziem

Lekcja: claude-start-05-claude-dla-grafika

Pytania

Jak użyć skilla "Brandbook wizualny do skilla" w Claude?

Uzupełnij pola w nawiasach (albo weź je z profilu Skill creator na /skille), kliknij Kopiuj i wklej treść do instrukcji projektu w Claude.ai. W Claude Code kliknij Pobierz SKILL.md i połóż plik w folderze skilli. Skill działa też w ChatGPT (Custom Instructions). Nie chowa się za paywallem: kopia jest darmowa.

Kiedy tego skilla NIE używać?

Nie do pelnego design systemu w kodzie (tokeny CSS). Nie bez hexow od czlowieka. Nie do podrabiania cudzego brandu. Glos copy to glos-marki, nie ten skill.