Менің музыкалық лейблім алты платформаның деректерімен жұмыс істейді — Spotify, Apple Music, YouTube, Instagram, TikTok, UnitedMasters. Қаржылық жүйені қазірдің өзінде құрастырдым, ал келесі қадам — бәрін біріктіретін аналитикалық дашборд болатын: стримдер, роялти, аудитория ағындары, әр трек бойынша P&L. Маған оның дизайны қажет еді. Вайрфрейм емес. Мудборд емес. Кодтау құралына «мынаны жина» деп беруге болатын нақты, продакшен сапасындағы визуалдық бағыт.
Ескі нұсқалар: дизайнер жалдау (елге байланысты $500–5000, кем дегенде екі апта), Figma-ны меңгеру (орташа нәтиже үшін бірнеше ай жаттығу) немесе ChatGPT-ден layout-ты сөзбен сипаттауды сұрап, жақсысын үміттену.
Мен мұның ешқайсысын жасамадым. Variant-ты қолданып, 20 минутта 24 толыққанды макет генерациялағаннан кейін, Claude арқылы қай макеттің қай элементтері шынымен жақсы екенін — және неліктен екенін анықтадым. Мұның бәрі өзім төлеп жүрген құралдардан артық ештеңе тұрмады — Variant айына $20, Claude айына $100 — және мен көрген агенттік брифтердің көпшілігінен қатаңырақ дизайн бағытын берді.
Міне, әдіс.
1-қадам: Бағаламай генерацияла
Variant — мәтіндік промпттер, референстік сайттар мен өзіңіздің суреттеріңіздің комбинациясы негізінде толық беттік UI-макеттер генерациялайтын AI дизайн құралы. Оны күшті ететін дәл осы комбинация — сіз жай ғана сипаттаманы бос кеңістікке жібермейсіз. Сіз бірнеше жақтан визуалдық контекст бересіз.
Мен ұнайтын сезімі бар үш сайтты таңдаудан бастадым — дашбордтар емес, жай ғана қажетті энергетикасы бар сайттар. Оларды Variant интерфейсінде референс ретінде қостым (жай ғана «add reference» басып, URL қоясыз). Содан кейін біздің лейблдің фирмалық визуалының скриншотын жүктедім. Осының бәрінің үстінен бір жолдық промпт тердім: «analytics dashboard for a music label, dark mode, shows revenue and streaming data». «Генерациялау» батырмасын бастым.
Төрт макет пайда болды. Кейбіреулері қызықты, кейбіреулері жоқ. Төмен жылжыдым. Тағы төрт. Тағы жылжыдым. Тағы төрт. 20 минутта менде 24 мүлдем әртүрлі дизайн бағыты болды — алтын акценттері бар қараңғы премиум, минималистік editorial, bento-box орналасулар, газет бруталізмі, киберпанк стиліндегі терминал, швейцариялық модуляр, ретро-инди-журнал. Мен сұрауды ойламайтын стильдер.
Басты инсайт: генерация кезінде бағалама. Жай ғана жалғастыр. Талғам кейін қосылады, және таңдау көп болғанда ол жақсырақ жұмыс істейді.
2-қадам: AI-ды дизайн сыншысы ет
Міне осында ең қызығы басталады. Менде 24 әдемі макет болды. Интуиция үш-төрт макеттің «дұрыс сезілетінін» айтты. Бірақ интуиция — адамдар күн сайын пайдаланатын құралды жобалаудың нашар жолы.
Мен скриншоттар жасадым — бір суретте төрт макет, алты сурет — және оларды Claude-қа жүктедім. Дедім: әр макетті сипатта, содан кейін қандай дизайн элементтері екі параметр бойынша жақсы жұмыс істейтінін айт. Бірінші — оқылымдылық пен инсайт генерациялау: дашбордты шынымен пайдалы ететін не. Екінші — дофамин мен пайдаланушы тартымдылығы: адамдарды оны ертең тағы ашқысы келетін не.
Claude жұмысқа кірісті. 2026 жылғы дашборд дизайнының үздік тәжірибелерін зерттеп, 24 нұсқаның әрқайсысын осы тәжірибелерге сәйкестігін талдап, нақты қорытындылармен оралды.
Міне табылғандардың бір бөлігі: bento-box орналасулар (әртүрлі өлшемдегі карточкалар) — 2026 жылдағы ең оңай сканерленетін паттерн, олар әр метриканың дербес болуына мүмкіндік береді. Қараңғы тема — эстетикалық таңдау емес, функция: пайдаланушылардың 82%-ы оны қосады, және деректер қараңғы фонда жақсырақ ерекшеленеді (бірақ қою сұр, қара емес, әйтпесе көз шаршайды). Бір басты график бес кішкентайды жеңеді — ми бірнеше қарапайым визуализациядан гөрі бір күрделі визуализацияны жақсырақ өңдейді. Аlerттері бар мәтіндік ленталар күту дофамин ілмегін жасайды — пайдаланушы дашбордты цифрларды тексеру керек болғандықтан емес, жүйе не тапқанын білу үшін ашады.
Ал басты табылым: менің 24 макетімнің ешқайсысында психологиялық тартымдылық қабаты болмады. Трек өзін-өзі ақтағанда мерекелеу анимациялары жоқ. Серия есептегіштері жоқ. Жоғалтулар туралы аlerттер жоқ. Мақсатқа прогресс индикаторлары жоқ. Барлық макеттер деректерді көрсетуді жақсы орындады, бірақ бірде-бірі сұраққа жауап бермеді: адамға не үшін қайта оралу керек?
Мен макеттерді жай қарап, мұның ешқайсысын анықтамас едім.
3-қадам: Оңтайлы комбинация
Claude нақты рецепт берді: 4B макетінен bento-box орналасуды, 1C-ден қою алтын түстер палитрасын, 3A-дан графиктегі градиенттік толқынды, 3D-ден инсайттары бар мәтіндік лентаны, 6C-ден жарқын аlerт блоктарын алу. Және ешбір макетте жоқ дофамин қабатын қосу — жетістіктерге конфетті, серия есептегіштері, жіберіліп алған мүмкіндіктер блоктары, мақсаттарға прогресс-барлар.
Міне маңыздысы. Ешбір макет жауап болмады. Жауап — алты әртүрлі макеттегі ең жақсы элементтердің комбинациясы мен AI барлығында жоқ деп анықтаған қабат болып шықты.
Мен осы рецептті алып, Variant-қа қайта оралдым. Claude жазған нақты промпт бойынша жаңа макеттер топтамасын генерацияладым — дәл түс кодтарымен, орналасу құрылымымен және компоненттер сипаттамасымен. Нәтижелер түбегейлі дәлірек болды. 24 кездейсоқ бағыттың орнына мен бір күшті бағыттың вариацияларын алдым.
4-қадам: Экспорт және құрастыру
Variant HTML немесе React-қа экспорттайды. Мен ең жақсы нәтижені таңдап, «экспорт» бастым және продакшенге дайын код алдым. Оны Claude Code-қа апарып дедім: міне дизайн, міне менің нақты деректерім (Spotify, Apple Music, YouTube, Instagram, UnitedMasters-тен CSV), енді дашбордты жина.
Бұл басқа мақаланың тақырыбы. Мұндағы мәні — дизайн бөлігі, нөлден зерттеулермен расталған продакшен сапасындағы визуалдық бағытқа дейін, бір сағаттан аз уақыт алды.
Әдіс
Мұны қайталанатын процесске келтірсек:
Бірінші — кеңінен генерацияла. Variant-ты (немесе кез келген AI дизайн құралын) қолданып, сүзгіленбеген 20–30 макет шығар. Референстік сайттар жүкте, бренд контексті үшін өз суреттеріңді жүкте, еркін мәтіндік промпт қос. Бұл кезеңде сан сападан маңыздырақ.
Екінші — AI көмегімен талда. Барлық макеттерді Claude-қа (немесе суреттерді көретін кез келген LLM-ге) бер. Тапсырмаңа қатысты нақты критерийлер бойынша бағалауды сұра. «Қайсысы жақсырақ көрінеді» деп сұрама. «Қандай паттерндер X және Y-ді максималдайды, және барлығында не жетіспейді?» деп сұра.
Үшінші — синтезде. AI-дан алған рецептті — бірнеше макеттегі ең жақсы элементтер мен анықталған олқылықтар — ал да нақты промпт жаз.
Төртінші — тарыла генерацияла. Нақты промптпен дизайн құралына қайт. Енді сен кездейсоқ зерттемей, валидацияланған бағыттың вариацияларын генерациялайсың.
Бесінші — экспортта және жина. Жеңімпазды ал — және кодқа.
Бүкіл цикл: генерация → бағалау → синтез → қайта генерация → құрастыру. Екі AI құрал сенің арқылы бір-бірімен сөйлеседі, әрқайсысы ең жақсы білетін нәрсесін істейді. Variant визуалды жақсы генерациялайды. Claude жақсы талдайды және синтездейді. Сен соңғы шешімді жақсы қабылдайсың.
Мен не түсіндім
AI дизайн құралдары — дизайнерлердің орнын баспайды. Олар процестің бос кенепке қарап, неден бастау керектігін білмей тұратын бөлігін алмастырады. Бос кенеп мәселесі нақты — дизайнер емес адамдардың көпшілігі дизайнмен шұғылданбауының себебі дәл осы. Variant оны толығымен жояды.
Бағалау кезеңі — шынайы құндылық осында. Әдемі суреттер генерациялау оңай. Қай әдемі сурет пайдаланушылар үшін шынымен жұмыс істейтінін түсіну — міне қиыны осы. Бір AI-ды екінші AI-дың нәтижелерін сынау үшін қолдану — мен қайта-қайта қайтып келетін паттерн. Патенттерде жұмыс істеді (агенттер патент формулаларына шабуыл жасайды). Дизайнда жұмыс істейді (үздік тәжірибелерге сәйкестік талдау). Генерация арзан, ал бағалау сараптаманы қажет ететін кез келген жерде жұмыс істейтіні сөзсіз.
Талғам — қозғаушы күш емес, шешуші дауыс. Мен Claude талдауына дейін «дұрыс сезілген» үш макетті таңдадым. Олардың екеуі соңғы рецептке түсті. Біреуі түспеді — ол жақсы көрінді, бірақ мен саналы түрде байқамаған оқылымдылықтың базалық принциптерін бұзды. Тек интуицияны ұстанғанымда, мен әдемі, бірақ тиімділігі азырақ нәрсе жинар едім.
Қазір неістеуге болады
variant.com сайтына кір. Саған не дизайн керек екенін бір жолмен жаз — лендинг, дашборд, қосымша экраны, кез келген нәрсе. 8–12 макет генерацияла. Скриншоттар жаса. Оларды Claude-қа жүктеп сұра: «Осы дизайндардың қайсысы [сенің кейсің] үшін қазіргі UX тәжірибелеріне ең жақсы сәйкес келеді, және барлығында не жетіспейді?»
Сен 30 минутта дизайн бағытын аласың — дизайнермен әдеттегі жұмыста бір апта хат алмасуды алатын нәрсені. AI дизайнерлерден жақсырақ болғандықтан емес — «генерация — бағалау — синтез» циклі классикалық «бриф — жоба — кері байланыс» циклінен жылдамырақ болғандықтан.