Вайб кодинг мнение

Два Лучших Способа Делать UI Дизайн с ИИ (shadcn, Cursor, MCP)

Подключаем регистры с библиотеками в Cursor
Настраиваем план действий как команды в Cursor

вайб-кодинг

Мнение
https://www.facebook.com/share/1FeE3ctA8e/

Кто бы мог подумать, что настолько специфическая тема, как VSC/GitHub/Claude Code окажется резонансной? Учитывая, что разработчики все это знают, а остальным типа не надо! Или надо? Но страшно? Я поясню, в чем секрет, но прежде благодарность Kirill Temnov, что подсветил мне Claude Code.

Дело в том, что

  1. В 100% видео, которые я нашел по теме рассказывается тьма вещей для профессиональных разработчиков, т.е. тех, кто работает по профессии на должностях разраба (разного уровня) в компаниях, а значит погружены в массу правил, соглашений, работают в качестве членов команд крупных проектов с регулярным менеджментом, легаси, политиками и оговорками, не говоря уж про субкультуру. Нам это все не надо от слова совсем. 😍

  2. Сама идеология работы с VSC состоит в использовании миллиона расширений, каждое из которых нужно для решения специфической задача создания/отладки/ рефакторинга/чтения кода опять таки в составе команд. (Нам это тоже все не надо).

На самом деле: Если создавать что-то в стиле вайб-кодинга, это когда говоришь ИИ, а он делает, при этом не никакой команды, а ты все делаешь сам для себя, + тебя не интересует открытый репо на гит, не интересуют чьи-то коммиты и PR, рейтинг, звезды и ты не ищешь работу, то все становится в 1000 раз проще.

В результата 99% объяснений всех этих несомненно полезных, но бессмысленных для обычных людей вещей уходит и остается нечто простое и ясно:

  1. Для VSC достаточно одного расширения - Claude Code - это агент для кода от Антропик, которые, собственно и занимается кодом. Не вы же им занимаетесь. В результате вся настройка VSC - скачать, настроить шрифты, цвет и расположение панелей + установить расширение Claude Code (официальное).

  2. Ну и нужно создать аккаунт на GitHub, который, несомненно, супер полезен для контроля ваших версий, потому что когда создаешь что-то - текст-ли, табличку, презу, код, то всегда возникает много версий в рамках проекта, + всегда есть потребность использовать плоды трудов своих для ДРУГИХ/НОВЫХ своих проектов. Это полезно. Ну и освоить базовый базис с Git полезно, чтобы скачивать код открытых проектов и наслаждаться возможностями.

Разумеется, полезно для разных проектов создавать несколько репозиториев на Гит, но это все творческие люди понимают - нужна какая-то внятная структура папок, чтобы не запутаться.

И да, Гит это отличный инструмент контроля версий и защита от глупости/ ошибок. Для этого все, что надо - создать под каждую папочку в VSC с отдельным проектом репо на гит, а потом связать. Целых 3 раза кнопку нажать. Не бином Ньютона.

Поскольку мы фокусируемся на данном этапе над созданием фронта (интерфейса) на реакте (спросите ИИ, что это), то все создание приложений сводится к следующему Квесту:

  1. Находите примерно то, что вам надо - либо в инете, либо в темлейтах Figma, либо на ресурсах типа https://www.wrappixel.com, https://www.creative-tim.com, https://preview.themeforest.net - ибо до вас миллионы людей уже миллионы всего этого насоздавали. Поверьте, есть менее 1% шанс, что вы создаете, что-то новое. Поэтому сначала найдите референсы, шаблоны, уже реализованное и сэкономите годы. Уважайте труд тех, кто пришел до вас, и это окупится.

Если хотите посмотреть, что и как и немного подправить под себя, то лучше всего шаблон в Figma взять - его можно потестить без кода + тут же и подправить + есть импорт в Bolt.

Впрочем, можно сразу шаблон скачать, причем сразу на Реакте. (можно не только на Реакте, конечно).

  1. Засовываете шаблон в VSC, + можно тут же загрузить в свой репо на Гит, потом вводите команду NPM run dev и VSC запускает ваше приложение (фронт) локально, VSC (vite) дает вам ссылку, на которую вы кликаете и тут же в броузере видите, как оно все работает.

Собственно - усе. Скачали откуда-то в свой VSC и тут же запустили, чтобы посмотреть, что и как.

После чего корректируете уже скачанный код, как вам надо с помощью Claude Code. Как?

  1. Вводите в терминале VSC команду сlaude (ну, разумеется, надо заранее взять тариф хотя бы за 20$ на Антропике), все подключить (5 сек, пара кнопок).
    Или бесплатный Gemini CLI.

Claude Code активируется в режиме чата в вашем терминале в VSC и ждет вашей команды.

И вы такой:

  • А проанализируй этот проект, чего это такое и все в таком духе, и он вам анализует все объясняет. Потом вы - а измени то, добавь то, убавь это - он делает.

Как только он сделал, немедленно смотрите, чего в вашем броузере получилось.

Т.е. ИИ вам по вашей просьбе делает, и вы немедленно видите результат и так до момента, когда все, как вы хотите.

Потом вы ему говорите типа - а проверь ка на предмет безопасности... Ну и т.п. А создай автоматическое тестирование, а создай всю документацию проекта... Ну, естественно, где-то тупит - вы направляете. В общем, вкалывают роботы, счастлив человек.

  1. Когда все сделали, то вводите команду - NPM run build - и получаете билд. Билд - это ваш проект уже подготовленный для загрузки в интернет, необходимый этап при работе с Реакт.

Если вы все делаете в HTML (а не в Реакт), то никакого билда не надо, HTML можно сразу загружать в инет, как есть. Однако, если используете Реакт, то надо сначала сделать этот самый Билд. Когда Билд готов, можно загружать (сделать Деплой).

  1. Если использовать в качестве хостинга Netlify, Vercel, то можно даже не билдить, так как эти хостинги интегрированы с GitHub, и сами делают автоматический деплой одной кнопкой.

Если ручками, то сначала ввести в VSC команду NPM run build, после которой у вас получается папка dist, содержимое которой вы и переправляете руками куда вам надо. В частности в ручном режиме сразу на Netlify. Или на Vercel.

  1. Все. Ваше приложение готово, оно таперича в интернете и вы почти зарабатываете свои законные миллиарды долларов.

Шутка! Конечно, надо еще немного упороццца, ибо в наше время создать приложение примерно в 1000 раз легче, чем получить хотя бы и 10 бесплатных клиентов, не говоря уже о платных. Но это другая история.

Я весь этот процесс освоил недели за 2, учитывая, что общее суммарное потраченное время составило 20-25 часов, всего.

Все это поначалу напоминает квест, когда вошел в коридор лабиринта, и выхода нет. Но, с божье помощью продираешься и осознаешь, что вот он короткий и ясный путь. Как обычно - слабоумие и отвага - наше все.

В результате, после 4-5 повторений описанного упражнения, весь этап от 0 до 5 занимает пару часов, если приложение не сложное. И, поверьте, в 99% оно будет несложным. Типа такого (это заглушки - учебные проекты):

https://aimentor-1-22zl.bolt.host/
https://trading-platform-int-5e7t.bolt.host/
https://apps-1-10-08-29.netlify.app/

Разумеется, есть еще интеграция с базами, авторизация, безопасность, связь с бизнес логикой и т.п. Но это все совсем простые вещи. Для детей.

Создание фронта это один из стеклянных потолков, который требует 3-4 часа на пробитие, и вы выходите в океан возможностей.

Оговорка: Профессиональные разработчики будут смеяться, что ваше приложение работать не будет, особенно если у вас будет более млн. пользоваться, грозить казнями египетскими, что вы умрете и все в таком духе. Ага. Разумеется, мы все умрем, но не сейчас.

Никого не слушайте, делайте себе, радуйтесь, осваивайте ИИ, не боги горшки обжигают. Это Квест познания и он в радость.

Ничего сложного во всем этом я не нашел за все время, что копаюсь. Готовить борщ гораздо трудней, а уж блины жарить тем более.

Каждый раз, когда я утыкался в тупик, а я утыкался в среднем раз в 1 секунду, я спрашивал ChatGPT, разбирался и шел дальше. Потом я утыкался 1 раз в минуту. Потом раз а 10 минут и т.п. Главное не останавливаться и никого не слушать.

А если будут наседать, то спросите их: Если вы такие умные, то почему еще работаете в найме?