Všichni průvodci › Podle použití

Navrhujte flow se svým agentem, společně s týmem

Flow navrhnete jako živé HTML se svým agentem a skills. Tým komentuje průběžně a každá verze uloží jen to, co se změnilo.

V Kaloku navrhujete obrazovky flow jako živé HTML, společně a s agentem a design skills, které váš tým už používá. Stejný scénář pak kontroluje implementaci proti designu.

Problém

Obrázky obrazovek jsou v jednom nástroji a kód v jiném. AI artefakt ukáže jednu živou stránku, ale ne celé flow ani jeho historii, a nikdo vám později neřekne, jestli produkt designu pořád odpovídá.

Co se s Kalokem změní

• Živé kroky. Každý krok scénáře je stránka, kterou napíše váš agent: obyčejné HTML, CSS, JS a soubory ve složce. Plachta ji spustí v sandboxu a prototypové odkazy vás provedou flow.
• Společný koncept. Změny jdou do jednoho konceptu, který celý tým vidí hned: kdo se dívá, kurzory, sledování, prezentace a komentáře připnuté k prvkům. Agenti jsou vidět se svými změnami taky.
• Verze celého flow. Publikováním vznikne verze celého flow, třeba v4. Kroky, které se nezměnily, se ukládají, nahrávají i vykreslují jen jednou, takže verze stojí jen to, co se změnilo. Porovnání ukáže ostatní kroky jako nezměněné.
• Nástroje zůstávají vaše. Funguje jakýkoli design skill, model i styl práce, pokud zapíše složku ve správném tvaru. Kaloko do designu nemluví.
• Prezentujte prototyp. *Prototyp* přehraje flow přes celou obrazovku jako živé stránky v rámečku zařízení: proklikejte ho, procházejte šipkami a sdílejte odkaz, který otevře rovnou daný krok.
• Vždy otevřené formáty. kaloko export --design vydá verzi jako obyčejné HTML, tokens.json (DTCG) a scenario.yml, které se otevřou z disku. kaloko design lint drží stránky přenosné.

Jak to funguje

1. Přidejte designové prostředí

   do kaloko.config.yml: design: { kind: design, serve: design }.

2. Navrhujte.

   Požádejte agenta, ať pro každý krok scénáře napíše design/<krok>/index.html, sdílené styly do design/_shared/ a tokeny do design/tokens.json.

3. Projděte a synchronizujte.

   kaloko start --scenario qa/flows/checkout.yml --env design, kaloko walk, kaloko sync. Vykreslí se a odešlou jen změněné kroky.

4. Revidujte společně.

   Tým otevře koncept, proklikne si kroky v režimu Živě, připíná komentáře k prvkům a označuje kroky k revizi. Agent si přečte kaloko feedback a synchronizuje znovu.

5. Publikujte.

   kaloko share --name "Nový checkout" publikuje verzi, nebo někdo klikne na *Publikovat verzi* na plachtě.

Skills a prompty

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 kaloko walk a kaloko sync.

Přečti kaloko feedback na designovém prostředí, uprav, o co žádají připnuté komentáře, projdi, synchronizuj
a u každého komentáře napiš, co jsi změnil.

Jak to vypadá

Plachta konceptu ukazuje každý krok se snímkem a režimem Živě. V režimu Živě inspektor u každé hodnoty napíše její token a komentáře sedí na prvku, ke kterému patří. Karta runu vypisuje verze a referenci designu označuje hvězdičkou.

Co získáte

• flow, které tým navrhuje společně a ve kterém jsou vidět lidé i agenti
• verze celého flow, které ukládají jen změny
• historii každého kroku: kdo ho změnil a kdy, člověk nebo agent
• referenci designu, proti které běží vývoj i QA (viz průvodce *Reference designu: vyvíjejte a testujte proti ní*)

Další průvodci