UX/UI by SHAIN

Мій варіант активної прокрастинації 😁

Роблю апку-перекладач із жіночої на чоловічу й навпаки.

Активна прокрастинація - це коли відкладаєш потрібну роботу, займаючись іншою.

Викласти в App Store? 👀

Всім гарних вихідних 🙂❤️


@shain_design

⭐️ + 🟩 Коротка (цього разу реально) інструкція як підключити Codex всередину Claude Code

GPT працює в одній сесії з Claude.
Claude - головний, Codex - як другий агент, якому можна делегувати задачі або просити ревʼю.


Працює і в терміналі, і в десктоп-апці Claude Code. Плагін ставиться на юзера.


Що треба: Node.js 18+ і акаунт ChatGPT (навіть Free підходить, але ліміти Codex будуть витрачатись)

Якщо Node ще не стоїть - в терміналі:

brew install node

Якщо і Homebrew немає (перевірте через brew -v) - то спочатку його:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Перевірка: node -v має показати версію 18 або вище


👇

Крок 1: Ставимо Codex CLI

В терміналі:

npm install -g @openai/codex
codex login

👉 Відкриється браузер, логінимось через ChatGPT


Крок 2: Ставимо плагін

Прямо в чаті Claude Code по черзі (апка або термінал, пофіг):

/plugin marketplace add openai/codex-plugin-cc
/plugin install codex@openai-codex
/reload-plugins

⚠️ Якщо з десктопу команда /plugin не підхопилась - зробіть це раз з терміналу через claude. Плагін потім зʼявиться і в апці після перезапуску


Крок 3: Тестуємо

/codex:rescue --wait --model gpt-6-astra скажи привіт і яка ти модель

Якщо відповів - все, GPT на базі 🦊


Що корисно з команд:
• /codex:rescue - делегувати задачу Codex (--background щоб не чекати)
• /codex:review - ревʼю вашого коду від GPT
• /codex:adversarial-review - ревʼю де він спеціально шукає до чого доколупатись
• /codex:status і /codex:result - статус і результат фонових задач

Доречі можна і без команд, просто пишете Claude "віддай це Codex" і він сам розрулить

Нашо це дизайнерам, вайбкодерам і дизайн-інженерам, мої юзкейси 🦌


1. Два агенти йдуть ресерчити одну тему. Claude окремо, Codex окремо.
Потім я прошу Claude показати Codex свої висновки і подискутувати. У них реально дебати виходять, і фінальне рішення сильно краще ніж від одного

2. Ділю роботу по сильних сторонах. UX і логіку флоу робить Claude, UI-код (компоненти, стилі, анімації) - Codex. Claude потім робить ревʼю, або навпаки

3. Картинки. Codex вміє генерити зображення, і доволі гарні. Тож ілюстрації, плейсхолдери, іконки для прототипу - кидаю йому, Claude так не вміє

4. Друга думка перед шипом. Claude щось навайбкодив, кидаю adversarial-review і GPT розказує де воно впаде. Безкоштовний злий код-ревʼювер, крч


Канеш це подвійна витрата токенів (два підписки, дві квоти), тож не на кожну задачу. Але на ресерч і ревʼю - імба


Буду вдячний за лайки, репости 💛

Якщо щось не підключилось - пишіть в комменти, будемо разом дебажити інструкцію!

@shain_design

Зберігайте 👇
Добірка сайтів для пошуку референсів під конкретні частини інтерфейсу:

🔗 Navbar Gallery - навігація та хедери

🔗 SupaHero - hero-секції та перші екрани

🔗 404s.design - сторінки 404

🔗 Footer.design - футери сайтів

🔗 CTA Gallery - CTA-секції та блоки з конверсійними діями

🔗 Unsection - окремі секції лендингів

🔗 60fps.design - анімації та мікроінтеракції

🔗 Design Spells - цікаві UX/UI-деталі та маленькі дизайнерські рішення

🔗 Bento Grids - референси для Bento Grid 🧱


Що ще додали б до цієї добірки? 👀


p.s. вкрав у китайчика тран мау тритамчика.

@shain_design

YouTube music схоже теж інтегрували ШІ в свій процес.

Тепер у мене в плеєрі є клавіатура 🔥 дякую, а нащо 😁

@shain_design