ТОП-5 UI/UX skills GitHub за зірочками — 2026-05-01

Контекст: Сергію не зайшов попередній конкурс банерів v5 (Editorial / Bauhaus / Pharmacy-Trust) — «по дизайну дуже погано». Шукаємо мейнстрім-репозиторії з найбільшою спільнотою (об'єктивна метрика — GitHub stars), щоб дати кожному той самий бриф 300×600 Menopace і подивитись, хто чим візьме.

Метрика: stargazers_count через GitHub API на 2026-05-01 (прямий /repos/<owner>/<name> запит, не GitHub-search ranking).

Не дублює: banner-frameworks-research-2026-05-01.md (marketing-методології, дрібні banner-build-toolkits) і banner-design-skills-research-2026-05-01.md (нішеві Claude-skills типу brand-design-md, refactoring-ui-skill). Тут — великі мейнстрім-бібліотеки, які стали стандартом community.

TL;DR

1. Реальний стандарт UI/UX-дизайну на GitHub — це бібліотеки компонентів (shadcn/ui 113k, ant-design 97k, daisyUI 40k, mantine 31k), а не «AI design skills». Ставка на community-проварений component-vocabulary, а не на генератор-чорну-скриньку.
2. Єдиний AI-первинний інструмент у топі — screenshot-to-code (72k) від Abi Raja: подаєш PNG-мокап → виходить React/Tailwind/HTML. Це найшвидший спосіб витягти візуальну якість з референсу (Pinterest pin pharma-banner → код).
3. Рекомендований конкурс v6: 5 паралельних sub-agents, кожен реалізує бриф у власному «голосі» — shadcn (мінімалістичний clean), ant-design (enterprise-trust), screenshot-to-code (адаптація з Stripe/Apple-моку), daisyUI (Tailwind-first експресивний), mantine (rich-form-feel). Той, чий результат бере візуально, виграє.

ТОП-5 (sorted by stars desc)

1. shadcn/ui — 113,338 ⭐

• Що: «not a component library, but a code distribution platform» — 60+ accessible React-компонентів (Radix Primitives + Tailwind), які копіюються прямо в проект через npx shadcn@latest add <component>. Канонічний UI-стандарт 2024–2026 у React-ком'юніті.
• Як застосувати до Menopace 300×600: беремо компоненти Card (для quiz-stage), Button (CTA), RadioGroup (Так/Ні), Progress (індикатор 1/6), Sheet (intro screen). Tailwind токени дають automatic 8pt grid + WCAG-perfect contrast. Стиль за замовчуванням — neutral B&W + 1 accent → саме той «editorial-clean», якого бракувало v5.
• Виклик:
  • CLI: npx shadcn@latest init + npx shadcn@latest add card button radio-group progress
  • MCP server: shadcn MCP (через Claude Code) генерує компонент з опису
  • Format brief'у: природна мова + посилання на список потрібних компонентів
• Прогноз стилю: clean editorial-modern, neutral palette, тонка типографіка (Inter за замовчуванням), стриманий, premium-feel — ймовірно найбільш «Stripe/Linear-like». Ризик: занадто generic, без характеру → треба явно просити accent-color і custom font (Fraunces/Cormorant) у бриф.

2. ant-design/ant-design — 97,905 ⭐

• Що: enterprise-class React UI library від Alibaba, ~70 компонентів з суворою design language (Ant Design 5.0). Пакет antd — JS/TS first-class. Дизайн-система з рекомендаціями для пошуку, форм, dashboard'ів.
• Як застосувати до Menopace 300×600: компоненти Steps (6 quiz-питань як stepper), Radio.Group з optionType="button" (Так/Ні як segmented), Carousel (3 packshot з autoplay), Button type="primary" (CTA medizine + menopace.ua). Default tokens — --ant-primary навколо синього, треба перевизначити на pharmacy-trust palette (deep teal або burgundy).
• Виклик:
  • npm: npm i antd + import { Steps, Radio, Carousel } from 'antd'
  • ConfigProvider дозволяє global override токенів
  • Format brief'у: JSX skeleton + AntD theme tokens (primaryColor, fontFamily, borderRadius)
• Прогноз стилю: enterprise-trust, формальний, серйозний — найближчий до «pharmacy-trust» з v5. Сильні сторони: легітимність, читабельність форм, accessibility з коробки. Слабкість: виглядає як SaaS-dashboard, ризик — "холодно", не emotional. Підходить, якщо Сергій хоче «солідно і не страшно».

3. abi/screenshot-to-code — 72,423 ⭐

• Що: AI-tool, який бере скріншот референсу (PNG/JPEG) і виплюває чистий код (HTML+Tailwind / React+Tailwind / Vue+Tailwind / Bootstrap / Ionic). Підтримує Claude Sonnet 4.5, GPT-5, Gemini 2.5 Pro. Має self-hosted FastAPI backend + React frontend, доступний публічно на screenshottocode.com.
• Як застосувати до Menopace 300×600:
  1. Шукаємо 3 топ-референси (Stripe pricing-card, Apple Health quiz screen, Headspace onboarding) — скрін кожного.
  2. Подаємо «згенеруй мені 300×600 banner у такому-ж стилі, контент: 6 питань Так/Ні Menopace, 3 packshots, 2 CTA».
  3. Отримуємо HTML/Tailwind output → приклеюємо до нашої quiz-логіки.
• Виклик:
  • GitHub self-host: docker compose up (потребує OpenAI/Anthropic API key)
  • SaaS: screenshottocode.com (paid)
  • API: REST через локальний backend (FastAPI на :7001)
  • Format brief'у: PNG-скріншот референсу + текстовий опис змін ("change copy to Menopace quiz, keep layout/typography/colors")
• Прогноз стилю: точна реплікація візуальної мови референсу. Якщо подаєш Stripe — отримуєш Stripe-like. Якщо подаєш медичний онбоардинг — отримуєш такий же. Найвищий потенціал для якісного візуалу, але вимагає вдало підібраного референсу від нас. Ризик: код часто потребує ручного причісування під 300×600 constraints.

4. saadeghi/daisyUI — 40,843 ⭐

• Що: найпопулярніша Tailwind CSS component library (52 компоненти, 35+ themes з коробки — corporate, pastel, luxury, dracula, cupcake). Pure CSS — не залежить від React/Vue, працює всюди де Tailwind. Семантичні класи: btn btn-primary, card, radio, progress.
• Як застосувати до Menopace 300×600: vanilla HTML + <link> Tailwind CDN + data-theme="luxury" або corporate. Класи: card bg-base-100 shadow-xl, radio radio-primary, progress progress-primary, btn btn-lg btn-primary. Тема перемикається одним атрибутом — пробуємо 5 тем за один прохід, обираємо найкращу.
• Виклик:
  • CDN: <link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.min.css" rel="stylesheet">
  • npm: npm i -D daisyui як Tailwind plugin
  • Без CLI/AI — це plain CSS
  • Format brief'у: HTML markup + назва теми
• Прогноз стилю: різноманітність через preset-теми. luxury — темний gold-accent (premium feel), pastel — теплі pastels (м'яке для мінопаузи), corporate — стримано. Швидкість ітерації — найвища серед топ-5 (1 атрибут = новий look). Ризик: теми «з коробки» можуть виглядати generic, треба customize palette.

5. mantinedev/mantine — 31,081 ⭐

• Що: fully-featured React component library, ~120 components + 70+ hooks. Strong accent на forms, date pickers, notifications, modals. Має @mantine/form для управління quiz-станом, @mantine/core Stepper, RingProgress, Carousel.
• Як застосувати до Menopace 300×600: Stepper (6 кроків quiz), SegmentedControl (Так/Ні), Carousel з @mantine/carousel (3 packshots з autoplay+drag), Button (CTA), MantineProvider з theme override (primaryColor, fontFamily, defaultRadius). Form state через useForm — найчистіший quiz-flow коду серед усіх п'яти.
• Виклик:
  • npm: npm i @mantine/core @mantine/hooks @mantine/form @mantine/carousel
  • PostCSS-конфіг для CSS-modules
  • Format brief'у: JSX skeleton + Mantine theme override object
• Прогноз стилю: rich, forms-centric, чимось схожий на Vercel/Linear feel. Default — світлий, нейтральний, з акуратними shadow-elevation. Cильна сторона: form-логіка (наш кейс — це form по суті). Слабкість: defaults трохи «design-engineer-bland», треба customize типографіку. Ймовірно — десь між shadcn (мінімалізм) і ant-design (enterprise) за враженням.

Не увійшли в ТОП-5 (хоча мають високі stars) і чому

Рекомендований план «нового конкурсу» (v6)

Беремо той самий бриф (нижче) і даємо його 5 паралельним sub-agents, кожен реалізує бриф у власному стеку:

1. Agent A → shadcn/ui: npx shadcn@latest add ... + Tailwind кастомізація → menopace_v6_shadcn.html
2. Agent B → ant-design: React + antd + ConfigProvider override на pharmacy-trust → menopace_v6_antd.html (build через Vite)
3. Agent C → screenshot-to-code: беремо 1 топ-pharmaceutical landing reference (Eucerin / La Roche-Posay quiz screen) → screenshottocode → menopace_v6_s2c.html
4. Agent D → daisyUI: vanilla HTML + Tailwind CDN + 3 під-варіанти теми (luxury, pastel, corporate) → menopace_v6_daisy.html
5. Agent E → mantine: React + @mantine/core + theme override → menopace_v6_mantine.html

Усі 5 робимо паралельно через 5 sub-agents (Task tool). Час на кожен — ~30-40 хв. Всі 5 деплоюємо через Reports Hub (link для Сергія в Telegram), потім side-by-side порівняння в одному HTML-grid.

Критерій вибору переможця: Сергій дивиться вживу на 5 result-варіантів і голосує. Не наша оцінка.

Той самий бриф для всіх 5 (готовий до копіпасту)

ЗАВДАННЯ: Інтерактивний HTML5-банер для Menopace (Vitabiotics).

ФОРМАТ:
- 300×600 px (IAB Half Page)
- Single self-contained HTML (inline CSS+JS, без external runtime — крім CDN бібліотек що ти використовуєш)
- Поміщається в ≤200KB (без зовнішніх зображень окрім 3 packshots)
- Працює standalone, target-аудиторія — жінки 40+, ринок UA

КОНТЕНТ (НЕ МІНЯТИ):
1. INTRO screen: hook-копія "Чи помічаєте ви зміни у самопочутті після 40?" + CTA "Дізнатися більше"
2. QUIZ — 6 питань Так/Ні (рівно 6, не міняти формулювання, формулювання видам окремо):
   Q1: Припливи жару протягом дня
   Q2: Безсоння або переривчастий сон
   Q3: Зміни настрою без причини
   Q4: Зниження концентрації
   Q5: Втома навіть після відпочинку
   Q6: Сухість шкіри і волосся
   Кожне питання — окремий screen-state, з кнопками "Так" / "Ні"
3. RESULT screen: текст «Menopace допомагає підтримати організм у період менопаузи» + 3 PACKSHOT'и (Menopace Original, Menopace Plus, Menopace Calcium — забрати з https://menopace.ua) + 2 CTA:
   - PRIMARY (велика): "Купити на medizine.ua" → https://medizine.ua/menopace (відкриття в новому вікні)
   - SECONDARY (менша): "Дізнатися на menopace.ua" → https://menopace.ua
4. FOOTER (на всіх screens, дрібний шрифт): "DM.UA.MEN.26.05.01"

КОМПЛАЄНС (UA pharma БАД):
- НЕ обіцяти лікування. Слова "лікує", "вилікує", "терапія" — заборонено.
- Допустимо: "підтримує", "сприяє нормальному функціонуванню", "доповнює раціон".
- НЕ використовувати медичних термінів типу "терапія HRT", "симптоми" дозволено.
- Footer-disclaimer обов'язково (DM.UA.MEN.26.05.01).
- Жодних #1, "найкращий", "клінічно доведено" без посилання на источник.

ВІЗУАЛЬНІ ВИМОГИ:
- WCAG AA contrast (4.5:1 мінімум для тексту)
- Touch-target 44×44 для всіх інтерактивних елементів (кнопки Так/Ні, CTA)
- Стиль: премʼюм-trust, не peppy/teen, не «лікарський холод», не warm-spice/autumn (саме цього уникаємо — попередні v5 фейлили).
- Hover-state на всіх кнопках, focus-visible для accessibility
- Smooth transition між screen-states (не різкий jump)

ПРОГРЕС-ІНДИКАТОР:
- Видимий "1 з 6", "2 з 6"... на quiz-screens

DELIVERABLE:
- 1 HTML-файл `menopace_v6_<your_stack>.html` (наприклад `menopace_v6_shadcn.html`)
- Працює подвійним кліком у Chrome — без npm install для кінцевого юзера
- Якщо потрібен build (React/JSX) — виконай build і поклади **bundle.html** з inline-stack

ПОРАДА: Подивись на референси типу Eucerin/La Roche-Posay/Headspace/Stripe pricing-cards для якості, не для копіювання. Копія англійською — приклад, наш текст має бути 100% українською.

Виконання

Як створювати 5 sub-agents — окремий хендофф у Desktop Claude (бо ми маємо протокол outbox-to-desktop/). Сюди в звіт додавати не буду; запит — desktop:write з заголовком v6-banner-contest-5-stacks-2026-05-01.md.

Sources / API verification (timestamp 2026-05-01 20:59 UTC):

• shadcn/ui: https://api.github.com/repos/shadcn-ui/ui → 113,338
• ant-design: https://api.github.com/repos/ant-design/ant-design → 97,905
• screenshot-to-code: https://api.github.com/repos/abi/screenshot-to-code → 72,423
• daisyUI: https://api.github.com/repos/saadeghi/daisyui → 40,843
• mantine: https://api.github.com/repos/mantinedev/mantine → 31,081