Збярыце старонку-вітрыну двума спосабамі

Прывітанне, гэта лабараторыя Built by You. Сёння папрацуем над матэрыяльным вынікам. Мы створым сайт.

Мы ўжо разбіраліся, як праводзіць інтэрв’ю і правяраць свае ідэі на трываласць. Але цяпер нам патрэбна нешта канкрэтнае — тое, што людзі змогуць убачыць, а вы зможаце ўважліва паназіраць за іх дзеяннямі. Старонка, якую можна камусьці даслаць або выкарыстаць падчас інтэрв’ю. Таму сайт — гэта эксперымент, і мы яго апублікуем.

У канцы курса будзе вітрына праектаў — такая сабе паліца, як на хакатоне, з прадуктамі, якія людзі самастойна стварылі ўсяго за некалькі гадзін. У нашага курса будзе такая ж паліца са спасылкамі на ўсе прадукты, якія вы створыце і, спадзяюся, пакажаце мне. Сённяшняя старонка — гэта тое, што будзе стаяць на гэтай паліцы.

Скажу шчыра. Сёння стварэнне чаго заўгодна — сайта, праграмы ці яшчэ нечага — можа выглядаць зусім па-рознаму ў розных людзей, бо новыя інструменты, новыя падключэнні, новыя MCP, новая дакументацыя — усё змяняецца амаль штотыдзень. Тое, што я паказваю ў відэа, — мой варыянт на сёння. Праз паўгода, магчыма, праз месяц, а можа, ужо заўтра некаторыя крокі будуць выглядаць інакш. І гэта нармальна, бо мы вучымся. Найперш мы вучымся таму, што кантэкст — самае галоўнае; рухаемся малымі крокамі і правяраем вынік па дарозе. Гэта застаецца з намі пры любой змене інструментаў.

Таму я абрала два спосабы, якімі карыстаюся сама:

• Спосаб з Lovable. Вы ствараеце сайт у Lovable, візуальна, у браўзеры. Сёння Lovable — бадай, самы хуткі шлях да гатовай спасылкі. Ён падыдзе 99% людзей. Проста пішаце, што хочаце і як гэта павінна выглядаць, — і атрымліваеце вынік.
• Спосаб з Claude Code. Мы ствараем сайт у Claude Code, у папцы на сваёй прыладзе, са сваімі файламі і пад сваім кантролем. А ў канцы самі публікуем сайт. Ён становіцца даступным у інтэрнэце без Lovable і падобных сэрвісаў.

Няправільнага выбару тут няма. Калі вам цікава, як усё працуе, можаце спрабаваць і перарабляць хоць кожны дзень. Пачніце з таго спосабу, які больш падабаецца, і старайцеся не паддавацца страху нешта ўпусціць — FOMO.

Можаце ўжо цяпер адкрыць гэты дапаможнік, абраны інструмент ШІ і правесці эксперымент разам са мной.

Што змянілася пасля запісу (праверана ў лістападзе 2026 года)

Сутнасць практыкі з відэа не змянілася. Некаторыя кнопкі перамясціліся. Калі ваш экран не падобны да таго, што ў відэа, спачатку зазірніце сюды, а потым зрабіце тое, што заўсёды дапамагае: спытайце ў ШІ.

Claude Design

• Па-ранейшаму называецца Claude Design. Адкрываецца праз укладку Дызайн унізе бакавой панэлі claude.ai або па адрасе claude.ai/design.
• Функцыя дызайн-сістэмы працуе ў бэта-рэжыме і даступная на тарыфах Pro, Max, Ultra і Team. Звычайны Claude Design працуе і на бясплатным тарыфе, але для гэтага занятку ўсё роўна спатрэбіцца платны — ён патрэбны для Claude Code.
• Яму па-ранейшаму можна даць некалькі абзацаў тэксту, файл Figma, рэпазіторый кода, лагатыпы, шрыфты і нататкі. Карыстальнікам Claude Code таксама даступная каманда /design-sync, якая стварае сістэму проста з праекта, — сёння яна не спатрэбіцца.
• Калі сістэма гатовая, уключыце Апублікавана — так новыя праекты і іншыя інструменты змогуць яе выкарыстоўваць.
• Варыянты перадачы перамясціліся. Цяпер яны знаходзяцца пад кнопкай Экспарт уверсе справа, а не ў меню «Падзяліцца». У экспарце ёсць: Адправіць у Lovable (а таксама Base44, Canva, Replit, Vercel, Wix і іншыя), Адправіць лакальнаму агенту праграмавання, Адправіць у Claude Code Web і Замест гэтага спампаваць ZIP. «Падзяліцца» цяпер толькі вызначае, хто можа адкрыць ваш дызайн.

Lovable

• «Рэжым агента» цяпер называецца Рэжым стварэння. Рэжым планавання і Рэжым чата засталіся, пераключацца паміж імі можна ў любы момант у полі чата.
• Сувязь паміж Claude і Lovable наладжваецца з боку Claude, а не ў наладах Lovable: у Claude націсніце + → Падключэнні → Праглядзець падключэнні → знайдзіце Lovable → Падключыць → увайдзіце ва ўліковы запіс. Пасля гэтага Claude Design зможа перадаць дызайн у новы праект Lovable.
• Праверка бяспекі цяпер запускаецца сама, калі вы адкрываеце акно Апублікаваць: прыкладна дзесяць секунд, а затым «Праблем бяспекі не выяўлена» або колькасць знойдзеных праблем. Для наступных абнаўленняў кнопка называецца Апублікаваць змены.
• Папярэдні прагляд для розных прылад пераключаецца над акном прагляду: Камп’ютар / Планшэт / Тэлефон.
• Бясплатны тарыф дае 5 крэдытаў на стварэнне ў дзень, але не больш за 30 на месяц, і дазваляе паказаць сайт не больш як 10 запрошаным людзям. Публічная спасылка для ўсіх даступная на тарыфе Pro. Перад пачаткам праверце lovable.dev/pricing — умовы часта мяняюцца.

Claude Code

• Праграма для камп’ютара называецца Claude Desktop; Claude Code знаходзіцца на яе ўкладцы Код. Усталяванне на Mac: спампуйце .dmg, адкрыйце яго, увайдзіце ва ўліковы запіс і націсніце «Код». Ні тэрмінала, ні Node, ні каманд уводзіць не трэба. Патрэбны тарыф Pro або вышэйшы.
• Новы сеанс: выберыце Лакальны → Адкрыць папку… → сваю папку website/. Рэжымы дазволаў цяпер называюцца Уручную, Прымаць праўкі, План, Аўтаматычна. Заставайцеся ў рэжыме «Уручную»: ён пытаецца перад кожнай праўкай і камандай, а вы вырашаеце.
• Мадэлі, якія вы ўбачыце: Opus 5.5 (стандартная), Sonnet 5.5, Haiku 5.5. «Sonnet 5» з відэа больш не выкарыстоўваецца. Для дробных задач — стварыць CLAUDE.md, перамясціць файл — выбірайце Haiku 5.5. Для стварэння сайта пакіньце стандартную мадэль.
• Воблачныя сеансы называюцца Claude Code у воблаку (claude.ai/code, «Claude Code у інтэрнэце»). Менавіта туды вядзе пункт «Адправіць у Claude Code Web».
• Працэнт запаўнення кантэкстнага акна знаходзіцца ў картцы Кантэкст на панэлі сеанса.

Codex (агент, які абнаўляе canvas у відэа)

• У ліпені 2026 года OpenAI уключыла праграму Codex у праграму ChatGPT для камп’ютара. Цяпер Codex — гэта рэжым у ёй, побач з чатам і працай. Калі карыстаецеся ім: адкрыйце ChatGPT, пераключыцеся на Codex і адкрыйце папку сваёй працоўнай прасторы. Або проста зрабіце падрыхтоўку ў Claude Code — запыты тыя ж.

GitHub, Netlify, Figma

• GitHub: без змен. Бясплатна, неабмежаваная колькасць прыватных рэпазіторыяў, рэгістрацыя праз электронную пошту, Google або Apple.
• Netlify: па-ранейшаму бясплатны. Бясплатны тарыф цяпер дае 300 крэдытаў на месяц — для адной старонкі больш чым дастаткова. Шлях імпарту: Дадаць новы праект → Імпартаваць існы праект → GitHub → дазволіць доступ → выбраць рэпазіторый → Разгарнуць сайт. Кожная адпраўка змен у GitHub па-ранейшаму аўтаматычна абнаўляе сайт. Адно новаўвядзенне: у некаторых новых уліковых запісах сайт прыватны па змаўчанні — калі іншыя людзі не могуць адкрыць вашу спасылку, зрабіце сайт публічным у наладах.
• Figma: «Файл» → «Захаваць лакальную копію» па-ранейшаму дае файл .fig.

Калі нешта на вашым экране не супадае ні з відэа, ні з гэтым спісам — гэта нармальна. Кожны раз, калі вы карыстаецеся ШІ, нават тым самым ШІ і тым жа парадкам дзеянняў, ён працуе крыху інакш. Зрабіце здымак экрана, адпраўце ў любы чат з ШІ і спытайце, што націснуць.

Частка 1: Што мы ствараем і як гэта працуе

Канкрэтны вынік

Адна старонка. Ваш прадукт адным сказам, ваша аўдыторыя яе словамі, праблема словамі кліента, як усё працуе і адна кнопка: далучыцца да спіса чакання. Не аплата і не рэгістрацыя. На гэтым тыдні мы правяраем ідэю на трываласць, а не запускаем прадукт. Спіс чакання таксама дапамагае пачаць размову з людзьмі, пакуль мы яшчэ нешта ствараем, — менавіта на такім этапе быў гэты курс падчас запісу відэа.

Два спосабы побач

Той жа кантэкст, той жа дызайн, у абодвух выпадках — апублікаваны сайт. Выбірайце паводле таго, як вам падабаецца працаваць.

Што вырашаеце вы і што робіць агент

Увесь занятак мае адзін рытм, такі ж, як і ў астатнім курсе: спачатку план, потым дзеянні. Кожны агент у гэтым курсе працуе паводле гэтага правіла.

• Вы збіраеце кантэкст, запісваеце яго ў файлы і тлумачыце, што будзе лічыцца гатовым вынікам.
• Агент чытае файлы, прапануе план і стварае сайт.
• Вы чытаеце, што змянілася, перш чым прыняць змены. Добрая звычка ў працы з ШІ: удакладняць, прасіць паказаць змены, правяраць іх па ходзе працы і толькі потым казаць «так».

Спачатку выкарыстоўвайце рэжым планавання, нават для такіх задач, як абнаўленне canvas. Гэта самы бяспечны і прадуктыўны спосаб.

Правіла прыватнасці для абодвух спосабаў

Усё, што вы ўстаўляеце ў воблачны інструмент, пакідае ваш ноўтбук. Кароткае апісанне прадукту — можна. Расшыфроўкі інтэрв’ю з сапраўднымі імёнамі, адрасы электроннай пошты, паролі, токены — ніколі. Не перадавайце агентам ШІ ніякіх канфідэнцыйных даных, нават свайго адраса электроннай пошты. Не раю, зусім не раю. А калі робіце здымак экрана, каб папрасіць дапамогі ў ШІ, — а вы будзеце гэта рабіць, — спачатку праверце, што на ім відаць.

Частка 2: Падрыхтоўка інструментаў

Перад заняткам падрыхтуйце ўсё са спіса. Калі шчыра, на ўвесь працэс адным спосабам спатрэбіцца каля 90 хвілін. Генерацыя і падключэнні займаюць час, і гэта нармальна.

Для ўсіх

• Ваша працоўная прастора Obsidian са Спрынту 2 — тая, дзе ёсць папка market (аналіз каментарыяў, карта канкурэнтаў, агляд рынку) і папка product.
• Ваша lean canvas у выглядзе нататкі ў гэтай прасторы. Калі яе там яшчэ няма, гэта ваш першы маленькі крок (ніжэй).
• Claude — тарыф Pro або вышэйшы. У яго ўваходзяць і Claude Design, і Claude Code.
• Агент ШІ, які можа чытаць вашу працоўную прастору. У відэа canvas і апісанне сайта ствараюцца ў Codex, а сам сайт — у Claude Code. Для падрыхтоўкі падыдзе любы з іх. Цяпер Codex працуе як рэжым у праграме ChatGPT для камп’ютара. У гэтым дапаможніку запыты напісаныя для Claude Code, бо для аднаго са спосабаў ён вам усё роўна спатрэбіцца.

Для спосабу з Lovable дадаткова

• Уліковы запіс Lovable на lovable.dev. Бясплатнага тарыфу дастаткова, каб стварыць і апублікаваць гэтую старонку.

Для спосабу з Claude Code дадаткова

• Уліковы запіс GitHub на github.com. Гэта бясплатна і вельмі проста. Прыдумайце імя карыстальніка і пароль або ўвайдзіце праз Google ці Apple — і ўсё гатова.
• Уліковы запіс Netlify на netlify.com. Рэгіструйцеся праз Google — так прасцей.
• Праграма Claude Desktop з Claude Code унутры — на ўкладцы Код. Claude Code працуе двума спосабамі: у тэрмінале на прыладзе і ў праграме для камп’ютара. Мы карыстаемся праграмай. Ніякага тэрмінала, абяцаю.

Ваш першы маленькі крок — менш за пяць хвілін

Адкрыйце сваю працоўную прастору і змясціце lean canvas у папку product/, назваўшы файл так, каб потым яго знайсці. Назва lean-canvas.md падыдзе. Галоўнае — не сама назва, а правілы наймення. Пазней вы будзеце шукаць файлы ў папках, і будучыя вы будзеце сабе ўдзячныя.

Частка 3: Падрыхтоўка кантэксту — для ўсіх

Спачатку падрыхтуемся. Амаль усё, што патрэбна для сапраўды добрага сайта, ужо ёсць у нашай працоўнай прасторы. У гэтай частцы мы дапаможам агенту сапраўды гэтым скарыстацца.

3.1 Абнавіце lean canvas з улікам даных пра рынак

У нас ёсць lean canvas, якую мы некаторы час таму стварылі паводле метаду Running Lean. Але з’явіліся і абнаўленні — новая інфармацыя пра рынак: аналіз каментарыяў, карта канкурэнтаў, самі канкурэнты, агляд рынку і ўсё такое. Таму цяпер мы яе абновім.

Адкрыйце агента ў працоўнай прасторы, выберыце папку праекта, пераключыцеся ў рэжым планавання і адпраўце гэты запыт:

А цяпер важнае. У ідэале перад выкарыстаннем вынік трэба праверыць і прачытаць. Паглядзіце, што змянілася. Калі ўсё задавальняе, прыміце змены. Калі не — скажыце, што не так, і дайце агенту паспрабаваць яшчэ раз.

Такое здараецца. У відэа агент кажа, што даных canvas няма, хоць мы выбралі папку. Рашэнне — найстарэйшае правіла інструкцый для ШІ: дайце прамы шлях да файла. Чым больш прасунутая мадэль, тым менш трэба тлумачыць. Але калі яна спатыкаецца, прамы шлях заўсёды лепшы за апісанне.

3.2 Ператварыце canvas у кароткае апісанне аднастаронкавага сайта

З гэтай lean canvas мы створым сайт. Спачатку — яго кароткае апісанне.

Што вы атрымаеце: прадукт адным сказам, аўдыторыю яе словамі і праблему словамі кліента. Гэта загаварыла даследаванне каментарыяў. Калі ў вас будуць інтэрв’ю, вы таксама скарыстаеце іх для стварэння апісання сайта і саміх тэкстаў. Словы сапраўдных людзей, а не вашы.

Цяпер гэты файл — адзіная крыніца праўды. Стварыце ў працоўнай прасторы новую папку website/ і захавайце там апісанне пад назвай site-brief.md. Можаце скапіяваць яго самі або папрасіць агента. У любым выпадку зайдзіце ў Obsidian і праверце, што файл сапраўды там.

Менавіта так выглядае перадача кантэксту агенту.

3.3 Стварыце дызайн-сістэму ў Claude Design

Другі файл для нашага сайта — дызайн. Мы вызначаем, як будзе выглядаць старонка, — адзін раз, як след, — а потым выкарыстоўваем гэта ў абодвух спосабах.

Вось як з’явілася мая дызайн-сістэма: гэты рэцэпт можна паўтарыць. Я працавала над курсам з ментаркай. Яна спецыялізуецца на кансультаванні па брэндзе і расказала мне пра тэст моцных бакоў характару. Я прайшла яго, атрымала свой профіль моцных бакоў, а ментарка апрацавала вынікі сваімі інструментамі і падрыхтавала аўдыт майго брэнда на іх аснове. Часткай аўдыту былі візуальны стыль і стыль камунікацыі — некалькі абзацаў, усяго некалькі абзацаў. Я перадала іх Claude Design, і ён стварыў усю сістэму: для каго яна, крыніцы, усе файлы, кампаненты, колеры, рэкамендацыі шрыфтоў. Па ходзе ён задаваў мне пытанні. Гэта заняло пэўны час.

Таму на ўваход можна даць любую праўдзівую інфармацыю пра вас і ваш прадукт. Усё — кантэкст, праўда? Чым больш вы ведаеце пра сябе, свой прадукт і ўсё навокал, тым лепш.

• Некалькі абзацаў пра ваш прадукт і ўражанне, якое ён павінен ствараць.
• Файл .fig, калі ў вас ёсць дызайн у Figma. У Figma: «Файл» → «Захаваць лакальную копію», затым загрузіце яго.
• Код, калі ён у вас ёсць, — з GitHub або з вашага камп’ютара.
• Шрыфты, нататкі, водгук ментаркі ці ментара — усё, што маеце.
• Сайты, якія вам вельмі падабаюцца. Выдатны спосаб апісаць патрэбны дызайн: зайдзіце на любімы сайт і папрасіце ШІ апісаць яго брэнд, палітру і ўсё астатняе. Можна спалучыць некалькі сайтаў, узяць тое, што вам сапраўды падабаецца, і стварыць нешта вельмі асабістае.

Гэта не замена дызайнеру. Але калі вы толькі пачынаеце і працуеце самастойна, гэта цалкам нармальна. Claude Design падыходзіць людзям без тэхнічнага досведу.

Калі ўсё расказалі, проста націсніце «Працягнуць». Генерацыя зойме некалькі хвілін, да пяці. І вы атрымаеце дызайн-сістэму.

Затым атрымайце сістэму ў выглядзе файла, каб яна стала яшчэ адной часткай кантэксту ў вашай працоўнай прасторы.

Захавайце яго ў працоўнай прасторы пад назвай design-system.md. Прытрымлівайцеся сваіх правілаў наймення. Цяпер у нас ёсць яшчэ адна вельмі карысная частка кантэксту.

Хутчэйшы шлях, калі не хочацца праходзіць усю працэдуру: папрасіце Claude Code апісаць дызайн-сістэму простымі словамі, захаваць яе як MD-файл і выкарыстоўвайце яго далей. Гэта можа быць крыху горш за кампаненты, бо кампаненты паказваюць, як усё працуе. Але для хуткага пачатку без усіх этапаў такі шлях можа быць прасцейшым.

Падрыхтоўка завершаная, калі: site-brief.md і design-system.md знаходзяцца ў папцы website/, і вы прачыталі абодва файлы.

Частка 4: Спосаб з Lovable

Выбралі спосаб з Claude Code? Пераходзьце да Часткі 5.

4.1 Перадайце дызайн-сістэму ў Lovable

Вяртаемся ў Lovable. З гэтага моманту мы на серверах Lovable. Таму ні апісанне сайта, ні іншая інфармацыя, якую вы ўводзіце, не павінны быць канфідэнцыйнымі.

У Claude Design можна адправіць сваю працу ў Lovable. Можна таксама падключыць іншыя сэрвісы, з якімі вы працуеце: Base44, Replit, Vercel, Wix і іншыя. Сёння мы працуем з Lovable.

Трэба выканаць дзве ўмовы, а потым дастаткова аднаго націскання:

1. Claude падключаны да Lovable. У Claude: + → Падключэнні → Праглядзець падключэнні → Lovable → Падключыць → увайдзіце праз свой уліковы запіс Lovable. У мяне ўжо падключана; гэта робіцца адзін раз.
2. У Claude Design адкрыйце сваю дызайн-сістэму, пераканайцеся, што ўключана Апублікавана, націсніце Экспарт (уверсе справа) → Адправіць у Lovable.

Пасля гэтага Lovable запіша стылі ў праект — вы ўбачыце, як вашы колеры і шрыфты з’явяцца ў якасці арыенціру для дызайну. Калі Claude пачне рабіць з дызайнам нешта не тое — у відэа ён прапанаваў сістэму слайдаў, — скажыце прама:

Гэта займае час. Сёння з падключэннем усіх інструментаў адзін да аднаго — MCP і ўсяго такога — бываюць невялікія складанасці, і на гэта проста патрэбны час. У відэа ўсё цягнулася бясконца. Нам трэба крыху цярпення, а калі ўзнікаюць цяжкасці, я пытаюся ў ШІ. Мой першы выкладчык па ШІ сказаў на курсе «Як стварыць чат-бота з ШІ з дапамогай ChatGPT»: калі ўзнікае праблема, я не панікую, а проста пытаюся ў ШІ. Адтуль я гэта і ўзяла.

4.2 Першы запыт у рэжыме планавання

Пераключыцеся ў рэжым планавання. Далучыце site-brief.md або проста скапіруйце яго змест. Затым адпраўце першы запыт. Апошні радок робіць палову працы.

Спачатку план, потым дзеянні. Кожны агент у гэтым курсе працуе паводле гэтага правіла.

Ён задасць пытанні. Адказвайце, як я, наўмысна не ўскладняючы:

• Новы праект ці існы? Новы. Потым перанясём, калі захочам.
• Якая дызайн-сістэма? Тая, што ў падключаным праекце Claude Design. Прытрымлівайся яе дакладна.
• Куды павінны ісці лісты для спіса чакання? На вашу электронную пошту праз кнопку mailto — яна адкрывае паштовую праграму наведвальніка. Каб не ўскладняць. Пазней, калі захочаце, можна папрасіць ШІ наладзіць цэлую сістэму кіравання спісам чакання. Сёння мы на гэтым не засяроджваемся.
• Яго дадатковыя прапановы? Прапановы насамрэч добрыя. Але давайце будзем трымацца апісання сайта, адправім яго і паглядзім, што атрымаецца.

Ухваліце план. Цяпер ідзе генерацыя — можна схадзіць па гарбату або стварыць нешта сваё.

4.3 Шчыра паглядзіце на першы вынік

Мой першы вынік: курс, далучайцеся зараз, хопіць проста размаўляць з ШІ, пачніце нешта ствараць — як гэта працуе — далучыцца да спіса чакання. Даволі акуратна, я б сказала. Крыху сумна. Безумоўна, яшчэ трэба папрацаваць. Як і з чым заўгодна.

Гэта нармальны першы вынік. Уменне яго паляпшаць — вось патрэбны навык.

4.4 Праверце кнопку і прылады, рэдагуйце малымі крокамі

Спачатку праверце кнопку. Націсніце «Далучыцца да спіса чакання». У відэа яна не адкрыла паштовую праграму, а перакінула мяне да раздзела старонкі. Так не падыходзіць. Адзін запыт гэта выправіць.

Пакуль ён выпраўляе, праверце прылады. Над акном папярэдняга прагляду ёсць пераключальнік: камп’ютар, планшэт, тэлефон. Паглядзіце ўсе тры варыянты. У мяне ўсё выглядала даволі акуратна.

Рэдагуйце тэксты малымі крокамі. Першы экран, радок «Дашліце кароткі ліст, і мы дадамо вас у наступную групу» — па адной змене за раз. Калі набіраць тэкст павольна, карыстайцеся галасавым уводам; я так і рабіла.

4.5 Па жаданні: перанясіце старонку ў існы праект

Калі ў вас ужо ёсць сайт у Lovable і вы хочаце змясціць гэтую старонку ў ім, папрасіце перанесці яе ў іншы праект. Ён прапануе варыянты. Затым скажыце як ёсць:

Найпрасцейшы прапанаваны шлях: адкрыць іншы праект і папрасіць перанесці старонку ў яго. Шчырае папярэджанне з запісу: пры пераносе ён змяніў колер. Вось цікава. Але гэта ШІ, і мы ўсё яшчэ можам унесці праўкі — папрасіце вярнуць колер фону і паўторна праверце кнопку на новым месцы.

4.6 Апублікуйце

Націсніце Апублікаваць уверсе справа. Кароткая праверка бяспекі запусціцца сама — прыкладна на дзесяць секунд. Калі яна нешта знойдзе, дазвольце Lovable выправіць; у відэа ён менавіта так і зрабіў, а выпраўленне адразу апублікавалася. Пацвердзіце, дачакайцеся паведамлення, што сайт апублікаваны, і скапіруйце URL. Спасылка публічная. Адкрыйце яе нанова і яшчэ раз націсніце кнопку. Калі ваша старонка — частка большага сайта, дадайце яе ў меню. З гэтага моманту кожнае рэдагаванне завяршаецца кнопкай Апублікаваць змены.

Гэта насамрэч вельмі хвалюючы момант. Мы зрабілі гэта разам.

Калі вы выбралі спосаб з Lovable, стварэнне завершанае. Пераходзьце да Часткі 6.

Частка 5: Спосаб з Claude Code

Выбралі спосаб з Lovable? У вас ужо ўсё гатова — пераходзьце да Часткі 6.

5.1 Папка і CLAUDE.md

Адкрыйце праграму Claude Desktop і націсніце Код. Новы сеанс → Лакальны → Адкрыць папку… → папка вашай працоўнай прасторы — тая, якую мы стварылі раней і дзе ляжыць увесь толькі што сабраны кантэкст. Можна зайсці на ўзровень глыбей і адкрыць папку website/, бо мы будзем працаваць над сайтам. Пакіньце рэжым дазволаў Уручную: ён пытаецца, вы вырашаеце.

Першы файл: CLAUDE.md. Гэта нататка, якую кожны новы сеанс чытае перад пачаткам працы, каб вам не даводзілася ўсё тлумачыць нанова. Задача невялікая — для яе падыдзе прасцейшая мадэль. У відэа гэта была Sonnet 5; сёння выберыце Haiku 5.5 у спісе мадэляў, а для стварэння сайта вярніцеся да стандартнай (Opus 5.5).

Праверце, што файл сапраўды з’явіўся ў папцы.

5.2 Змясціце набор файлаў дызайну ў папку

Цяпер перададзім тую ж дызайн-сістэму ў Claude Code. У Claude Design адкрыйце сваю дызайн-сістэму → Экспарт (уверсе справа). Вы ўбачыце Адправіць лакальнаму агенту праграмавання, Адправіць у Claude Code Web і Замест гэтага спампаваць ZIP.

У відэа я карысталася вэб-сеансам. Але шчыра: воблачны сеанс не можа запісваць файлы непасрэдна на ваш Mac. Ды і даваць ШІ спасылкі ўнутр свайго ноўтбука не вельмі бяспечна, бо імі можа скарыстацца хтосьці іншы, — так што ўсё нармальна. Ён можа выдаць вам ZIP — набор файлаў дызайну. Ён прапануе каманды тэрмінала. Мы не карыстаемся тэрміналам. Не.

Сёння найкарацейшы шлях — Замест гэтага спампаваць ZIP: проста на ваш Mac, без прамежкавага воблачнага сеанса. Абодва шляхі заканчваюцца аднолькава: ZIP у вашай папцы website/.

Спампуйце ZIP у папку website/. Распакуйце яго падвойным націсканнем. Нічога складанага. Адкрыйце папку і пераканайцеся, што ў ёй ёсць змесціва.

Затым вярніцеся ў Claude Code. Паглядзіце, наколькі запоўнены кантэкст, — працэнт у картцы «Кантэкст». 5% — нармальна; новага сеанса хопіць на ўсё стварэнне сайта.

5.3 Стварыце сайт і праверце яго на localhost

Па ходзе ён будзе прасіць дазволы — чытайце, чаго ён хоча, і дазваляйце. У відэа ён сам правярае макеты: першы экран для камп’ютара, выраўноўванне. Ведае, як рабіць сваю працу. Мне падабаецца.

Адкрыйце ў браўзеры лакальны адрас, які ён дасць. Націсніце кожную кнопку. Прачытайце тэкст.

Мой першы вынік: крыху занадта спакойны, я б сказала. Крыху задоўгі. Але гэта нармальна. Дробныя праўкі будуць пасля публікацыі — не шліфуйце старонку, на якую яшчэ ніхто не можа зайсці.

Што з’явілася ў вашай папцы: index.html, файл стыляў, рэсурсы — а таксама апісанне сайта, ваш CLAUDE.md і набор файлаў дызайну. Усе файлы захоўваюць усю нашу памяць. Новы сеанс можа ў любы момант працягнуць працу. У гэтым і сэнс працы ў папцы.

Цяпер можна параўнаць. Хто справіўся лепш — Claude Design разам з Lovable ці Claude Design разам з Claude Code? Які варыянт вам больш падабаецца? Мне сапраўды цікава.

5.4 GitHub — памяць сайта

Мы змяшчаем сайт у інтэрнэце і выкарыстоўваем GitHub. GitHub — гэта своеасаблівая памяць сайта: там будзе захоўвацца кожная версія.

Вам патрэбны ўліковы запіс GitHub — бясплатны, з электроннай поштай, — а ўсё астатняе зробіць ШІ.

Ён праверыць стан рэпазіторыя, падрыхтуе ўсе файлы, створыць прыватны рэпазіторый, адправіць файлы і праверыць, што яны там. Вы дазваляеце кожны крок. Затым адзін раз зайдзіце на github.com і знайдзіце свой праект у спісе. Я не вельмі часта карыстаюся GitHub, у мяне няшмат рэпазіторыяў, але гэты там ёсць. Бачыце, усё сапраўды проста.

Калі нешта пойдзе не так, вы ведаеце, што рабіць: проста папрасіце дапамогі ў ШІ.

5.5 Netlify — змясціце сайт у інтэрнэце

Зарэгіструйцеся на netlify.com праз Google. Пры першым наладжванні адказвайце шчыра: поўны пачатковец, хачу апублікаваць сайт, менеджар прадукту — усё, што адпавядае рэчаіснасці.

Затым:

1. Дадаць новы праект → Імпартаваць існы праект → GitHub.
2. Дазвольце Netlify доступ у GitHub. GitHub можа папрасіць код пацвярджэння — так ён клапоціцца пра нашу бяспеку.
3. Выберыце свой рэпазіторый. Усталюйце для яго Netlify. Налады зборкі вызначацца самі — стандартныя падыдуць, Claude Code іх ужо падрыхтаваў.
4. Разгарнуць сайт. Ідзе разгортванне. Пара хвілін.

І вось спасылка. Доўгая, затое бясплатная, і гэта ўжо можна паказваць. Праверце сайт: ён прыстасоўваецца, калі звужаць акно, да памеру планшэта і тэлефона. Адкрыйце яго на тэлефоне. Сапраўдная старонка ў сапраўдным свеце.

Калі знаёмы адкрывае вашу спасылку і бачыць «сайт не знойдзены» або патрабаванне ўвайсці ва ўліковы запіс, ваш новы сайт Netlify прыватны па змаўчанні. Адкрыйце налады сайта і зрабіце яго публічным.

5.6 Унясіце змену і паглядзіце, як сайт абновіцца

Вярніцеся ў Claude Code і зрабіце адну невялікую праўку — у відэа гэта загаловак першага экрана. Затым папрасіце зафіксаваць змены і адправіць іх у GitHub. Netlify заўважыць гэта і сам абновіць сайт. Адкрыйце Netlify → «Разгортванні»: першае, другое, з апісаннем змены. Выглядае сапраўды карысна.

Цяпер у нас дзве версіі аднаго і таго ж, абедзве апублікаваныя, але па-рознаму. І мы падключылі GitHub. Насамрэч гэта можа крыху палохаць. Я ведаю. Ведаю, бо я таксама не тэхнічная спецыялістка.

Якой спасылкай дзяліцца. Netlify дае кожнаму разгортванню асобную нязменную спасылку і адзін адрас сайта, які заўсёды паказвае апошнюю версію. Дзяліцеся адрасам сайта. Калі адкрываеце спасылку і не бачыце сваёй праўкі, вы скапіравалі спасылку на асобнае разгортванне — спытайце ў Claude Code: «Які мой пастаянны URL у Netlify?»

5.7 Бонус: стварыце старонку са здымка экрана

У канцы відэа ёсць яшчэ адзін прыём. Каб стварыць вітрыну праектаў курса, я не пісала тэхнічнае заданне. Я зрабіла здымак экрана старонкі-ўзору і перацягнула яго ў Claude Code: ствары старонку-вітрыну для прадуктаў, якія зробяць удзельнікі курса, выкарыстоўвай здымак экрана як узор структуры. Тая ж папка, GitHub ужо падключаны. Праз некалькі хвілін: Створана ўдзельнікамі, сапраўды апублікавана. Кожны праект тут пачаўся з ідэі чалавека без тэхнічнага досведу, потым прайшоў праверку, быў створаны з ШІ і стаў публічным. Паглядзіце, што зрабілі людзі. Гэта вельмі міла. Мне падабаецца.

Карыстайцеся гэтым прыёмам, калі вам падабаецца, як арганізавана нейкая старонка.

Частка 6: Апублікуйце, а потым пакажыце

Які б спосаб вы ні выбралі, цяпер у вас ёсць публічная спасылка. Тры дзеянні.

Адкрыйце яе на тэлефоне. Сапраўдная прылада, сапраўднае ўражанне. Тое, як старонка прыстасоўваецца да меншага экрана, — ваша праверка якасці. Яшчэ раз націсніце кнопку на апублікаванай старонцы.

Дашліце яе. Гэта той канкрэтны матэрыял, якога не хапала падчас інтэрв’ю: старонка, якую можна камусьці даслаць або абмеркаваць на інтэрв’ю і паглядзець, што чалавек сапраўды робіць. Дашліце яе тром удзельнікам сваіх інтэрв’ю з адным пытаннем: ці далучыліся б вы? Адказ, ліст, сустрэчнае пытанне — гэта даныя, якіх няма ў вашай canvas.

Прынясіце яе на кантрольны этап. Устаўце URL апублікаванага сайта і адзін сказ у нататку кантрольнага этапу Спрынту 3, правядзіце самаацэнку і адзначце этап завершаным. А ў самым канцы курса на старонцы падачы праектаў у вітрыну я прапаную падзяліцца зробленым і крыху пра яго расказаць — як гэта зрабілі ўдзельнікі хакатона. Уласна, дзеля гэтага мы ўсё і робім: каб вы дайшлі да моманту, калі можаце паказаць сваю працу і апублікаваць яе для ўсяго свету.

Два радкі пра прыватнасць, бо старонка ўжо публічная. Ніякіх даных кліентаў, імёнаў удзельнікаў інтэрв’ю і нічога, чаго вы не паказалі б незнаёмцу. Калі ваш спіс чакання збірае адрасы электроннай пошты, дадайце простую заўвагу ўнізе старонкі: «Мы выкарыстоўваем вашу электронную пошту толькі для сувязі з вамі наконт гэтага прадукту. Без спаму; у любы момант можна папрасіць выдаліць ваш адрас».

Частка 7: Як працаваць упэўнена — што рабіць, калі ўсё ідзе не як у відэа

Уменне карыстацца гэтымі інструментамі — не пра набіранне тэксту. Гэта пра кіраванне. Вы даяце кантэкст, вызначаеце гатовы вынік і правяраеце. Вось што я раблю, калі нешта ідзе не так.

Калі захраслі ў любым інструменце, спытайце ў ШІ. Проста скарыстайцеся любым чатам — ChatGPT, Claude ці іншым чатам з ШІ. Дашліце здымак экрана. Спытайце, што рабіць, куды перайсці, як нешта знайсці. Не дасылайце нічога канфідэнцыйнага: адрасоў электроннай пошты, пароляў, токенаў — нічога такога, што можа быць на экране. Будзьце з гэтым уважлівыя.

Кожны раз усё па-новаму. Кожны раз, калі вы карыстаецеся ШІ, нават тым самым ШІ і тым жа парадкам дзеянняў, ён працуе не зусім аднолькава. І дакладна працуе па-рознаму ў розных людзей, бо вы просіце розныя рэчы і фармулюеце запыты па-рознаму. Таму калі ваш экран не супадае з відэа, гэта не памылка. Кантэкст, малыя крокі, праверка — вось што паўтараецца.

Падключэнні патрабуюць часу. MCP, дазволы, коды пацвярджэння, «яшчэ апрацоўваецца». Цярпенне — частка падрыхтоўкі. Схадзіце па гарбату.

Прасіце паказаць, што змянілася. Перад тым як прыняць любую праўку — у canvas, апісанні сайта ці старонцы, — спытайце: што ты змяніў і чаму? Затым прачытайце. Спачатку рэжым планавання.

Адна змена на запыт. І кажыце, чаго не чапаць. «Больш нічога не змяняй» — цалкам дарэчны сказ.

Калі агент не можа знайсці файл, дайце прамы шлях да яго. Не апісанне — шлях.

Калі мадэль з’ядае ваш ліміт. Дробныя задачы — CLAUDE.md, перайменаванне, перанос файла — аддавайце прасцейшай мадэлі. Магутную беражыце для стварэння сайта.

Калі пры пераносе змяніліся колеры. Гэта ШІ. Папрасіце вярнуць іх. Затым зноў праверце кнопку.

Тры пытанні перад тым, як прыняць любы вынік: Што ты змяніў? У чым ты найменш упэўнены? Што з апісання сайта ты прапусціў?

Частка 8: Як пачаць — план на сем дзён

Не трэба праходзіць увесь занятак за адзін раз. Вось які тэмп я абрала б, калі б усё гэта было для мяне новым.

Дзень 1 — Кантэкст. Змясціце lean canvas у працоўную прастору. Абнавіце яе з улікам папкі market у рэжыме планавання. Прачытайце, што змянілася. Больш нічога.

Дзень 2 — Апісанне сайта. Стварыце site-brief.md. Прачытайце ўголас. Ці гучыць праблема так, як пра яе гавораць вашы кліенты? Калі не, выпраўце словы, а не дызайн.

Дзень 3 — Дызайн-сістэма. Некалькі шчырых абзацаў для Claude Design або адзін сайт, які вам падабаецца. Экспартуйце MD. Выберыце свой спосаб і запішыце яго.

Дзень 4 — Стварэнне. Спосаб з Lovable: падключэнне, першы запыт у рэжыме планавання, адказы на пытанні, ухваленне. Спосаб з Claude Code: папка, CLAUDE.md, набор файлаў дызайну, стварэнне, localhost.

Дзень 5 — Публікацыя. Lovable: «Апублікаваць», скапіяваць URL. Claude Code: GitHub, затым Netlify. Адкрыйце сайт на тэлефоне. Праверце кнопку на апублікаванай старонцы.

Дзень 6 — Адпраўка. Тры ўдзельнікі вашых інтэрв’ю, па адным пытанні кожнаму. Назірайце, што яны робяць.

Дзень 7 — Праверка і завяршэнне. Адна невялікая праўка на аснове назіранняў. Устаўце URL і адзін сказ у кантрольны этап Спрынту 3, правядзіце самаацэнку і адзначце этап завершаным.

Пачніце сёння: адкрыйце працоўную прастору, змясціце туды lean canvas і адпраўце запыт на абнаўленне. Усё. Астатняе вырасце з гэтага.

Вы скончылі, калі…

• URL апублікаванага сайта адкрываецца на вашым тэлефоне.
• Кнопка «Далучыцца да спіса чакання» адкрывае паштовую праграму — праверана на апублікаванай старонцы, а не ў папярэднім праглядзе.
• Кожнае слова на старонцы сапраўднае: аўдыторыя яе словамі, праблема яе словамі, з вашай canvas і даследавання каментарыяў.
• Дызайн адпавядае вашай дызайн-сістэме, а не стандартным наладам інструмента.
• Для спосабу з Claude Code: вы ведаеце, якая спасылка пастаянная.
• Ваш URL і адзін сказ дададзены ў кантрольны этап Спрынту 3.
• Спасылку атрымалі прынамсі тры ўдзельнікі вашых інтэрв’ю.

Ваш кантрольны спіс

Адзначайце зробленае па ходзе працы — малыя крокі таксама лічацца.

Проста зараз — пакуль не закрылі гэту ўкладку

• Змясціце lean canvas у працоўную прастору — у product/, паводле сваіх правілаў наймення; папрасіце агента абнавіць яе з улікам папкі market у рэжыме планавання і прачытайце змены.
• Стварыце апісанне сайта — агент + canvas + папка → site-brief.md у новай папцы website/. Аўдыторыя яе словамі, праблема яе словамі, заклік да дзеяння = далучыцца да спіса чакання.
• Стварыце дызайн-сістэму — некалькі шчырых абзацаў для Claude Design або адзін сайт, які вам падабаецца; экспартуйце MD у сваю працоўную прастору. Выберыце спосаб і запішыце яго.

На гэтым тыдні

• Прайдзіце ўвесь шлях да публікацыі — абраным спосабам, да працоўнага публічнага URL. Праверце кнопку на апублікаванай старонцы. Адкрыйце яе на тэлефоне.
• Толькі для спосабу з Claude Code: адна праўка, фіксацыя і адпраўка ў GitHub — праверце, што абнаўленне з’явілася па пастаяннай спасылцы. Менавіта ёю вы дзеліцеся.
• Дашліце спасылку тром удзельнікам інтэрв’ю — старонка і ёсць той канкрэтны матэрыял, якога не хапала вашым інтэрв’ю. Назірайце, што людзі робяць.
• Завяршыце кантрольны этап Спрынту 3 — URL апублікаванага сайта + адзін сказ; самаацэнка; адзнака аб завяршэнні. У канцы курса менавіта гэта трапіць у вітрыну праектаў.

Далей — кантрольны этап Спрынту 3, потым Спрынт 4

Дадайце URL апублікаванага сайта і адзін сказ пра яго ў нататку кантрольнага этапу Спрынту 3. Дадайце два адказы для асэнсавання: што вы змянілі пасля прагляду апублікаванай старонкі і што спытаеце ў першых трох людзей, якім яе дашлеце? Адзначце, як вы карысталіся ШІ па ходзе працы. Правядзіце самаацэнку кантрольнага этапу, а затым адзначце яго завершаным.

У наступным спрынце мы створым прадукт, які стаіць за гэтай старонкай, — ваш асабісты кантэкст у выглядзе бота ў Telegram, у той жа працоўнай прасторы і з тымі ж звычкамі.

Дзякуй, што вы тут. Мне вельмі хочацца ўбачыць ваш апублікаваны праект на старонцы-вітрыне.