Мій власний 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 та допоможе втілити ваші ідеї в реальність!
