Don’t Prompt

🟡😗😝🧡✍🔡😊 я дуже радію що нас вже майже 200 людей тут, ви круті, дякую 😍 і я хочу познайомитись ближче з вами я Маша Більше 8 років в UX/UI, з них 5 у міжнародній digital-компанії в партнерстві з IBM зараз веду власну студію і клієнтські проєкти від брифу до живого сайту, без розробника ⬇️

з claude code cli

цей канал про дизайн-інженерію я тут не переказую новини, я тестую все руками і пишу шо вийшло з чого почати ⬇️ ⭐️ безкоштовний гайд для старту (моделі, токени, перші кроки) ⭐️ чесний розбір claude design, 14 сторінок ⭐️ аналітика клієнта до дзвінка, повна автоматизація процесса ⭐️ все що потрібно знати про скіли а скоро тут буде великий гайд по дизайн-інженерії : від першого дзвінка клієнту до деплою, дуууже багато корисної інформації!! 🔥 і напишіть в коментах що вас сюди привело? мені реально цікаво 💖

anthropic щойно випустили claude

fable 5

найпотужнішу модель яку коли-небудь публічно випускали🫣 Це перша Mythos-class модель доступна публічно ключове що я прочитала прочитала що на бенчмарку FrontierCode Diamond — 29.3% (opus 4.8 — 13.4%, gpt-5.5 — 5.7%) Це в 2 рази вище Opus ціна - вдвічі дорожче opus в підписках pro/max доступна тільки до 22 червня, далі за usage credits запити зберігаються 30 днів для analysis

пишуть що claude code під fable 5 буде ще автономнішим у складних задачах

кому цікаво у вас є 2 тижні безкоштовно протестити в підписці❤️

Команда привіт🔥 мене спитали в чому різниця між claude code в додатку і claude code в терміналі 💻 чесно скажу одразу вони обидва вже дуже близькі по функціях обидва читають файли, обидва міняють код, обидва тримають CLAUDE.md і MCP сервери але є 4 штуки за які я живу в терміналі👌 1. економія токенів у терміналі відповіді коротші менше «ось я зараз зроблю», менше повторів коду, менше пояснень за замовчуванням на одну й ту ж задачу cli з’їдає десь у 2 рази менше для тих хто живе в claude code щодня це різниця між тижнем роботи і трьома днями до стіни 2. pipe - з’єднання з іншими командами в терміналі можна взяти лог помилки і одразу передати його claude cat error.log | claude "що тут не так" або обробити 50 картинок одним скриптом це робить cli частиною твоєї системи, а не окремим вікном 3. кілька claude паралельно у додатку — одна сесія за раз у терміналі через split-екрани або tmux запускаю 3-5 паралельних claude один пише hero, другий копірайт, третій тестує це справжній бустер швидкості коли треба зробити багато за вечір 4. глибша інтеграція з vs code і cursor cli як плагін читає активну вкладку, бачить виділений код, знає що відкрито додаток працює окремо, ти все одно копіюєш-вставляєш мій підсумок🔥 для спілкування, ідей, консультацій я і досі сиджу в звичайному додатку claude а для реальної розробки тільки claude code в терміналі бо там швидше, дешевше по токенах і можна одночасно вести кілька задач всім серйозним людям раджу cli😁

➖ Сьогодні говорю з вами про скіли 🧡 Я тестую скіли мало не щодня вже місяці три-чотири. Половина сміття, ще четверть-цікаво але непотрібне саме мені і я вирішила ділитись тими що реально прижились у мене в роботі ось перша партія цікавих, далі буде більше

і плюс порада, вивчайте скіли поки вони безкоштовні, серьйозно)

🔥 shadcn (офіційний) shadcn - це готова бібліотека кнопок, форм, модалок, з якої роблять майже всі сучасні сайти скіл навчає агента писати під ваш проект і за актуальними правилами, а не по гайдах з 2024

npx skills add shadcn/ui --skill shadcn

🔥 web-design-guidelines (Vercel) ловить дрібниці які видно тільки коли сайт уже на проді шрифт ≥16px на телефоні щоб айфон не зумив, нерозривний пробіл у "10 MB" щоб не переносилось, підсвітка коли клікаєте табом коротше різниця між "ну норм" і "виглядає як справжній продукт"

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

🔥 grill-me (Matt Pocock) вмикає агенту режим допитувача ти кажеш "хочу зробити Х", він не починає кодити, а починає по черзі ставити питання і одразу пропонувати свою відповідь

npx skills add mattpocock/skills --skill grill-me

🔥 impeccable (Paul Bakaus, ex-Google AMP) Must Have це frontend-design на стероїдах 23 команди: /polish /audit /critique /harden /quieter /bolder і ще пачка 27 детермінованих anti-pattern правил, вирубає Inter скрізь, фіолетово-сині градієнти, картки в картках, скруглений квадратик-іконка над кожним заголовком тобто весь стандартний слоп який ви впізнаєте з першого погляду

npx skills add pbakaus/impeccable --skill impeccable

🔥 redesign-existing-projects (taste-skill) ви відкриваєте свій сайт дворічної давнини і думаєте "боже, шо це" переписувати з нуля не хочеться, та й немає коли скіл йде по списку від найбільшого ефекту: шрифт → кольори → ховери → лейаут → компоненти сайт виглядає інакше за один вечір, без повного переписування

npx skills add leonxlnx/taste-skill --skill redesign-existing-projects

🔥 supabase (офіційний від Supabase) коли в проекті потрібна реєстрація, вхід чи база даних, а ви не бекенд-розробник агент часто пише по застарілих туторіалах і ламається цей скіл змушує його брати свіжу документацію Supabase перед кожним рішенням менше моментів "але ж у відосі на ютубі це працювало"

npx skills add supabase/agent-skills --skill supabase

CEO Cloudflare Метью Принс написав у X, що боти й агентний трафік вперше обігнали людей в інтернеті 🤷‍♀️ Ще в березні він прогнозував що це може статись в 2027, але за даними Cloudflare Radar це вже відбулось: 53% ботів проти 47% людей (по HTML-запитах) До генеративного AI боти займали ~20% трафіку. І різниця в поведінці принципова: людина, вибираючи камеру, заходить на 5 сайтів. Агент дивиться одразу на тисячі

нагадування для всіх хто працює в claude code🧡 і не тільки вчіться працювати з токенами правильно, це нова «вимога»😂 бо зараз компанії будуть дуже за цим слідкувати😉 так от: ділимо задачі на правильні моделі (не все робимо з opus) треба розуміти різницю моделей! ведемо проєкти чисто від самого початку (CLAUDE.md під 500 токенів, .claudeignore) краще один таск один чат, ніяких «змішаємо все в одній сесії» але в мене не виходить так🫣 /compact замість /clear і не забуваємо: також даємо задачі терміналу, і не палимо токени якщо без системи будете щотижня врізатись у стіну і не розуміти чому з системою спокійно працюєте і не дивитесь на статус-лайн з жахом🫣

Так, все, я закінчила 5 років роботи в студії💪 але якщо чесно це звільнення відчувається не як кінець, а як початок весь цей рік я паралельно вчила і писала свого власного агента дизайну (свого джуна) Це система яка тримає мій смак і має мою надивленість вона називається mola поки тренуєш агента сама непомітно стаєш дизайн-інженеркою, так шо прокачуйте clode code cli і буде вам щастя🧡 бо все йде до того що дизайнери вже не “малюють дизайни мишкою” а “проектують систему рішень” Я хочу поділитись mola з вами 🟠 Але поки треба прогнати тести на реальних продуктах! І паралельно готую дещо інше про що напишу скоро🧡

Зробила великий гайд про claude design❤️ бо в інтернеті половина оглядів це переклад прес-релізу, а друга половина каже: «figma все» і те і те не правда шо в гайді

🟠 чим claude design є насправді (спойлер: це не «figma від anthropic», це конструктор поверх генерації коду) 🟠 шо реально вміє анімація з живих даних, інтерактивні прототипи, деки за хвилини, frontier-режим з 3D і голосом 🟠 чому більшість виходить «дешевий ai-вигляд» і як цей вигляд вбивається за 5 хвилин якщо знати куди дивитись 🟠 бюджет тут до речі anthropic як завжди🤯 в гайді цифри по квітню а 18 травня вони злили ліміти claude design з claude code і чатом, тобто тепер один промпт в design може зʼїсти 59% пʼятигодинної сесії, платиш одним бюджетом за дві задачі 🟠 пісочниця ≠ збірка найважливіший розділ чому те шо ти зробила в полотні і те шо віддає claude code — це РІЗНІ штуки чому це не баг і не твоя помилка 🟠 куди це реально можна винести і чому прямого експорту у figma НЕМА 🟠 коли так, коли ні чесна карта застосувань без хайпу 🟠 10 лайфхаків які економлять бюджет і нерви

14 сторінок чесного огляду по травню 2026 І висновок від мене: не витрачайте час на детальне вивчення, вивчайте клод код в терміналі!

так, сьогодні відпочиваю, а вам хочу підкинути лайфхак🫣 claude code підтримує subagents це окремі мікро-claude які запускаються паралельно і кожен робить свою задачу в чому суть: ставите завдання типу “проаналізуй ці три макети і дай дизайн-систему” claude замість того щоб робити це послідовно, запускає декілька субагентів одночасно (до 10 за раз), по одному на макет наприклад кожен має власне контекстне вікно і повертає свій результат головний claude складає їх разом економія часу на складних задачах залежно від того наскільки шматки незалежні

я, наприклад, використовую субагентів коли треба👇 - проаналізувати кілька референсів одразу і витягти спільні патерни - паралельно тестити одну й ту саму архітектуру на трьох різних проєктах (саме так я ганяю свої pipeline-тести) - зібрати ui-кіт з кількох екранів коли кожен субагент розбирає свій блок - дослідити три різні підходи до однієї задачі і порівняти на виході

головне правило🟠 субагенти ізольовані один від одного - кожен у своєму контексті тому не давайте їм завдання де результат одного потрібен як вхід для іншого вони працюють добре тільки на справді паралельних шматках як активувати просто “use subagents in parallel” claude може зігнорувати я б зробила конкретніше, наприклад: “use 3 parallel subagents via Task tool — each one analyzes one of these screens” або в плані опишіть три окремі задачі і попросіть запустити їх паралельно через Task tool якшо спробуєте або вже юзаєте, скажіть в коментарі чи відчуваєте різницю🔥

ну все мене теж замінила айшка😂 завершила роботу довжиною у пʼять років тепер гітхаб тримайся 🤪 з цими нейронками стільки можливостей шо аж страшно, тепер сама собі дизайнер і розробник привітайте мене 🧡

Ввечері стартанула робити собі сайт, умовно портфоліо привіт Оля https://mola-studio.vercel.app/#about п.с я там не сама🫣 і так, мобілку продовжую правити з вами першими хочу поділитись, обіцяла показати, ну і плюс може будуть якісь ідеї,❤️ Трохи нюансів: все зроблено з клод кодом, і зовсім трошки фігми + нанобанана для генерації наших фото, на анімацію пішло години 3-4) все інше достатньо швидко☝️ Так, суть сторінки в анімації команди)) ще сирий варіант, але якщо у вас будуть мислішкі або зауваження, або навіть хейт😁 пишіть, реально цікаво дізнатись вашу думку, бо ви в мене круті!

мікро-лайфхак на сьогодні найбільший біль у claude code це коли він переробляє те шо ви його не просили чіпати попросила змінити herо, а він переробив три блоки нижче 🤯 рішення є воно дуууже просте зайдіть в ваш CLAUDE.md (або створіть якшо його ще нема в корені проєкту)

## EDITING RULES Never modify code outside the exact scope of the request. If you see something nearby that looks broken — point it out, do not fix it. Before editing, list the files you plan to touch and wait for confirmation. Preserve all existing animations, transitions, and event handlers unless explicitly asked to change them.

все після цього claude перестає лізти куди не просили і питає перед тим як зачепити шось нове

Настрій такий, шо трошки я вам понию тут🫣 якшо чесно, зараз охоплення таке шо хочеться закрити телеграм і не відкривати тиждень (борюсь з постійним бажанням швидких результатів в усьому) але я знаю шо ви тут є, і одного разу я точно комусь допоможу розібратись або підкину корисну інфу, дякую що ви тут, зі мною❤️ тому пишу не задля цифр (ага да😁) а щоб сказати привіт тим хто читає❤️

Блін, скільки постів в день писати законно в ТГ?? Нічо шо я вас спамлю? Бо в мене є бажання писати багато інфи, але постійно думаю чи це норм чи треба паузу тримать🤣 Я тут вирішила привести до ладу свою роботу Тому збирала деякі корисні посилання щоб не шукати щоразу ось деякі👇 раптом комусь стане в нагоді https://squoosh.app стискає картинки прямо в браузері без додатків гугл зробив для себе ми користуємось https://tinywow.com безкоштовний конвертер для будь-якого формату pdf docx mp4 png ну ви зрозуміли 🫣 https://roadmap.sh обираєш роль в it і бачиш повну мапу шо треба знати я ним користуюсь коли пишу claude code контекст ролі https://shortcuts.design гарячі клавіші для всіх дизайн і дев інструментів один раз кинула в закладки і живу спокійно https://devhints.io шпаргалки по будь-якій мові чи інструменту для тих моментів коли забуваєш елементарне ECC (everything claude code) https://github.com/affaan-m/everything-claude-code плагін з готовими 28 агентами і 119 скілами хто заглиблено в дизайн-інженерію зрозуміє про шо я от і все поки не багато але по ділу 🤯

Доречі, ранкове нагадування❤️ напевне всі знають але раптом хтось пропустив MCP-сервер віддає Claude Code тимчасові URL для зображень. Через 7 днів ці URL тобто через тиждень картинки на проєкті відваляться, враховуйте це хто з їх мсп працює так шо, не забуваєм казати claude code скачати картинки локально або руками в папку assets ну або не користуватись мсп від фігма 🤯 є ось https://github.com/denysosadchyi/figmosha2 для просунутих , ну і для мене классно тому шо працює на безкоштовному плані фігми бо бля, фігма безжально жере гроші 🫣

Зробила дуже швидкий тест ZoomParallax ефекту, мені треба було зрозуміти як клод це зробить, і найголовніше як це буде на телефоні (швидкий тест) Так от сторінку зібрала за 15 хвилин +- 2 промти, але на правки - 40 хвилин. дизайн не складний загалом на десктопі супер, приймаю, мені подобається, а от з мобілкою треба возитись, клоду важко адаптувати такий деякі блоки https://veloce-bicycles.vercel.app/ можете наглядно глянути на що клод здатний (мені цікаво тестити його можливості в плані анімацій) а от якшо ви тут поділитесь своїми роботами в коментах, то я взагалі буду щаслива 😍🫣 але не надіюсь навіть))

В мене запитали що саме буде в гайді Дивіться, я не навчу дизайнити, точніше я можу, але не в цьому гайді) Тут я можу показати що за чим працює, як і що відкривати і тд. Тобто якщо ви на початку шляху, то так, воно вам треба) Це більше про стратегію шляху дизайн інженера, бо дизайнити ви і без мене вже вмієте! І ось що саме я включила в гайд👇 «Вступ і основи» (22 стор.) Рамка дизайн-інженерства: смак + система. Чому це не «дизайнер що вміє в AI», а нова роль. Базові інструменти і їхня логіка. 2 «Бриф · база · дзвінок» (17 стор.) Як зібрати клієнтський бриф щоб клієнт сам відповів на все. Перший дзвінок. База даних під проєкт. 3 «Розвилка дизайну» (12 стор.) Три шляхи як збирати дизайн, коли є брендбук, коли і можно довіритись клоду, коли треба контролювати дизайн і тд. 4 «Збірка і деплой» (13 стор.) — Збірка через Claude Code + Figma MCP — «Як сайт почне приймати ліди» — 4 сценарії клієнта — Деплой Vercel з чек-листом — База данних 5 «Арсенал під ключ» (11 стор.) — 5 стартових скілів і три чи чотири кастомних — Корисні посилання Частина 6 «Швидкий старт» (4 стор.) — Бриф-скіл — Агент-аналітик — Агент-партнер — Скіл-копірайтер Разом: 79 сторінок гайду🫣🤯