Komponenty PromptEye to klasy CSS z css/ w paczce systemu. Wstawiasz je w HTML i podmieniasz treść; motyw i tła dorysowują skrypty. Poza Claude Design nie ma komponentów React, logo wstawiasz plikiem SVG.
Kontekst
| Klasa | Co robi |
|---|---|
.dk | ciemne tło: czerń, tekst w kolorze papieru |
.pp | jasne tło: biel, tekst atramentem |
.cx-l | jasny kontekst dla przycisków i linków, np. b1b staje się czarny |
Przyciski
| Klasa | Poziom | Wygląd | Kiedy |
|---|---|---|---|
b1b | 1 · standard | jasny z pomarańczowym punktem; w .cx-l czarny | główna akcja sekcji |
b1a | 1 · Moment | pomarańczowy | tylko zamknięcie artykułu lub strony, tylko na czerni |
b1w | 1 | biały | wyjątkowo na zdjęciu lub kolorze |
b2 | 2 | szkło / ramka | drugi wybór |
b3 | 3 | tekst ze strzałką; .n bez strzałki | trzeci wybór, linki w sekcjach |
Rozmiar F to pełna szerokość (52 px).
<a class="b b1b" href="#">Umów demo</a>
<a class="b b2" href="#">Pobierz raport</a>
<a class="b b3" href="#">Zobacz rozdziały</a>- Jeden przycisk poziomu 1 na sekcję. Drugi wybór to poziom 2 albo 3.
- Poziom 1 wyróżnia jasność i punkt, nie kolor.
- Poziom 3 to sam tekst ze strzałką; podkreślenie dopiero po najechaniu.
- Moment (b1a) tylko na czerni. Nie na kolorze, nie obok kobaltu, nigdy w nawigacji ani w aplikacji. Przy Momencie w kadrze nie ma innego pomarańczu.
- Kobalt nie wypełnia przycisku.
- Punkt tylko w poziomie 1.
- Prostokąt z rogiem 2 px. Bez pigułek.
- Przycisk stoi na spokojnym tle: czerń, biel albo ciemna część gradientu. Nigdy w najjaśniejszym miejscu światła.
- Treść: czasownik i rzecz, najwyżej 3 słowa. Bez wykrzyknika i bez „kliknij”.
- Telefon: poziom 1 na pełną szerokość na dole, drugi wybór jako poziom 3 pod nim.
Nawigacja strony
Nawigacja stoi w hero. a.on to aktywna pozycja. W jasnym F logo w kolorze na jasne tło, a przycisk w nawigacji to nadal b1b, nigdy b1a.
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
<nav><a href="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
<span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>Hero (1440 × 860)
| Wariant | Klasy sekcji |
|---|---|
| D ciemne | ah dk + data-pe-hero="d" |
| F jasne | ah ahl cx-l f86 + data-pe-hero="f" |
| G okładka | ah dk gt gt-k + data-pe-hero="g" |
| E obrys | ah dk + data-pe-hero="e" |
.ah-in to kolumna tekstu (left 48, top 184, width 680). Tytuł H1 64 do 3 linii, lead 21 do 3 linii. .ah-cr to ścieżka, .ah-m meta. Wszystkie warianty na żywo są w rozdziale Motyw.
<section class="ah dk" data-pe-hero="d">
<header class="hn">…</header>
<div class="ah-in">
<div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Regiony Polski</span></div>
<h1>Dokąd AI wysyła Polaków nad morze?</h1>
<p>Lead, maks. 3 linie (ok. 150 znaków).</p>
<div class="ah-m"><b>Zespół badawczy PromptEye</b><span>23 października 2026</span><span>9 min czytania</span></div>
</div>
</section>CTA (1440 × 560)
Zamknięcie strony: raster motywu, Moment (b1a) i poziom 3. Przy Momencie tytuł bez kropki.
Pokaż kod
<section class="t2end" data-pe-cta="raster">
<div class="t2end-in">
<h2>Sprawdź, jak AI poleca Twój region</h2>
<p>Pokażemy wyniki Twojej marki na tle konkurencji. Demo trwa 30 minut.</p>
<div class="pb-ctas"><a class="b b1a L" href="#">Umów demo</a><a class="b b3 L" href="#">Pobierz raport</a></div>
</div>
</section>Komentarze ekspertów
Biała sekcja z małym szarym elementem motywu przy krawędzi. Trzy karty, cytat do 5 linii, zdjęcie przez image-slot.
<section class="kx" data-pe-komentarze="raster" data-kolor="szary">
<div class="kx-in">
<div class="kx-h"><small>Komentarze ekspertów</small><h2>Co o wynikach mówią praktycy</h2></div>
<div class="kx-g">
<article class="kx-c">
<div class="kx-p"><image-slot id="foto-1" shape="circle" placeholder=""></image-slot><div><b>Imię Nazwisko</b><span>Stanowisko</span><span>Firma</span></div></div>
<blockquote>Cytat, maks. 5 linii.</blockquote>
<a class="b b3" href="#">Czytaj komentarz</a>
</article>
…(3 karty)
</div>
</div>
</section>Rycina liniowa
Dane w raporcie pokazujesz liniowo, bez kropek motywu. Rycinę rysuje skrypt (data-pe-rycina). Zasady i wzory: rozdziały Tabele i Wykresy.
<figure class="t2fig t2fw fgm">
<div class="t2fig-h"><div><small>Rycina 1 · Regiony Polski</small><h4>Liderzy kategorii w rekomendacjach AI</h4><p>Miara, okres.</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
<div class="fgm-b" data-pe-rycina><ul class="fgm-l"><li><small>Nad morze</small><b>Sopot</b><span>30,9 %</span></li>…</ul></div>
<div class="t2fig-f"><span>Źródło: PromptEye, …</span><b>prompteye.com/raporty</b></div>
</figure>Pozostałe sekcje strony
Wzory 1:1 są w arkuszach systemu. Kopiujesz blok z arkusza i podmieniasz treść.
| Sekcja | Klasy | Arkusz |
|---|---|---|
| Jak to działa | .pb-sh, .pb-cards | kanaly.html (C1, C2) |
| Raporty | .t2sp | kanaly.html |
| Cennik | .t2pr, .t2pk, .t2p, .t2p.ft | kanaly.html |
| Porównanie | .t2cmp | kanaly.html |
| FAQ | .t2fq, .t2faq | typografia.html (A1, A2) |
| Powiązane | .t2rel, .t2card | typografia.html |
| Stopka | .t2ft | typografia.html |
Szablony
Gotowe strony w paczce: templates/hero-raportu, templates/okladka-raportu, templates/artykul i templates/rozdzial-raportu. Ładują system przez ds-base.js.