Pencil.dev: designérské plátno pro Claude Code [Wiki]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Pencil.dev: designérské plátno pro Claude Code ======

[[https://www.pencil.dev/|Pencil.dev]] je desktopový nástroj, který propojuje AI-assisted návrh UI s kódováním přes Claude Code. Ve videu [[https://www.youtube.com/watch?v=nn6xIZNCx7Q|Vibe designing? Pencil.dev promění Claude Code v AI design agenta]] je ukázaný hlavně praktický workflow: nejdřív navrhnout rozhraní na plátně, potom ho přes MCP propsat do kódu a podle potřeby synchronizovat změny i zpátky do designu.

{{youtube>nn6xIZNCx7Q?}}

===== Co je na Pencil.dev zajímavé =====

Ve videu je Pencil.dev představený jako mezivrstva mezi designem a vibe codingem.

  * Umožňuje vytvořit wireframe nebo první vizuální návrh ještě před tím, než se začne generovat produkční kód.
  * Pod kapotou používá Claude Code, ale nad ním dává vlastní grafické rozhraní podobné Figmě.
  * Návrhy se ukládají lokálně do souborů '''.pen''', ne jako cloudový dokument třetí strany.
  * V době videa je aplikace zdarma. Autor zároveň zmiňuje, že do budoucna se může cenový model změnit.
  * Pro použití je potřeba mít vlastní Claude Code a aktivní předplatné Claude.

===== Workflow ukázaný ve videu =====

==== 1. Návrh obrazovky přes AI ====

Základní scénář je jednoduchý: místo promptování kódovacího agenta nad HTML/CSS se nejdřív vygeneruje design.

<code>
Potřebujeme vygenerovat design webové aplikace, která bude sloužit pro správu trackování času. To znamená, že uživatel si tam bude moci zadat, kolik času strávil na nějakém daném úkolu, vykázat si to a podívat se i pak do historie, kde uvidí každý den, na kterých úkolech pracoval.
</code>

V ukázce si agent z promptu sám rozpadne úkol na části jako header, aktivní timer, metriky, denní záznamy a historickou obrazovku. Výsledek nepůsobí jako finální design, ale pro wireframing a rychlé ověření struktury je to použitelné.

==== 2. Ruční doladění na plátně ====

Po vygenerování návrhu se dá pokračovat ručně podobně jako v klasickém grafickém nástroji.

  * upravovat texty,
  * měnit layout,
  * nastavovat barvy,
  * měnit zaoblení,
  * pracovat s vrstvami a rámy.

To je důležité hlavně proto, že Pencil.dev není jen chat nad designem, ale skutečné plátno pro další editaci.

==== 3. Iterace nad konkrétní částí návrhu ====

Ve videu je ukázaná i cílená úprava jedné části rozhraní.

<code>
Uprav prosím tohle menu podle těch ostatních tmavě modrých a obsah chci také stejný.
</code>

Tím se dá iterovat nad konkrétním vybraným prvkem, místo aby se přegenerovávala celá obrazovka.

==== 4. Přenos designu do kódu přes MCP ====

Druhý důležitý scénář je převod designu do aplikace. Pencil.dev vystavuje MCP server, na který se Claude Code připojí a načte si z něj design soubory, proměnné i konkrétní frame.

<code>
Update the design for the app by the design in pencil.dev.
</code>

Praktická poznámka z videa: Pencil.dev musí běžet ještě před spuštěním Claude Code. Jinak se MCP server v klientovi neobjeví.

==== 5. Synchronizace změn zpátky do designu ====

Zajímavé je, že video neukazuje jen směr design → kód, ale i opačný tok. Když v aplikaci přibude nová část rozhraní nebo se změní layout, dá se podle ukázky nechat změna promítnout i zpátky do Pencil.dev. To udržuje design a reálný stav UI blíž u sebe.

===== Praktické use-cases z videa =====

  * **Wireframing aplikace před kódováním:** nejdřív si ujasnit strukturu obrazovek a až potom generovat frontend.
  * **Redesign existujícího projektu:** nechat Claude Code přepsat UI podle návrhu v Pencil.dev.
  * **Import z Figmy:** zkopírovat existující návrh do Pencil.dev a dál ho iterovat přes AI.
  * **Grafika mimo produktové UI:** ve videu je ukázaný i Instagram post vytvořený z promptu a brandových podkladů.

Ukázka promptu pro marketingovou grafiku:

<code>
Vytvoř mi prosím post na Instagram o mém kurzu úvodu umělé inteligence. Dám ti odkaz na kurz, dám ti odkaz na svůj web, ze kterého budeš čerpat brandmanuál, a dám ti ještě odkaz na složku, kde najdeš moji profilovou fotku, barvy a další podklady.
</code>

===== Důležité technické poznámky =====

  * Soubory se ukládají lokálně jako '''.pen'''.
  * Pencil.dev má vlastní rozšíření do VS Code, takže design může být otevřený vedle kódu.
  * Z Figmy se podle videa dá kopírovat layout, ale obrázky je potřeba doplnit ručně.
  * Přes MCP je možné pracovat i jen s jedním vybraným framem, ne nutně s celým projektem.
  * Autor ve videu nejdřív říká, že Pencil.dev zatím nemá komponenty jako Figma, ale později to opravuje — komponenty v nástroji vytvářet lze.

===== Limity a očekávání =====

Video Pencil.dev nepředstavuje jako hotovou náhradu Figmy, ale spíš jako velmi zajímavý most mezi designem a AI kódováním.

  * Výsledky nejsou vždy perfektní na první pokus.
  * Je potřeba umět aspoň základy práce s grafickým nástrojem, ne jen psát prompty.
  * Část detailů se stejně musí doladit až v kódu. Ve videu je to vidět třeba u layoutových detailů nebo scrollování.
  * Autor sám video bere spíš jako první představení než hluboký produkční test.

===== Co dává smysl vyzkoušet =====

  * Navrhnout jednu obrazovku v Pencil.dev ještě před generováním frontendu.
  * Otestovat obě cesty synchronizace: design → kód a kód → design.
  * Vzít existující frame z Figmy a ověřit, kolik práce ušetří následná AI iterace.
  * Zkusit Pencil.dev i mimo produktové UI, třeba pro jednoduchou marketingovou grafiku.

===== Zdroje =====

  * [[https://www.youtube.com/watch?v=nn6xIZNCx7Q|Vibe designing? Pencil.dev promění Claude Code v AI design agenta]]
  * [[https://www.pencil.dev/|Pencil.dev]]