Menu
Přihlásit
Domů / Obsah / Vibe coding / Web za odpoledne: Framer návod...
Vibe coding 17.08.2026 Tutorial

Web za odpoledne: Framer návod s AI agentem 2026

Postavte web za jedno odpoledne s Framer AI agentem. Praktický návod: kredity a plány, branching a napojení Claude Code přes MCP.

Kompletní návod

Framer se v roce 2026 změnil z prototypovacího nástroje na plnohodnotný website builder s AI agenty přímo na plátně. Verze 3.0, kterou Framer vydal 16. června 2026, přinesla agenty, kteří umí generovat stránky, psát obsah, spravovat CMS i auditovat web — a k tomu branching pro bezpečné experimentování. V tomto návodu ti ukážu, jak s Framerem postavit firemní web s AI agentem krok za krokem, kolik tě to bude stát a kdy má smysl sáhnout po externích nástrojích místo kreditů.

Pokud řešíš, jak rychle dostat web od promptu k produkci bez toho, abys týden ladil šablonu nebo čekal na developeru, je tento Framer návod přesně pro tebe. Projdeme celý workflow: od zadání prvního promptu, přes úpravy na plátně, až po publikaci s napojením na vlastní doménu.

Co Framer 3.0 umí a proč se to týká i tvé práce

Framer agenti nejsou další chat v postranním panelu. Pracují přímo na canvasu — vidí a upravují stejné komponenty, styly, CMS obsah a SEO nastavení, které používá tvůj tým. Framer tomu říká "Cursor pro design" a analogie sedí: stejně jako Cursor změnil psaní kódu, Framer mění tvorbu webů.

Konkrétně agent zvládne tyhle úkoly:

  • Generovat stránky od nuly nebo podle screenshotu existujícího webu
  • Navrhovat layouty a sekce v rámci existujících stránek a dodržovat tvé styly
  • Řešit responzivní breakpointy — mobilní verze už není samostatný projekt
  • Psát a vylepšovat obsah včetně SEO metadat
  • Spravovat CMS kolekce a vytvářet detail stránky pro ně
  • Psát vlastní code komponenty, když vám dojdne šablona
  • Auditovat web na rozbité odkazy, accessibility problémy a nekonzistentní styly
  • Překládat celý web do dalších jazyků

Proč je to pro profesionály důležité? AI generované weby mívají problém s přechodem z dema do produkce. Vygenerovat landing page je snadné — horší je dodělat responzivitu, strukturu obsahu, SEO a přístupnost. Framer agenti pracují v prostředí, kde se web zároveň navrhuje, kontroluje a publikuje, takže výstup není vyhozený HTML snippet, ale skutečná stránka.

Framer návod krok za krokem: od nuly k publikovanému webu

Teď k praktické části. Takhle vypadá workflow, které zvládneš za jedno odpoledne.

Krok 1: Založ projekt a vygeneruj první stránku

Zaregistruj se na framer.com — na Free plán dostaneš 500 agent kreditů denně, takže první pokusy tě nestojí korunu. Popiš agentovi, jaký web chceš. Ne abstraktně ("moderní web pro firmu"), ale konkrétně: kdo jsi, co prodáváš, komu to je, jakou má web mít strukturu a tón.

Dobrý prompt vypadá takhle: "Web pro pražskou kavárnu se specialty kávou. Struktura: hero s otvírací dobou, nabídka kávy, o nás, kontakt s mapou. Tón přátelský, ale věcný. Barvy tmavě zelená a krémová."

Čím konkrétnější zadání, tím méně iterací. Agent vygeneruje stránku se strukturou, texty i vizuály — a každou změnu můžeš na plátně ručně doladit.

Krok 2: Iteruj na plátně, ne v chatu

Tohle je hlavní rozdíl oproti klasickým AI generátorům webu. Klikneš na element a řekneš agentovi "zmenši hero, přidej sem sekci s recenzemi, přeuspořádej galerii". Agent vidí kontext celé stránky, takže výsledek drží tvůj layout místo toho, aby přegeneroval všechno od nuly.

Praktický tip: nech agenta dodržovat styly, které si nejdřív nastavíš ručně. Založ si barvy a typografii jako text a color styles a agent je pak používá při generování dalších sekcí. Tím web udrží vizuální konzistenci i po dvaceti promptech.

Krok 3: Naplň CMS a nech agenta psát obsah

Pro firemní web potřebuješ blog, portfolio nebo katalog služeb. Vytvoř CMS kolekci (Basic plán jich má od června dvě), nadefinuj pole a nech agenta importovat a strukturovat obsah. Agent umí vygenerovat i SEO metadata pro každou stránku a vytvořit CMS detail pages — šablony, které se automaticky plní obsahem z kolekcí.

Pokud máš obsah v Notion, Google Sheets nebo starém WordPressu, zvládne ho agent importovat a roztřídit. Pořád kontroluj každý text — AI píše věcně, ale češtinu s diakritikou a lokálním kontextem musíš většinou doladit.

Krok 4: Otestuj varianty s branchingem

Branching je funkce, kterou Framer přidal v 3.0 právě kvůli AI experimentům. Vytvoříš izolovanou větev, nechas agenta (nebo kolegu) v ní pracovat a produkce zůstává nedotčená. Změny pak porovnáš, schválíš a mergneš.

Použij to takhle: nech agenta vygenerovat dvě varianty hero sekce do dvou větví, porovnej je s týmem a publikuj jen vítěze. Je to stejné PR review, jen pro design — a u AI generovaného obsahu je to jediný způsob, jak neztratit kontrolu nad tím, co žije na produkci.

Krok 5: Audit a publikace

Než web publikuješ, pusť agentův audit: rozbité odkazy, accessibility problémy, nekonzistentní styly. Agent najde a většinu věcí rovnou opraví. Pak už stačí publikovat — hosting, SSL certifikát a CDN má Framer vestavěné, takže žádný server nezakládáš.

Na Free plánu web běží na framer.com subdoméně. Pro vlastní doménu a vlastní branding potřebuješ Basic plán.

Kolik stojí Framer v roce 2026: AI kredity a plány

Framer přešel v červnu 2026 na systém AI kreditů (viz oficiální oznámení AI credits, simpler plans, and lower prices z 16. června 2026). Každý plán má měsíční příděl a drobné úpravy stojí málo — kreditů naběhne hlavně generování celých stránek a lokalizace do mnoha jazyků.

Plán Kredity Vhodné pro Cena
Free 500 denně (~2 landing pages) první pokusy, prototypy zdarma
Basic 1 000 měsíčně (~5 landing pages) osobní weby, malé projekty cca 10 $/měs ročně
Pro 3 000 měsíčně (~10 landing pages) firmy a týmy cca 30 $/měs ročně

Kredity si dokoupíš kdykoliv od 1 000 kreditů. Zároveň Framer zjednodušil plány — Scale plán zrušil, editor seat zlevnil z 40 $ na 20 $ a Content Editor seat stojí 10 $. Basic plán teď zahrnuje 2 CMS kolekce (dřív 1) a 50 GB bandwidth (dřív 10 GB).

Pro českou firmu to znamená: pořádný firemní web na Basic plánu vyjde zhruba na 250 Kč měsíčně, s Pro plánem na 750 Kč. Oproti agentuře, kde stejná práce začíná na desítky tisíc, je to řádově levnější — cena za tvůj čas strávený řízením agenta.

Kdy sáhnout po externích AI nástrojích místo kreditů

Tady přichází chvíle pro trik, který ušetří nejvíc peněz: Framer podporuje External Agents přes MCP. Připojíš Claude Code, Cursor nebo Codex a necháš je stavět Framer web přímo z těchto nástrojů. Protože AI běží v tvém předplatném (třeba Claude Pro, které už pro coding stejně platíš), nečerpá Framer kredity.

To se hodí ve dvou situacích:

  • Máš těžší měsíc a kredity docházejí — pokračuj přes Claude Code místo dokupování kreditů
  • Web je součástí většího projektu — když už máš v Claude Code rozjetý workflow s ostatním kódem firmy, přidáš Framer MCP a web spravuješ ze stejného terminálu

Pokud chceš vidět, jak MCP servery nastavit v praxi, máme na to samostatný návod na napojení Claude na WordPress přes MCP server — princip je stejný i pro Framer.

Komu se Framer vyplatí a komu ne

Buďme konkrétní. Framer dává smysl, když:

  • Potřebuješ firemní web, landing page nebo portfolio rychle a bez developeru
  • Chceš vizuální kontrolu nad výsledkem — Framer je pořád primárně design nástroj
  • Spravuješ více webů a potřebuješ škálovat obsah přes CMS
  • Chceš agentům přenechat rutinu (audity, lokalizace, obsah) a rozhodovat o designu sám

Nedoporučuji ho, když:

  • Stavíš webovou aplikaci s přihlášením a databází — na to sáhni po Google Stitch nebo klasickém vývoji
  • Potřebujeje plnou kontrolu nad kódem a hostingem — self-hosted řešení je levnější dlouhodobě
  • Máš komplexní e-commerce s pokladnou a skladem — na to je lepší specializovaná platforma, třeba Shoptet s AI automatizacemi

Framer není zázrak, který postaví web bez tvé práce. Je to nástroj, který zkrátí cestu od nápadu k publikovanému webu z týdnů na odpoledne — za předpokladu, že mu umíš dávat dobré pokyny a výsledek kriticky zkontroluješ.

Časté otázky

Je Framer zdarma?

Ano, Free plán zahrnuje 500 AI kreditů denně (cca 2 landing pages), publikaci na framer.com subdoméně a plný přístup k agentům. Pro vlastní doménu potřebuješ Basic plán.

Kolik stojí Framer v roce 2026?

Basic plán stojí cca 10 $ měsíčně při roční platbě (cca 250 Kč), Pro plán cca 30 $ (cca 750 Kč). Oba zahrnují AI kredity — 1 000 na Basicu, 3 000 na Pro. Další kredity dokoupíš od 1 000 kreditů.

Umí Framer agent opravdu celý web sám?

Agent vygeneruje strukturu, obsah i responzivní verze, ale produkční kvalita vyžaduje tvou kontrolu. Workflow "prompt, zkontroluj, uprav, publikuj" je záměrné — agent dělá práci, ty držíš kontrolu nad tím, co vyjde.

Jak Framer porovnat s Wixem nebo Webflow?

Framer je výrazně AI-first: agenti pracují přímo na plátně a kredity jsou součástí každého plánu. Webflow má robustnější CMS a ekosystém pro větší weby, Wix je jednodušší pro úplné začátečníky. Pro rychlé weby s AI asistencí je Framer v roce 2026 nejrychlejší cesta.

Vyčerpám kredity, co teď?

Buď si dokup kredity (od 1 000), upgraduj plán, nebo přepni na External Agents — připoj Claude Code nebo Cursor přes MCP a pokračuj s AI, kterou už platíš v předplatném, bez odběru Framer kreditů.

Závěr: postav si web za odpoledne, ne za měsíc

Framer 3.0 posunul tvorbu webů tam, kde už coding dávno je: od ruční práce k řízení AI agentů. Nástroj zvládne generovat stránky, psát obsah, spravovat CMS i auditovat výsledek — a ty rozhoduješ, co se publikuje.

Začni na Free plánu, projdi si pět kroků z návodu a uvidíš reálný výsledek ještě dnes. Až ti dojdou kredity, připoj Claude Code přes MCP a pokračuj dál. Web už není projekt na měsíc — je to odpoledne s agentem, kterému dáváš směr.

Bezplatný kurz

Nauč se Claude Code za 10 dní

Bezplatný e-mailový kurz s praktickými tipy. Žádná teorie, jen to, co funguje.

Začínáte s AI?

Navštivte zacinamsai.cz — průvodce světem AI pro úplné začátečníky.

Přejít na Začínáme s AI →

// Další články, které by tě mohly zajímat

Potřebujete pomoct s AI automatizací?

Domluvte si nezávaznou konzultaci →