Agentic Canvas: Navrhujte s AI agenty11 min read

AI agenti dokážou vytvořit web během několika minut. Pak ale chcete posunout tlačítko, porovnat dvě rozvržení, posbírat pár snímků obrazovky nebo sami upravit rozestupy. Najednou znovu vysvětlujete vizuální změnu v dalším promptu. Někdy je snazší prvek přetáhnout než psát zadání.

Proto jsme vytvořili Agentic Canvas od AgentGrid.io. Je to bezplatné návrhové plátno s AI, na kterém vy i agent podporující MCP pracujete se stejnou skutečnou stránkou v HTML a CSS. Vložte HTML, začněte návrhem či obrázkem nebo nechte agenta stránku vytvořit. Potom můžete jeho výsledek vybrat, přesunout, změnit jeho velikost a upravit. Můžete otevřít Agentic Canvas bez založení účtu.

Tady je jednoduchý způsob, jak ho využít: přineste HTML stránku nebo obrázek, uspořádejte a upravte ho vizuálně, požádejte Claude nebo ChatGPT o vylepšení animace nebo interakce a pak exportujte HTML. Můžete kdykoli zasáhnout ručně, místo abyste začínali další prompt od nuly.

Co je Agentic Canvas?

Je to vizuální pracovní prostor pro navrhování skutečných webových stránek s AI agentem. Plátno nabízí známé rámečky, vrstvy, inspektor a ovládání rozvržení, ale rámečky jsou založené na kódu, nikoli na statických obrázcích. Agent připojený přes MCP může přečíst aktuální stránku a změnit ji. Výsledek vidíte, ručně ho upravíte a necháte agenta navázat na aktuální návrh.

Představte si to jako místo, kde člověk, který vidí, co je potřeba opravit, a agent, který může napsat kód, pracují na tom samém.

Proč jsme potřebovali plátno pro AI agenty

1. Vizuální spolupráce bez další smyčky promptů

Když s Claude nebo ChatGPT vytváříte úvodní stránku, obrazovku produktu či marketingový materiál, první návrh je teprve začátek. Třeba chcete tři varianty hlavní sekce, těsnější mřížku nebo jinou výzvu k akci. Popisovat každé vizuální rozhodnutí v chatu je pomalé, zvlášť když přesně víte, co změnit.

V Agentic Canvas můžete změnu provést přímo. Agent si pak přečte stránku v její aktuální podobě, ne slovní popis verze, která už neexistuje. On udělá těžkou práci, vy učiníte finální rozhodnutí a on naváže tam, kde jste skončili.

2. Místo pro získání vizuálního kontextu

Některé nápady začínají jako inspirační koláž, nikoli jako specifikace. Shromážděte snímky obrazovky, referenční stránky, obrázky a text, prostorově je uspořádejte a doplňte materiály, které vysvětlují, co chcete vytvořit. AI agent může vycházet z návrhu přímo před vámi místo odhadování z dlouhé historie chatu.

To je důležité při práci se značkou. Vzorové rozvržení, text a snímek obrazovky mohou záměr vyjádřit rychleji než další odstavec popisující požadovanou náladu.

3. Proč plátno používá skutečné HTML a CSS

Proč stavět návrhový nástroj na HTML a CSS? Protože programovací agenti už umějí plynně číst a psát kód. Pro mě je práce agenta přes samostatný návrhový formát podobná situaci, kdy má rodilý mluvčí angličtiny myslet anglicky, ale číst a psát čínsky. Při takovém převodu se mohou ztratit detaily a stojí čas i tokeny. Už dříve jsem psal, že design je kód. Tady to platí doslova.

V Agentic Canvas je rámeček skutečnou stránkou, automatické rozvržení odpovídá CSS flexboxu a mřížky jsou tvořené CSS gridem. Tlačítko můžete upravit vizuálně, požádat agenta o animaci či interakci a hotový kód exportovat. Živé stránky mohou přímo na plátně spouštět skripty, zobrazovat stav při najetí myší i reagovat na velikost obrazovky. Není to obrázek, který budete muset později znovu vytvořit.

Jak se to liší od konvenčního designového plátna?

Běžné návrhové plátno pomáhá poskládat vizuální nápad, ale než vznikne funkční webová stránka, výsledek často vyžaduje samostatnou implementaci. Agentic Canvas je nástroj pro navrhování v HTML: rámeček je skutečná stránka, takže agent může číst a měnit stejné HTML a CSS, které vizuálně upravujete. To neznamená, že nabízí všechny funkce vyspělého návrhového nástroje. Cílem je držet vizuální rozhodnutí a funkční kód pohromadě, ať už vylepšujete web vytvořený AI, nebo začínáte nový.

Jak navrhovat web s Claude nebo ChatGPT v Agentic Canvas

1. Začněte tím, co máte. Otevřete plátno a vložte HTML, zkopírujte a vložte výběr z Figma, přidejte obrázky či návrhy nebo začněte stránkou vytvořenou agentem. průvodce importem uvádí podporované možnosti.
2. Připojte svého agenta. Vyberte AI agenty a poté Přidat agenta na plátně. Postupujte podle průvodce připojením pro Claude, ChatGPT nebo jiného klienta podporujícího MCP. Během práce agenta nechte kartu plátna otevřenou.
3. Udělejte první průchod společně. Požádejte o rozvržení nebo interakci a pak zkontrolujte živý výsledek na plátně.
4. Převezměte vizuální kontrolu. Přesouvejte prvky, měňte barvy, upravujte velikost rámečku a dolaďujte rozvržení ručně. Požádejte agenta, aby navázal na nejnovější verzi.
5. Exportujte nebo sdílejte, až budete připraveni. Exportujte HTML nebo jiný podporovaný formát bez publikování. Pokud chcete hostovaný odkaz, Sdílejte nebo publikujte přes AgentGrid.io. Tento krok v cloudu je volitelný a vyžaduje účet.

Co zůstává lokální a co vyžaduje účet?

V prohlížeči můžete začít navrhovat zdarma a bez registrace. Vaše soubory zůstávají v daném prohlížeči na daném zařízení, nikoli v automatické záloze synchronizované mezi zařízeními. Práci, kterou chcete uchovat mimo prohlížeč, si exportujte. Připojení externího agenta mu umožňuje číst plátno a vyžaduje síťové spojení, takže „lokálně“ neznamená „offline“. Sdílení nebo publikování přes AgentGrid.io je volitelné a vyžaduje účet.

Věřím, že příští návrhový nástroj by nás neměl nutit volit mezi vizuálním ovládáním a agentem, který umí tvořit. Agent by měl mluvit jazykem samotného díla a my bychom stále měli mít možnost uchopit prvek na obrazovce a změnit ho.

Otevřete Agentic Canvas a zkuste navrhovat se svým agentem. Pro rychlý přehled pracovního postupu se podívejte na úvodní ukázku a prozkoumejte funkce.

Otázky ohledně Agentic Canvas

Je Agentic Canvas zdarma a potřebuji účet?

Ano, návrhové plátno je zdarma. Otevřete je v prohlížeči a začněte navrhovat bez účtu. Účet AgentGrid.io potřebujete jen tehdy, pokud se rozhodnete přes AgentGrid.io sdílet nebo publikovat.

Kteří AI agenti spolupracují s Agentic Canvas?

Claude, ChatGPT, Claude Code, Codex, Cursor a další agenti podporující MCP mohou číst a měnit otevřené plátno. Vyberte AI agenty a poté Přidat agenta a postupujte podle pokynů k připojení. Během práce agenta nechte kartu plátna otevřenou.

Mohu vizuálně upravovat web generovaný AI?

Ano. Vložte stránku HTML nebo složku webu a pak na plátně přesouvejte prvky, měňte jejich velikost a dolaďujte je. Rámečky jsou tvořené skutečným HTML a CSS, takže agent může navázat na vaše vizuální úpravy místo toho, aby znovu vytvářel statickou maketu.

Mohu importovat existující stránku HTML nebo web?

Ano. Vložte HTML na plátno nebo přetáhněte složku webu či její ZIP na Home. Začít můžete také výběrem z Figma nebo obrázkem.

Kde jsou moje soubory na plátně uložené? Zálohují se?

Ukládají se lokálně v použitém prohlížeči a zařízení bez automatické cloudové zálohy. V jiném prohlížeči či zařízení je neuvidíte. Důležitou práci si exportujte nebo využijte sdílení přes AgentGrid.io, pokud chcete cloudovou zálohu a historii verzí.

Může můj AI agent pracovat na plátně i po zavření karty?

Ne. Karta plátna musí zůstat otevřená, zatímco připojený agent čte nebo mění návrh. Ke svým lokálně uloženým souborům se později můžete vrátit ve stejném prohlížeči.

Získá připojený agent také přístup k mému pracovnímu prostoru AgentGrid.io?

Ne. Připojení agenta k plátnu mu dovoluje pracovat s otevřenými soubory na plátně. Připojení stejného agenta k artefaktům AgentGrid.io je samostatný krok.

Mohu exportovat bez publikování?

Ano. HTML, PNG, SVG nebo PDF můžete exportovat bez sdílení či publikování. HTML můžete předat programovacímu agentovi a pokračovat v práci jinde.

Je sdílení totéž co publikování?

Ne. Sdílení přes AgentGrid.io zpřístupní návrh lidem a agentům, které si vyberete; publikování jej umístí na veřejnou webovou adresu. Obojí je volitelné a vyžaduje účet AgentGrid.io.