Из UI/UX
в fullstack

Если ты UI/UX-дизайнер 1-3 года опыта и хочешь перестать отдавать вёрстку фрилансерам — этот гайд для тебя. Я собрал дорожную карту, по которой сам прошёл и провёл уже несколько учеников. Полный переход — 3-6 месяцев при темпе 5-10 часов в неделю. Финал — ты делаешь сайты от Figma до прода соло и зарабатываешь в 3-5 раз больше за тот же проект.

Зачем дизайнеру в fullstack

Самый частый вопрос: «А зачем мне разработка, если я хорошо рисую макеты?» Три причины:

1. Кратный рост дохода

UI/UX-дизайнер на фрилансе берёт 35-80 тыс. ₽ за лендинг (один макет). Дальше клиент идёт к верстальщику и платит ещё 80-120 тыс. ₽. Полный бюджет — 200 тыс. ₽, твоя доля — 30%. Если ты делаешь оба этапа сам, твоя доля — 100%. Простая арифметика: ×3 к доходу с того же проекта.

2. Контроль качества

Сколько раз ты видел, как твой красивый макет превращается в ад на коде? Шрифт «почти такой же», отступы «примерно», hover-эффекты «не сделали потому что сложно». Когда ты сам пишешь код — этого нет. Готовый сайт = на 100% твой макет.

3. Независимость

Не зависишь от верстальщика, который заболел/исчез/требует доплат за каждый чих. Сделал — задеплоил — клиент доволен. Цикл сокращается с 3 недель до 1-2 недель.

4. AI-революция как окно возможностей

Технические навыки в 2026 — массовый коммодити благодаря Claude и Vercel. Раньше «выучить код за 3 месяца» было невозможно. Сейчас — реальность.

Кому путь подходит, а кому нет

Жёсткие критерии — это сэкономит твои деньги:

• Минимум 1 год опыта в Figma с реальными проектами в портфолио
• Понимаешь сетки, типографику, состояния интерфейса — это базовое
• Готов учиться по 5-10 часов в неделю минимум 3 месяца
• Не боишься английского — большая часть документации
• Любишь разбираться — а не «дайте готовый шаблон»

Этап 1: HTML/CSS на уровне принципов (2-4 недели)

Первая ошибка новичков — зубрить теги. Это бесполезно: Claude знает все теги. Тебе нужно понимать принципы:

Что выучить:

• Семантика HTML — header, nav, main, article, section. Когда что использовать.
• CSS Grid — главный layout-инструмент в 2026. Не Flexbox для всего, а Grid для основной сетки.
• CSS Custom Properties — переменные. Тема, цвета, размеры — всё через них.
• Брейкпоинты и адаптив — mobile-first, ключевые точки 480, 780, 1200.
• Анимации — transition, transform, @keyframes. cubic-bezier для премиум-эффектов.
• Селекторы — :hover, :focus-visible, :has(), :nth-child. Без JS можно сделать 70% UX.

Что не учить (пока):

• Bootstrap, Tailwind и прочие фреймворки — позже
• Sass, Less, PostCSS — позже
• CSS-in-JS — позже, и часто не нужно вообще
• Animation libraries (GSAP, Anime.js) — позже

Как практиковаться:

Возьми один из своих макетов в Figma и попробуй сверстать его на чистом HTML/CSS. Без Claude. Это будет больно — но за 2-3 макета мозг переключится. Потом подключай Claude для скорости.

Этап 2: JavaScript + Claude (3-5 недель)

JS пугает дизайнеров больше всего. На самом деле — для 90% задач хватает 20% языка. Без React, без Vue, без TypeScript.

Что выучить:

• Переменные, типы, операторы — базовый синтаксис. 2-3 часа.
• Функции (обычные и arrow), scope, замыкания. 4-6 часов.
• DOM API: querySelector, addEventListener, classList, dataset. 6-8 часов.
• Async/await + fetch — для API-запросов. 3-4 часа.
• IntersectionObserver — для scroll-эффектов и lazy-load. 2 часа.
• localStorage / sessionStorage — для простого сохранения. 1 час.

Параллельно — Claude Code:

Все эти штуки можно учить, делая практику с Claude. Claude напишет код, ты разбираешь и понимаешь. Это в 3 раза быстрее, чем по туториалам.

Этап 3: деплой и инфраструктура (1-2 недели)

Самый простой этап. Но без него сайт остаётся «у тебя на компьютере».

Что освоить:

• Git + GitHub — init, add, commit, push, pull. И всё.
• Vercel CLI — vercel deploy, vercel --prod. 10 минут изучить.
• Подключение домена — DNS, A-record, CNAME. Бесплатные SSL.
• Env vars — секретные переменные (API-ключи) через Vercel dashboard.
• Edge Functions — серверный код без сервера (для форм, API-проксей).

После этого этапа у тебя есть весь цикл: Figma → код → GitHub → Vercel → твой домен. Полный fullstack-пайплайн.

Этап 4: первый коммерческий проект

Самый важный этап. Без него все знания — теоретические.

Как найти первого клиента:

• Кому-то из текущих дизайн-клиентов предложи сделать сайт целиком. Скидка 30% за «первого клиента». Большинство соглашается.
• Сделай себе лендинг как кейс — выложи в свой Behance / Telegram / Twitter. «Я теперь делаю сайты целиком».
• Запостай в профильных Telegram-каналах — фриланс, дизайн, нетворкинг.
• Холодные письма — найди 50 студий, у которых нет хорошего сайта, напиши с предложением.

Цена первого проекта:

Не бери слишком мало (учишь себя «дешёвой работе») и не бери слишком много (страшно, не справишься). Оптимум — 50-100 тыс. ₽ за лендинг. Это в 2-3 раза дороже твоего макета и в 2-3 раза дешевле «правильного» лендинга на рынке. Выигрывают все.

Сколько это даёт в деньгах

Реальная экономика после 6 месяцев освоения:

В среднем дизайнер с fullstack-стеком зарабатывает в 3-4 раза больше, при той же загрузке. Плюс убираются «провалы» когда дизайн-проект закончен, а нового нет — теперь у тебя гибридные заказы на 2-4 месяца.

Что после fullstack

Когда ты освоил полный стек, открываются ещё несколько путей:

Путь 1: продуктовая студия одного человека

Делаешь по 2-3 проекта в месяц, ставка 200-400 тыс. ₽. Доход 500к-1M ₽/мес. Это про меня сейчас (DEEMKEND).

Путь 2: свой продукт

Запускаешь свой SaaS / app / маркетплейс. Дольше, рискованнее — но потолок выше. Может выстрелить как SITEMETRICS или OVERCAP.

Путь 3: in-house в продуктовую компанию

Идёшь в стартап на роль Design Engineer / Full-stack Designer. Зарплата в РФ 300-600к ₽/мес, в зарубежных компаниях — $5-12k/мес.

Итого

Путь из UI/UX в fullstack в 2026 — реален и доступен любому дизайнеру с базой. 3-6 месяцев работы — и ты на принципиально новом уровне дохода и свободы. Главное условие — настоящая дизайн-база. Без неё всё это бесполезно.