Navrhněte flow se svým agentem

V tomto návodu navrhnete obrazovky jednoho flow jako živé HTML se svým agentem, necháte tým, ať je okomentuje, publikujete verzi a uděláte z ní návrh, se kterým se porovná každá implementace. Potřebujete projekt, ve kterém už proběhl kaloko init, a scénář pro dané flow, třeba qa/flows/checkout.yml.

Přidejte designové prostředí #

Designové prostředí je složka, kterou CLI při průchodu servíruje. Přidejte ho do kaloko.config.yml:

environments:
  design: { kind: design, serve: design }

Scénář zůstává stejný, jaký používá vývoj a QA: stejné kroky, stejná kritéria. Návrh se tak podle akceptačních kritérií zkontroluje dřív, než ho někdo začne stavět.

Nechte agenta nakreslit kroky #

Požádejte agenta, s jakýmkoli design skillem, který váš tým používá:

Navrhni checkout flow do design/ podle našeho brand skillu: jedna složka na každý krok z qa/flows/checkout.yml, sdílené CSS v design/_shared, tokeny v design/tokens.json. Pak spusť kaloko walk a kaloko sync.

Z každého kroku vznikne design/<krok>/index.html: obyčejné HTML, CSS a JS, které se otevře i z disku. Odkazy mezi kroky jsou relativní, třeba ../payment/index.html.

Projděte, zkontrolujte a synchronizujte #

npx kaloko start --scenario qa/flows/checkout.yml --env design
npx kaloko design lint
npx kaloko walk
npx kaloko sync

design lint zkontroluje složku podle pravidel přenosného HTML: relativní adresy, žádné CDN, žádné úložiště v prohlížeči, předvídatelný obsah. walk vykreslí jen kroky, které se změnily, a sync je uloží do společného konceptu a převezme kroky, které změnili ostatní.

Komentujte společně #

Tým otevře koncept na plachtě, proklikne si živé kroky a připíná komentáře k prvkům. Každý vidí, kdo se právě dívá. Agent si komentáře přečte přes kaloko feedback, upraví, o co žádají, a synchronizuje znovu.

Publikujte verzi #

npx kaloko share --name "Checkout v2"

Tím publikujete verzi celého flow, třeba „v2 · 3 změněné, 17 beze změny“. Nezměněné kroky se ukládají jen jednou. share --notes-preview vám před publikováním ukáže poznámky o tom, co se změnilo.

Udělejte z ní referenci #

Až verzi někdo přijme, nastavte ji jako referenci designu (od plánu Team):

npx kaloko reference --design --version 2

U kroků implementace ve scénáři zapněte packs: [design]. Od plánu Business se pak každý běh implementace porovná s referencí: pixely, struktura, tokeny a kontrast, a kaloko drift napíše, který token použít tam, kde se kód liší.

Když máte návrh ve Figmě #

Pokud návrh už žije ve Figmě, kaloko design import figma <adresa-souboru> --scenario qa/flows/checkout.yml udělá z framů designové kroky a z proměnných tokeny. Složka framů vyexportovaných z Figmy funguje i bez tokenu.

Kaloko · latest · 2026-10-06