Babičkahackuje
← Zpátky na Kurzy
Marcela Kramářová v béžovém svetru na podzimní verandě, nápis Moje barvy a ikonky, barvy · písmo · ikonky a ukázka stránky Můj styl s barvami webu BabičkaHackuje.

Moje barvy, písmo a ikonky

Zdarmaaby tvůj web vypadal jako ty
Chci ho zdarma

Co tenhle skill umí

  • Stránka Můj styl: tvoje barvy s kódy, písma a ikonky na jednom místě.
  • Kontrola, jestli se tvoje texty a tlačítka dají přečíst, i s opravou.
  • Ikonky v jednom stylu a tipy, kde hledat další písma a ikonky.

Tip, jak si agenta vylepšit: Řekni mu: „Ta ikonka telefonu se mi nelíbí, udělej ji jednodušší.“

Vezmi si ho jako dárek k mým tipům

Píšu zhruba jednou týdně o tom, co s AI jde a co ne. Přihlas se a tenhle návod si stáhneš hned. Nic neinstaluješ a odhlásit se dá jedním kliknutím.

Tvůj e-mail nikam nedávám. Žádný spam.

Claude Code je jen v placené verzi (od 20 $ měsíčně, platíš jim). V aplikaci přepni z Chatu na Code.

Co budeš potřebovat a kolik to stojí
  • Claude Codeod 20 $ měsíčně (asi 460 Kč)

    Placená verze Clauda. Platíš jim, ne mně.

  • Adresa tvého webu nebo logozdarma

    Skill se na web jen dívá, nic na něm nemění a nikam se nepřihlašuje.

  • Placený program na grafikuNEPOTŘEBUJEŠ

    Písma i ikonky jsou zdarma i pro podnikání. Kde hledat placená, ti skill poradí.

Prošel bezpečnostní kontrolou 25. 10. 2026: antivirus, programy a kontrolní agent. Bezpečnostní list

Nevíš, jestli je to pro tebe? Popovídejme si 15 minut zdarma.

Bezpečnostní list

Zkontrolováno 25. 10. 2026

Než balík pustím ven, projdou ho tři kontroly. Výsledky platí pro přesně ten soubor, který si stáhneš.

  1. 1. Antivirus

    0 virů

    Každý soubor v balíku prošel antivirem.

  2. 2. Programy, které si skill stáhne

    žádné

    Skill si z internetu žádné programy nestahuje.

  3. 3. Kontrolní agent

    nic nebezpečného

    Přečetl celý balík a hledal, jestli něco maže nebo posílá tvoje data jinam.

Zamčená instalace

  • Skill si z katalogu npm nic neinstaluje. Běží na holém Node.js.
  • Při spuštění se nic neinstaluje, takže se ani nic nespouští navíc.
  • Mimo npm si skill nestahuje nic.
  • Na Macu běží skill v krabici Clauda: zapisovat a chodit na internet smí jen tam, kam ho pustí nastavení skillu (co přesně, stojí v tomhle bezpečnostním listu), a hesla nečte. Na Windows krabice Clauda není, platí zamčené programy.
Čím je skill opatřenýVerze 1.0.0, licence, seznam změn, autorka.
Verze
1.0.0 z 25. 10. 2026. Opravy a novinky dostaneš ve stejném balíku.
Seznam změn
V balíku je soubor CO-JE-NOVE.md, kde u každé verze stojí, co se změnilo.
Licence
Zdarma. Smíš ho poslat dál, celý a s mým jménem. Prodávat ne.
Autorka
© 2026 Marcela Kramářová, BabičkaHackuje.cz
Technické věciPro ty, kdo to chtějí vědět podrobně. Používat skill můžeš i bez toho.

Jak se kontrolovalo

  • Antivirus ClamAV prošel všech 14 souborů balíku: bez nálezu. Zná 3 628 192 virů, databáze z 25. 10. 2026.
  • Kontrolní agent přečetl všech 14 souborů balíku, řádek po řádku (čtení barev z webu, kontrola čitelnosti, kontrola češtiny písem, stahování a kontrola ikonek, šuplík, stránka Můj styl, uvítání, návod, nastavení krabice), u každého i kontrola znak po znaku na neviditelné a skryté znaky (žádné), čtyři kola kontroly s opravami mezi nimi.

Kam se co posílá

Na tvůj web se skill dívá jako kterýkoli návštěvník: stáhne úvodní stránku a soubory vzhledu, na které web odkazuje, a nic tam neposílá. Google Fonts dostane jen jméno písma, když se ověřuje, jestli umí česky. Z GitHubu si stáhne jen ikonky, které si vybereš, ze tří pevně zapsaných sad. Co Claude čte a co ti píše, zpracovává firma Anthropic jako každý rozhovor s Claudem.

Co si stáhne

  • Nic neinstaluje, žádné programy z npm.
  • Ikonky jen ze tří sad zdarma (Tabler, Iconoir, Phosphor) a jen ty, které si vybereš; každá se před použitím zkontroluje.

Co ukládá

Pracovní soubory do vystup/ a poznámky CLAUDE.md do vlastní složky. Hotovou práci (stránka Můj styl, barvy.css, ikonky) do šuplíku Moje práce s Claudem v Dokumentech, nebo do vlastní složky. Barvy a písma do společného profilu ~/.babicka-profil/profil.json, ze kterého je berou ostatní skilly. Žádný tvůj soubor nepřepíše.

Co nedělá

  • Nemaže nic tvého. Maže jen vlastní dočasné soubory.
  • Nespouští žádný program kromě node, curl (stažení) a otevření stránky v prohlížeči.
  • Na tvém webu nic nemění, nikam se nepřihlašuje, nic neodesílá.
  • Nečte hesla ani klíče; na Macu jim krabice Clauda brání i v přístupu.
  • Text na tvém webu bere jen jako text k rozboru, ne jako pokyn. Ikonky ani názvy písem z cizího webu do stránky ani do příkazů nepustí neošetřené.
  • Neobsahuje skryté pokyny pro Clauda ani neviditelné znaky.

Co se ověřit nedalo

  • Krabice Clauda (.claude/settings.json) je nastavená podle návodu Anthropicu, na skutečném Macu zatím vyzkoušená není; na Windows krabice Clauda není.
  • Ikonky se stahují z aktuální verze sad na GitHubu, ne z jedné pevné verze; proti nečekané změně chrání kontrola každé ikonky.

Co list neslibuje: antivirus pozná jen viry, které už zná, a kontrola platí pro tuhle verzi balíku. Každou novou verzi proto kontroluju znovu. Máš otázku? Napiš mi.

Jak začít

Čtyři kroky s obrázky, i když jsi s agentem poprvé

Stáhneš, napíšeš agentovi jednu větu, on udělá zbytek.

  1. Potřebuješ Claude CodeProgram do počítače, který skill přečte a udělá práci. Stojí 20 dolarů měsíčně (asi 460 Kč), platíš jim, ne mně.Stáhnout Claude Code

    Než začneš: skill jede jen v Claude Code

    1. Claude Code je jen v placené verziZdarma funguje jen Chat, a v Chatu skill nepojede. Potřebuješ Claude Pro za 20 dolarů měsíčně, platíš přímo jim.
    2. V aplikaci přepni na Code, ne ChatNahoře vlevo jsou dvě ikonky. Bublinky jsou Chat, značka </> je Code. Klikni na ni.Aplikace Claude, nahoře vlevo dvě ikonky. Červený kroužek na ikonce Code a věta: Klikni sem a přepni na Code!
    3. Vyber, že agent pracuje v tvém počítačiU řádku, kam píšeš, se vybírá, kde agent pracuje. Vyber svůj počítač (anglicky Local), ne cloud. Jen tak najde skill ve Stažených souborech.
    4. Model: na skill Opus 5.5U řádku, kam píšeš, se vybírá i model. Na skill doporučuju Opus 5.5, je nejsilnější. Na drobnosti ti stačí i slabší model a ušetříš si měsíční limit.
    Celé nastavení Clauda krok po kroku
  2. Stáhni si balík a nech ho ve StaženýchTlačítkem níž se balík stáhne. Nerozbaluj ho. Agent si ho najde sám.Okno se staženými soubory, zvýrazněný balík a popisek: tenhle tam nech, nerozbaluj ho, agent si ho najde sám.
  3. Otevři agenta a vlož mu tuhle větuVe stažených souborech mám složku Moje barvy, pismo a ikonky. Je v ní návod. Přečti si ho a udělej to podle něj.Okno programu Claude Code s prázdným řádkem dole, červenou šipkou a větou: Sem vložíš návod a agent se dá do práce.
  4. Odpovídej muSoubor si najde sám. Pak se ptá a ty odpovídáš. Když to udělá špatně, řekneš mu to.

Co svého agenta jednou naučíš, umí napořád.Příště mu stačí říct, co chceš — skill už zná. A čím víc mu o sobě řekneš, tím víc to bude vypadat jako od tebe.

Takhle si s agentem povídáš

Agent se ptá, ty odpovídáš
  1. AgentMáš web? Jakou má adresu?
  2. TyMám, dělal mi ho synovec na Webnodu.
  3. AgentJak chceš, aby na lidi tvoje stránky působily? Stačí tři slova.
  4. TyPoctivě, teple, ručně.
  5. AgentNa webu máš nejvíc tmavě zelenou na tlačítkách a krémovou jako pozadí. Je to tvoje barva, nebo ji tam dal synovec?
  6. TyMoje. Ale bílé písmo na tlačítku je špatně vidět.
  7. AgentMáš pravdu, spočítala jsem to. Navrhnu o odstín tmavší, který se přečte. A ikonky ti nakreslím, nebo vybereme hotovou sadu zdarma?
Podívej se, co najdeš v balíku →

Co se lidi ptají

Jak zjistím, jaké barvy má můj web?
Skill si přečte nastavení vzhledu tvého webu a u každé barvy řekne, k čemu ji web používá: na písmo, na pozadí, na tlačítka. Barvy z fotek nebere, protože barva značky na fotkách často vůbec není. Když web nemáš, vezme je z loga a řekne ti, že je to odhad.
Jaké písmo dát na web, aby umělo česky?
Takové, které má i české znaky jako ř, ů a ě. Spousta krásných písem je nemá a nadpis se pak rozpadne. Skill každé písmo z Google Fonts ověří, než ti ho navrhne. Všechna, která navrhne, jsou zdarma i pro podnikání.
Kde vzít ikony na web zdarma?
Skill ti je buď nakreslí, jednoduše a v jednom stylu, nebo stáhne z hotových sad zdarma od grafiků: Tabler, Iconoir a Phosphor. Všechny tři smíš použít i pro podnikání. Každou ikonku před použitím zkontroluje.
Proč se mi bílé písmo na tlačítku špatně čte?
Protože je tlačítko moc světlé. Bílá na světlé barvě vypadá hezky, ale v telefonu na slunci ji část lidí nepřečte. Skill to spočítá podle pravidel přístupnosti a navrhne odstín o kousek tmavší, který projde.
Změní mi to něco na webu?
Ne. Skill se na web dívá stejně jako kterýkoli návštěvník a nic na něm nemění. Dostaneš stránku Můj styl, kterou pošleš tomu, kdo ti web nebo grafiku dělá, nebo si podle ní barvy nastavíš sama.
Co když nemám web ani logo?
Nevadí. Skill se zeptá, jak mají tvoje stránky na lidi působit, navrhne ti barvy a písma a řekne ti nahlas, že je to jeho návrh. Vybereš si sama.
Mám ChatGPT. K čemu je mi tohle?
ChatGPT ti odpoví a zbytek uděláš sama: zkopíruješ, najdeš fotku, nahraješ, naplánuješ. Skill tu práci udělá za tebe od začátku do konce, ve tvojí složce s tvými soubory. Běží jen v placeném Claude Code, v ChatGPT ho nespustíš. ChatGPT si klidně nech, tohle je jiný nástroj na jinou práci.

Chceš to vidět naživo, než si to vezmeš?

Ukazuju to na webináři zdarma