Ovdje je prompt, ali i nešto više od toga. Objasnit ću zašto je ovaj pristup drugačiji od svega što ste do sada radili u Canvi, zašto radi, i kako ga vi možete prilagoditi vlastitom brendu.
Zašto je dizajn karusela mukotrpan posao
Ako si ikad sjeo napraviti Instagram karusel od nule, znaš o čemu pričam.
Otvoriš Canvu. Biraš template. Mijenjaš boje. Tipografiju. Pa onda 7 puta isto za svaki slide. Pa progress bar. Pa swipe arrow. Pa watermark. Pa tag pillove. Sve to mora izgledati konzistentno, mora pratiti brend, mora se uklapati u 4:5 format, mora biti čitljivo na mobitelu.
Dva sata kasnije imaš jedan karusel.
A ako ga želiš za drugog klijenta, ponavljaš sve od početka jer si Canva template “skoro” prilagodio njegovom brendu.
Ovo je dizajnerski posao koji 90% sadržaja ne treba dizajnera. Treba dosljedan sustav. I to je točno ono što ovaj prompt radi.
Što ovaj prompt zapravo radi
Ovo nije “napiši mi tekst za karusel” prompt. Ovo je dizajn sustav zapakiran u upute za Claude.
Daš mu jednu boju brenda, ime, handle, font preferenciju i temu karusela. On ti vrati gotov, exportabilan karusel od 7 slidea koji izgledaju kao da ih je napravio dizajner s 5 godina iskustva.
Konkretno, sustav radi ovo:
Iz jedne tvoje boje gradi cijelu paletu. 6 tokena, automatski. Primarnu, svijetlu varijantu, tamnu varijantu, off-white pozadinu, border, dark pozadinu s tintom tvoje boje. Sve usklađeno. Topla boja dobija toplu paletu, hladna dobija hladnu.
Bira tipografiju iz Google Fonts po feelingu. Editorial, modern, warm, technical, bold, classic, friendly. Pet pairings koji rade. Heading + body. Veličine i razmaci su fiksni jer rade na 4:5 formatu.
Pravi 7 slidea s narativom. Hook, problem, rješenje, što dobiješ, detalji, koraci, CTA. Alternira light i dark pozadine za ritam. Posljednji slide je drugačiji - bez arrowa jer si stigao do kraja.
Embedda sve UI elemente u sliku. Progress bar, swipe arrow, tagovi, pillovi. Nema overlaya. Svaki slide je samostalan PNG spreman za upload na Instagram.
Exporta gotove 1080x1350 PNG fajlove. Playwright skripta koja koristi device_scale_factor da zadrži layout na 420px ali renderira u rezoluciji koju Instagram traži. Bez reflowa. Bez distorzije.
Zašto ovo nije samo “prompt”
Tu je trik koji većina propušta.
Prosječan AI prompt je rečenica ili dvije. “Napiši mi karusel o X.” I dobiješ generičke slidove koji izgledaju kao da ih je napravila AI prije dvije godine.
Ovaj prompt je 2000+ riječi specifikacije. Definira tipografski sistem, color logic, layout rules, komponente, export pipeline. Claude ne improvizira jer mu je sve rečeno.
To je razlika između AI-a kao generatora i AI-a kao izvršnog dizajnera. Generator ti baci nešto čega se sjeća iz treninga. Izvršni dizajner radi po sustavu kojeg si mu zadao.
Ako razumiješ tu razliku, razumiješ zašto ljudi koji “ne znaju koristiti AI” dobivaju loše outpute. Nisu mu zadali sustav.
Kako ti ovo koristiš
Skineš Claude Code (besplatno za sada, treba ti samo Claude račun). Otvoriš novi projekt. Zalijepiš prompt koji ću dolje dati. Claude te pita za 7 stvari (ime brenda, handle, boja, logo, font, ton, slike). Odgovoriš. On napravi HTML preview u Instagram okviru. Swipeš kroz njega kao da si na Instagramu.
Ako ti se nešto ne sviđa, kažeš mu što. “Treći slide ima preveliki font.” “Promijeni accent boju na malo tamniju.” On popravi. Iteriraš.
Kad si zadovoljan, kažeš mu “exportaj.” Pokrene se Playwright skripta. Dobiješ folder s 7 PNG fajlova. Direktno na Instagram.
Ukupno vrijeme za prvi karusel: 15-20 minuta. Drugi karusel za isti brend: 5 minuta jer Claude pamti tvoje preference.
Što napraviti drugačije za vlastiti brend
Prompt je dobar default, ali nije zakon. Tri stvari koje ti predlažem da prilagodiš:
Narativ od 7 slidea. Hook → problem → rješenje → features → details → how-to → CTA radi za većinu B2B sadržaja. Ali ako radiš lifestyle ili e-commerce, vjerojatno ti treba drugi arc. Hook → priča → emocija → social proof → CTA. Promijeni “Standard Slide Sequence” sekciju.
Tipografski pairings. Tablica koju Claude dobija ima 7 opcija. Ako tvoj brend već ima fontove, dodaj ih kao default umjesto da Claude bira.
Tone preferences. Reci Claudeu unaprijed kakav copy želiš. “Ne piši hype rečenice.” “Bez emojiija.” “Direktno, kao da pišeš friend group chat.” Inače će defaultati u marketinški glas.
Veća slika
Ovo nije samo o karuselima. Ovo je primjer kako se AI mijenja iz alata za pitanja u alat za izvršenje.
Prije godinu dana, prompt s ovakvom razinom specifikacije bi mahnuo rukom. Claude bi dao prosječan output i ti bi morao prepisivati pola. Sad može držati kontekst, slijediti pravila, izvršavati Python skripte, generirati produkcijske fajlove.
Ako vodiš biznis i ne razmišljaš o tome kako bi tvoj sadržaj, marketing, prodaja, customer support izgledali kao “sustavi koje izvršava AI” umjesto “zadaci koje radi čovjek sat po sat”, zaostaješ.
I to nije provokacija. To je činjenica koju ću za 12 mjeseci vidjeti u tvojim rezultatima.
Prompt
Evo ga, cijeli, kako sam ga obećao:
## Step 1: Collect Brand Details
Before generating any carousel, ask the user for the following (if not already provided):
1. Brand name — displayed on the first and last slides
2. Instagram handle — shown in the IG frame header and caption
3. Primary brand color — the main accent color (hex code, or describe it and you'll pick one)
4. Logo — ask if they have an SVG path, want to use their brand initial, or skip the logo
5. Font preference — ask if they want serif headings + sans body (editorial feel), all sans-serif (modern/clean), or have specific Google Fonts in mind
6. Tone — professional, casual, playful, bold, minimal, etc.
7. Images — ask for any images to be included in the carousel (profile photo, screenshots, product images, etc.)
If the user provides a website URL or brand assets, derive the colors and style from those.
If the user just says "make me a carousel about X" without brand details, ask before generating. Don't assume defaults.
## Step 2: Derive the Full Color System
From the user's single primary brand color, generate the full 6-token palette:
BRAND_PRIMARY = {user's color}
BRAND_LIGHT = {primary lightened ~20%}
BRAND_DARK = {primary darkened ~30%}
LIGHT_BG = {warm or cool off-white}
LIGHT_BORDER = {slightly darker than LIGHT_BG}
DARK_BG = {near-black with brand tint}
Rules for deriving colors:
- LIGHT_BG should be a tinted off-white that complements the primary
- DARK_BG should be near-black with a subtle tint matching the brand temperature
- LIGHT_BORDER is always ~1 shade darker than LIGHT_BG
- Brand gradient: linear-gradient(165deg, BRAND_DARK 0%, BRAND_PRIMARY 50%, BRAND_LIGHT 100%)
## Step 3: Set Up Typography
Suggested pairings:
- Editorial / premium: Playfair Display + DM Sans
- Modern / clean: Plus Jakarta Sans (700) + Plus Jakarta Sans (400)
- Warm / approachable: Lora + Nunito Sans
- Technical / sharp: Space Grotesk + Space Grotesk
- Bold / expressive: Fraunces + Outfit
- Classic / trustworthy: Libre Baskerville + Work Sans
- Rounded / friendly: Bricolage Grotesque + Bricolage Grotesque
Font sizes (fixed):
- Headings: 28-34px, weight 600, letter-spacing -0.3 to -0.5px, line-height 1.1-1.15
- Body: 14px, weight 400, line-height 1.5-1.55
- Tags/labels: 10px, weight 600, letter-spacing 2px, uppercase
- Step numbers: heading font, 26px, weight 300
## Slide Architecture
- Aspect ratio: 4:5 (Instagram carousel standard)
- Each slide is self-contained - all UI baked into the image
- Alternate LIGHT_BG and DARK_BG backgrounds for visual rhythm
Required on every slide:
1. Progress bar (bottom, full width, fills as user swipes)
2. Swipe arrow (right edge, all slides EXCEPT the last)
## Standard Slide Sequence (7 slides ideal, can flex 5-10)
1. Hero (LIGHT_BG) - bold hook, logo lockup
2. Problem (DARK_BG) - what's broken
3. Solution (Brand gradient) - the answer
4. Features (LIGHT_BG) - what you get
5. Details (DARK_BG) - depth, customization
6. How-to (LIGHT_BG) - numbered steps
7. CTA (Brand gradient) - logo, tagline, button. NO arrow. Full progress bar.
## Instagram Frame (Preview Wrapper)
Wrap carousel in IG-style frame for chat preview:
- Header: Avatar + handle + subtitle
- Viewport: 4:5 aspect, draggable track
- Dots, actions (heart/comment/share/bookmark), caption
- IMPORTANT: .ig-frame must be exactly 420px wide. Carousel viewport 420x525px.
## Exporting Slides as 1080x1350 PNGs
After preview approval, export each slide as 1080x1350 PNG.
Critical rules:
1. Use Python (not shell) for HTML generation
2. Embed images as base64 data URIs
3. Keep 420px layout width - use device_scale_factor=2.5714 to scale up
Use Playwright with:
- viewport: 420x525
- device_scale_factor: 1080/420
- wait_for_timeout(3000) for fonts to load
- Hide IG frame chrome before screenshot
- Disable swipe transitions for snap positioning
Ako koristiš ovo i napraviš nešto kul, taguj me. Volio bih vidjeti kako prilagođavaš sustav vlastitom brendu.
Također, pogledaj i www.fraviz.com da vidiš koje usluge nudimo.
