21st.dev Magic

Дизайн

Генеруйте відполіровані UI-компоненти миттєво через Neotask на OpenClaw

Що ви можете робити

Neotask підключається до 21st.dev Magic через OpenClaw, надаючи миттєвий доступ до величезної бібліотеки готових до виробництва UI-компонентів та генерації компонентів на базі ШІ — все через розмову.

Генерація компонентів

  • Генерація за описом — опишіть потрібний UI звичайною мовою та отримайте повні стилізовані React-компоненти з Tailwind CSS, shadcn/ui або вашою улюбленою бібліотекою
  • Ітерація зі зворотним зв'язком — скажіть "зроби компактніше" або "додай стан завантаження", і Neotask одразу застосує ваш зворотний зв'язок з новим виведенням коду
  • Мультиваріантна генерація — запитайте кілька варіантів дизайну одночасно, щоб вибрати найкращий для вашого проекту
  • Вбудована доступність — згенеровані компоненти дотримуються найкращих практик ARIA та патернів клавіатурної навігації з самого початку

    • Пошук у бібліотеці компонентів

  • Пошук за патерном — знаходьте компоненти для вашого випадку: "таблиця цін з перемикачем місячна/річна оплата" або "панель сповіщень з лічильником непрочитаних"
  • Перегляд за категорією — досліджуйте компоненти за типом: навбари, модальні вікна, форми, картки, таблиці даних, дашборди та інше
  • Фільтр за стеком — шукайте компоненти для вашого технологічного стеку (React, Vue, Tailwind, shadcn, Radix UI)
  • Готові до копіювання фрагменти — кожен компонент з бібліотеки відформатований для негайного використання у вашій кодовій базі

    • Інтеграція з дизайн-системою

  • Відповідність існуючому стилю — надайте ваші колірні токени або конфігурацію Tailwind, і Neotask генерує компоненти, що відповідають вашій дизайн-системі
  • Композиція компонентів — попросіть повний макет сторінки, компонуючи кілька фрагментів компонентів разом
  • Варіанти темної теми — запитуйте версії темної теми будь-якого компонента з узгодженим використанням токенів

    • Спробуйте запитати

  • "Згенеруй компонент картки цін з бейджем популярності, списком функцій та CTA-кнопкою на Tailwind"
  • "Мені потрібен адаптивний навбар з логотипом зліва, посиланнями в центрі та кнопкою Увійти справа"
  • "Знайди на 21st.dev компонент таблиці даних з сортуванням, фільтрацією та пагінацією"
  • "Створи hero-секцію з великим заголовком, підзаголовком, двома CTA-кнопками та макетом зображення справа"
  • "Зроби компонент компактнішим та додай стан скелетного завантаження"
  • "Знайди компонент модального діалогу, що висувається справа як панель"
  • "Згенеруй степер онбордингу з 4 кроками та індикатором прогресу"
  • "Мені потрібна система тост-сповіщень, що складає сповіщення в нижньому правому куті"

    • Поради

  • Будьте конкретними щодо дизайн-наміру — "корпоративний SaaS-стиль з тонкими рамками" або "споживчий додаток із закругленими кутами та м'якими тінями" дає кардинально різні результати
  • Попросіть Neotask адаптувати знайдений компонент 21st.dev до вашої існуючої палітри кольорів, надавши значення основного/вторинного кольорів
  • Використовуйте генерацію компонентів на ранніх етапах дизайн-процесу для швидкого прототипування макетів перед фіксацією повної дизайн-системи
  • Поєднуйте з робочим процесом вашого редактора коду через OpenClaw — згенеруйте компонент, доопрацюйте його в розмові та виведіть фінальний файл безпосередньо у ваш проект

    • Works Well With