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

Reference designu: vyvíjejte a testujte proti ní

Přijatá verze designu je reference: agenti z ní staví podle živých souborů a tokenů a každý běh se kontroluje v pixelech, struktuře a tokenech.

Jakmile tým přijme verzi designu, stane se referencí designu daného scénáře. Vývoj z ní staví a QA ji kontroluje krok po kroku, se stejnými ID kroků.

Problém

Podklady pro vývoj zastarají v den, kdy se design změní. Že má tlačítko o odstín jinou barvu, chybí popisek nebo odsazení nesedí na škálu, si nikdo nevšimne, dokud designér neprojde produkci očima.

Co se s Kalokem změní

• Jedna reference na scénář. Přijatá verze se označí jako reference designu. Baseline zůstává posledním dobrým během implementace. Větev designu propojená s git větví má vlastní referenci.
• Podklady, které agent přečte. get_step přes MCP nebo kaloko export --live vrátí živé soubory, sadu tokenů, strukturu stránky a otevřené komentáře každého kroku.
• Kontroly místo názorů. packs: [design] přidá krokům implementace tři kritéria: pixely (AC801), strukturu (AC802) a tokeny (AC803). Pro kontrast a další základy přístupnosti přidejte a11y. Na plachtě se ukazují jako každá jiná kritéria.
• Přesná zjištění. Odchylka od tokenů počítá jen hodnoty, které někdo napsal: výchozí styly prohlížeče ani hodnoty, které používá sama reference, se nepočítají. U každého zjištění je navržený token.

Jak to funguje

1. Přijměte verzi

   na plachtě a klikněte na *Nastavit jako referenci designu* (nebo kaloko reference --design --version 4).

2. Stavte z ní.

   Agent si pro každý krok zavolá get_step, nebo spustí kaloko export --live, a kroky naimplementuje pomocí skills projektu.

3. Zapněte pack

   ve scénáři implementace: packs: [design] u kroků, které mají design.

4. Spouštějte jako obvykle.

   kaloko walk, kaloko evaluate, kaloko share. Vyhodnocení si stáhne referenci a doplní designová kritéria.

5. Sledujte změny.

   Když se reference posune, list_step_changes vypíše kroky, na které je potřeba sáhnout, a sledující dostanou do inboxu *reference se změnila*.

Skills a prompty

Naimplementuj kroky checkoutu z reference designu: get_step pro každý krok FLOW-checkout, zachovej ID kroků
a názvy tokenů, pak spusť scénář implementace s packs: [design] a oprav odchylky.

Vypiš kroky, které se změnily mezi referencí designu a konceptem, a naplánuj práci na implementaci.

Jak to vypadá

Běh implementace ukazuje AC801–AC803 pro každý krok a viewport. Třeba *5 hodnot mimo sadu tokenů: padding 15px → space.m; background #2e6bfe → color.accent*, nebo *chybí akce: „Pay“*. Porovnání nabízí referenci designu vedle baseline.

Co získáte

• referenci designu, kterou sdílí vývoj i QA, i s historií
• odchylky najde běh, ne designér, který prochází produkci očima
• podklady pro vývoj, které nezastarají, protože jsou přímo přijatou verzí

Další průvodci