Технический фундамент веб-приложения для дизайнера

Markdown — способ форматировать текст обычными символами прямо внутри него, без визуального редактора: # Заголовок, **жирный текст**, - пункт списка, [текст ссылки](адрес). Любой инструмент, который умеет это распознавать, превращает такие символы в оформленный текст. А если не умеет, файл всё равно остаётся вполне читаемым как есть. Файлы в этом формате называются .md. Материал, который ты читаешь прямо сейчас, устроен точно так же: обычный текстовый файл с такими символами, который сайт превращает в оформленную страницу.

Почему формат настолько прижился именно в связке с ИИ:

• Читается без рендера. Открытый в обычном блокноте .md-файл остаётся понятным текстом, а не набором нечитаемого кода. С .docx или файлом Figma так не выйдет.
• Родной формат для моделей. Большинство ИИ по умолчанию отвечают в разметке Markdown: заголовки, списки, жирный текст. Модель обучена на огромном количестве такого текста и естественно им пользуется, даже если её об этом не просить отдельно.
• Дружит с git. Это обычный текст, а не бинарный формат, поэтому изменения видны построчно в истории версий (тема «Вайбкодинг: интерфейсы»). Понятно, что именно поменялось, а не только то, что файл стал другим.
• Лёгкий и переносимый. Файл весит килобайты и открывается чем угодно, без специальной программы для чтения.

Именно поэтому в .md пишут документацию проектов (README-файлы), инструкции для агентов (CLAUDE.md/AGENTS.md — тема «Терминальные агенты: настройка под себя», «Глоссарий терминов») и базы знаний команды.

Редактировать .md можно в любом текстовом поле. Выбор инструмента зависит от того, нужен ли сразу отформатированный вид:

• Обычный текстовый редактор (Блокнот, TextEdit) покажет только сырые символы, без превью. Для быстрой правки этого достаточно.
• Редакторы кода (VS Code, Cursor) подсвечивают синтаксис и часто дают live-превью рядом с текстом.
• Специализированные Markdown-редакторы (Obsidian, Typora, iA Writer) сразу показывают отформатированный вид, без переключения между «сырым» текстом и превью.
• Прямо в чате с ИИ. Большинство чат-ботов сами рендерят Markdown в ответах. Попроси модель написать текст в .md и сразу увидишь готовый результат.

Фронтенд — это всё, что видит и трогает пользователь: кнопки, экраны, анимации, вёрстка. Ты и так работаешь с фронтендом каждый день, просто не всегда называешь его этим словом. Бэкенд — невидимая пользователю часть, которая работает на сервере. Он хранит данные, проверяет пароли, считает цены, решает, кому что можно показывать. Кнопка «Купить» на фронтенде выглядит одинаково для всех. Но именно бэкенд решает, есть ли товар на складе и прошёл ли платёж.

Фронтенд и бэкенд общаются друг с другом через API (application programming interface). Точнее, через конкретные эндпоинты (endpoints) — адреса вида /api/users или /api/orders. Фронтенд отправляет на такой адрес запрос («дай мне список заказов этого пользователя»), а бэкенд отвечает данными. Когда агент говорит «я создал эндпоинт для регистрации», это буквально значит «я завёл новый адрес, на который форма регистрации будет отправлять данные».

База данных — место, где бэкенд хранит информацию постоянно. То, что происходит в браузере пользователя, пропадает при перезагрузке страницы; база данных — нет. Данные в ней организованы в таблицы, похожие на таблицу в Excel. У таблицы users есть строки (по одной на пользователя) и колонки (email, имя, дата регистрации). Схема (schema) — это описание того, какие вообще таблицы есть и какие колонки в каждой. Её определяют заранее, до того как в таблицу попадут реальные данные.

Отдельные таблицы связываются друг с другом через внешние ключи (foreign keys). Например, у таблицы заказы есть колонка user_id, которая указывает на конкретную строку в таблице users. Так система понимает, какой заказ какому пользователю принадлежит, и не дублирует все данные о пользователе в каждом заказе.

CRUD — аббревиатура четырёх базовых операций с данными, которые умеет делать почти любое приложение: Create (создать запись — зарегистрировать пользователя), Read (прочитать — показать список заказов), Update (изменить — отредактировать профиль), Delete (удалить — отменить заказ). Когда агент пишет «добавил CRUD для заметок», это значит, что заметки можно создавать, смотреть, редактировать и удалять, а не просто выводить статичным списком.

Язык, на котором формулируются такие операции для базы данных, называется SQL. Писать его самому не нужно. Но полезно узнавать самые частые слова, когда агент показывает, что он делает. SELECT * FROM orders WHERE user_id = 42 буквально означает «выбери все колонки из таблицы заказов, где идентификатор пользователя равен 42». То есть это операция Read из CRUD, просто записанная не по-русски, а на языке SQL.

Аутентификация и авторизация (auth) — две половины одного механизма. Аутентификация проверяет, кто перед системой: вход по email/паролю или через Google/Apple. Авторизация решает, что этому конкретному человеку разрешено видеть и делать. Агент будет использовать оба слова, и это не синонимы. Без нормальной авторизации любой посетитель сайта технически может увидеть чужие данные, просто зная адрес страницы. Это одна из самых частых причин утечек в наспех собранных прототипах. Поэтому прямо попроси агента: «защити приватные страницы от неавторизованного доступа». Само собой это не получится.

Помимо собственного бэкенда, приложение часто обращается к чужим сервисам через их API: получить курс валют, отправить email, проверить адрес по карте. Отдельный частый случай — приём платежей. Почти никто не пишет обработку банковских карт с нуля, а подключает готовый сервис вроде Stripe. Он берёт на себя всю чувствительную часть: номера карт, безопасность, комплаенс. Приложению остаётся только вызвать его API и обработать результат («оплата прошла» / «не прошла»). Подробнее про сборку такого сценария агентом — в теме «Вайбкодинг: интерфейсы».

Перепиши этот текст (вставить) в формате Markdown: с заголовками, жирным для ключевых терминов и списком там, где перечисление

Объясни на примере моего проекта [описать], что у него будет фронтендом, а что бэкендом

Нарисуй словами схему базы данных для приложения списка задач: какие таблицы нужны и как они связаны друг с другом

Я не понимаю разницу между авторизацией и просто формой логина на экране — объясни на пальцах

Вот ответ агента (вставить) — переведи на простой язык, что он сделал технически