Design Systems жана алардын документтери

1) Дизайн системасы деген эмне жана эмне үчүн керек

Дизайн системасы интерфейси үчүн чындыктын бир булагы болуп саналат: UX алдын ала, иштеп чыгуу ылдамдыгы жана масштабдуулугун камсыз токендер, компоненттер, практикалар жана документтер топтому.

• Бардык продуктыларда визуалдык жана жүрүм-турум катмарынын шайкештиги.
• Ылдамдык: компоненттерди кайра колдонуу, ревю үчүн азыраак чыгымдар.
• Сапаты: жалпы A11y үлгүлөрү, локализация, тесттер, мазмун стандарттары.
• Башкаруучулук: так жоопкерчилик, релиздер, жол картасы.

2) Архитектура дизайн системасы (катмарлары)

1. Дизайн-токендер (foundation): түстөр, типографиялык, өлчөмдөр, радиустар, көлөкөлөр, чегинүүлөр, шарттар, ошондой эле семантикалык токендер ('color. surface. warning`, `space. xs`).
2. UI компоненттери: баскычтар, киргизүү талаалары, модалдуу терезелер, тамчылар, столдор, тосттор, баннерлер, алерталар, бош абалдар, скелеттер.
3. Үлгүлөр жана композициялар: KYC формалары, төлөм флоу, нөлдүк натыйжалар, кадамдуу мастерлер, мазмун карталары.
4. Контент-гиддер (microcopy): тон, терминдердин сөздүгү, ката/ийгилик шаблондору, push/баннерлер.
5. Инфраструктура: A11y, тестирлөө, локалдаштыруу, версиялар, аманатчылар (contributing) боюнча колдонмо.

3) Дизайн-белгилер: негиздери

Семантика> "чийки" стили. 'color' колдонуңуз. text. ордуна muted '#6B7280'.
Темификация жана платформалар. Token булагы → Platform Mapping (Web, iOS, Android, email).
Жарык/караңгы тема жана токендер боюнча WCAG контраст.
Глобалдык жана контексттик шкалалар: 'space. 2`, `radius. md`, `elevation. 1`, `opacity. disabled`.
Токендерди версиялоо: өзгөртүүлөр - deprecation policy жана миграциялык жазуулар аркылуу.

4) компоненттери: документтер боюнча талаптар жана барактын курамы

• Мүнөздөмөсү жана максаты. Качан колдонуу керек/колдонулбайт.
• Параметрлер/шарттар. өлчөмдөрү, түрлөрү (primary/secondary/ghost), disabled, loading, destructive.
• Жеткиликтүүлүк. Роль, клавиатура багыттоо, 'aria-', контраст, фокус шакек.
• Текст жана microcopy мисалдар. Valid лейблдер/Playsholders, каталар, жардам.
• Коддун мисалдары. минималдуу API, controlled/uncontrolled.
• Формалар жана i18n менен интеграция. узун саптардын учурларда, сандар/акча/даталар.
• Анти-мисалдар. Туура эмес колдонуу үлгүлөрү.
• Тест-матрица. Визуалдык снапшоттор, unit/interaction, скринридерлер.

5) Курамы үлгүлөрү (Recipes)

Каттоо/CUS формалары: кадам сайын мастер, прогресс, inline + summary валидациясы, ката шаблондору.
Төлөм флоу: ыкманы тандоо, комиссиялар, мөөнөттөр, same-method эрежеси, тастыктоо жана статус.
Бош шарттар: контекст + баалуулук + CTA, нөлдүк издөө натыйжалары.
Ийгилик билдирүүлөр/каталар: статус иерархиясы, визуалдык токендер, тосттор/баннерлер/модалдар.
Навигация жана чыпкалар: глобалдык издөө, тез алдын ала жазуулар, теги.
Паттерндердин барактары microcopy жана A11y-эскертүүлөрү менен көчүрүүгө даяр компоненттердин курамын көрсөтүшү керек.

6) Мазмун жол (voice & tone, microcopy)

Үн: кесиптик, ачык-айкын; тон контекстке көз каранды (онбординг, төлөм, коопсуздук).
Терминдердин бирдиктүү сөздүгү: төлөмдөр, бонустар, лимиттер, KYC - продукт боюнча бир маани.
Шаблондор: CTA, каталар, эскертүүлөр, ийгиликтер, бош шарттар, билдирүүлөр.
Localization-first: аймак боюнча сандар/валюталардын/даталардын узундугу боюнча запас.
A11y-лексика: так этикеткалар, ария-сүрөттөөлөр, эч кандай түшүнүксүз.

7) Accessibility (A11y) стандарт системасы катары

Негизги критерийлер: WCAG 2. 1 AA контраст үчүн, көңүл дайыма көрүнүп турат, клавиатурадан навигация.
Ролдор жана атрибуттар: компоненттер 'role', 'aria-label', 'aria-describedby', тост/алерт үчүн жашоо аймактарын сүрөттөйт.
Экран окурмандары: сөз айкаштарынын үлгүлөрү, окуу тартиби, туура статустар ('assertive/polite').
Сыноо жол-жоболору: автоматтык текшерүү + кол скрипт.

8) Локалдаштыруу жана интернационалдаштыруу

i18n-баскычтар компонент коду + контексттин сүрөттөлүшү жанында.
Сандар/валюталар/даталар форматтоо утилиттери аркылуу; шаблондордо текстти катуулатпаңыз.
узундугу тесттер: "узун немис", "тар мобилдик", RTL параметрлери.
Тон тилдерде: критикалык кадамдар үчүн tone-map (төлөмдөр/коопсуздук).

9) Документтер: түзүмү жана багыттоо

1. Киришүү: миссия, принциптер, жоопкерчилик зоналары.

2. Токендер: түстөр, типографиялык, тор, өлчөмдөрү, көлөкөлөрү, абалы, темалар.

3. Компоненттер: фильтрлери бар каталог (ролу боюнча, платформасы боюнча, A11y боюнча).

4. Үлгүлөр: сценарийлер (формалар, төлөмдөр, бош шарттар, ийгилик/каталар).

5. Контент жол: үн жана тон, сөздүк, microcopy үлгүлөрү.

6. Accessibility: стандарттар, чек баракчалары, сыноо учурлары.

7. Локализация: базарлар боюнча принциптер, мисалдар, глоссарийлер.

8. Интеграция жана код: орнотуу, версиялар, мисалдар, "how-to migrate".

9. Contributing: салым процесстери, дизайн-ревю, код-ревю, definition of done.

10. Changelog жана Roadmap: релиздер, deprecations, өнүктүрүү планы, билүү issues.

10) Башкаруу жана процесстер (governance)

Ролдору: системанын ээси (DesignOps/UX Platform), негизги (дизайн/FE), консультанттар (BE, A11y, локализация).
Өзгөртүү комитети: суроо-талаптарды баалоо, артыкчылык берүү, API/токендерди макулдашуу.
Процесстер: RFC жаңы компоненттерге, ички issue-формаларга, SLA-ларга.
Definition of Done: дизайн (Figma) коду (UI-пакети), док (мисал + HYDE), сыноо.

11) Contributing: кантип кошуу/өзгөртүү

RFC шаблон: көйгөй → варианттар → тандалган чечим → A11y → i18n → миграция → тобокелдиктер.
Flow PR: дизайн-ревю → код-ревю → UX-копирайтер → A11y-чек → релиз-ноталар.
Кайтарым шайкештик эрежелери: кыйратпагандар үчүн minor/patch, major - мүмкүн болгон жерде deprecation жана автоматтык миграция менен.

12) Версиялоо, релиздер, миграция

пакеттер үчүн SemVer ('@company/ds-core', '@company/ds-forms', '@company/ds-charts').
Release notes: Токендерди өзгөртүү, компоненттердин API, демейки жүрүм-туруму, breaking changes, миграция гайдалары.
Deprecations: доктогу белгилер, линтер эрежелери, массалык алмаштыруу үчүн код-мода.
Дизайн-tokens pipeline: бир булагы (JSON/YAML) → Platform Bilds (CSS vars, iOS, Android).

13) Сапатын текшерүү

Бирдиктин жүрүм-туруму жана абалы тесттер.
Визуалдык снапшоттор (темалардын/абалдардын регрессиясы).
A11y-тесттер: Automatic + кол Screen Screen.
E2E-иши үчүн маанилүү Flow (каттоо, төлөмдөр, KYC).
Perf-бюджеттери: бандл/рендер боюнча лимиттер жана катуу көз карандылыкка тыюу салуулар.

14) Жетилүү Метрика дизайн системасы

Adoption:% DS колдонгон экрандар/сактагычтар.
Velocity: жеткирүү үчүн макети убакыт.
Quality: кемчиликтер 1 бошотуу боюнча UI/A11y.
Consistency: "бир жолу колдонулуучу" компоненттеринин саны/DS тышкары стили.
Docs: Dock компоненттерин камтуу, ички аудиториянын NPS (дизайнерлер/иштеп чыгуучулар/аналитиктер).

15) Анти-үлгүлөрү

Токендер семантикасы жок палитра катары ("жөн эле түс").
Документтери жок жана экстремалдык мисалдары жок компоненттер.
Көңүл бурбоо A11y (фокус жок, төмөн контраст, жок 'aria').
deprecation жана миграциялык гайдасы жок бузуучу версиялоо.
компоненттеринде жашыруун логика (бизнес-эрежелер ордуна UI жүрүм-туруму).
кууш учурларда үчүн компоненттерин кайталоо ордуна API кеңейтүү.

16) Чек-баракчалар

• Семантикалык аттары жана максаты.
• Эки темада тең AA контраст.
• документтештирилген скейлер жана пайдалануу принциптери.

• Параметрлер/шарттар камтылган.
• A11y-сүрөттөлүшү, 'aria-', фокус.
• Microcopy мисалдар (этикеткалар, каталар, кыйытма).
• Коддун мисалдары жана edge кейстери (узун саптар, жүктөө, бош).
• Unit/visual/A11y-тесттер жашыл.

• Release notes мисалдар менен чейин/кийин.
• Migration guide и deprecations.
• такташты окуя/демо, доктогу шилтемелер.

17) мисалдар "чейин/кийин"

• Ар кандай негизги баскычтар: түстөр/радиустар/чегинүүлөр дал келбейт; ар кандай CTA тексттер.

• Бирдиктүү 'Button' токендери менен: 'size = md', 'variant = primary', 'radius = lg', 'spacing = md', "аракет + объект" стилиндеги текст.

• Техникалык билдирүүлөр, эч кандай маалымат жок.

• Компонент ' Дата форматы туура эмес. DD колдонуу. ММ. GGGG. '+ авто фокус.

18) компонент бет үлгүсү (скелет)

Аты-жөнү: Button

Description: иш-аракет баштайт; экранда 1 негизги.
Жолдор: primary, secondary, ghost, destructive; өлчөмдөрү sm/md/lg.
Шарттар: hover, focus, active, loading, disabled.
A11y: клавиатурадан жеткиликтүү; 'aria-pressed' которулгандар үчүн.
Microcopy: "Өзгөрүүлөрдү сактоо", "Текшерүүнү улантуу". "ОК" качуу.
Коду (мисал API): 'Button {variant, size, icon, loading}'.
Анти-мисалдар: иерархия бир денгээлде кош негизги.
Тесттер: визуалдык снапшоттор, контраст, focus-ring.

19) Playbook киргизүү дизайн системасы (rollout)

1. Интерфейстин аудити: түстөрдү/типографияны/компоненттерди/үлгүлөрдү инвентаризациялоо.
2. MVP токендер жана негизги компоненттери: Button, Input, Select, Modal, Alert, EmptyState, Toast.
3. Документация жана сторибук: тирүү мисалдар, код-сниппеттер, гайдилер.
4. пилоттук продукт: widget алмаштыруу, пикир чогултуу.
5. Hyde көчүрүү: code-мода, deprecation эрежелери.
6. Топтомун кеңейтүү: таблицалар, пагинация, форма форумдары, мастердин кадамдары.

7. Масштабдоо: азык-түлүк үлгүлөрү (төлөмдөр, KYC), аналитика жана A/B менен бириктирүү

8. Колдоо: суроолор каналы, SLA, ички семинарлар.

20) Тез документ үлгүлөрү

• Аты-жөнү: 'color. border. warning`
• Максаты: эскертүүлөрдүн жана баннерлердин алкагы Notice/Warning
• Контраст: AA 'color фонунда. surface. default`
• Мүмкүн эмес: майда кеглдин тексти үчүн колдонуу
• Байланыштуу: 'color. surface. warning`, `icon. warning`

Үлгү үлгүсү: бош абалы (noResults)

Максаты: "ката" сезими жок суроо-түзөтүү

Курамы: аталышы (opts.) , текст (1-2 сунуштар), CTA, экинчи CTA, сөлөкөт/иллюстрация

Microcopy: "{query}" боюнча эч нерсе табылган жок. Фильтрлерди ыргытыңыз же суроо-талапты тактаңыз"

A11y: `role="status"`, `aria-live="polite"`

Акыркы шпаргалка

Семантикалык белгилер + тартип A11y = база.
компоненттеринин барактары толук: максаты, параметрлери, A11y, microcopy, код, тесттер.
Үлгүлөр = даяр тексттер жана эрежелер менен компоненттеринин курамы.
Docs - продукт: версия, релиздер, миграция, салым жараяны.
Жетилгендикти өлчөө: adoption, ылдамдык, кемчиликтер, туруктуулук, ички командалардын NPS.