Pondělí 9. 11. 2026

Design systémy

• Design system AI readiness (Sean Voisen) – Esej tvrdí, že „AI-ready“ design systém není hlavně o strojově čitelných artefaktech, ale o tom, kde zůstává člověk ve smyčce. Hodí se jako podklad, když budeš u klientů obhajovat, co do DS pro agenty skutečně investovat. zdroj
• Claude Design – konec samostatné aplikace 14. 12. 2026 – Samostatná claude.ai/design se zavírá a design systémy se přesouvají do Settings > Design systems; z Claude Code je lze synchronizovat příkazem /design-sync. Ověř si migraci svých design systémů s předstihem. zdroj

Handoff design→vývoj

• Figma MCP – podnikové ověřování přes IdP – Admini Enterprise a Organization plánů mohou spravovat připojení Figma MCP serveru k agentům (např. Claude) přes identity providera typu Okta, bez individuálního přihlašování. Ušetří zdlouhavé zavádění MCP workflow v celém týmu. zdroj
• Mean – Nástroj pro vizuální předávání lidem i agentům: zmrazíš nebo nahraješ obrazovku, okomentuješ ji gesty a celou session pošleš kolegovi nebo AI. Vyzkoušej ho pro reporty UI chyb místo screenshotů v Jiře. zdroj

Obrázky a video

• OpenAI Images 2.6 – Od 5. 11. v ChatGPT, Codexu i API: zhruba o 50 % rychlejší, umí ze skici či produktové fotky udělat krátký smyčkový GIF, ukládá reference postav a produktů a nabízí export do SVG. Dozvíš se tak, jestli se vyplatí pro rychlé animované mockupy. zdroj
• Figma – výběr objektu jedním klikem – Nástroj Select area v AI úpravách obrázků nově vybere objekt kliknutím, bez ručního obtahování (zatím jen desktopová aplikace pro macOS). Zrychlí retuše produktových fotek přímo ve Figmě. zdroj
• Viggle Remake – LoRA pro MiniMax H3, která přepíše existující video: vymění postavu, objekt, pozadí či světlo a zachová pohyb i zvuk; má MCP server, takže klipy může skládat i Claude Code. Hodí se pro rychlé varianty produktových videí. zdroj

Ikony a 3D

• Figma agent – vektorové ikony a ilustrace – Agent generuje upravitelné vektory se seskupenými vrstvami, stylovými referencemi a tahy místo výplní; struktura vrstev je připravená pro animaci ve Figma Motion. Vyzkoušej to na rozšíření ikonové sady podle existujících ikon z knihovny. zdroj

AI-driven design

• NN/g: Agent Harness – definice – Článek vysvětluje „harness“ jako softwarovou smyčku mezi modelem a jeho nástroji a ukazuje, jak její kontext, oprávnění a limity určují, co uživatel s agentem zvládne. Užitečný slovník pro návrh UX agentních produktů. zdroj
• Smashing: přístupné LLM chaty – Praktický návod, jak udělat chatová rozhraní s LLM použitelná pro lidi s asistivními technologiemi. Poslouží jako checklist při revizi AI asistentů v klientských aplikacích. zdroj

Nové nástroje

• Site Seeing (Ahmad Shadeed) – Nástroj ukazuje, jak se stránka chová v neobvyklých velikostech viewportu. Odhalíš s ním responzivní chyby dřív, než je najde QA. zdroj

GitHub

• Remotion 4.0.542 – Nové efekty magnify() a lightning(), import OpenTimelineIO do Studia, vysoký kontrast v UI a streamované renderování na Lambdě. Hodí se pro ty, kdo skládají produktová videa a motion ukázky v Reactu; OpenTimelineIO usnadní předání střihu z klasického editoru. zdroj
• Impeccable CLI 4.8.1 – Příkaz detect nově skenuje i soubory .mjs a .cjs, je stabilnější na stránkách zahlcených logy a opravuje kontrast a pozadí z verze skillu 4.8.1. Vyzkoušej ho jako rychlou kontrolu UI kvality před předáním prototypu. zdroj
• Figma Console MCP 1.46 – Přibyly nástroje pro shadery, figma_set_layout (auto layout i grid jedním voláním), barvy v oklch či display-p3 a pět nástrojů pro Figma Motion beta včetně motion tokenů (timing, easing). Ušetří kroky, když Claude staví komponenty a animace přímo v souboru. zdroj

Trendy

• Pravidla designu jako soubory pro agenty – Po Config India přibyly ve Figmě Guidelines (soubory u publikované knihovny, které agent čte automaticky, open beta pro plány Professional a vyšší) a Specs, markdownový editor pro designový jazyk; Figma MCP je umí číst i zapisovat. Pro tebe to znamená, že to, co dnes říkáš agentovi v promptu, patří přímo do knihovny. zdroj · zdroj
• Agentní design systémy: JSON pro MCP, Markdown pro LLM – Indeed převedl 77 komponent z MDX do JSON a strukturovaná data daly agentům přesnější odpovědi s přibližně 80 % méně tokeny než Markdown. Zároveň se doporučuje psát do popisů komponent ve Figmě záměr (k čemu komponenta slouží a s čím se kombinuje), ne jen specifikaci. zdroj · zdroj
• HTML a média proudí do Figmy přes MCP – Figma MCP má nové nástroje html_to_figma (HTML vygenerované agentem převede na upravitelné vrstvy) a generate_image; od 26. 10. jsou přes MCP dostupné i video a obrazové modely Weave za Weave kredity. Code layers jsou od 4. 11. placené z AI kreditů, takže se vyplatí hlídat, kde kredity utrácíš. zdroj · zdroj

Návrhy pro tool-stack a workflow

• Guidelines k vlastní knihovně – Pravidla, která opakovaně píšeš do promptů pro Claude a Figma agenta, přesuň do Guidelines souboru u publikované knihovny. Přínos: agent je použije sám a výstupy budou konzistentní bez dlouhých promptů. První krok na 15 minut: sepiš pro jednu sadu komponent (třeba formuláře) pět pravidel „dělej / nedělej“ a vlož je jako Guidelines. zdroj
• Záměr v popisech komponent – Doplň do description u klíčových komponent, kdy je použít, kdy ne a s čím je kombinovat. Přínos: Figma MCP i Figma Console MCP předají agentovi kontext, ze kterého vybere správnou komponentu místo nejpodobnější. První krok: přepiš popisy tří nejpoužívanějších komponent a v Claude Code ověř, jestli je agent při generování obrazovky skutečně volí. zdroj
• Prototyp z kódu zpět do Figmy – HTML/React prototypy z Claude Code vracej do Figmy přes html_to_figma místo screenshotů. Přínos: kolegové komentují a upravují skutečné vrstvy a design i kód vycházejí ze stejné obrazovky. První krok: vezmi jednu obrazovku existujícího prototypu, převeď ji přes Figma MCP a zkontroluj, zda sedí auto layout a napojení na proměnné. zdroj

Dnes vyzkoušej

• Rozšiř ikonovou sadu přes Figma agenta (~20 min) – Ideální test nové funkce, která generuje upravitelné vektory podle stylové reference. 1. Ve Figmě otevři svou knihovnu ikon a vyber tři existující ikony jako referenci. 2. Požádej Figma agenta o čtyři nové ikony (např. export, filtr, sdílení, archiv) ve stejném stylu, s tahy místo výplní. 3. Porovnej tloušťku tahu, zaoblení a strukturu vrstev s originály a oprav odchylky. Výsledek: čtyři upravitelné ikony připravené k zařazení do knihovny a jasná představa, kolik ruční práce agent ušetří. zdroj
• Hlídač natvrdo zadaných barev (~20 min) – Než předáš prototyp vývoji, zjisti, kolik barev uteklo mimo tokeny. 1. V Claude Code otevři složku posledního HTML/CSS prototypu. 2. Zadej prompt: „Napiš skript, který v CSS najde všechny hex a rgb barvy, které nejsou v souboru s tokeny, a vypíše soubor, řádek a nejbližší token.“ 3. Spusť ho a nech Claude navrhnout náhrady za nejbližší tokeny. Výsledek: seznam úniků ze systému a hotová oprava jedním commitem. zdroj