Рабочы процес з адказою штучнага інтэлекту для выкладкі маленькога веб-сайту на Cloudflare

Маленькій інформацыйным веб-сайту большэй не патрэбна дліткая праця над ствароўкай. Завдакі наявнасці дапаможніка для напісання коду на базе ШІ, які виконвае большую частку роботы, адна людзь можа перайсці ад простага ідэяўкі да коду на GitHub, автаматычнага развяртання через Cloudflare і жывога персональнага домэна за апошнія паловы дзень актыўной працы. Складнасць перашчыляецца з напісання коду на выбір таго, чым хочацеся распаўзіцца, і на дачу точных адгукоў пра тое, што практычна ўтварылася. У гэтым кансалтате шаг за шагам паказаны гэты процес, ўключаючы шаблоны запитоў, якія можна адлаштаваць для фаз дизайну, лога, адзінакоўкі і павтарных правак, а таксама чыста адзначана, дзе гэты падход перестае быць адпаведным.

Пачніце з меты, а не з фрэймворку

Першым естэзічным запитаннем для разработчыка ёсць: які фреймворк выбраць – React, Next.js, генератор статычных сайтаў чы ўсё іншае. Калі асистэнт можа стварыць большую частку коду, гэта запитанне стае значна менш важлівым чым простэйша запитанне: што на самай працы должен робіць сайт?

Для першай версіі персональнага чы консалтингавога сайта адпаведны адказ можа быць простым. Візітары должны зразумець, што представляе сабою сайт, магчыма было знайсці ў яму статті та аналізы, і ведаць, як звяжыцца. Гэта ўжо ўсе неабходныя функцыі. Якщо спачатку ўсё запісаць, це дае і вам, і модэлю чыткі критэрый для кожнай наступной рашынкі, а таксама не дазволяе першай версіі ператварыцца на проект перадзялу дизайну.

Калі у вас няма конкрэтнага дизайна

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

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

• Лога не пасходзіць да брэнда.
• Зображэнне банера адцячана.
• Одна з частак здаецца перапоўненай.
• Частка стораніцы паказуецца зараз не трэба.

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

Цікавіць адзывы больш, чым пачатковы запит

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

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

Універсальны запит для першай версіі

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

• Назва брэнда, падпрыемства або проекту.
• Мета: што сайт павінен дапамогчы вам досягнуць.
• Аудытарыя: для каго ён прызначаны.

Галоўная ідея, яку відвідухальнік должен запам’ятаваць прыблізна за першыя 15–20 секунд.

Візуальны стыл: прафесійны, мінімалістычны, прэміум-класу, творчы або оріўентаваны на тэхналогіі, а таксама выбор фона — светлага, темнага чыра нейтральнага.

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

Чыстая адказка пра тое, што кольоры, шрыфты чы структура старонкі ўсё яшчэ не выбраны.

Потым папросіце модэль запропанаваць, на адной часоўцы з метай і аудытарыям:

1. Палітру колькаў.
2. Напрамак тыпаграфіі.
3. Структуру галоўнай старонкі.
4. Канцэпцыю для роздзела з галоўным контентам.
5. Навігацыю.
6. Рэкамендаваныя роздзелы контента.
7. Заклекціі да дзеяння.
8. Абщы візуальны стыл.

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

Ставіцеся да лога як да самастоятнага завдання

Лога таксама павінен працаваць за межамі веб-сайта: у соцыяльных профілях, у презентацыйных слайд-шоу і ў дакументах. Якщо яго адразу включаць у запит да сайта, часта выходзіць штосьц, прыладоўанае толькі для заголовка, таму даць брэнду самастоятны запит.

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

1. Візуальную канцэпцю.
2. Напрамак тыпаграфіі.
3. Палету кольцаў.
4. Ідею іконкі або манаграма.
5. Версію для светлых фонаў.
6. Версію для темных фонаў.
7. Паспяшчэнне пра тое, чаму дизайн падходзіць брэнду.

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

Дазвольце асистэнту займіцца рэалізацыяй, а вы застаўцеся на роўні намеру

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

• Банер раздзяляецца на два часткі.
• Наразы выключыце коментарыяў у гэтых частках.
• Зменіце назву гэтага кантакту.
• Зробіце так, каб гэты кантакт пераводзіў на адпаведную частку.
• Зробіце так, каб лога падходзіў да перваснага мастацкага варыянта.

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

Зарэўняйце домен як можно раней і продавайце працу ў локальных умовах

Рэгістрацыя домена — гэта проста процедура: адзін раз шукаеце, пераканаліваецеся ў наявнасць, рэгіструеце і плаціце. Але ўвесь час зробіць яго абсолютна прыдатным можа зайняць больш часу. У описаным тут случае для таго, каб усё стало такім, як і планавалася, знадобілася апошней 24 гадзіны; час, які паказваецца, залежыць ад сервісу рэгістраціі і ад процеса распространення DNS.

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

Існуючы модель выкорыстоўваеце як адналежніка, а не толькі як інструмент для стварэння

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

Папросіце яго разглядзе скріншот як апытлаго дизайнера інтерфейса та корыстніка, і, не перадзялёваючы непатрэбна, выканацьіце найбольшыя можлівасці для палёгчэння:

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

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

Ітерацыі — гэта там, дзе ведуцца большасць роботаў

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

• Нумераваныя пункты з конкрэтнымі змянамі, якія вы хочаце, по аднаму на лінію.
• Чыстае заведамленне пра тое, каб не перадзяляць нерелевантныя частіні дизайна і захаваць усё, што вже працюе належна.

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

Інструкцыю па зберэнні трэба акцэнаваць. Асистэнты часта "падбягчуюць" суседзіцкі код пад час вылечвання таго, пра што вы прасілі, а чыстая абмежэння зменшаюць такія адхыленні. Спісак самапераканалення не заменяе вашага сабестудію, але ён выкрывае явныя регрэсіі прытаму, перш чым вы іх пазірэце.

З локальнага прывіду да жывога сайту за дапамою GitHub і Cloudflare

Калі сайт працуе локальна, выкладзіце яго код у рэпазітарый GitHub. GitHub дае вам історыю версый і безпечны спосаб перадвінуць назад будзь-яе змяненне, якое асистэнт здзейсніў.

Далей пад’яжыце гэты репазітарый да Cloudflare, каб кожны падача даных у репазітарый запускаў аўтаматычную компіляцыю і размешчэнне. З таго часу публікацыя адбываецца проста праз зберагучы і падачу даных. Для невялікога інформацыйскага сайту ў такой ситуацыі дастатнек быў безплатны ўровень Cloudflare; пераканайцеся, якія ліміты є у дзейным плане для вашых патрэб.

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

Каліко цэ это коштае і дзе гэта не падходзіць

Для такога роду проекта витраты на адработку є незначнымі:

• Рэгістрацыя домена: у гэтым случае або-та 12 долераў у год.
• GitHub: безкоштовна.
• Cloudflare: дастатнек быў безплатны ўровень.
• Інструменты AI: столькі, сколькі коштае ваша прыўязка да ChatGPT або іншага асістэнта.

Адынце з падпіскам на асистэнта, домен фактычна ўсё, што становіць витраты на інфраструктуру.

Гэты падход не падходзіць для кожнага застосунку. Калі йдzie пра платежы, чутлівыя персональныя даны, складную аутентыкацію, базы дадзеных чыста регулюемыя серавесы, неабходна належная інжынерная падтрымка: моделюванне апазычных рызык, перагляд коду спецялістам, які розумее кожную лінію, тэставанне і стацыонарны монітарынг. Аднак для портфелей, стартовых стораніц, сайтаў-консалтынгаў, пратотыпаў і простых сайтаў з контентам бар’ер для входу значна нижы, чым раней.

Што асистэнт можа, а што не можа вырашыць

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

• Што должен прадставляць сайт.

Калькі контэнту маюць значэнне.

Чы графічны дизайн выглядае правільна.

Калі першая версія становіцца дасканальнаю для выпуску.

Это усунулі прычыну спяхання. Ключоўны вопыт больш не стае тым, чы можна тэхнічна стварыць сайт, а стае тым, чы можна чыста і ясна выбраць тое, што хочаце. Бар’еры для рэалізацыі зменшуюцца; аднак патрэба ў правільным рашэнні застаецца.

Ключовыя выводы

• Абмавочваце мэту, аудытарыю і галоўную паведамленне пры выборе будзь-якай тэхналогіі.
• Прабуйце, каб модэль запропанаваў і обоснаваў дизайн пры напісанні коду, і чыста схваліце выбраны направленні.
• Раскладзіце логаў отдельна, каб ён працаваў у всіх форматах, а не толькі ў заглав’ях сайту.
• Апылляйцеся на короткія, конкрэтныя цыклы ітерацый з абмежэнням «зберагчы все іншае» і спискам самапераканання.
• Існуючы адпамагу як крітыка, а таксама як помачніка, пры чым даюцца прапрацоўныя і параджораныя адзывы.
• Зберажыце код у GitHub і дазвольце Cloudflare запускать яго пасля кожнага аплыву, таким чынам контроль версій і хостынг будуць аўтаматычнымі.
• Застаўляйце такой лёгкі падход для сайтаў з низкім рызыкам. Ценнае ў гэтым тое, як усі элементы з’еднаюцца ў адну рабочую схему: вы контролюеце мету, прынятак і затверджэнне, адпамагу берае на сябе выкананне, GitHub фіксуе історыю, а Cloudflare публікуе.