Мій власний Linktree: Як я перетворив $48 на безкоштовну альтернативу за допомогою Cursor AI
У світі, де кожен дотик має значення, оптимізована presencia online є життєво важливою. Існує безліч інструментів, які допомагають нам у цьому, але часто вони коштують дорого. Сьогодні я хочу поділитися з вами досвідом створення власної, безкоштовної альтернативи Linktree, використовуючи потужний інструмент Cursor AI.
Перші кроки: Новий проєкт і трохи магії AI
Все починається з чистого аркуша – нового проєкту в Cursor. Створюю нову папку під назвою “link in bio” і відкриваю її. Cursor вітає мене з порожнім екраном, але не варто хвилюватися, адже чарівні підказки AI вже готові до роботи.
Не потрібно бути експертом у NextJS 15 або будь-яких інших технологіях, адже ми просто занурюємося в процес. Я знаю, що багатьох глядачів мого каналу – початківці, тому ми будемо рухатися крок за кроком, розбиваючи складні завдання на простіші підказки.
Щодо версії Cursor, то варто використовувати Claude 3.7 або 3.5. Вони коштують однаково, але мають різні сильні сторони. 3.5 краще підходить для виконання простих завдань, тоді як 3.7 демонструє більшу креативність, особливо коли йдеться про дизайн.
Дизайн і інтерактивність: Від скріншоту до реальності
Я хочу додати трохи анімації, щоб зробити сторінку більш живою. Наприклад, невеличку анімацію під час наведення курсора на кнопку або при завантаженні сторінки.
За допомогою Cursor я можу просто вставити скріншот бажаного дизайну. Можу додати підказки, щоб додати мінімалістичні, але приємні мікро-інтеракції та загалом створити плавну атмосферу. Хочу, щоб інтерфейс був мінімалістичним, з вишуканими мікро-інтеракціями та загалом створював відчуття плавності.
Для Claude 3.7 важливо чітко визначити межі, щоб запобігти надмірній креативності. Тому я додаю: “Триматися плану. Не замислюватися надто багато.”
І ось стається магія! Cursor починає генерувати код, але спочатку запитує дозволу. Просто натискаю Enter – і він продовжує.
Щоб побачити результат, запускаю сервер розробки. Курсор показує URL-адресу, і я, утримуючи клавішу Command, клацаю на ній, щоб відкрити її в браузері. Мушу визнати, для початку це дуже непогано! AI створив це все на основі скріншоту.
Персоналізація: Моя фотографія і новий стиль
Далі я хочу замінити стандартне зображення на свою фотографію профілю. У папці “public” вже є кілька файлів, включаючи “profile.jpeg”. Видаляю старий файл і замінюю його власним “profile.png”. Курсор миттєво реагує на зміни, і моя фотографія з’являється на сторінці.
Тепер настав час попрацювати над стилем. Мені не подобається жовтий колір – він додає надто багато “Linktree”. Я хочу чогось більш креативного і самобутнього. Тому я даю Claude 3.7 більше свободи.
“Будь креативним! Подумай про кодера, який хоче використовувати це для своєї присутності в соціальних мережах. Моноширинні шрифти, темний режим редактора коду – можливо, це буде виглядати крутіше.”
Результат вражає! З’являються маленькі лінії та чудовий фон. Sonnet 3.7 здатний на неймовірні речі!
Звісно, іноді AI заходить надто далеко, починає додавати непотрібні елементи. Але важливо тримати його в рамках, чітко визначаючи пріоритети: моя фотографія, ім’я, професія та пропозиції.
Кольори: Додаємо трохи яскравості
Щоб додати трохи кольору, не зруйнувавши загальну концепцію, я прошу змінити колір акценту на більш яскравий. Важливо бути обережним, щоб не перевантажити дизайн.
Розгортання: Від локального коду до глобальної присутності
Тепер, коли дизайн майже готовий, настав час розгорнути проєкт, щоб кожен міг ним користуватися. Це особливо актуально для тих, хто хоче відмовитися від платних сервісів.
Процес складається з двох простих кроків:
-
GitHub:
GitHub – це хмарне сховище для коду. Створюю там новий приватний репозиторій під назвою “link in bio”. Копіюю URL-адресу репозиторію і повертаюся до Cursor.За допомогою підказки прошу Cursor додати цей репозиторій GitHub і допомогти мені зберегти там проєкт.
-
Vercel:
Vercel – це платформа для розгортання вебсайтів, яка є безкоштовною для більшості користувачів. Я переходжу на Vercel і створюю новий проєкт. Vercel пропонує різні варіанти, включаючи імпорт з Git-репозиторію.Вперше використовуючи Vercel, потрібно підключити обліковий запис GitHub. Після цього кожен проєкт з GitHub автоматично з’являється у Vercel.
Обираю проєкт “link in bio” і натискаю “Deploy”.
Вирішення проблем: Коли щось йде не так
Іноді розгортання не вдається. У такому випадку потрібно скопіювати логи помилок і надіслати їх Cursor. AI проаналізує помилки та надасть рішення. У моєму випадку проблема була пов’язана з лінтингом.
Лінтинг – це процес перевірки коду на відповідність стандартам. Він допомагає запобігти багатьом проблемам, особливо якщо ви не є професійним програмістом і працюєте з AI.
Cursor пропонує виправити помилки та знову надіслати код на GitHub. Після цього я повторюю спробу розгортання на Vercel.
І вуаля! Проєкт успішно розгорнуто! Vercel надає URL-адресу, за якою доступний мій власний “link in bio”.
Автоматизація: Будь-яка зміна – миттєве оновлення
Перевага цього підходу полягає в автоматизації. Будь-які зміни, внесені в код на GitHub, автоматично відображаються на Vercel.
Крім того, Vercel дозволяє підключити власний домен навіть у безкоштовному тарифі.
Підсумок: Від ідеї до реальності з Cursor AI
Створення власної альтернативи Linktree за допомогою Cursor AI виявилося захопливою та корисною подорожжю. Я зміг не лише заощадити гроші, а й отримати повний контроль над своїм онлайн-представництвом.
Сподіваюся, цей досвід надихне вас на власні експерименти з AI та допоможе втілити ваші ідеї в реальність!
