Pencil.dev: vibekodéři se obejdou bez designéra. Brzy.

Nebudu lhát. Můj postoj k vibecodingu je poměrně rezervovaný. AI používám od chvíle, kdy se z ní stala s příchodem ChatGPT masová záležitost. Takže ne, nejsem early adopter a nebudu tu psát, že jsem to používal jako správný ajťák už roky ChatGPT.

Samozřejmě jsem záhy objevil využití jazykových modelů i při pomoci s tvorbou kódu. Záhy po uvedení jsem si zaplatil GitHub Copilot a začal jej využívat nejdříve jako chytrou nápovědu, později pro vytváření celých funkcí a generování částí kódu. Asi před rokem jsem mu dovolil zasahovat do kódu v editorském režimu a před pár měsíci i v tom agentském.

Čistokrevný vibecoding s GitHub Copilot CLI nebo raději ve Visual Studio Code používám zatím jen pro vlastní projekty, pečlivě zálohuju a používám git. Hraju si také s lokálními modely a několika MCP servery.

Když nechcete být odkázáni na designéra

Už jsem si vyzkoušel pomocí vibecodingu převod grafiky z Figmy do čistého HTML i do WordPressu spolu s naplněním obsahu, vytvořením celého tématu vzhledu a patternů v Gutenbergu. Funguje to skvěle, pokud tomu jde naproti technické zpracování designu ve Figma.

Ale přesně tady vnímám, že jsem jako programátor, resp. vibekodér odkázán na designéra. Jasně, zvládnu si web vymyslet sám. Zvládnu si jej taky vypromptovat. Ale stavba webu bez grafiky, čekání na sestavení kódu a následné iterování, to je velice zdlouhavá záležitost. Kreslit ve Figma mě dílem nebaví, dílem to neumím na takové úrovni jako profík.

Něco mi říká, že nebudu sám. A pro všechny stejně smýšlející přišla před pár dny skvělá zpráva. Český vývojář působící v USA, Tom Krcha, přišel s nástrojem Pencil.dev. Jde o designérský nástroj pro návrh webů nebo obecně různých uživatelských rozhraní.

Pencil.dev – lokální Figma pro AI agenty

Budeme-li se bavit o tvorbě designu, tak první verze Pencilu samozřejmě není tak propracovaná jako Figma. Má ale podstatnou funkci navíc. Plně se integruje s AI agenty a vybranými vývojářskými prostředími pomocí zabudovaného MCP serveru. Charakteristika v bodech:

• lokální běh, váš design neběhá nikde v cloudu
• design je uložen v jediném textovém souboru, jste schopni jej snadno verzovat v gitu
• je to neskutečně rychlé – vykreslování probíhá ve WebGL canvasu místo skládání prvků pomocí DOM
• MCP integrace s VS Code, Cursorem, Claude Code nebo Antigravity
• v tuto chvíli je zdarma

Pencil.dev si nainstalujete buď jako samostatnou aplikaci pro MacOS a Linux, nebo coby rozšíření některého z populárních programátorských editorů. V druhém případě tak vyřešíte aktuální nedostupnost samostatné aplikace ve Windows.

Pro aktivaci potřebujete opsat šestificerný kód, který vám Pencil.dev zašle na e-mail. Samostatnou aplikaci využijete například při editaci návrhů, které sestavíte pomocí terminálových aplikací jako jsou Claude Code nebo GitHub Copilot. První jmenovaný by měl automaticky rozpoznat běžící nástroj a najít jeho MCP server.

Jak se Pencil chová s různými modely a GitHub Copilotem

Já si nový editor nainstaloval coby rozšíření Visual Studio Code. Z prostého důvodu. Nechce se mi platit 20 dolarů za Claude Code, když platím polovinu za Copilota, ve kterém mám navíc na výběr mezi různými modely. Toho jsem hned využil.

Integrace do VS Code je bezproblémová. Nainstalujete rozšíření, vytvoříte nový prázdný soubor s příponou .pen a po jeho otevření se automaticky spustí Pencil uvnitř Visual Studia. Když si zobrazíte seznam MCP serverů, uvidíte, že si sem Pencil automaticky přidal i ten svůj.

Prohlédl jsem si několik cool videí s ukázkama, co Pencil dovede a rozhodl se jej vyzkoušet na něčem, co by mohlo být reálné zadání pro nový web. Nachystal jsem instrukční soubor pro Copilota s informacemi o webu pro mateřskou školku. S pomocí ChatGPT jsem vyladil prompt a vyzkoušel několik modelů, abych porovnal výsledky.

Drtivá většina článků a videí na YouTube totiž ukazuje Pencil.dev ve spojení s modely od Anthropicu, tedy s Claudem. Integrace ve VS Code mi umožnila to snadno vyzkoušet i s dalšími.

Nejprve výstup z GPT-5-mini. Jeho výhodou je neomezený počet volání v Copilotovi v rámci 10dolarového měsíčního předplatného. První kroky typu navrhni mi přihlašovací formulář s konkrétními prvky, vyšly velice dobře, byl jsem tedy zvědav na celý web. Nebo spíše homepage.

Výsledek je rozpačitý. Na obrázku vidíte první výstup po úvodním promptu. GPT-5-mini si s Pencilem úplně nerozumí v kontextu překrývání prvků a pořadí vrstev. Pro screenshot jsem alespoň rozmístil jednotlivé framy, které dal agent přes sebe. Výsledek určitě není dechberoucí, dodatečným promptováním po částech designu, které označíte a požádáte agenta o dodatečnou úpravu, lze ale hezky doladit.

Image

Pro zajímavost jsem zkusil také GPT-5.2-Codex. Je vidět, že design by byl pokročilejší, používá více skupin prvků, ale opět jej trápí neporozumění si s pořadím vrstev.

Image

Další byl na řadě Claude Sonnet 4.5. Tady je výsledek výrazně lepší. Grafika je čitelná, hlavička se snaží dodržet nějaké rozumné mezerování, zbylá část už pokulhává. Opět, lze to uspokojivě doladit dalšími prompty po jednotlivých komponentách. Sonnet přidal také další frame s návrhem komponent jako jsou třeba tlačítka a jejich stavy. Ale žádná hitparáda.

Image

Jako poslední jsem vyzkoušel Claude Opus 4.5. Tohle je už jiné kafe. Pominu určitý nedostatek se zalamováním textu v hero sekci. Ale ten design, který vznikl, je za mě lepší, než co kolikrát vidím jako výstupy juniorů nebo hobíků, kteří se učí, jak nakreslit web.

Opus jako jediný použil všechny specifikované barvy (zelená, žlutá, modrá), až na tu drobnost nemá problémy s rozmístěním prvků, dokonce zvládl v rámci jednoho promptu ještě připravit stručný návrh vnitřní strany a mobilního rozložení. Knihovna komponent také vypadá lépe než u Sonnetu. Líbí se mi, že sám připravil inverzní patičku.

Image

Tohle je za mě velmi slušný základ pro další rozvoj designu. Je třeba si uvědomit, že je to výstup na první a jediný prompt. Nijak zvlášť jsem se nad ním nezamýšlel, vzal jsem výstup z ChatGPT a dal jej do Copilota.

Každý pokus proběhl navíc opravdu velice rychle. Kdybych agenta nechal dělat rovnou nakódovaný design, bude to trvat citelnou dobu a následně budu iterovat, opět čekat a přemýšlet, zda jsem to neměl chystat sám. Podobně, jako když objedete kolonu delší cestou, jenom abyste nestáli.

Ale tady s Pencil.dev vlastně žádné dlouhé čekání nenastává. Každý s uvedených designů vznikl za nižší jednotky minut, včetně toho posledního. Dílčí iterace jsou pak ještě rychlejší.

Výstup designu do HTML

Protože jsem na začátku článku psal o kódu, je čas se k němu opět vrátit. Design je hotový, požádal jsem tedy Opus, ať si jej rovnou taky nakóduje. A výsledek? Myslím, že velmi dobrý. Baví mě, když tam AI modely automaticky doplňují mikroanimace při interakcích s kurzorem. Kódování frontendu mě až tak nebere a tady vidím skvělou příležitost, kdy mi vibecoding práci nebere, ale pomáhá s ní.

Image

Pencil.dev jako designérský nástroj

U současné verze si myslím, že by spousta designérů pokrčila rameny. Ne, Pencil.dev není Figma a asi ani nechce. Je zde spousta nástrojů a nastavení pro layouty, snadno se pracuje s proměnnými, k dispozici jsou předvolené design systémy Shadcn UI, Lunaris, Halo a Nitro, které Pencil umí následně při vašem designu udržet.

Trochu mi zde chybí měření vzdáleností mezi prvky. Označování prvků i vrstev, seskupování nebo přichytávání k mřížce, to vše funguje. Stejně jako exporty označených položek ala Figma.

Pencil si umí převzít design, který v ní máte nachystaný ve Figmě. Stačí Ctrl+C a Ctrl+V a design máte vložený do Pencilu. Zkoušel jsem několik grafických návrhů včetně různých složitých barevných efektů a prošlo to. Nepřenesou se ale vložené fotografie. Kvůli velikosti a proto, že Pencil pracuje s textovým popisem grafiky.

Zdarma prozatím, což není na škodu

Pokud budoucnost v mém oboru znamená, že se přeorientuju ze zpracovávače grafických designů od kolegů do role projekťáka, který s klientem připraví strukturu, tak se na ni těším. Díkybohu mám přesahy, takže vím, co po AI chtít. Představa, že si design ladím pomocí pokynů, na které mám instantní reakci, je nesmírně lákavá.

Pencil.dev je v tuto chvíli zdarma. Do budoucna to bude jinak, takže doporučuji si jej osahat a naučit se s ním pracovat, ať jste pak schopni budoucí placené verze beze zbytku zužitkovat. Za mě je to nástroj, který dává smysl a držím palce dalšímu vývoji.