Я долго воздерживался от погружения в это направление, но видимо пришло время запрыгнуть в последний вагон и посмотреть, что это за зверь такой вайбкодинг. Собственно я посмотрел пачку вебинаров, почитал статьи и хочу поделиться тем, что я понял и даже попробуем сделать каркас сайта визитки который потом наполним контентом.
Немного теории (ага, форточку откройте, душно стало)
Ниже — ключевые термины, используемые в контексте VibeCode. Поскольку VibeCode не является общеизвестным стандартом, определения даны как нашел в интернете.
- Промт (Prompt) — текстовое описание задачи, которое пользователь передаёт системе VibeCode, чтобы получить сгенерированный код.
- VibeCode‑движок (VibeCode Engine) — ядро системы, которое анализирует промт и генерирует соответствующий исходный код.
- Контекст (Context) — дополнительная информация, которую система учитывает при генерации кода, помимо прямого промта.
- Шаблон кода (Code Template) — предварительно определённая структура или фрагмент кода, который используется как основа для генерации.
- Генерация кода (Code Generation) — процесс преобразования промта и контекста в исполняемый исходный код.
- Валидация кода (Code Validation) — проверка сгенерированного кода на корректность, безопасность и соответствие требованиям.
- Итеративная доработка (Iterative Refinement) — процесс улучшения сгенерированного кода через последовательные правки на основе обратной связи.
- Библиотека промтов (Prompt Library) — коллекция типовых промтов, проверенных на эффективность для конкретных задач и языков.
- Метаданные промта (Prompt Metadata) — дополнительная информация о промте, не входящая в его текстовое тело.
- Выходной код (Output Code) — итоговый исходный код, сгенерированный системой VibeCode на основе промта и контекста.
И грех не похвастаться очередным сертификатом
Не зря же я от скуки эти курсы прохожу.
Регистрация и установка Replit
Для создания нашего будущего навайбкоженного приложения мы будем использовать сервис Replit. На мой взгляд самое простое решение из тех которые я пробовал, а главное у него есть бесплатный лимит которого нам будет вполне достаточно для нашего эксперимента.
Итак, первым делом зарегистрируемся на сайте https://replit.com/signup?source=home&goto=%2F%7E. Для регистрации будем использовать логин-пароль и в этом случае нам необходим зарубежный адрес электронной почты (да и сам сайт без VPN не открывается, но к этому думаю все уже привыкли).
После регистрации мы попадем в web-интерфейс управления и можем сразу же приступать к работе. Но если есть такая возможность, то давайте установим приложение для рабочего стола.
Переходим по адресу https://replit.com/desktop и загружаем приложение.
В моем случае это deb-пакет который установим командой:
# dpkg -i ./replit_1.0.14_amd64.debАналогично можно установить и приложение для мобильного телефона или планшета https://replit.com/mobile.
Собственно после установки мы получили окно чата где мы можем ввести промт и получить готовое приложение. Ага, вот прям все по настоящему так просто происходит и давайте попробуем сделать наш простой сайт резюме-визитку и попробуем без использования фрэймворков просто HTML и JS. Делать будем MVP (Minimum Viable Product — минимально жизнеспособный продукт) и потом уже его приведу под свои требования. Иными словами, мы сделаем шаблон за который обычно еще и деньги просят.
Подготовка промта для создания сайта
Вообще конечно можно было написать в два-три предложения, но я предпочитаю другой нейросетью подготовить полноценное техническое задание и ей же перевести на английский. Да, вот так я в край обленился.
В итоге получилось нечто похожее на правду и можно смело с таким Т.З. на фриланс сайт идти и заказать шаблон, но мы будем экономить.
Technical Specification for the Development of a One‑Page Resume Website (Business Card) for a System Administrator / DevOps Engineer
1. General Information
1.1. Project Objective
To create a concise, strictly official one‑page website‑business card serving as an electronic resume for a specialist in system administration and DevOps. The website must convey a professional impression, ensure convenient navigation and readability, and allow quick assessment of the candidate’s qualifications.
1.2. Target Audience
recruiters and HR specialists;
technical leads and team leaders;
potential clients (for freelancing/consulting).
1.3. Platform
A static one‑page website based on HTML and JavaScript (no backend, CMS, or frameworks).
2. Functional Requirements
Mandatory Features:
smooth navigation between sections via anchor links;
responsive design (mobile devices, tablets, desktops);
“Download Resume” button (link to a PDF file);
contact form (name, email, message) with basic JS validation;
display of the current year in the footer (dynamically via JS);
highlighting of the active section in the navigation menu during scrolling.
Optional Features (by agreement):
one‑click email copying;
minimal block appearance animations during scrolling (without overloading).
3. Structure and Content
The website must include the following sections (in order):
Header
candidate’s first and last name;
brief position: “System Administrator / DevOps Engineer”;
navigation menu with section anchors.
About Me
short professional profile (3–5 sentences);
key competencies (list of 6–10 items: e.g., Linux, Docker, Kubernetes, Ansible, CI/CD, monitoring, etc.).
Experience
chronological list of workplaces (from latest to earliest);
for each workplace: company name, position, period of employment, brief description of responsibilities and achievements (2–3 points).
Education
educational institution, specialty, year of graduation;
additional courses, certifications (if any).
Skills
detailed list of technical skills with proficiency levels (e.g., “Advanced”, “Intermediate”, “Basic”);
categorized by: OS, networking, virtualization, orchestration, CI/CD, scripting, etc.
Projects
2–3 key projects with descriptions: goal, candidate’s role, technologies used, outcome;
links to public repositories (GitHub/GitLab) — if available.
Certifications and Training
list of obtained certifications (name, organization, year);
verification links (if available).
Contact
contact form (name, email, message);
direct contacts: email, phone, LinkedIn, GitHub (links with icons).
Footer
copyright with the current year;
link to download the resume in PDF format.
4. Design and Style
4.1. Color Scheme
primary color: shades of blue (e.g., #0077b6, #48cae4);
secondary color: white (#ffffff) or light gray (#f8f9fa);
accent color: dark blue or black for text;
contrast: WCAG AA compliance (text readability).
4.2. Typography
font: sans‑serif (e.g., Roboto, Open Sans, Helvetica);
headings: larger, bolder;
body text: 16–18px, line height 1.5;
text color: dark gray (#212529) or black.
4.3. Layout
content width: no more than 1200px with margins;
margins: uniform, 40–60px between sections;
alignment: centered.
4.4. Icons
use SVG icons (e.g., from Bootstrap Icons or Feather Icons) for contacts, skills, etc.
5. Technical Requirements
5.1. Technologies
HTML5;
CSS3 (no preprocessors);
JavaScript (vanilla, no libraries).
5.2. Responsiveness
mobile devices (320–767px): vertical layout, simplified menu;
tablets (768–1023px): compact grid;
desktops (1024+ px): full width with margins.
5.3. Performance
page load time: no more than 2 seconds (on slow connections);
image optimization (compression, SVG for icons);
CSS/JS minimization (if possible).
5.4. Cross‑Browser Compatibility
support for the latest versions of Chrome, Firefox, Safari, Edge.
5.5. Accessibility
semantic markup (header, nav, section, footer);
alt attributes for images;
keyboard navigation;
text contrast.
6. Content Requirements
All text blocks are provided by the client in DOC/PDF format.
Images (photos, logos) are provided in PNG/JPEG/SVG format.
PDF version of the resume is provided by the client.
7. Development Stages
Analysis and Design
согласование структуры и дизайна;
preparation of mockups (optional).
Markup and Programming
creation of HTML markup;
styling with CSS;
implementation of JS functionality.
Testing
responsiveness check;
cross‑browser testing;
accessibility check.
Refinement and Delivery
addressing feedback;
final check;
delivery of source files.Загружаем подготовленный промт в Replit.
Собственно работа начата.
По окончании работы вы получите готовый сайт. В моем случае получилось вот такая карасота.
Все красиво, но на мой взгляд не хватает фотографии и вот здесь уже сделаем интересно, а именно сделаем скриншот и напишем, что именно в это место мы хотели бы добавить фото.
Отмечаем место для фото и передаем в промт скриншот и уточнение, что требуется сделать.
Add a place for the photo to the area marked in red.Подтверждаем и готово.
Вот теперь меня все устраивает и остается только загрузить полученный код.
Выгрузка результатов работы на GitHub
Создаем проект на GitHub в моем случае пусть будет публичный проект.
Копируем URL-созданного репозитария.
URL:
https://github.com/interlan-github/anton-c.ru.gitСоздаем новую вкладку и выбираем раздел GIT.
Настраиваем интеграцию с GitHub.
Указываем Remote URL проекта на GitHub и делаем Push нашего проекта.
Проект опубликован.
Вот собственно и все и нам остается только дработать сайт под себя.
