⌨️ Як я створюю сайти за допомогою АІ за пару годин?

За цією інструкцією я розробив біля десятка сайтів, використовуючи Copilot.

Допустимо, що ви вже маєте ідею того, що бажаєте запустити.

Як робити не треба?⛔️

В один промпт писати, що хочете зробити.

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

Як роблю я✔️

1. Подумайте, що ви хочете зробити 💡

Все починається з ідеї

Її можете знайти в своїй світлій голові, вкрасти в когось, спитати в чатіка, в ютубі, Семраші, або деінде.

2. Опишіть функціонал, який ви бажаєте ⚙️

Маючи ідею, можна піти в ChatGPT\Claude\Grok\Gemini й запитати, які ж фічі мають бути:

I want create new app website: [ваша світла ідея]
You are senior developer, who develop web app, using next js

Can you create detailed description on this product?

I need:

- Full seo optimazation (including sitemap and robots txt files)
- Use best ui practices
- Use modern and clean design, using Daisy UI
- Add service pages such as terms, privacy policy, and about us and email address
- OG schema for social media About, how to use, FAQ sections on the main page, links to releated resources
- Mobile friendly

I need [імʼя вашого провайдера БД] integration

And here is several competitors:
[конкуренти]Analyze them pros and cons, and make our app better

Output - markdown format


Вам видадуть відповідь з тим, як АІ бачить цей проект.

Далі я раджу вам перечитати, що він видав і поправити (залежно від того,який функціонал вам треба, а який ні).

Коли у вас буде готовий файл, то збережіть його, як Description.md

3. Створіть архітектуру мабутнього сайту 🏗

Ми маєте повний список фіч, тепер треба це все впорядкувати.

Для цього, попросимо створити структуру проекта:

Using this description from Description.md file on the project.

Use Next.js for this app Give me the full architecture: - File + folder structure - What each part does - Where state lives, how services connect Format this entire document in markdown

На виході ви побачите готову структуру для майбутньго проекту.

Не полінуйтесь перевірити, чи не нагалюцинував вам АІ чогось зайвого (він любить, вміє і практикує це регулярно).

По аналогії з попереднім кроком, виправте, або додайте те, що вважаєте за потрібне.

4. Створіть покрокове ТЗ для АІ 💻

В нас є розуміння проекту, є його архітектура (можливо навіть правильна).

Тепер настав час перетворити це в покрокову інструкцію для АІ:

Using this architecture of the app (Architecture.md file), and product description (Description.md file), write a granular step-by-step DETAILED plan to build the full working and scalable app, according to this architecture and features.

Each task should:

- Be incredibly small + testable
- Have a clear start + end
- Focus on one concern I’ll be passing this off to an engineering LLM that will be told to complete one task at a time, allowing me to test in between.

Output - markdown format

5. Почніть створювати проект 🚀

Відкрийте файли, які створили вище в вашому редакторі для коду й почніть робити сайт

Lets start from Task 1.1

PLEASE carefully only make these changes. DO NOT break anything. Oftentimes when I ask you to make a change, you make that change, but also change something else in a way I didn't want it changed. Please refrain from doing that. Only change what is necessary to fix the issues I laid out above. Please also be sure you fix all of them. Don't get lazy and only fix some.

Поради💬

1. Читайте, що вам пише АІ і порівнюйте з тим, що вам дійсно потрібно 🤓

Не копіюйте всліпу те, що вам написав АІ не читаючи.

Він любить галюцинувати, додавати багато чого "від себе".

То ж не лінуйтесь все перевіряти.

2. Змушуйте АІ самого перевіряти, що він написав 😁

Додаткова перевірка для АІ не буде зайвою, то ж на ті файли, які він створив ви можете запитувати, чи все він включив в результуючі файли і чи нічого не пропустив.

Можете це робити декілька разів.

А яким чином ви розробляєте сайти за допомогою АІ?

@reshteichannel

"Чуваки молодці. Ми вперлись в той гугл і світу білого навколо не бачим"

Це Женя

Мій знайомий по тусовці Вроцлавських індіхакерів

І це його проект, який заробив ось стільки за минулий місяць

Проекту менше року, і здогадуюсь, що «під капотом» це AI Wrapper (кількість яких буде тільки рости в наступні роки)

Грає Natural Write на звичній для багатьох класичних SEOшників ниві Educational

Але саме цікаве, що на трафік вони витрачають 0$!

Як так? 🤔

А все просто й дивно (знову ж таки з оптики класичного SEOшника): Тік Ток !

Ролики, присвячені цьому сервісу набирають мільйони переглядів і головне: конвертуються в клієнтів!

Поки ми міряємось ЕМДшниками, відкриваємо нові відділи з топовими сеошниками, переклеюємо непереклеюєме й дропаємо дропнуте, подібного роду SaaSки залучають траф і клієнтів

Цитуючи Саню, котрому вчора я скинув цей кейс: "Чуваки молодці. Ми вперлись в той гугл і світу білого навколо не бачим"

@reshteichannel

2 роки тому я прогнозував, що більшість із нас піде на завод до 2030-го 😕

Цікаво, чи встигли ви щось зробити з цього? 👍

Я встиг тільки фіксувати прибутки й розвивати бренд

В цікаві часи живемо, ну їх в дупу 😕

@reshteichannel

🚁Helicopter view: чи допомагає це мені зараз?

Можливість бачити картину в цілому, я завжди бачив для себе як перевагу.

Адже приємно розуміти, що можеш одразу, хапаючи суть, вибудовувати свої дії на декілька кроків наперед. 😍

Але після 16 років карʼєри й такого підходу, я прийшов до висновку, що не маю глибокої експертизи в речах, якими займався й займаюсь.

І це мене бентежить. 😳

Буду з вами чесним.

Тому нижче я хотів би поговорити про helicopter view й розібратись: чи дійсно це благо й конкурента перевага, чи радше черговий інструмент прокрастинації.

Що то таке?

Helicopter view — це здатність дивитися на ситуацію з висоти, відсторонено, як вертоліт, що охоплює широку панораму.

В чому він проявляється?

- розумінні суті бізнес моделі

- розумінні того, звідки йдуть гроші в тій чи іншій «тємці» і свою ролю в цьому «харчовому ланцюзі»

- розкладанні цілого на частини, зі збереженням звʼязків між ними

➕Плюси helicopter view

1. Вміння бачити систему в цілому

Це бачення, вкупі з неприйняттям Overthinking допомагало мені не застрягати у деталях, рухаючись вперед.

Також давало можливість одначасно працювати з багатьма проектами, часто включаючи їх в свої «екосистеми»

2. Стратегічне мислення

Я бачив не просто сайт, як набір статей чи сторінок, а бізнес-модель.

Не просто нішу, а її тренд, потенціал, довгостроковість.

3. Креативність + гнучкість

Думаючи на декілька кроків наперед, я розумів, що ті ж переводні сайти будуть жити не так довго, й треба диверсифіковуватись.

Або ще 2 роки тому розуміючи неминучість АІ Overwievs, вирішив йти в сторону продуктів і особистого брендингу.

4. Легше делегувати

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

❌Мінуси helicopter view

1. Ризик відриву від деталей

Думка, що ти бачиш всю картину в цілому, гріє Его.

Не буду брехати це приємно сидіти в шортах, розкинувшись на кріслі, уявляючи себе стратегом. 🇺🇸

Але бачити щось в цілому, зовсім не означає реалізувати це.

Тому в мене було багато проектів, які навіть й не побачили світ. Тобто в голові мені все було зрозуміло, але коли доходило до деталей, то проекти не «взлітали» саме із-за бісових деталей.

2. Складність глибоко фокусуватись

Коли бачиш одразу 10 напрямків - важко вибрати, куди вкласти 100% зараз. Може бути розпорошення по декількох проектах.

3. Ризик ілюзії контролю

Іноді helicopter view дає фальшиве відчуття, що мені вже все зрозуміло і все тримаю в голові.

Але кожен проект хоче системності, а не тільки бачення згори.

А як відомо дуже часто «диявол криється в деталях»

✔️Що з цим робити?

1. Записувати все, що робиш

Я вже колись окремо писав про записування, і через роки можу підтвердити ефективність цього прийому.

На кожен сайт або напрям в мене є окрема сторінка в Notion з думками, деталями, матюками й фідбеком.

Це домогає мені зберегти деякі деталі, які я точно впустив, якщо все тримав би в голові.

2. Частіше використовувати deep work

Коли переходиш від загального до конкретного, то простіше сфокусуватись на конкретній задачі.

А вже над якоюсь окремою й осяжною задачею можна працювати глибоко. Тому я доречі часто починаю день з якоїсь глибокої конкретної задачі.

Бо її ефективність просто виміряти.

3. Мати хоча б одну нішу, в якій бути експертом

Це щось типу, як у лікарів.

Кожен з них розуміє, як все працює і як все повʼязано, але має експертизу в якійсь своїй вузькій ніші.

А яка ваша думка про Helicopter view ? 💬

Перевага?

Чи просто інструмент для задоволення свого Его й прокрастинації?

@reshteichannel

4️⃣ поради для створення потужних кейсів

Кейс, як маркетинговий інструмент - дуже потужна й конвертяща штука.

Багато власників бізнесів в приватних бесідах зізнавались мені, наскільки багато клієнтів їм принесли ті чи інші кейси.

Адже що може бути кращим підтвердженням ефективності, топовості, потужності й компетенції тієї чи іншої команди, спеціаліста чи компанії, аніж результат роботи задоволеного клієнта оформленого в вигляді кейсу?

Але що робити, якщо похвалитись нічим, а кейс дуже хочеться? 🤔

Якщо вас доля застала в такій прикрій ситуації, то цей допис для вас.

Далі я вам розкажу, як робити кейси навіть в тих ситуаціях, коли успіхом і результатами й не пахне

Я буду це показувати на прикладі сайтів й SEO, але ці поради допоможуть вам в будь якому бізнесі

Порада перша: Змініть оптику й масштаб

За останні півтора року трафік сайту впав на 90% а в останні декілька місяців чомусь виріс?

Покажіть останні декілька місяців, посилаючись на експертизу команди й потужний відділ, відповідальний за цю задачу.

Ось приклад: (це один із моїх проектів).

Непоганий ріст, чи не так?

І навіщо запамʼятовувати, що сайт був знищений Гуглом в минулі апдейти ?

Порада друга: все має рости. Якщо не росте те, що треба, покажи ріст, хоча б десь!🧠

Трафік впав, але конверсії ні (або навіть ростуть)?

Фокусуйтесь на них!

Падає MRR 6-й місяць поспіль?

Показуйте ARR - його всі люблять.

Проаналізуйте, розкладіть бізнес на метрики, гляньте, що росте й показуйте цей ріст (бо він зʼявився не випадково а завдяки злагодженій роботі вашої топовой команди, або топового вас)!

Порада третя: ніколи не показуйте невдалі спроби

Є кейс про ріст якогось одного сайту в якомусь одному ГЕО?

Прекрасно!

А те, що запустили до того 500 чи 1000 сайтів, які нічого не несуть?

Не суть

Головне, що є щось, що росте

Ні в якому разі ніхто не мав би подумати, що ваш кейс пахне "помилкою вижившого".

Так вам грошей ніхто ніколи не дасть😏

Порада четверта: використовуйте абсолютні цифри

"30к показів за місяць в EDU US ніші" - це багато чи мало?

А хз, бо ще містер Енштейн казав, що все відносно.

Він був розумним дядяьком, я йому вірю, тож якщо відносно все падає, й летить невідомо куди, то показуйте абсолютні цифри.

Люди часто їх люблять (тим паче якщо можна показати десятки, або сотні тисяч чогось, неважливо чого)

І без різниці вже, скільки було за рік до того у відсотках.

Використовуйте ці 4 поради в своїх кейсах, й ви ніколи не будете відчувати їх дефіцит.

Але я б радив краще не показувати ці поради своїм клієнтам.

Бо є ризик, що не так зрозуміють.😁

@reshteichannel

👀Річ, якої мені критично не вистачає в ChatGPT та інших LLM

Я активно користуюсь АІшкою з 2022 року.

Я спостерігав той шлях, який вона пройшла за ці роки, й до сих пір афігєваю.

Зараз я забув коли я Гуглив востаннє.

Відповіді на питання, рісьорч, аналіз, написання коду - все мені робить 🧠

Але є одна річ, якої мені в ньому не вистачає, і я сумніваюсь, що вона зʼявиться там найближчим часом

Хоча, коли тільки почав користуватись АІ, то був радий, що її там не було

Але почну з невеличкої історії:

Лютий 2017

Я прийшов на зустріч з людиною, з якою познайомився нещодавно онлайн

Він молодший за мене, але топовіший і успішніший, що мене мотивувало.

Переробивши семантичні ядра половині рунету, він "собаку зʼїв" на контентних сайтах, тож на його питання: "а ти чим займаєшся?", я соромʼязливо дістав свій Xiaomi і відкрив браузер

То був мій сайт, який тоді приносив біля 2500$ в місяць й був основним джерелом мого прибутку

Пролиставши майже до футера, він посміхнувся, віддав мені телефон й надпивши зелений ройбуш з блискучої білої чашки, глянувши мені прямо в очі, видав: "ну ти ж розумієш, що дизайн гівно?"🧠

Я не очікував такої різкої оцінки, адже витратив багато часу, щоб знайти той nulled Wordpress шаблон й адаптувати його для проекту.

Але виду, я не подав, бо в якомусь плані він був правий, й дизайн не був ідеальним

Вже пізніше в своїй карʼєрі я впевнився, що давати різки оцінки (навіть коли не питають) - частина нашої культури.

І це в цілому ок

Й поки я не почав спілкуватись з іноземцями ближче, я цього не помічав.

Так до чого я веду?

Мені в ChatGPT, Claude і інших АІшках не вистачає критичної оцінки моєї думки.

Прям максимально критичної, наскільки це можливо🤢

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

Наприклад останні пару місяців в кодингу з АІ я часто став помічати, що він пише якусь дічь, або намагається впихнути в невпихуєме (при цьому каже, що це прекрасний варіант й шикарне рішення моєї проблеми).

Коли я йому кажу, що ти тут робиш фігню, то отримую відповідь "You're absolutely right!" (а мої знання в програмування обмежуються тим, що я компонент від массива можу відрізнити і все)!

І так насправді багато де

АІ рідко тобі скаже, що ти десь неправий на 100%. Це завжди будуть максимально ліберальні і мʼякі слова

А інколи хочеться, щоб сказали, "ну ти ж розумієш, що дизайн гівно?"

Ви що думаєте на цей рахунок?💬

Часто би використовували умовний "hard mode" для того, щоб АІшка вас покритикувала?

@reshteichannel

Мій перший випадок "промислового" застосування АІ

Скоро виповниться майже 4 роки, як я "подружився" з АІ

З самого початку я дивився на це більше як на іграшку, й не дуже розумів, що це таке і як це можна використовувати для своєї роботи

Але з 2022 року все почало змінюватись, і я став активно використовувати ШІ саме для створення контенту

В той період свого життя, я жив з однією валізою й постійно переїджав.🧳

В той жаркий липневий день доля закинула мене до Спліта 🇭🇷, й ще не встигши розкласти речі, я вирішив робити сетап для створення сайтів майже на автопілоті.

На фото як раз перший Tech stack для цього

З легкої подачі пана Олександра я повісив на свій старенький Asus 2017 року на І7 Zennoposter, який в 5 потоків регав OpenAI ключі (тоді давали безкоштовні 5$ на акк, відповідно щоб не витрачатись на контент), й створював статті для майбутнього сайту

Потім в Зеброїді це все діло чистив, додавав картинки з відео й пушив на Wordpress

Трішки пізніше були орендовані VDSки, бо навіть купівля кулера не допомогла моєму "старічку" адекватно працювати (через місяць я візьму MacbookPro в Загребі, забуваючи подивитись на розкладку клавіатури, яка була повністю хорватською🤓)

Що з цими сайтами зараз?

Більшість не "взлетіло", тож за рік я просто не продовжував домени.

Але штук 5 лишилось до сих пір, й хостинг з доменами вони окупають й може декілька підписок також.

Тож я їх лишаю.

А коли ви почали активно використовувати АІ для своєї роботи?

І які то були сценарії?

Якщо вам цікавий такий формат "життєвих" дописів, дайте мені знати, бо мені є ще що розповісти

@reshteichannel

4 SEO проблеми у вайбкодінгу про які я дізнався за останні 5 місяців: як їх вирішувати

Якщо ви бачили будь яку рекламу вайбкодингового сервісу, то кожна з них обіцяє зібрати сайт або апку за хвилини з одного промпту.

Для людини не в "темі" це й дійсно виглядає революційно, й заохочує вибирати надгробний вінок для всіх програмістів

Але я б не радив поспішати, адже додатки, які були створені таким чином мають купу «косяків»

Я не програміст, тож не буду говорити про неоптимальність коду, або про дублікати в функціях або компонентах.

Я тільки на порозі життя молодого цих викликів.😀

Скажу про те, в чому маю більш ніж 16 річну експертизу: про SEO

Поговоримо про основні проблеми в сайтах, які створені таким чином і про те, як їх вирішувати

1. CSR і нульова індексація

Памʼятаю перший проект, який я робив на Lovable.

То був каталог всіляких інструментів: чекери, генератори і т.д.

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

Власне кажучи, так й сталось: в вихідному коді цього каталогу було ... майже нічого.

Добре, що я це зрозумів, створивши лише 24 тули й витративши на це майже 2 тижні 😁

В чому була проблема?

Сервіс використовував CSR (Client side rendering) в роботі.

Це означало, що вся інфа рендерилась в браузері користувача, а не на сервері.

Для юзера це означало дуже швидку роботу сайту (він прям "літав"), сервер майже не нагружався, але Гуглу не було чого індексувати

Як фіксити: юзайте SSR (Server side rendering) при створенні додатків.

Але будьте обережні!

Той же Lovable чи Github Spark використовують свої фреймворки (типу Vite), які є CSR і нічого в цьому не змінити (навіть якщо добре попросити).

Тому використовуйте інші сервіси (V0, Bolt)

2. "Крива" розмітка тегів, або їх відсутність

Багато хто з нас розбалуваний Wordpressʼом і його плагінами для SEO оптимізації, тож ми всю шикарну розмітку тегів приймаємо як данність.

В "навайбкоджених" сайтах цієї розкоші немає. 😏

Тут можуть бути й дублікати тегів, й відсутня Schema для соц мереж, відсутні заголовки, canonical та ін.

Як фіксити: провести тех аудит. Можна використовувати той же Ahrefs site audit, Sitechecker audit, Screaming frog і т.д.

Далі вже "кормити" своєму сервісу для вайб кодингу логи помилок й просити виправити.

3. Відсутня внутрішня перелінковка

Часто АІ робить купу сторінок, які нічим не обʼєднані, тому пошуковикам складно проіндексувати їх всі, бо бот банально не може перейти з однієї сторінки на іншу.

Як фіксити: Додаванням breadcump в навігацію й меню, або створенням блоків вже на самих сторінках з посиланням на інші сторінки.

4. Немає Robots й Sitemap

Який же сайт без Robots й Sitemap, скаже вам будь який поважаючий себе сеошник, й буде absolutely right!

Але те, що очевидно для сеошника, не зовсім очевидно для АІ.

Він нічого не буде робити, поки не попросиш.

Як фіксити: попросити створити ці файли.

Але я б радив після створення ще глянути, що він настворював. Бо часто він включає посилання на неіснуючі сторінки, або розділи сайту.

АІшка в контексті кодингу за останні роки зробила суттєві кроки вперед.

Але нажаль вона поки ще не робить копію Facebook одним промптом 🤢

Тож за нею треба дивитись й направляти, наче заблудшого сина чи дочку на SEO путь істіний

Чим і продовжуємо займатись👨‍💻

А які ви помітили для себе проблеми у вайбкодінгу, і як їх вирішуєте?

@reshteichannel