Viena sistema skirtingiems ekranams
Aprašykite spalvų paskirtis, šriftų vaidmenis, tikrus svorius, tarpus ir komponentų būsenas. Semantinė reikšmė „pagrindinis veiksmas“ naudingesnė už paskirus violetinės spalvos kodus kiekviename faile. Išimtys turi priežastį ir savininką, kad naujas ekranas nepaveldėtų atsitiktinio maketo.
Iliustracinė mygtuko specifikacija
| Dalis | Reikalavimas |
|---|---|
| Paskirtis | Pateikti proceso užklausą |
| Tekstas | „Siųsti užklausą“ |
| Būsenos | Įprasta, užvesta, fokusuota, siunčiama, neaktyvi |
| Elgesys | Siunčiant neleisti pakartotinio pateikimo |
| Klaida | Išsaugoti tekstą ir paaiškinti, ką daryti toliau |
| Patikra | Klaviatūra, ilgas tekstas, mobilus vaizdas ir didinimas |
Agento rezultatas gali būti komponento aprašas, maketo variantas ar peržiūrimas kodo pakeitimas. Vien graži ekrano nuotrauka neaprašo klaidos būsenos ar sąveikos.
Duomenų eksportas nėra visas dizaino darbas
Jei naudojama Figma, eksporto būdas priklauso nuo realių paskyros teisių ir plano. Variables API dokumentacija nurodo prieigos sąlygas. Jei API neprieinama, galima naudoti suderintą versijuotą eksportą; nereikia žadėti neegzistuojančio automatinio įvykio.
Dizaino sistemos straipsnyje (straipsnis dar nepaskelbtas) pateikiame semantinių reikšmių ir CSS susiejimo pavyzdį.
Priėmimas vyksta tikroje sąsajoje
Patikrinkite lietuviškus žodžius, ilgus pavadinimus, tikrus šriftus ir matomą fokusą. Vertinkite desktop bei mobile kompoziciją, teksto didinimą ir persitvarkymą. Kontrastas, klaviatūros naudojimas ir teksto prieinamumas remiasi W3C WCAG gairėmis. Vien žetonų failas neįrodo atitikties.
Išsaugokite pasirinktos versijos vaizdus ir taisymo priežastis. Automatizuotas nuoseklumas neturi paversti skirtingų verslo puslapių vienodais maketais.
Šaltiniai ir dokumentacija
- Figma: GET local variables: endpoint, plano ir file_variables:read sąlygosŠaltinis peržiūrėtas 2026-10-24
- W3C WAI: Teksto dydžio, reflow, kontrasto, klaviatūros ir alternatyvų kriterijų nuorodosŠaltinis peržiūrėtas 2026-10-24