Impeccable

Impeccable je doplněk (skill, tedy sada instrukcí a nástrojů) pro AI asistenty na programování, jako je Claude Code nebo Cursor. Asistent s ním dostane slovník a pravidla dobrého designu rozhraní. K tomu příkazy na návrh, kritiku, audit a doladění stránky. Součástí je detektor, který bez AI najde typické chyby webů z AI i běžné chyby kvality. Autorem je Paul Bakaus. Projekt je open source (zdrojový kód je volně dostupný) a vychází ze skillu frontend-design od Anthropicu.

• 24 příkazů, třeba audit (technické chyby a pořadí oprav), critique (co design brzdí), polish (doladění stránky), typeset (písmo), layout (rozvržení) a distill (méně balastu)
• Příkaz init zapíše do souboru PRODUCT.md, pro koho web je a co na něm mají lidé udělat. Příkaz document zapíše barvy, písma a komponenty (opakované prvky, třeba tlačítka) do DESIGN.md
• Detektor bez AI: zkontroluje soubory nebo adresu stránky, i v šířce mobilu. Výsledky vypíše i jako JSON (strojově čitelný formát) pro automatické kontroly
• Hlídá nízký kontrast podle WCAG AA (pravidla přístupnosti webu), malé písmo, přetékající text, přeskočené úrovně nadpisů a odchylky od tvého design systému
• Automatická kontrola během úprav (hook): nálezy předá AI asistentovi. Kdy přesně, záleží na AI asistentovi
• Rozšíření do Chromu: panel v nástrojích pro vývojáře zvýrazní nálezy přímo na stránce, kliknutím skočíš na daný prvek
• Live mode (úpravy naživo): na běžící stránce vybereš prvek, porovnáš varianty a jednu převezmeš do kódu
• Od verze 4.7.1 umí připsat nálezy k pull requestu (návrhu změny kódu) na GitHubu

1. 1Otevři složku projektu ve svém AI asistentovi na programování. Instalátor potřebuje Node.js 18.19 nebo novější.
2. 2V terminálu ve složce projektu spusť npx impeccable install a vyber svého asistenta. V Claude Code to jde i příkazem /plugin marketplace add pbakaus/impeccable. Pak asistenta znovu načti.
3. 3V chatu asistenta spusť /impeccable init. Popiš, kdo jsou tvoji zákazníci a co mají na webu udělat. Výsledek se uloží do PRODUCT.md. Přečti ho a oprav, co asistent pochopil špatně.
4. 4Máš design manuál nebo hotový vzhled? Spusť /impeccable document. Barvy, písma a komponenty se zapíšou do DESIGN.md a další příkazy se jich drží.
5. 5Nevíš, co opravit? Pusť /impeccable critique s názvem stránky. Přečti nálezy a vyber, co řešit. Pak spusť polish na doladění a před nasazením audit. Výsledek zkontroluj i na úzkém displeji.
6. 6Automatické kontroly zapneš příkazem /impeccable hooks on. V asistentovi je pak musíš ještě povolit. V Claude Code potvrdíš, že složce důvěřuješ, a hooky zkontroluješ přes /hooks.
7. 7Hotovou stránku bez AI zkontroluješ v terminálu: spusť npx impeccable detect s adresou stránky, pro mobil přidej --viewport 390x844. Druhá cesta: nainstaluj si rozšíření do Chromu a otevři panel Impeccable v nástrojích pro vývojáře.

Když web, šablonu nebo novou stránku upravuješ s AI asistentem a nechceš, aby výsledek vypadal jako každý druhý web z AI. UX specialista ve svém dokumentu o webech v době AI doporučuje Impeccable právě na to, aby web nevypadal jako z AI. Před nasazením změny pusť audit, po nasazení zkontroluj živou stránku detektorem.

• Bez AI asistenta na programování a přístupu ke kódu využiješ jen detektor. Opravy pak udělá kodér nebo programátor.
• Na Shoptetu je vlastní HTML a CSS určené pokročilým. Podpora Shoptetu s individuálními úpravami nepomáhá a odkazuje na kodéry z řad partnerů. Na Upgates se technická podpora nevztahuje na chyby z úprav v Editoru kódu.
• Na Upgates upravíš soubory v rozšířených možnostech Editoru kódu jen v administraci, ne v externím editoru ani přes FTP. Kód z AI asistenta tam vložíš ručně.
• Web, dokumentace i rozšíření jsou jen anglicky.
• Pravidla odpovídají výchozímu vkusu nástroje. Když máš vlastní design manuál, zapiš ho do DESIGN.md. Detektor pak hlídá písma, barvy, zaoblení a velikosti písma podle něj.
• Rozšíření do Chromu má přístup ke všem webům („Access to all URLs“). Výrobce prohlašuje, že kontrola běží jen v prohlížeči a nic neodesílá.
• Impeccable může výrobci hlásit, kterou z nabídnutých variant návrhu sis vybral. Soubory projektu ani výsledky kontrol výrobci neposílá. Vypneš to příkazem npx impeccable telemetry off. Kontrolu nové verze (nejvýš jednou denně) vypneš proměnnou IMPECCABLE_NO_UPDATE_CHECK=1.
• Tvůj AI asistent posílá soubory a kontext svému poskytovateli podle jeho podmínek. S Impeccable to nesouvisí, ale počítej s tím.
• V zásadách soukromí výrobce zmiňuje čekací listinu na Impeccable Pro. Co bude obsahovat a kolik bude stát, tam neuvádí.