Każdy materiał PromptEye składasz z tych samych klocków: tła, motywu, pisma i logo. Ten rozdział mówi, którego klocka użyć w danym formacie i z jakimi wartościami. Przykłady poniżej są na żywo, a pod każdym jest kod do skopiowania.
Decyzja w trzech pytaniach
- Czy kadr ma obiekt motywu? Okładka, hero, slajd tytułowy, post z hasłem i CTA mają motyw (
data-pe-hero,data-pe-cta). Slajd treści, post z cytatem lub liczbą i wizytówka nie mają: siatka kropek albo samo tło. Dane to rycina liniowa albo wykres. - Ciemne czy jasne? Domyślnie ciemne D. Okładka i social z tekstem na dole to G. Jasne to F, z ramą według miejsca.
- Gdzie stoi tekst? Po lewej albo u góry: D, F, E. Na dole: G. Kolumnę tekstu oznaczasz atrybutem
data-pe-tekst.
Tabela formatów
Wartości w pikselach. Wzorcem jest hero www (s = 1); format spoza tabeli liczysz od najbliższego tym samym mnożnikiem s. Zasady skali i siatki są w rozdziale Układ i formaty.
| Format | Margines | Kolumny · odstęp | Logo | H1 | Lead | Drobny | Motyw |
|---|---|---|---|---|---|---|---|
| Hero www 1440 × 860 | 48 | 12 · 24 | 22 | 64 | 21 | 14 | D, F, E · G na okładce |
| Slajd 1920 × 1080 | 64 | 12 · 32 | 28 | 80 | 28 | 20 | D, E, F w pudełku · G na okładce |
| Post 1080 × 1350 | 72 | 6 · 24 | 32 | 72 | 28 | 22 | D tekst u góry · G tekst na dole · F bez ramy |
| Post 1080 × 1080 | 72 | 6 · 24 | 32 | 64 | 26 | 20 | jak wyżej |
| OG 1200 × 630 | 64 | 12 · 16 | 28 | 56 | 24 | 20 | D · F bez ramy |
| Okładka LinkedIn 1584 × 396 | 56 | 12 · 24 | bez | 52 | – | – | D, tekst od 400 px |
Slajdy
Slajd tytułowy ma motyw. Slajd treści stoi na czerni z siatką kropek, którą maska wycina spod tekstu. Jasny slajd to F w pudełku: logo i tekst zaczynają się 128 px od krawędzi (rama + margines).
Slajd tytułowy D: motyw, ścieżka, tytuł-pytanie bez kropki.
Pokaż kod
<section class="ah dk" data-pe-hero="d" style="width:1920px;height:1080px">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
<div class="ah-in" style="left:64px;top:216px;width:880px">
<div class="ah-cr" style="font-size:20px">Raport · Turystyka</div>
<h1 style="font-size:80px">Dokąd AI wysyła Polaków nad morze?</h1>
<p style="font-size:28px;max-width:760px">12 000 odpowiedzi siedmiu modeli AI.</p>
</div>
</section>Slajd treści: siatka kropek na czerni, bez motywu. Tytuł to hasło, więc ma kropkę.
Pokaż kod
<div class="t2f dk" style="position:relative;width:1920px;height:1080px">
<canvas class="lt" data-m="flat" data-t="0" data-nz="fade" data-dp="26" data-dh="d" data-dk="cover" data-da=".15" data-dsz="2" data-dm=".03,.18,.5,.6"></canvas>
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;left:64px;top:64px;height:28px">
<h1 style="position:absolute;left:64px;top:216px;width:880px;margin:0;font:400 80px/1.05 var(--pe-font-display);letter-spacing:-.04em;color:var(--pe-papier)">Nad morzem AI poleca trzy marki<span class="dot"></span></h1>
<p style="position:absolute;left:64px;top:432px;width:760px;margin:0;font:400 28px/1.45 var(--pe-font-text);color:var(--pe-noc-tekst)">Booking, Nocowanie.pl i Airbnb zbierają razem 73 % rekomendacji noclegów.</p>
</div>Social media
Post z tekstem na dole to G, z tekstem u góry D, jasny to F bez ramy. Post kwadratowy 1080 × 1080 buduje się tak samo, z H1 64. Okładka LinkedIn nie ma logo, a tekst zaczyna się od 400 px, bo lewy dolny róg zasłania zdjęcie profilu.
Post G: tekst na dole, logo pod tekstem w lewym dolnym rogu.
Pokaż kod
<section class="ah dk gt" data-pe-hero="g" style="width:1080px;height:1350px">
<div class="ah-in" style="left:72px;bottom:152px;top:auto;width:936px">
<h1 style="font-size:72px">Dokąd AI wysyła Polaków nad morze?</h1>
<p style="font-size:28px;max-width:800px">12 000 odpowiedzi siedmiu modeli AI.</p>
</div>
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:72px;bottom:72px;height:32px">
</section>Grafika linku (OG): D, tytuł do dwóch linii. Do PNG z data-pe-static.
Pokaż kod
<section class="ah dk" data-pe-hero="d" style="width:1200px;height:630px">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
<div class="ah-in" style="left:64px;top:140px;width:618px"><h1 style="font-size:56px">Dokąd AI wysyła Polaków nad morze?</h1></div>
</section>Okładka LinkedIn: bez logo, tekst od 400 px.
Pokaż kod
<section class="ah dk" data-pe-hero="d" style="width:1584px;height:396px">
<div class="ah-in" data-pe-tekst="lewo" style="left:400px;top:146px;width:720px"><h1 style="font-size:52px;margin:0">Zobacz, jak AI poleca Twoją markę</h1></div>
</section>Strona www, artykuł, CTA
Hero strony i artykułu, cztery warianty i sekcję CTA opisuje rozdział Motyw. Gotowe szablony: templates/hero-raportu i templates/artykul. Nagłówek strony bez motywu stoi na gradiencie G5 rozciągniętym jak światło hero D (zasady w tla.md). Ostatni slajd prezentacji to sekcja CTA z rastrem w kadrze 1920 × 1080.
Druk
Wzory: guidelines/kanaly.html (D1–D3).
Arial, 13–15 px, logo jako obraz. Geist i Inter nie działają w klientach poczty, a motyw i gradienty nie przechodzą przez pocztę. Wzór: guidelines/kanaly.html (D6).
Eksport do PNG i PDF
Do zrzutu dodaj do sekcji data-pe-static (motyw bez animacji) i poczekaj na PEmotyw.ready. Czarny kadr bez kropek znaczy, że motyw nie wystartował: wywołaj PEmotyw.init(document), nie dorysowuj go.
<section class="ah dk" data-pe-hero="d" data-pe-static style="width:1200px;height:630px">…</section>
<script>
await window.PEmotyw.ready; // motyw narysowany, można robić zrzut
</script>