Don’t Prompt
الذهاب إلى القناة على Telegram
Senior UX/UI Designer → Design Engineer Працюю з 2018 року Веду тг канал про дизайн і AI Практичні гайди з реальних проєктів Постійні тести без хайпу Чат каналу: t.me/dont_promt Якщо є питання: @Masha_Look
إظهار المزيدلم يتم تحديد البلدالفئة غير محددة
601
المشتركون
+124 ساعات
+517 أيام
+14130 أيام
أرشيف المشاركات
601
боже, тільки лінивий не написав про Figma Motion
ну прикольно, так
але поки хз, наскільки це потрібна штука🤡
601
Зробила штуку для себе і ділюся, раптом вам теж зайде🤷♀️
Я зібрала собі інструмент Lead Thermal Engine.
Підходить дизайнерам які шукають проєкти самі або студіям що шукають клієнтів думаю, корисно.
Ось про що це:👇
💬сам знаходить локальні бізнеси, яким реально потрібен дизайн - без сайту, з мертвою інстою, зі слабким візуалом
❤️🔥 оцінює кожного: наскільки йому потрібна твоя робота × чи є в нього гроші і ставить найгарячіших згори
🧡 а ще моє улюблене генерує класне перше повідомлення під кожного клієнта: не сухий шаблон, а живий персональний текст, що чіпляє саме цей бізнес
Напр.:
«Привіт! Побачила, що у вас 200+ відгуків, але немає сайту — це помітна прогалина між тим, які ви класні насправді, і тим, як легко вас знайти онлайн. Можу зробити безкоштовний міні-розбір із парою ідей?»і так під кожного, автоматично. 📞 одразу дає, куди писати: телефон, WhatsApp, Google Maps, Instagram Чому це зручно: ⚡️ не ти полюєш за клієнтами, а відкриваєш готовий список найтепліших ⚡️ працюєш згори вниз: спершу ті, кому ти потрібен і хто заплатить ⚡️ перше повідомлення вже написане - лишається лиш відправити ⚡️ замість вічного «де шукати проєкти» маєш конкретні 50–100 контактів на сьогодні Виклала у відкритий доступ безкоштовно - клонуй, встав свої ключі й користуйся : 🔗 github.com/chester9303026-dev/lead-thermal-engine Підтримайте зірочкою ⭐️ на гітхабі пліз ❤️
601
Короче, я тут знову рилася в інструментах суто під свої задачі ладно-ладно, і для вас теж і за пару тижнів назбирала п'ять штук, які прямо варто поклацати руками. Дві для роботи з агентами і три для візуалу.
Погнали:
✂️ ui-skills.com
Це буквально каталог скілів, щоб ваш агент не тупив з інтерфейсами. Викликаєш однією командою npx ui-skills start, і він сам підхоплює потрібне вміння — підправити моушн, допилити фронтенд чи налаштувати доступність.
✂️ diffusionstudio/lottie (GitHub, безкоштовно)
Згодовуєш цей скіл агенту, пишеш текстом, що має відбуватися на екрані, а він сам генерить код анімки і одразу крутить її в плеєрі. На виході — чистий Lottie-JSON, який можна сміливо кидати розробникам. На гитхабі вже більше 3 тисяч зірок, тема робоча.
✂️ motionsites.ai
Галерея лендінгів, зібраних нейронками. Але найбільший сік у тому, що до кожного прикручений той самий промпт, з якого він виліз. Знайшов класну структуру 💙 скопіював промпт 💙 закинув собі 💙 отримав адекватну базу. Щось безкоштовно, щось за гроші.
✂️ sceneai.art
Схожа історія, але тут жорсткий акцент на перші екрани та соковиті градієнти. Оновлюють щотижня. Прямо рятує, коли треба за п'ять хвилин зібрати мудборд і немає жодного бажання годинами скролити мертвий Dribbble.
✂️ shaders.com
Моє улюблене❤️
Просто залипнути на складний веб і зловити натхнення, коли око вже замилилося.
Беріть тестить. А якщо самі знайдете в мережі щось реально вартісне — несіть сюди в коменти, розберемо разом! 🤪
601
так, ділюсь результатом
зібрала сторінку для свого закритого каналу, за цією своєю системою про яку вище писала 👍 , для тесту
💗 Лендінг буткемпу don't prompt
я не давала на вході клоду нічого крім тексту: про що гайд і в якому форматі 🤷♀️
і тут немає ніяких підключених скілів
і от результат:
пішло 2 години, і сам дизайн я не правила, тільки виправила шрифт для заголовків, и фони карток, додала цей "інтерактив" головному екрані, ну і все
оцініть дизайн, реально цікавить ваша думка 🕴
601
Привіт банда, маю до вас прохання 🤪
Вчора побачила в Тредс, як дизайнерка виклала своє портфоліо, зібране з клодом за два дні. Відкрила... і візуал там був просто до болю шаблонним. Відверто ШІ-дефолт.
І тут у мене остаточно склався пазл. Більшість дизайнерів досі займаються звичайним Vibe Coding. А коли вилазить крінж, починають палити шалені гроші на токенах і годинами переписувати запити, намагаючись змусити Клода виправити власні помилки.
Це невірний підхід, от запомніть мої слова:
зараз відбувається перехід від вайб кодінгу до agentic engineeringКороче, я такий підхід вважаю тратою часу і токенів і не можу прийняти. Тому в мене пішло півроку життя(реально пів року 🤪 ) на те, щоб перевести свій процес дмзайну у Agentic Engineering і створити систему, яка розуміє мій смак. Я хочу щоб Клод чітко розумів, який мінімум мені потрібен. Замість типового ШІ-сміття я можу контролювати його дизайн. І шо саме приємне що ця система зараз може навчати себе🫶 Але ще є багато підводних каменів на цьому шляху, і багато мінусів.. 👉 Тому я маю прохання: допоможіть оцінити, бо в мене вже око замилилося. Я ще буду докручувати якість (є конкретні способи зробити краще), але Як вам саме цей базовий рівень? Що скажете? дивлячісь на те що ви пишете: потрібен сайт стоматології і тд, і як результат сайт +- такий виходить, тобто генерація нижче такого рівня не опускається Або спитайте мене, якщо питання є, бо брейнштормити з клодом це одне, а от з людиною.. ви за 5 хвилин можете рознести мене 😁 Пишіть чесно в коментарях 👇
601
О, Anthropic викотили потужне оновлення для Claude Design! 📝
Ось що там зараз коїться:
⚡️ Тепер і на десктопі. Інструмент вийшов за рамки браузера. Тепер усе працює нативно у настільному додатку, що набагато зручніше для великих проєктів.
⚡️ Живі анімації та інтерактив. Забудьте про статичні макети. Тепер можна створювати анімовані елементи, переходи та клікабельні прототипи прямо через діалог.
⚡️ Синхронізація з реальними дизайн-системами. Якщо це так то це взагалі розрив. Claude тепер можна підключити напряму до вашої Figma, репозиторію на GitHub або кодової бази. пишуть що він підтягує реальні компоненти, перевіряє код на помилки під капотом і будує інтерфейс суворо у ваших фірмових стилях.
⚡️ Повноцінний візуальний редактор (WYSIWYG). Більше не треба промптити кожну дрібницю. На холсті з'явилися звичні drag, resize та align. Тобто рухаєш, вирівнюєш та змінюєш розміри елементів руками, як у Фігмі, а Клод паралельно переписує під це чистий код.
Я ще не тестила це все, пле обовʼязково вам потім скажу що до чого🧡
Хто вже встиг поклацати оновлення? Як вам робота з дизайн-системами? Діліться в коментарях 👇
601
Мене запитали, в чому різниця між OKLCH і в чому його прикол порівняно зі звичайним HEX ✨
Так, це база, але давайте проговоримо нормально, бо вдруг хтось знайде це корисним для себе ❤️
Чому HEX та RGB - це біль для розробки?
Поглянь на колір #3553ff. А тепер скажи, яким стане це число, якщо зробити колір «трохи світлішим»? Отож. Ніхто не скаже. Ти просто лізеш у піпетку у Фігмі, сподіваючись вгадати потрібний відтінок 👌
RGB так само: три абстрактні числа (скільки там червоного, зеленого і синього), які комп'ютер розуміє, а от людське око - взагалі ні.
HSL ніби рятує, але насправді бреше.
Комп'ютерний алгоритм тут сліпий до людського сприйняття. Побудуєш на HSL автоматичну палітру і весь контраст попливе.
Що таке OKLCH людською мовою?
Цей простір побудований на тому, як колір сприймає саме людське око (perceptually uniform). Тут усього три зрозумілі значення:
💡 L (Lightness) — чесна світлота від 0 до 1. Вона працює так, як бачать очі.
💡 C (Chroma) — насиченість (від 0 і вище).
💡 H (Hue) — відтінок (від 0 до 360 градусів по колу).
Наприклад синій виглядає так:
oklch (0.58 0.2 260)
Хочу світліший? Я просто піднімаю L, тримаючи інші цифри: oklch (0.97 0.02 260).
Хочу темніший? Опускаю L: oklch (0.2 0.1 260).
Я не вгадую код навмання, я просто міняю яскравість, і колір поводиться абсолютно передбачувано.
Чому це маст-хев для дизайн-інженерів?
Шкала відтінків (50–950) будується сама - фіксуєш відтінок (H) і просто гойдаєш світлоту (L).
Дарк-мод за секунду - дзеркально перевертаєш значення L для інтерфейсу, і все готово.
Ідеальні ховери та стейти - зсуваєш L на фіксований крок, і кнопка підсвічується однаково рівно і з правильним контрастом по всій палітрі.
Також доступ до супер-соковитих кольорів на сучасних Mac та iPhone, які звичайний HEX фізично не здатний закодувати (він їх просто зрізає)
Tailwind v4 вже повністю перейшов на oklch, вся їхня дефолтна палітра тепер написана в ньому. Тобі все одно доведеться з цим працювати.
Де підводні камені ?
Старі браузери: Зовсім древні мамонти потребують фолбеку, але Tailwind 4.1+ підкладає його автоматично під капотом.
Figma: Вона досі напряму не вміє працювати з oklch. На етапі передачі макету розробнику може бути невеликий розрив, тримай це в голові.
Якщо накрутити забагато насиченості (C), колір може вийти за межі можливостей монітора і браузер його трохи підріже. Це ок, не лякайся.
Як це налаштувати в коді?
Тримай кольори як глобальні CSS-змінні (дизайн-токени) у :root:
CSS :root { --brand-500: oklch(0.58 0.2 260); --brand-50: oklch(0.97 0.02 260); --brand-900: oklch(0.2 0.1 260); }Корисні інструменти: Конвертер oklch.com - закидаєш туди свій HEX з Фігми і забираєш готовий oklch-код. От і вся база ❤️ Сподіваюсь я все правильно написала поправте якщо що 🐸
601
Знайшла цікавий ресурс, ділюсь! Хтось уже мацав його руками?
👉 https://jiro.build/components
Це велика бібліотека готових UI-компонентів та блоків під розробку. Я вже встигла потестити його в зв'язці з Claude Fable, і результати дуже цікаві. Клод злизує звідти код і збирає блоки просто 1в1. Якість коду на виході 🔥 , але тут є одне велике «АЛЕ» те, що СС копіює все звідти з точністю до пікселя то це одночасно і добре, і погано.
Плюс: не треба вигадувати велосипед для стандартних сіток чи форм.
Мінус: Якщо копіювати наосліп, то це крадіжка.
Як це юзати з розумом?
Використовуйте такі ресурси як технічний каркас. Нехай Клод бере звідти чисту логіку та структуру блоку, а от візуал: стилі, відступи, мікроанімації та кастомні фішки ви вже натягуєте зверху самі, керуючи моделлю через промпти.
Короче, інструмент точно корисний, якщо використовувати його як фундамент, а не як легкий спосіб злиняти від дизайну
і чекаю ваші думки в коментарях. юзали щось подібне? 👇
601
Аааа, нас вже більше 300! 🥳
Нас тут зібралася ціла банда! Стільки дизайн-інженерів і не тільки в одному місці - це кайф 🔥
Дуже ціную кожного з вас!
601
Хочу з вами більше ділитись роботою, тому буду показувати все як є 😅
До мене зайшов проєкт, який я прям люблю. Це виробник інкубаторів! Вважаю такі ніші найкрутішими кейсами. Зробити стильним якийсь і так красивий фешн-бренд - це ми всі вміємо, а от тут тільки одні фото продукта чого вартують)
Ви просто подивіться на цей оригінальний сайт. Якщо чесно, я від нього прям кайфонула, ну класс, нє?) Але завдання є завдання - треба робити редизайн.
І я вирішила провести невеличкий експеримент:
⚡️ Claude Fable 5
Я просто закинула базу в Claude Fable 5 (коли вона ще була жива) із дефолтним промптом але з своєю базою рефів, тобто дефолтний генерний дизайн взагалі був 💩
Результат на другій частині відео.
⚡️ Мій дизайн.
А третя частина відео - це вже мій дизайн.
Я кайфую від можливостей ШІ: швидко, без розробників, лишається лише прокачувати свою надивленість ❤️
Нє, тут ніяких гучних висновків, просто ділюсь)) Я не знаю як вам, але я бачу чому ШІ в дизайні без дизайнера ще не зробить класно 🤷♂️
Трохи залаштунків по цифрах:
Найбільше часу пішло на генерацію картинок і правки. Так, код за ШІ треба постійно правити, але і з живим розробником так само, тому для мене це взагалі не проблема. Сама сторінка зібрана за +-4 години (на відео ще не кінцевий результат, буду допилювати)
Пішла генерувати фото далі 🐥
А ви скажіть, як вам така трансформація?
І ще питання, і воно важливіше: хтось ще сумує за дизайном з нульових?
Бо я після цього прям хочу зробити пару робіт у стилі їх оригінального сайту🐶
601
Українці, ви чудові, незважаючи на таку ніч, все одно йдете вчити щось, працювати і жити це життя 💖
обожнюю 💞
до мене приєдналось 6ть людей в канал і я неймовірно вам рада🧡
я писала що візьму 10 людей на низьку ціну, але ні, я буду брати всіх на низьку ціну, підвищувати зараз не буду, не хочу щоб на вас зараз щось тиснуло.
тому: коли буде бажання, тоді і приходьте.
ми розберемось
🩷Які підписки краще брати і для чого
Розберемося з бюджетом, щоб не зливати гроші на все підряд. Я чітко покажу, які сервіси реально вартують кожної копійки і окуплять себе в перші ж дні, а де можна спокійно сидіти на безкоштовних тарифах і ні за що не переплачувати. Тільки прагматичний підхід!
🩷 Налаштуємо собі агентів
Відкриємо термінал, розберемося з Claude Code і створимо твоїх особистих ШІ-помічників. Навчимо їх працювати за твоїми правилами, бачити твій дизайн і закривати всю нудну технічну роботу, поки ти п'єш каву.
🩷 Автоматизуємо спілкування з клієнтами ❤️
Мій улюблений біль, який ми нарешті вилікуємо. Навчимо систему самій збирати глибокі брифування, робити автоконспекти зі здзвонів та витягувати з клієнта реальні смисли. Більше жодних правок у стилі «я мав на увазі інше» та розбірок «а ми про це не домовлялися». Повна база знань по проекту в один клік!
🩷 Лайфхак: як малювати SVG-ілюстрації за допомогою ШІ
Ділюся своїм секретним лайфхаком! Покажу, як змусити штучний інтелект генерувати чистий векторний код і круті SVG-шки прямо під твій проект.
🩷 Скіл для генерації класного контенту для сайтів
Жодного «Lorem Ipsum». Я дам тобі готовий робочий скіл, за допомогою якого ШІ писатиме продаючі та логічні тексти саме під нішу твого замовника. Сайт одразу виглядатиме дорого і цілісно.
🩷 Що робити з сайтом далі (коли аішка його згенерила, а ми внесли правки)
Найважливіший фінал. Окей, код готовий, дизайн вилизаний, правки внесені — а далі що? 😅 Ми розберемося, як усе це діло протестувати, як легко прикрутити форми (щоб заявки від клієнтів летіли прямо тобі в Telegram чи на пошту) і як випустити готовий сайт в інтернет без болю, програмістів та сивого волосся.
601
🔥 ВЕЛИКИЙ ГАЙД 🔥
Короче, видаляйте свою Фігму
Жарт. Поки не видаляйте, вона нам ще знадобиться (базу я поясню), але підхід до роботи ми будемо міняти кардинально.
Я запускаю великий закритий гайд про те як автоматизувати свою роботу навколо дизайну.
⚡️ Реально великий, 6 частин і 79 сторінок
⚡️ Віддам, як мінімум 3 своїх скіла і чітке розуміння як зробити свою систему.
Для кого:
⚡️ для всіх хто тільки починає автоматизовувати свою рутину. Відкриємо термінал, налаштуємо систему.
Я писала гайд відповідаючи собі на запитання що б за інфу я б хотіла сама знайти півтори року тому ❤️
Ми зробимо це у форматі закритого чату. Я буду закидати туди інформацію частинами. Ви зможете читати її тоді, коли вам зручно навіть вночі або в дорозі
А найголовніше - я буду там на зв'язку. Можна буде задавати питання, а я буду в чаті допомагати вам усе це налаштовувати під себе.
На рахунок ціни:
⚡️ для перших 10 людей, які залітають прямо зараз, вхід коштує $39 🔥, я планую провести такий собі boot camp, мені це цікаво, це реально для душі)) але і потім я не планую валити великі суми, це буде $110
Пишіть мені в тг, @Masha_Look або тут в комментах 👍
І зустрінемось у закритому чаті!
601
я насправді думаю що вони знов відкриють fable
просто з сильними обмеженнями
але блін, я вже не хочу опус..
😂
601
Короче, народ, класичне «не було печалі». Прочитала от таку новину https://www.anthropic.com/news/fable-mythos-access
Тільки-но ми зраділи, що в Claude Code нарешті зняли ліміти і можна нормально кодити, як прилетіло звідки не чекали. Причому прилетіло з самої гори.
Уряд США викотив експортну директиву «з міркувань нацбезпеки» і наказав заблокувати доступ до флагманських моделей Fable 5 та Mythos 5 для всіх не-громадян Штатів. Взагалі всіх. Тобто навіть співробітники Anthropic без синього паспорта тепер не мають до них доступу.
Через те, що відфільтрувати юзерів по паспортах прямо зараз технічно нереально, розробники просто взяли й вирубили Fable та Mythos взагалі для всіх користувачів Claude.
У чому взагалі прикол?
Пишуть що американські чиновники десь почули (чи їм хтось показав), що Fable можна «джейлбрейкнути» (обійти захист), якщо просто попросити модель почитати код і закрити в ньому баги. В Anthropic зараз трохи в шоці й кажуть, що це повний абсурд. Будь-яка сучасна модель (типу GPT-5.5) вміє це робити, і цим щодня користуються білі хакери для захисту систем. Жодного «смертельного» зливу чи універсального хаку не було.
601
ви вже скрізь бачили цю новину, я знаю 🫣
але є прикольна штука з цим
figma викатили офіційне розширення для chrome яке імпортує будь-яку вебсторінку у figma як редаговані шари
весь контент одразу готовий до правки : тексти, іконки, кнопки
ієрархія шарів зберігається (хоча структура буває не ідеальна)
❤️ але є цікавий нюанс
воно працює на ai-генерованих сайтах, тобто claude code прототипах також
і тепер ваш пайплайн тепер може бути такий
зібрала прототип в claude code → витягла в figma через розширення → доточила дизайн → повернула в код
працює тільки на платних планах figma
інтерактив (hover, анімації) не імпортується, тільки статика
зараз ще в beta пишуть що є багимені особисто це не часто треба бо живу в claude code майже завжди
601
готово, читайте
повний огляд на fable5, в основі тільки офіційна документація Anthropic
реально є цікаві штуки
і якщо вам було корисно, ставте 🔥 або ❤️
а якщо є питання то це взагалі кайф, пишіть в коменти
601
Читаю документацію про Fable5
і от прикол, цитую:
Скіли, розроблені під попередні моделі, часто занадто прескриптивні для Fable 5 і можуть ПОГІРШУВАТИ якість результату. Перегляньте і приберіть старі інструкції, якщо дефолтна поведінка кращаЗараз напишу повний огляд на модель, є цікаві штуки👍
601
так, зізнаюсь шо я робила останні тижні 🫣
ні я написала його давно і просто не наважуюсь викласти
я писала гайд
гайд на 6 частин і 79 сторінок
це весь мій маршрут яким можна вести клієнтські проєкти виключно з АІ
від першого повідомлення клієнта до живого сайту на домені без розробника
👍 автоматизації на всіх етапах
👍 деякі мої скіли
короче, віддам майже все що маю)
це база і основа роботи з АІ (з клодом і іншими)
півтора року практики, реальні факапи
все шо працює і все шо виявилось сміттям
я думаю що з такою інфою можна скласти чітке розуміння свого пайплайну роботи
якщо я реально стану комусь корисною-кайф💖
в понеділок розкажу шо з цим всім буде
і там буде приємний сюрприз 💕
601
тестую цей ваш Fable5 і звісно я вперлась в ліміти
блін
і так, це реально новий тип лудоманії 😭
по дизайну швидко, так в дизайні він став сильнішим, але все одно досить шаблонно, і сам, без вашої надивленості він не зробить круто
але для мене він прям крутий в аналізі, в тестах..
так от, дала йому на тест свою систему, і от шо цікаво, він сам прийняв рішення розгорнути 21 агента паралельно
5 з них проєктують незалежні архітектури
окремий пішов аналізувати ринок
і на кожну пропозицію поставила по три скептичні судді які розносять її по реалізуємості і доказах
і прикол, ці "судді" ставили свої гіпотези і кожен для захисту своєї гіпотези шукав інфу в неті, потім вони між собою домовились і видали мені данні які я б сама не знайшла, підняли мені такі скіли по проєкту, я б реально сама не знайшла їх 😼
і ще одне, в моделі є налаштування: Скільки думати над відповіддю, так от ставте навіть Low, він навіть так розумніший, бо на Medium він занадто багато думає над простими питаннями
а так, да, прикольно, але віддайте мені мої токени 🤣
