Лендинг уже есть, а клиент спрашивает: «а где примеры работ?». Как у Марины: она попросила Cursor «портфолио как на Next», увидела package.json, закрыла проект и снова открыла Canva. Боль – страх выдумывать кейсы и ощущение, что страница работ только для разработчиков или за Tilda. За вечер соберите portfolio.html с 4–6 реальными карточками и выложите папку через Vercel Drop – без npm, React и программиста.
Портфолио на сайт – это не галерея из 40 шаблонов, а 4–6 честных карточек: задача клиента, результат, одно фото или скрин и ссылка, если есть. Правило portfolio.mdc в Cursor запрещает npm и React и оставляет один статический файл со стилями через Tailwind CDN. С главной – пункт меню «Портфолио», публикация – перетаскивание папки на vercel.com/drop. Отзывы держите отдельно: работы показывают, что вы сделали, цитаты – что сказали клиенты.
Англоязычные гайды «portfolio + Cursor 2026» почти всегда ведут через Next.js, npm и GitHub. С 12 июня 2026 у Vercel есть Drop: папку со статическим HTML перетаскиваете в браузер без Git и терминала. В Яндекс Вордстат (Россия, прогон 2026-07-09) «портфолио на сайт» даёт 1121 показ, «сайт портфолио» – 5792, «создать сайт портфолио» – 417. Люди ищут, где показать работы, а не «cursor portfolio». Cursor и правила – способ собрать свою страницу, а не ключ ради SEO.
Если лендинга ещё нет, сначала пройдите гайд как сделать лендинг в Cursor AI без кода, затем вернитесь к портфолио.
Соберите 4–6 реальных работ без выдуманных кейсов
Боль здесь не в дизайне, а в пустом блокноте: «нечего писать» и стыд за слабые проекты. Не делайте фейковые названия и чужие скрины. Избегайте чужих кейсов из шаблонов – используйте только свои переписки, папку «до/после» и закрытые заказы. На практике хватает 4–6 реальных работ. Гайды по кейсам для фрилансеров в 2026 советуют на старте 3–5 сильных проектов – лучше меньше, но честно.
Для каждой карточки зафиксируйте пять полей:
- Название работы одной строкой (например, «Лендинг для студии маникюра»).
- Задача клиента одной фразой: что болело до вас.
- Результат: цифра или конкретный итог («заявки с сайта за первую неделю»).
- Одно фото или скрин экрана – не обязательно лицо клиента.
- Ссылка на живой проект, если есть; если нет – честно опустите поле.
- Короткий тип услуги для фильтра (сайт, дизайн, консультация) – по желанию.
Типичная ошибка – писать «увеличили продажи на 300%» без факта. Лучше скромный, но проверяемый итог. На практике фото клиентов не обязательны: скрин интерфейса, макета или «до/после» уже дают доверие.
Зафиксируйте правило portfolio.mdc, чтобы Cursor не тянул React
Откройте папку сайта в Cursor рядом с index.html. Создайте файл .cursor/rules/portfolio.mdc. В официальной документации Cursor Rules нужны frontmatter и alwaysApply: true – иначе агент может игнорировать подсказку. Обычный .md в папке rules не сработает; устаревший .cursorrules лучше не использовать.
alwaysApply: true
description: Static portfolio page onlyОдин файл portfolio.html в корне. Стили через Tailwind Play CDN (@tailwindcss/browser@4) в head. Запрещены npm, React, Next.js, package.json и команды терминала. Карточки работ – обычная HTML-сетка. CTA – ссылка «обсудить проект» в Telegram или WhatsApp.
Community-гайды по vibe coding прямо пишут: без явного «single static HTML» Cursor часто уходит в React. Не повторяйте запрос Марины про Next – пишите «один portfolio.html». На открытых GitHub-шаблонах портфолио на HTML + Tailwind CDN страница открывается двойным кликом без сборки – это и есть эталон для новичка.
Соберите portfolio.html в Agent: hero, сетка и CTA
Откройте Agent (Ctrl+I на Windows, Cmd+I на Mac) и дайте промпт со своим списком работ. Tailwind CDN – это один script в head: стили подключаются без установки программ, как готовая палитра для прототипа (официально Play CDN рассчитан на демо, для первого сайта этого достаточно).
Собери portfolio.html: hero с заголовком «Работы», сетка 4–6 карточек из моего списка ниже (название, задача, результат, картинка, ссылка), опциональный фильтр по типу услуги, кнопка «Обсудить проект». Single static HTML, Tailwind CDN, без фреймворков и без npm. Список: [вставьте название / задачу / результат / файл картинки].
- Вставьте список работ в промпт и дождитесь создания portfolio.html.
- Откройте файл двойным кликом в браузере – страница должна открыться без терминала.
- Попросите Agent поправить цвета и тексты фразами, не копируя разметку вручную.
- Проверьте, что у каждой карточки видны задача и результат, а не только красивая картинка.
- Сузьте окно браузера: на узком экране карточки столбиком (grid-cols-1), на широком – по две (md:grid-cols-2).
- Убедитесь, что кнопка «обсудить проект» ведёт в ваш мессенджер или форму.
- Уберите из промпта просьбы про Next.js и npm, если Agent снова предлагает package.json.
Схема вечера:
Список реальных работ → правило portfolio.mdc → промпт в Agent → portfolio.html двойным кликом → ссылка в меню → Vercel Drop
Сравнение: портфолио, отзывы и конструктор
Часто путают портфолио и отзывы. Портфолио – что вы сделали (работы и кейсы). Отзывы – что сказали клиенты. На сайте нужны оба блока, но разными страницами: иначе лид видит либо только цитаты без доказательств, либо галерею без живых голосов.
| Критерий | Свой portfolio.html в Cursor | Страница отзывов | Canva / Tilda / Pixpa |
|---|---|---|---|
| Что показывает | Работы: задача → результат → визуал | Цитаты и оценки клиентов | Шаблоны на чужом хостинге |
| Владение файлом | Да, папка у вас | Да, если свой reviews.html | Часто нет – кабинет сервиса |
| Нужен npm / React | Нет при правиле .mdc | Нет при том же подходе | Нет, но другой стек |
| Старт за один вечер | Да | Да | Да, но слабее контроль HTML |
Итоговый вердикт: Сначала соберите свой portfolio.html с 4–6 реальными карточками и CTA. Отзывы вынесите на отдельную страницу отзывов. Конструктор оставляйте, если вам важнее шаблон, чем владение файлами.
Свяжите portfolio.html с лендингом и страницей услуг
Страница без ссылки с главной почти не работает: лид не найдёт работы за один тап. Добавьте в меню index.html пункт «Портфолио» или «Работы» на portfolio.html. То же сделайте на странице услуг, если она уже есть. В реальном проекте мультистраничные HTML-шаблоны как раз держат отдельные файлы работ рядом с главной – это нормальная схема, не «сложная архитектура».
Не смешивайте в одном блоке кейсы и длинные цитаты: оставьте на portfolio.html доказательства работ, а живые отзывы – на reviews.html. В реальном проекте проверьте со смартфона: пункт меню кликается, картинки грузятся, кнопка CTA не уехала за край.
Глубже про вайбкодинг и заявки – в курсе по Make.com и вайбкодингу.
Опубликуйте папку через Vercel Drop и пройдите чек-лист
Не нужен GitHub и терминал. Откройте документацию Vercel Drop или сразу vercel.com/drop, перетащите всю папку сайта (index.html + portfolio.html + картинки). Если сверху нет index.html, Drop попросит выбрать корневую страницу – укажите index.html. После Deploy откройте адрес вида ваш-проект.vercel.app/portfolio.html с телефона.
Пройдите чеклист запуска перед тем, как кидать ссылку клиенту:
- В папке нет package.json и папки node_modules.
- Тексты карточек свои, без чужих кейсов.
- Картинки открываются, ссылки на проекты кликаются.
- CTA «обсудить проект» виден внизу и у hero.
- На узком экране сетка не «плывёт».
- С главной один клик до «Портфолио».
Как понять, что всё сработало: в папке лежит portfolio.html; в браузере видны 4–6 карточек с названием, задачей, результатом и картинкой плюс CTA; со смартфона сетка читается; в меню лендинга кликабельная ссылка; по ссылке vercel.app открывается /portfolio.html. Этого достаточно, чтобы ответить сомневающемуся лиду ссылкой вместо долгого рассказа.
Дальше по желанию: отдельная страница под один сильный кейс – только после того, как сетка из 4–6 карточек уже живёт. Вопросы по сборке можно задать в сообществе Telegram «Ковчег».
Материал проверен: Артур Хорошев (CEO Maya AI, курс по Make.com и вайбкодингу).
Опора на источники: Cursor Rules (cursor.com/docs/rules), Vercel Drop (анонс 12.06.2026, vercel.com/docs/drop), Tailwind Play CDN (@tailwindcss/browser@4); Wordstat «портфолио на сайт» 1121 и «сайт портфолио» 5792 – прогон 2026-07-09.
Частые вопросы
Как создать портфолио на сайте без программиста?
Соберите 4–6 реальных работ, откройте папку лендинга в Cursor, задайте правило portfolio.mdc (один HTML, без npm), попросите Agent собрать portfolio.html и выложите папку через Vercel Drop. Свой домен не обязателен на старте – хватит ссылки vercel.app.
Сколько работ достаточно на старте?
Оптимально 4–6 сильных карточек. Три честных кейса лучше сорока шаблонных. Добавляйте новые работы по мере закрытых заказов, не раздувая сетку ради объёма.
Нужны ли фото клиентов или хватит скринов?
Хватит скринов экрана, макетов и кадров «до/после». Фото человека публикуйте только с явного разрешения. Главное – понятная задача и измеримый или конкретный результат в тексте карточки.
Чем портфолио отличается от страницы отзывов?
Портфолио показывает работы (что сделали). Отзывы показывают цитаты (что сказали). Держите их разными файлами и ссылками в меню, чтобы лид видел и доказательства, и живые голоса.
Нужен ли npm или React для страницы портфолио?
Нет. При правиле portfolio.mdc и Tailwind CDN страница – обычный HTML-файл. Если Agent предложил package.json, остановите генерацию и повторите промпт со словами «single static HTML, no frameworks».
Можно ли опубликовать портфолио без своего домена?
Да. Vercel Drop выдаёт публичный адрес на vercel.app. Позже можно привязать домен в кабинете Vercel; для первого показа клиенту достаточно пути /portfolio.html.
