400 часов вайбкодинга: инструменты, ошибки, деплой за $5
https://www.youtube.com/watch?v=lRGxl6uA72g
В первой части я объяснил, что такое вайбкодинг. Теперь покажу, как я реально работаю: мой стек, мои инструменты, мои ошибки. Всё из Telegram Mini App, который я собирал 400 часов в Claude Code.
Что внутри:
— Мой стек и почему именно он. Объясняю каждый выбор простым языком.
— Дизайн-система и готовые блоки. 5 модулей = 70% любого проекта готово. Собрал один раз - использую в каждом новом проекте.
— Тестирование с AI. Пирамида: unit, integration, e2e. AI генерирует 10 тестов за секунды. Час на тесты = 10 часов сэкономленного дебага.
— MCP-плагины: Serena, Context7, Sentry, Playwright. Мой конфиг + как подключить.
— Skills - модули знаний для Claude: superpowers, blader. Как создать свой skill. Мои грабли и советы.
— Railway - деплой за $5/мес. 650+ темплейтов, логи, работа с окружениями и домен с БД из коробки.
— Реальность vs Ожидания. Сколько времени реально нужно. Почему вайбкодер, который не понимает код - потратит неделю там, где опытный починит за час.
Каждый инструмент объяснён так, чтобы понял человек без опыта. Аналогии, сравнения, конкретные шаги. Без воды.
Смотри до конца, чтобы понять где и как LLM тебя обманывает и пишет код с багами. 🫢
P.S. Презентация из видео в первом комментарии
https://www.youtube.com/watch?v=lRGxl6uA72g
В первой части я объяснил, что такое вайбкодинг. Теперь покажу, как я реально работаю: мой стек, мои инструменты, мои ошибки. Всё из Telegram Mini App, который я собирал 400 часов в Claude Code.
Что внутри:
— Мой стек и почему именно он. Объясняю каждый выбор простым языком.
— Дизайн-система и готовые блоки. 5 модулей = 70% любого проекта готово. Собрал один раз - использую в каждом новом проекте.
— Тестирование с AI. Пирамида: unit, integration, e2e. AI генерирует 10 тестов за секунды. Час на тесты = 10 часов сэкономленного дебага.
— MCP-плагины: Serena, Context7, Sentry, Playwright. Мой конфиг + как подключить.
— Skills - модули знаний для Claude: superpowers, blader. Как создать свой skill. Мои грабли и советы.
— Railway - деплой за $5/мес. 650+ темплейтов, логи, работа с окружениями и домен с БД из коробки.
— Реальность vs Ожидания. Сколько времени реально нужно. Почему вайбкодер, который не понимает код - потратит неделю там, где опытный починит за час.
Каждый инструмент объяснён так, чтобы понял человек без опыта. Аналогии, сравнения, конкретные шаги. Без воды.
Смотри до конца, чтобы понять где и как LLM тебя обманывает и пишет код с багами. 🫢
P.S. Презентация из видео в первом комментарии
YouTube
Один вместо команды. Мои инструменты после 400 часов вайбкодинга
В первой части я объяснил, что такое вайбкодинг. Теперь покажу, как я реально работаю: мой стек, мои инструменты, мои ошибки. Всё из Telegram Mini App, который я собирал 400 часов в Claude Code.
Что внутри:
- Мой стек и почему именно он. Объясняю каждый…
Что внутри:
- Мой стек и почему именно он. Объясняю каждый…
🔥14❤12👍4🏆2🐳1💘1
Сегодня OpenAI запустила Frontier - платформу, где компании могут создавать, деплоить и менеджить AI-агентов. Не ботов. Не ассистентов. Именно «AI coworkers» - так написано в официальном блоге.
Посмотрел, почитал и выглядит интересным. У каждого агента будет своя идеентичность, разрешения, компетенции и т.д. Прям как у настоящего работника, обещает OpenAI.
По сути, OpenAI строит операционную систему для enterprise, куда втыкаются любые AI-агенты. Единый контекст бизнеса, единый execution environment, единая система оценки и оптимизации.
Цен или детальных подробностей нет, да и доступ ограниченный, но направление интересно, что AI агенты - будущие сотрудники. Поглядим.
• Introducing OpenAI Frontier
• OpenAI Frontier
Посмотрел, почитал и выглядит интересным. У каждого агента будет своя идеентичность, разрешения, компетенции и т.д. Прям как у настоящего работника, обещает OpenAI.
По сути, OpenAI строит операционную систему для enterprise, куда втыкаются любые AI-агенты. Единый контекст бизнеса, единый execution environment, единая система оценки и оптимизации.
Цен или детальных подробностей нет, да и доступ ограниченный, но направление интересно, что AI агенты - будущие сотрудники. Поглядим.
• Introducing OpenAI Frontier
• OpenAI Frontier
👍10🤔3✍2❤1
Про что хотелось бы почитать в следующем посту?
Anonymous Poll
27%
Что такое дизайн система на моём примере (с картинками)
9%
Почему стоит декомпозировать код и UI?
7%
Для чего тестировать код и мои тесты
58%
Подборка готовых агентов на моём примере: QA, Design и т.д
9 AI-Агентов для Claude Code
У Claude Code есть суперсила - субагенты. Это специализированные помощники, каждый из которых натренирован на одну конкретную задачу.
Представь команду из 9 экспертов, каждый из которых мастер в своём деле:
• один ревьюит код
• другой ищет баги
• третий анализирует производительность
• четвёртый следит за текстами в интерфейсе
Все 9 агентов, которыми я делюсь - это готовые .md-файлы. Ты просто кладёшь их в папку проекта, и они начинают работать. Никаких дополнительных настроек, плагинов или зависимостей.
Как установить:
Шаг 1: Скачай все 9 файлов:
Шаг 2: Создай папку в проекте
В корне проекта, там, где лежит package.json или другие главные файлы, создай папку:
Claude Code автоматически подхватывает агентов из папки .claude/agents/. Никаких дополнительных настроек не нужно.
Как вызывать агентов
Просто напиши в Claude Code, что тебе нужно, и упомяни агента. Claude сам поймёт, какого агента запустить по контексту запроса.
Можно и без явного упоминания агента - Claude Code сам матчит запрос по описанию каждого агента и запускает нужного. Например, если ты напишешь "проверь код перед пушем", он сам вызовет code-reviewer.
P.S. Я так же добавил тригеры для вызова от житейского текста:"звучит как чатгпт, перепиши" или "на телефоне кнопка мелкая".
Важные принципы работы агентов
1. Агенты - ревьюеры, не редакторы. Каждый агент находит проблемы и пишет структурированный отчёт. Код правит основной Claude Code, он называется "оркестратор".
Это сделано специально для безопасности - агент анализирует, а решение о правках принимаешь ты.
P.S. не забудь проверить на возможность корректной оркестрации!
2. Агенты работают в связке. В отчёте каждого агента есть секция "Next Steps", где он рекомендует, каких ещё агентов вызвать. Например, performance-profiler после анализа скажет: "запустите test-runner для проверки" и "вызовите code-reviewer для ревью кэширования". Это создаёт цепочку проверок.
3. Memory - память между сессиями. Все 9 агентов используют persistent memory - память, которая сохраняется между вызовами. Чем больше ты используешь агента на проекте, тем умнее он становится:
• code-reviewer запоминает конвенции команды
• test-runner запоминает нестабильные тесты
• debugger запоминает типичные баги проекта
• content-team накапливает глоссарий терминов
Память хранится в папке .claude/ и переживает сессии.
4. Быстрые и мощные - выбирай по ситуации. Агенты используют разные модели Claude в зависимости от сложности задачи:
• Haiku: test-runner, design-team, content-team. Их можно гонять часто, не переживая за бюджет.
• Sonnet: code-reviewer, debugger, test-analyst, performance-profiler, software-architect, text-polisher. Более глубокий анализ, но чуть дороже.
В зависимости от своих возможностей и предполагаемых расходов токенов ты можешь поменять, всё по своим нуждам.
5. CLAUDE.md усиливает агентов. Если в корне проекта есть файл CLAUDE.md с конвенциями и правилами проекта, агенты будут его учитывать.
Это стандартный файл Claude Code, где описываются стандарты кодирования, архитектурные решения, стек технологий. Без него агенты тоже работают, просто без проектного контекста.
Советую прочитать / скормить своей LLM эту статейку для реализации CLAUDE.md
Так же учел переполнение контекстного окна и другие угловые моменты, чтобы агенты вели себя корректно. На своём приложении использовал похожие давно - но этих прямо таки улучшал последнюю неделю и тренировал на самых разных ситуациях.
——
Я буду дополнять этот пост по мере времени и улучшения агентов.
Вопросы? Пожелания? Уточнения? Буду рад прочитать в комментариях.
Всех агентов прикрепил в первом комментарии к этому посту
—-
UPD 11.02: Обновил code-review агента
У Claude Code есть суперсила - субагенты. Это специализированные помощники, каждый из которых натренирован на одну конкретную задачу.
Представь команду из 9 экспертов, каждый из которых мастер в своём деле:
• один ревьюит код
• другой ищет баги
• третий анализирует производительность
• четвёртый следит за текстами в интерфейсе
Все 9 агентов, которыми я делюсь - это готовые .md-файлы. Ты просто кладёшь их в папку проекта, и они начинают работать. Никаких дополнительных настроек, плагинов или зависимостей.
Как установить:
Шаг 1: Скачай все 9 файлов:
code-reviewer.md
test-runner.md
test-analyst.md
debugger.md
performance-profiler.md
software-architect.md
design-team.md
content-team.md
text-polisher.md
Шаг 2: Создай папку в проекте
В корне проекта, там, где лежит package.json или другие главные файлы, создай папку:
.claude/agents/
Claude Code автоматически подхватывает агентов из папки .claude/agents/. Никаких дополнительных настроек не нужно.
Как вызывать агентов
Просто напиши в Claude Code, что тебе нужно, и упомяни агента. Claude сам поймёт, какого агента запустить по контексту запроса.
Используй test-runner субагент чтобы прогнать тесты
Можно и без явного упоминания агента - Claude Code сам матчит запрос по описанию каждого агента и запускает нужного. Например, если ты напишешь "проверь код перед пушем", он сам вызовет code-reviewer.
P.S. Я так же добавил тригеры для вызова от житейского текста:"звучит как чатгпт, перепиши" или "на телефоне кнопка мелкая".
Потрать 10 минут и изучи каждого агента: тригеры и функционал, чтобы точно не упустить лишнее.
Важные принципы работы агентов
1. Агенты - ревьюеры, не редакторы. Каждый агент находит проблемы и пишет структурированный отчёт. Код правит основной Claude Code, он называется "оркестратор".
Это сделано специально для безопасности - агент анализирует, а решение о правках принимаешь ты.
P.S. не забудь проверить на возможность корректной оркестрации!
2. Агенты работают в связке. В отчёте каждого агента есть секция "Next Steps", где он рекомендует, каких ещё агентов вызвать. Например, performance-profiler после анализа скажет: "запустите test-runner для проверки" и "вызовите code-reviewer для ревью кэширования". Это создаёт цепочку проверок.
3. Memory - память между сессиями. Все 9 агентов используют persistent memory - память, которая сохраняется между вызовами. Чем больше ты используешь агента на проекте, тем умнее он становится:
• code-reviewer запоминает конвенции команды
• test-runner запоминает нестабильные тесты
• debugger запоминает типичные баги проекта
• content-team накапливает глоссарий терминов
Память хранится в папке .claude/ и переживает сессии.
4. Быстрые и мощные - выбирай по ситуации. Агенты используют разные модели Claude в зависимости от сложности задачи:
• Haiku: test-runner, design-team, content-team. Их можно гонять часто, не переживая за бюджет.
• Sonnet: code-reviewer, debugger, test-analyst, performance-profiler, software-architect, text-polisher. Более глубокий анализ, но чуть дороже.
В зависимости от своих возможностей и предполагаемых расходов токенов ты можешь поменять, всё по своим нуждам.
5. CLAUDE.md усиливает агентов. Если в корне проекта есть файл CLAUDE.md с конвенциями и правилами проекта, агенты будут его учитывать.
Это стандартный файл Claude Code, где описываются стандарты кодирования, архитектурные решения, стек технологий. Без него агенты тоже работают, просто без проектного контекста.
Советую прочитать / скормить своей LLM эту статейку для реализации CLAUDE.md
Так же учел переполнение контекстного окна и другие угловые моменты, чтобы агенты вели себя корректно. На своём приложении использовал похожие давно - но этих прямо таки улучшал последнюю неделю и тренировал на самых разных ситуациях.
——
Я буду дополнять этот пост по мере времени и улучшения агентов.
Вопросы? Пожелания? Уточнения? Буду рад прочитать в комментариях.
Всех агентов прикрепил в первом комментарии к этому посту
—-
UPD 11.02: Обновил code-review агента
🔥27❤10👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Обновил code-review агента
Опубликовал агента в виде репозитория, теперь можно будет ещё легче обновляться и еще лучше изучить. Для установки / обновления, просто скорми ссылку для своего ИИ и он сам всё скачает и установит.
Буду рад каждому, кто поставит звезду, спасибо большое!
Раньше наш агент работал по трёхбалльной шкале:
1. Критическая ошибка
2. Стоит исправить
3. Мелочь.
Проблема в том, что «стоит исправить» - это огромная серая зона. Туда попадало всё: и баг, который может сломаться у каждого десятого пользователя, и просто неаккуратный код, который никому не навредит.
Теперь шкала четырёхбалльная:
1. критично
2. предупреждение
3. рекомендация
4. мелочь.
Главный вопрос для пограничных случаев простой - «можешь описать конкретную ситуацию, где пострадает реальный пользователь?»
Появился структурированный процесс для ситуаций, когда код удаляют, а не добавляют.
Теперь он проходит три шага: сначала находит всё, что удалено - каждую функцию, каждый тип, каждый экспорт. Потом по каждому удалению определяет, безопасно ли это, нужна ли миграция, или удаление ломает что-то критическое.
И в конце проверяет по чеклисту - удалены ли связанные тесты, типы, зависимости, не остались ли мёртвые импорты.
В области безопасности появилось два новых блока:
1. Первый - безопасность зависимостей. Когда добавляется новая библиотека, ревьюер теперь проверяет шесть вещей: не установлена ли версия «плавающая», не подменён ли файл с зависимостями, нет ли путаницы между внутренними и публичными пакетами, нет ли опечатки в имени пакета, есть ли проверка целостности для CDN-скриптов.
2. Второй блок - проверка HTTP-заголовков безопасности: правильно ли настроена защита от перехвата трафика, не открыт ли доступ к API со всех сайтов, не утекают ли внутренние данные через заголовки ответов.
Раньше, когда ревьюер находил повторяющийся или запутанный код, он мог предложить его переписать. Но не всякий код стоит переписывать.
Теперь есть восемь правил, которые помогают решить - рекомендовать рефакторинг или нет.
Например: если код продублирован только один раз - не трогай, подожди третьего повтора. Если код давно не менялся - зачем его улучшать, он стабилен. Если на этот код нет тестов - сначала напиши тесты, потом переписывай.
Проверка архитектуры стала умнее. Вместо абстрактного «соблюдай SOLID» теперь для каждого из пяти принципов есть диагностический вопрос.
После каждого ревью теперь предлагаются варианты действий. Раньше ревьюер выдавал отчёт - и дальше разработчик сам решал, что делать.
Теперь есть четыре опции:
• исправить всё автоматически
• исправить только критичное
• исправить конкретные пункты по номерам
• просто взять отчёт как ориентир.
И для каждого вердикта ревью есть рекомендованный вариант - чтобы не тратить время на выбор.
Агента планирую улучшать и дальше. Если есть какие-то вопросы или предложения, с радостью отвечу в комментариях!👍
Опубликовал агента в виде репозитория, теперь можно будет ещё легче обновляться и еще лучше изучить. Для установки / обновления, просто скорми ссылку для своего ИИ и он сам всё скачает и установит.
Буду рад каждому, кто поставит звезду, спасибо большое!
Раньше наш агент работал по трёхбалльной шкале:
1. Критическая ошибка
2. Стоит исправить
3. Мелочь.
Проблема в том, что «стоит исправить» - это огромная серая зона. Туда попадало всё: и баг, который может сломаться у каждого десятого пользователя, и просто неаккуратный код, который никому не навредит.
Теперь шкала четырёхбалльная:
1. критично
2. предупреждение
3. рекомендация
4. мелочь.
Главный вопрос для пограничных случаев простой - «можешь описать конкретную ситуацию, где пострадает реальный пользователь?»
• Если да - это предупреждение.
• Если нет - рекомендация.
Появился структурированный процесс для ситуаций, когда код удаляют, а не добавляют.
Теперь он проходит три шага: сначала находит всё, что удалено - каждую функцию, каждый тип, каждый экспорт. Потом по каждому удалению определяет, безопасно ли это, нужна ли миграция, или удаление ломает что-то критическое.
И в конце проверяет по чеклисту - удалены ли связанные тесты, типы, зависимости, не остались ли мёртвые импорты.
Это важно, потому что удаление кода - один из самых частых источников поломок, которые не ловят обычные тесты.
В области безопасности появилось два новых блока:
1. Первый - безопасность зависимостей. Когда добавляется новая библиотека, ревьюер теперь проверяет шесть вещей: не установлена ли версия «плавающая», не подменён ли файл с зависимостями, нет ли путаницы между внутренними и публичными пакетами, нет ли опечатки в имени пакета, есть ли проверка целостности для CDN-скриптов.
2. Второй блок - проверка HTTP-заголовков безопасности: правильно ли настроена защита от перехвата трафика, не открыт ли доступ к API со всех сайтов, не утекают ли внутренние данные через заголовки ответов.
Раньше, когда ревьюер находил повторяющийся или запутанный код, он мог предложить его переписать. Но не всякий код стоит переписывать.
Теперь есть восемь правил, которые помогают решить - рекомендовать рефакторинг или нет.
Например: если код продублирован только один раз - не трогай, подожди третьего повтора. Если код давно не менялся - зачем его улучшать, он стабилен. Если на этот код нет тестов - сначала напиши тесты, потом переписывай.
Это экономит время и защищает от ненужных переделок.
Проверка архитектуры стала умнее. Вместо абстрактного «соблюдай SOLID» теперь для каждого из пяти принципов есть диагностический вопрос.
После каждого ревью теперь предлагаются варианты действий. Раньше ревьюер выдавал отчёт - и дальше разработчик сам решал, что делать.
Теперь есть четыре опции:
• исправить всё автоматически
• исправить только критичное
• исправить конкретные пункты по номерам
• просто взять отчёт как ориентир.
И для каждого вердикта ревью есть рекомендованный вариант - чтобы не тратить время на выбор.
Агента планирую улучшать и дальше. Если есть какие-то вопросы или предложения, с радостью отвечу в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14❤5👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Ты каждый раз объясняешь ИИ, как должна выглядеть кнопка. А можно один раз - и забыть
Знакомая история. Просишь ИИ сделать экран - он рисует кнопку. Просишь следующий экран - рисует похожую, но другую. Цвета чуть-чуть отличаются. Отступы гуляют. Шрифт вроде тот же, а вроде и нет.
Ты ничего не менял. Но приложение выглядит так, будто его три разных человека делали в разные дни недели.
И ты сидишь, поправляешь руками. «Вайбкодинг» - говорили они. «Быстро» - твердили они.
Проблема не в ИИ. У него просто нет шпаргалки.
Представь, что ты каждый раз заказываешь ремонт в квартире, но не показываешь мастеру образец. «Ну, покрась стену... красиво». Результат будет каждый раз разный.
А теперь представь, что ты один раз собрал альбом: вот эти цвета, вот такие кнопки, вот так выглядит текст, вот такие отступы. И каждый раз просто открываешь альбом и говоришь - делай как тут.
Что конкретно меняется, когда она есть?
Хочешь тёмную тему? Не проходишься по каждому экрану. Добавил новые цвета в систему - всё приложение подхватило само.
Надо поменять стиль кнопок? Меняешь в одном месте - обновляется везде.
Новый экран? Не объясняешь ИИ с нуля, как всё должно выглядеть. Говоришь «возьми мои готовые элементы» - и он берёт.
Как собрать дизайн систему? Рассказываю:
Шаг 1. Даёшь ИИ задачу: «Изучи лучшие практики дизайн систем, вдохновись 3-5 примерами и предложи мне стиль». Можешь уточнить, что нравится. Мне, например, зашёл стиль Apple - минимализм, чистота, ничего лишнего.
Шаг 2. Описываешь, что хочешь. Не «сделай красиво» - это ни о чём. А конкретнее: «светлый, минималистичный, скруглённые углы, спокойные цвета». Чем точнее скажешь - тем меньше переделок.
Шаг 3. Смотришь результат, корректируешь. «Кнопку сделай поярче», «текст помельче», «отступы побольше». Это нормально, за 3-5 попыток дойдёшь до того, что тебе нравится.
Шаг 4. Просишь разложить всё по полочкам: цвета - отдельно, шрифты - отдельно, кнопки и остальные элементы - отдельно.
Шаг 5. Просишь сделать «витрину» - один экран, где видно все элементы рядом. Открыл - и сразу понятно, как выглядит вся система.
«У меня простое приложение, мне это зачем?»
Как раз для простых - профит ощутимый. Вместо того чтобы каждый раз тратить запросы к ИИ на одни и те же кнопки-поля-карточки - берёшь готовое и вставляешь. Экономишь время, запросы и нервы.
А если проект вырастет - добавить новый блок, акцию, баннер - не придётся изобретать визуал с нуля. Расширяешь то, что уже работает.
Пока кто-то объясняет ИИ цвет кнопки в сотый раз — ты собираешь готовый интерфейс и отправляешь в стор.
Во продолжении ниже - как всё это перенести в Figma, чтобы твоя система всегда была перед глазами. Там пара граблей, на которые я уже наступил за тебя.
Знакомая история. Просишь ИИ сделать экран - он рисует кнопку. Просишь следующий экран - рисует похожую, но другую. Цвета чуть-чуть отличаются. Отступы гуляют. Шрифт вроде тот же, а вроде и нет.
Ты ничего не менял. Но приложение выглядит так, будто его три разных человека делали в разные дни недели.
И ты сидишь, поправляешь руками. «Вайбкодинг» - говорили они. «Быстро» - твердили они.
Проблема не в ИИ. У него просто нет шпаргалки.
Представь, что ты каждый раз заказываешь ремонт в квартире, но не показываешь мастеру образец. «Ну, покрась стену... красиво». Результат будет каждый раз разный.
А теперь представь, что ты один раз собрал альбом: вот эти цвета, вот такие кнопки, вот так выглядит текст, вот такие отступы. И каждый раз просто открываешь альбом и говоришь - делай как тут.
Это и есть дизайн система. Набор готовых «кубиков Лего» для интерфейса твоего приложения.
Что конкретно меняется, когда она есть?
Хочешь тёмную тему? Не проходишься по каждому экрану. Добавил новые цвета в систему - всё приложение подхватило само.
Надо поменять стиль кнопок? Меняешь в одном месте - обновляется везде.
Новый экран? Не объясняешь ИИ с нуля, как всё должно выглядеть. Говоришь «возьми мои готовые элементы» - и он берёт.
Разница - как диктовать адрес голосом каждый раз против просто скинуть геолокацию.
Как собрать дизайн систему? Рассказываю:
Шаг 1. Даёшь ИИ задачу: «Изучи лучшие практики дизайн систем, вдохновись 3-5 примерами и предложи мне стиль». Можешь уточнить, что нравится. Мне, например, зашёл стиль Apple - минимализм, чистота, ничего лишнего.
Шаг 2. Описываешь, что хочешь. Не «сделай красиво» - это ни о чём. А конкретнее: «светлый, минималистичный, скруглённые углы, спокойные цвета». Чем точнее скажешь - тем меньше переделок.
Шаг 3. Смотришь результат, корректируешь. «Кнопку сделай поярче», «текст помельче», «отступы побольше». Это нормально, за 3-5 попыток дойдёшь до того, что тебе нравится.
Шаг 4. Просишь разложить всё по полочкам: цвета - отдельно, шрифты - отдельно, кнопки и остальные элементы - отдельно.
Шаг 5. Просишь сделать «витрину» - один экран, где видно все элементы рядом. Открыл - и сразу понятно, как выглядит вся система.
Всё. Дизайн система готова.
«У меня простое приложение, мне это зачем?»
Как раз для простых - профит ощутимый. Вместо того чтобы каждый раз тратить запросы к ИИ на одни и те же кнопки-поля-карточки - берёшь готовое и вставляешь. Экономишь время, запросы и нервы.
А если проект вырастет - добавить новый блок, акцию, баннер - не придётся изобретать визуал с нуля. Расширяешь то, что уже работает.
Пока кто-то объясняет ИИ цвет кнопки в сотый раз — ты собираешь готовый интерфейс и отправляешь в стор.
Во продолжении ниже - как всё это перенести в Figma, чтобы твоя система всегда была перед глазами. Там пара граблей, на которые я уже наступил за тебя.
👍12🔥5👏3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Дизайн система в голове у ИИ - это как рецепт, который ты помнишь «примерно». Рано или поздно забудешь.
Система готова, всё красиво. Но через месяц ты откроешь проект и подумаешь: «А какой у меня был основной цвет? А отступы какие?» И начнёшь вспоминать. Или просить ИИ вспомнить.
Figma решает это одним движением. Открыл файл - вот все твои цвета, шрифты, кнопки, карточки. Всё перед глазами. Не надо ничего вспоминать, искать, переспрашивать.
ИИ может предложить вариант через HTML. Не трать время - я пробовал кучу раз, нормально не работает. Всегда были проблемы с отступами и позиционированием.
Путь, который реально сработал - это SVG-картинки. SVG - это формат изображений, который Figma отлично понимает.
Но есть важный момент. Если попросить ИИ нарисовать все элементы разом - он захлебнётся. Контекст может кончиться, начнёт путаться, что-то потеряет...
Поэтому делаем по кусочкам:
1. Проси ИИ разбить все элементы интерфейса на группы. Например, 10 групп: кнопки отдельно, поля ввода отдельно, карточки отдельно и так далее.
2. Генерируешь SVG-картинку для одной группы за раз.
3. Важно! В запросе сразу напиши: «Расставь правильные отступы и расстояния между элементами». Без этого есть большой шанс, что ИИ налепит всё друг на друга - это его слабое место.
4. Сохраняешь SVG-файл. Открывать его не нужно.
5. Перетаскиваешь файл прямо на страницу Figma. Или копируешь и вставляешь - Ctrl+V (Cmd+V на маке).
6. Повторяешь для остальных групп.
Да, это не «нажал кнопку - всё появилось». Но за один вечер ты соберёшь полноценный файл, в котором лежит весь твой визуал.
И самое главное, почему именно SVG, чтобы вставить блоками, а не картинкой.
Как я сделал у себя:
1. Обложка
2. Цвета
3. Типография
4. Отступы
5. Фича "Система лиг" (в процессе миграции в фигму)
Я ещё планирую улучшать стилистику и всё остальное и пересобирать дизайн, но для начала - это более чем достаточно.
Если есть вопросы или хочется поделиться мнением - буду рад почитать в комментариях!😎
Система готова, всё красиво. Но через месяц ты откроешь проект и подумаешь: «А какой у меня был основной цвет? А отступы какие?» И начнёшь вспоминать. Или просить ИИ вспомнить.
Figma решает это одним движением. Открыл файл - вот все твои цвета, шрифты, кнопки, карточки. Всё перед глазами. Не надо ничего вспоминать, искать, переспрашивать.
Если не знаешь что такое Figma - это бесплатный онлайн-редактор для дизайна. Регистрация через Google-аккаунт, три минуты.
Как перенести цвета и шрифты:
1. Ставишь в Figma бесплатный плагин Tokens Studio for Figma (найдёшь в разделе плагинов, просто вбей название).
2. Просишь ИИ: «Сгенерируй мне JSON-файл с моими цветами, шрифтами и отступами для Tokens Studio». Он знает формат, справится.
3. Открываешь плагин в Figma, импортируешь этот файл.
4. Готово - все цвета и шрифты на месте.
Если какой-то из пунктов вызывает сложность - не беда, это нормально! Проси ИИ по шагам расписать:"Что делать". А если не можешь объяснить загвостку - просто шли скриншоты.
JSON - это просто текстовый файл со структурой. Тебе не нужно в нём разбираться, просто передай от ИИ в плагин.
ИИ может предложить вариант через HTML. Не трать время - я пробовал кучу раз, нормально не работает. Всегда были проблемы с отступами и позиционированием.
Путь, который реально сработал - это SVG-картинки. SVG - это формат изображений, который Figma отлично понимает.
Но есть важный момент. Если попросить ИИ нарисовать все элементы разом - он захлебнётся. Контекст может кончиться, начнёт путаться, что-то потеряет...
Поэтому делаем по кусочкам:
1. Проси ИИ разбить все элементы интерфейса на группы. Например, 10 групп: кнопки отдельно, поля ввода отдельно, карточки отдельно и так далее.
2. Генерируешь SVG-картинку для одной группы за раз.
3. Важно! В запросе сразу напиши: «Расставь правильные отступы и расстояния между элементами». Без этого есть большой шанс, что ИИ налепит всё друг на друга - это его слабое место.
4. Сохраняешь SVG-файл. Открывать его не нужно.
5. Перетаскиваешь файл прямо на страницу Figma. Или копируешь и вставляешь - Ctrl+V (Cmd+V на маке).
6. Повторяешь для остальных групп.
Да, это не «нажал кнопку - всё появилось». Но за один вечер ты соберёшь полноценный файл, в котором лежит весь твой визуал.
И самое главное, почему именно SVG, чтобы вставить блоками, а не картинкой.
Как я сделал у себя:
1. Обложка
2. Цвета
3. Типография
4. Отступы
5. Фича "Система лиг" (в процессе миграции в фигму)
Я ещё планирую улучшать стилистику и всё остальное и пересобирать дизайн, но для начала - это более чем достаточно.
Если есть вопросы или хочется поделиться мнением - буду рад почитать в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤9🔥6😱2
Есть ли у тебя сложность с пониманием, что нужно сделать на старте, чтобы разрабатывать без ошибок?
Где сделать на старте: • Добавить конкретных агентов • Добавить конкретные MCP • Описать технический стек • Понять, что вообще должно быть И т.д.
Где сделать на старте: • Добавить конкретных агентов • Добавить конкретные MCP • Описать технический стек • Понять, что вообще должно быть И т.д.
Anonymous Poll
69%
Да
15%
Нет
17%
Возможно
This media is not supported in your browser
VIEW IN TELEGRAM
За 3 дня с OpenClaw я сделал меньше, чем за 20 минут с Claude Code
И нет, это не кликбейт. Всё так и было.
Идея звучала шикарно: разворачиваешь агента на сервере, он пашет 24/7, ты даёшь задачи - он выполняет. Карманный Джарвис. Ну а что, почему бы и нет?
Купил сервер. Потратил полтора часа на установку и настройку. Если-что это нормально, первый раз всё-таки да и надо обезопаситься т.к интернет пестрит взломами OpenClaw. Настроил, запустил - и даже почувствовал этот кайф: «Вот оно, будущее».
1. День первый: предвкушение
Развернул главного агента, настроил помощников. Через 25 минут - бац, лимиты. Ошибка на экране, непонятно чья: то ли модель не тянет, то ли OpenClaw чудит.
Полез разбираться. Два часа ушло на то, чтобы починить.
И тут я обнаружил «фишку»: если в OpenClaw что-то ломается в настройках конфигурации, а ломаться может часто - он просто перестаёт работать. И чинить надо вручную, через терминал сервера, с помощью другого ИИ. То есть ты чинишь одного ИИ-агента при помощи другого ИИ. Звучит как анекдот, но это была моя реальность.
2. День второй: «ну сейчас-то заработает»
Не заработало. Весь день ушёл на оптимизацию. Какую модель поставить главной, какую - на подхвате. Одна модель забанена для такого использования, другая тупит, третья жрёт токены как не в себя.
Я не написал ни строчки полезного кода. Не сдвинул проект ни на шаг. Весь день - настройки, настройки, настройки...
3. День третий: «ладно, ВОТ СЕЙЧАС точно»
Запустил. Агент заработал. За 5 часов сожрал 35 миллионов токенов на простейших задачах. Тридцать пять миллионов. На задачах, которые Claude Code щёлкает за минуты.
А потом я попросил переименовать пару вещей в настройках. Элементарное действие. Десять попыток. Десять. Только на десятый раз получилось.
Дальше агенты начали дублировать отчёты - каждый писал один и тот же отчёт дважды. Я говорю: «Эй, тут дубли». OpenClaw отвечает: «Всё ок, два агента - два отчёта». Ну да, только у каждого агента два одинаковых отчёта его не смутило.
Итог: я остановился
Не потому что OpenClaw плохой. Инструмент развивается, у него есть потенциал. Но прямо сейчас для меня баланс не сошёлся.
Я хотел так: дать задачу -> агент делает -> я отдыхаю.
Я получил:
1. дать задачу
2. починить агента
3. перенастроить
4. прочитать логи
5. разобраться, почему всё сломалось
6. починить ещё раз
7. и может быть получить результат.
Настройка, мониторинг, чтение логов, исправление ошибок - всё это отдаляло меня от результата, а не приближало.
И вот что меня реально зацепило
Я ещё летом заметил, что после сессий с Claude Code устаю сильнее, чем после обычной работы. Вайбкодинг - это не «сидишь и отдыхаешь». Ты постоянно читаешь, проверяешь, направляешь.
Так вот, с OpenClaw эта усталость выросла в разы. И я понял почему. Когда работаешь с одной задачей - ты фокусируешься на одной-двух задачах.
Когда у тебя пять-семь параллельных задач - ты постоянно переключаешься между ними. Читаешь логи одного, проверяешь результат другого, чинишь третьего.
Вопрос, который у меня остался
А что мешает просто через Claude навайбкодить своих агентов? Которые по расписанию делают нужное. Без отдельного сервера, без бесконечных настроек. Может, это и есть тот самый путь?
Если у тебя был опыт с OpenClaw - расскажи в комментариях. Интересно, у кого-то он реально стал корманным Джарвисом или есть разочаровавшиеся как и я?
И нет, это не кликбейт. Всё так и было.
Идея звучала шикарно: разворачиваешь агента на сервере, он пашет 24/7, ты даёшь задачи - он выполняет. Карманный Джарвис. Ну а что, почему бы и нет?
Купил сервер. Потратил полтора часа на установку и настройку. Если-что это нормально, первый раз всё-таки да и надо обезопаситься т.к интернет пестрит взломами OpenClaw. Настроил, запустил - и даже почувствовал этот кайф: «Вот оно, будущее».
1. День первый: предвкушение
Развернул главного агента, настроил помощников. Через 25 минут - бац, лимиты. Ошибка на экране, непонятно чья: то ли модель не тянет, то ли OpenClaw чудит.
Полез разбираться. Два часа ушло на то, чтобы починить.
И тут я обнаружил «фишку»: если в OpenClaw что-то ломается в настройках конфигурации, а ломаться может часто - он просто перестаёт работать. И чинить надо вручную, через терминал сервера, с помощью другого ИИ. То есть ты чинишь одного ИИ-агента при помощи другого ИИ. Звучит как анекдот, но это была моя реальность.
2. День второй: «ну сейчас-то заработает»
Не заработало. Весь день ушёл на оптимизацию. Какую модель поставить главной, какую - на подхвате. Одна модель забанена для такого использования, другая тупит, третья жрёт токены как не в себя.
Я не написал ни строчки полезного кода. Не сдвинул проект ни на шаг. Весь день - настройки, настройки, настройки...
3. День третий: «ладно, ВОТ СЕЙЧАС точно»
Запустил. Агент заработал. За 5 часов сожрал 35 миллионов токенов на простейших задачах. Тридцать пять миллионов. На задачах, которые Claude Code щёлкает за минуты.
А потом я попросил переименовать пару вещей в настройках. Элементарное действие. Десять попыток. Десять. Только на десятый раз получилось.
Дальше агенты начали дублировать отчёты - каждый писал один и тот же отчёт дважды. Я говорю: «Эй, тут дубли». OpenClaw отвечает: «Всё ок, два агента - два отчёта». Ну да, только у каждого агента два одинаковых отчёта его не смутило.
Итог: я остановился
Не потому что OpenClaw плохой. Инструмент развивается, у него есть потенциал. Но прямо сейчас для меня баланс не сошёлся.
Я хотел так: дать задачу -> агент делает -> я отдыхаю.
Я получил:
1. дать задачу
2. починить агента
3. перенастроить
4. прочитать логи
5. разобраться, почему всё сломалось
6. починить ещё раз
7. и может быть получить результат.
Настройка, мониторинг, чтение логов, исправление ошибок - всё это отдаляло меня от результата, а не приближало.
И вот что меня реально зацепило
Я ещё летом заметил, что после сессий с Claude Code устаю сильнее, чем после обычной работы. Вайбкодинг - это не «сидишь и отдыхаешь». Ты постоянно читаешь, проверяешь, направляешь.
Так вот, с OpenClaw эта усталость выросла в разы. И я понял почему. Когда работаешь с одной задачей - ты фокусируешься на одной-двух задачах.
Когда у тебя пять-семь параллельных задач - ты постоянно переключаешься между ними. Читаешь логи одного, проверяешь результат другого, чинишь третьего.
Мозг не отдыхает, он перегружается. Фокус на одном-двух процессах оказался продуктивнее, чем распыление на семь.
Вопрос, который у меня остался
А что мешает просто через Claude навайбкодить своих агентов? Которые по расписанию делают нужное. Без отдельного сервера, без бесконечных настроек. Может, это и есть тот самый путь?
Если у тебя был опыт с OpenClaw - расскажи в комментариях. Интересно, у кого-то он реально стал корманным Джарвисом или есть разочаровавшиеся как и я?
❤13🔥7🤯4👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Ты не знаешь, чего ты не знаешь
Вчера проверял свой проект Доктором. Знаешь что нашёл?
И это далеко не самый худший сценарий. Вот что бывает, когда не проверяешь.
Секреты в git history. Ты создал
Нет.
Файл навсегда в истории. Любой с доступом к репо попросит LLM изучить проект и увидит твои ключи.
GitHub-боты сканируют публичные репозитории автоматически.
AI API без лимитов. Claude, GPT, любой API - если не настроил
Даже был пост на Reddit: парень проснулся с инвойсом на $2400 от OpenAI, т.к его скрипт крутился всю ночь...
Нет pre-commit хуков? Claude сгенерил код с
Знакомо? Может не именно это, но ощущение «а вдруг я что-то пропустил» - оно у всех.
Вайб кодинг - это конечно хорошо. Описал задачу, Claude сгенерил, работает. Но когда ты не писал код руками - ты не знаешь, что именно он натворил.
А спросить некого. Нет тимлида, который скажет «у тебя `
И я постарался эту дыру закрыть и собрал инструмент, который выясняет всё за тебя.
Doctor - скилл для Claude Code. Набор
И да, хоть Doctor и работает только для Claude проектов, если у тебя другая основа - просто попроси адаптировать под твою LLM.
Попроси свою LLM проанализировать SKILL и установить.
Можешь написать
46 проверок по 6 слоям и порядок - не случайный:
Что же конкретно проверяет доктор? А вот примеры по слоям:
• Слой 0 - Безопасность. Секреты в git, хардкод ключей в коде, права на .env, SAST-анализ, уязвимости в зависимостях, Docker-безопасность, клиентские ключи в NEXT_PUBLIC_* / VITE_*, защита от перерасхода AI API.
• Слой 1 - Фундамент. Есть ли CLAUDE.md? Рабочий README? Зависимости свежие? Структура проекта понятная или 2000-строчный файл-монстр?
• Слой 2 - Качество. Линтер, форматтер, pre-commit хуки, CI, типизация, coverage порог, PostToolUse хук, чтобы Claude автоматически проверял синтаксис после каждого редактирования.
• Слои 3-5 - для Claude Code. Агенты: code-reviewer, debugger, architect, доменные правила с paths:, MCP-серверы, память между сессиями, скиллы /test и /status.
И ничего страшного, если половину слов ты видишь впервые. Просто попроси любую LLM на понятном и доступном для тебя языке и примерах объяснить - что это и зачем.
Каждая находка - это далеко не абстрактное "А давай ты улучшить безопасность?".
Нашёл секреты в git history? Doctor выдаёт 9-шаговый incident response: ротация ключей => git filter-repo => force push => аудит логов => настройка gitleaks => GitHub secret scanning.
Адаптивный скоринг - штука, которая очень гибко и качественно поможет оценить. Doctor сам определяет зрелость проекта и подстраивается:
• 🌱 Starter - 18 чеков. Нет git или тестов? Ок, проверим только критичное. Не прилетит за отсутствие SAST.
• 🌿 Growing - 27 чеков. Есть git, зависимости, линтер? Добавляем quality gates.
• 🌳 Mature - 34 чека. Тесты, CI, окружения? Полный набор.
• ⚡ Pro - все 46. Включая Claude Code-специфичные: агенты, MCP, доменные правила, память.
Попробуй Doctor на своём проекте. Результат может удивить тебя - меня удивил.
——-
Если было полезно, дай знать, буду признателен. Можешь скинуть коллеге, который вайб кодит без оглядки, думаю ему пригодится.
Пиши в комментарии: что самое критичное нашел у тебя доктор?👨⚕️
Вчера проверял свой проект Доктором. Знаешь что нашёл?
.env с правами 644. Это значит любой процесс на машине мог прочитать мои API-ключи от OpenAI. Любой. Не взлом, не хакер - просто дефолтные права при создании файла. Я бы мог ещё полгода кодить и не узнать.И это далеко не самый худший сценарий. Вот что бывает, когда не проверяешь.
Секреты в git history. Ты создал
.env, закоммитил, потом добавил в .gitignore. Всё, проблема решена?Нет.
Файл навсегда в истории. Любой с доступом к репо попросит LLM изучить проект и увидит твои ключи.
GitHub-боты сканируют публичные репозитории автоматически.
Утечка ключа AWS = чужие виртуалки на твоём аккаунте = счёт в тысячи долларов за ночь.
AI API без лимитов. Claude, GPT, любой API - если не настроил
billing alerts и не указал max_tokens, один зависший скрипт с бесконечным циклом может прожечь бюджет.Даже был пост на Reddit: парень проснулся с инвойсом на $2400 от OpenAI, т.к его скрипт крутился всю ночь...
Нет pre-commit хуков? Claude сгенерил код с
console.log(apiKey). Ты не заметил, закоммитил, запушил. В проде. С ключом.Знакомо? Может не именно это, но ощущение «а вдруг я что-то пропустил» - оно у всех.
Вайб кодинг - это конечно хорошо. Описал задачу, Claude сгенерил, работает. Но когда ты не писал код руками - ты не знаешь, что именно он натворил.
А спросить некого. Нет тимлида, который скажет «у тебя `
.env` торчит наружу». Нет девопса, который настроит хуки.И я постарался эту дыру закрыть и собрал инструмент, который выясняет всё за тебя.
Doctor - скилл для Claude Code. Набор
.md файлов. Ноль зависимостей. Никакого кода, плагинов, API-ключей и установка за 5 секунд.И да, хоть Doctor и работает только для Claude проектов, если у тебя другая основа - просто попроси адаптировать под твою LLM.
Попроси свою LLM проанализировать SKILL и установить.
Можешь написать
/doctor - получаешь полный аудит. А можешь попросить LLM и он сам всё сделает.46 проверок по 6 слоям и порядок - не случайный:
1. Безопасность
2. Фундамент
3. Качество
4. Интеллект агентов
5. Контекст
6. DX
Что же конкретно проверяет доктор? А вот примеры по слоям:
• Слой 0 - Безопасность. Секреты в git, хардкод ключей в коде, права на .env, SAST-анализ, уязвимости в зависимостях, Docker-безопасность, клиентские ключи в NEXT_PUBLIC_* / VITE_*, защита от перерасхода AI API.
• Слой 1 - Фундамент. Есть ли CLAUDE.md? Рабочий README? Зависимости свежие? Структура проекта понятная или 2000-строчный файл-монстр?
• Слой 2 - Качество. Линтер, форматтер, pre-commit хуки, CI, типизация, coverage порог, PostToolUse хук, чтобы Claude автоматически проверял синтаксис после каждого редактирования.
• Слои 3-5 - для Claude Code. Агенты: code-reviewer, debugger, architect, доменные правила с paths:, MCP-серверы, память между сессиями, скиллы /test и /status.
И ничего страшного, если половину слов ты видишь впервые. Просто попроси любую LLM на понятном и доступном для тебя языке и примерах объяснить - что это и зачем.
Каждая находка - это далеко не абстрактное "А давай ты улучшить безопасность?".
Нашёл секреты в git history? Doctor выдаёт 9-шаговый incident response: ротация ключей => git filter-repo => force push => аудит логов => настройка gitleaks => GitHub secret scanning.
Адаптивный скоринг - штука, которая очень гибко и качественно поможет оценить. Doctor сам определяет зрелость проекта и подстраивается:
• 🌱 Starter - 18 чеков. Нет git или тестов? Ок, проверим только критичное. Не прилетит за отсутствие SAST.
• 🌿 Growing - 27 чеков. Есть git, зависимости, линтер? Добавляем quality gates.
• 🌳 Mature - 34 чека. Тесты, CI, окружения? Полный набор.
• ⚡ Pro - все 46. Включая Claude Code-специфичные: агенты, MCP, доменные правила, память.
Попробуй Doctor на своём проекте. Результат может удивить тебя - меня удивил.
——-
Если было полезно, дай знать, буду признателен. Можешь скинуть коллеге, который вайб кодит без оглядки, думаю ему пригодится.
Пиши в комментарии: что самое критичное нашел у тебя доктор?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥17❤11