admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

content(site-portfolio): draft personal LLM workflow case

Browse Source
This commit is contained in:
root committed 2026-09-28 15:17:47 +02:00
1 parent a9957e739f
commit 02f05c0598
4 files changed
+315 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/site-portfolio/index.html
+83 -23
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Кейс: Этот сайт — разработка с использованием AI IDE."
content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent."
/>
<title>Этот сайт — Разработка с AI IDE — кейс</title>
<title>Как я создаю сайт-портфолио с LLM-агентами</title>
<script>
(function () {
var FONT_CSS = {
@@ -112,20 +112,20 @@
<meta property="og:site_name" content="Николай Мамадаев — продуктовый дизайнер" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:title" content="Этот сайт — Разработка с AI IDE — кейс" />
<meta property="og:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
<meta property="og:title" content="Как я создаю сайт-портфолио с LLM-агентами" />
<meta property="og:description" content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent." />
<meta property="og:url" content="https://mamadaevv.site/cases/site-portfolio/" />
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Этот сайт — Разработка с AI IDE — кейс" />
<meta property="og:image:alt" content="Как я создаю сайт-портфолио с LLM-агентами" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Этот сайт — Разработка с AI IDE — кейс" />
<meta name="twitter:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
<meta name="twitter:title" content="Как я создаю сайт-портфолио с LLM-агентами" />
<meta name="twitter:description" content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent." />
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta name="twitter:image:alt" content="Этот сайт — Разработка с AI IDE — кейс" />
<meta name="twitter:image:alt" content="Как я создаю сайт-портфолио с LLM-агентами" />
<script type="application/ld+json">
{
@@ -169,8 +169,8 @@
"@type": "CreativeWork",
"@id": "https://mamadaevv.site/cases/site-portfolio/#page",
"url": "https://mamadaevv.site/cases/site-portfolio/",
"name": "Этот сайт — Разработка с AI IDE — кейс",
"description": "Кейс: Этот сайт — разработка с использованием AI IDE.",
"name": "Как я создаю сайт-портфолио с LLM-агентами",
"description": "Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent.",
"isPartOf": {
"@id": "https://mamadaevv.site/#website"
},
@@ -203,7 +203,7 @@
{
"@type": "ListItem",
"position": 3,
"name": "Этот сайт — Разработка с AI IDE — кейс",
"name": "Как я создаю сайт-портфолио с LLM-агентами",
"item": "https://mamadaevv.site/cases/site-portfolio/"
}
]
@@ -223,6 +223,28 @@
max-width: 48rem;
margin: 0 auto;
}
.case-article .case-brief {
list-style: none;
margin: 1.5rem 0 0;
padding: 1rem 1.1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.85rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.case-article .case-brief li {
margin: 0;
}
.case-article .case-brief span {
display: block;
margin-bottom: 0.2rem;
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.case-article h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -399,32 +421,70 @@
<main id="case-main" class="section section--tight">
<div class="section__inner case-article">
<p class="hero__eyebrow">Разработка · AI IDE</p>
<h1 class="case-page__h1">Этот сайт</h1>
<p class="case-page__sub">Разработка сайта с использованием AI IDE</p>
<p class="hero__eyebrow">Личный опыт · LLM и веб-разработка</p>
<h1 class="case-page__h1">Как я создаю сайт-портфолио с LLM</h1>
<p class="case-page__sub">От ограничений конструкторов до работы с Cursor и Hermes Agent</p>
<p class="section__prose">
<!-- Здесь будет введение -->
Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.
</p>
<h2 id="context">Контекст</h2>
<ul class="case-brief">
<li><span>Формат</span>Личный проект</li>
<li><span>Моя роль</span>Задаю направление, структуру и принимаю результат</li>
<li><span>Инструменты</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
<li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
</ul>
<h2 id="context">Мне понадобился новый сайт</h2>
<p class="section__prose">
<!-- Контекст проекта -->
Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
</p>
<h2 id="task">Задача</h2>
<h2 id="task">Конструктор начал мешать</h2>
<p class="section__prose">
<!-- Описание задачи -->
Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
</p>
<p class="section__prose">
Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
</p>
<h2 id="solution">Решение</h2>
<h2 id="solution">Как складывался процесс</h2>
<h3>Сначала модель помогала писать код</h3>
<p class="section__prose">
<!-- Что было сделано -->
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
</p>
<p class="section__prose">
Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
</p>
<h2 id="result">Результат</h2>
<h3>Макеты не были обязательным этапом</h3>
<p class="section__prose">
Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
</p>
<p class="section__prose">
В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
</p>
<h3>Компоненты помогали держать сайт цельным</h3>
<p class="section__prose">
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
</p>
<p class="section__prose">
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
</p>
<h2 id="agents">От помощника к агенту</h2>
<p class="section__prose">
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
</p>
<p class="section__prose">
Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
</p>
<h2 id="result">Сайт работает</h2>
<p class="section__prose">
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
</p>
</div>
</main>
public/en/cases/site-portfolio/index.html
+83 -23
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Case Study: This website was developed using an AI IDE."
content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent."
/>
<title>This Website — Developed with AI IDE — Case Study</title>
<title>Building My Portfolio Website with LLM Agents</title>
<script>
(function () {
var FONT_CSS = {
@@ -112,20 +112,20 @@
<meta property="og:site_name" content="Nikolai Mamadaev — Product Designer" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<meta property="og:title" content="This Website — Developed with AI IDE — Case Study" />
<meta property="og:description" content="Case Study: This website was developed using an AI IDE." />
<meta property="og:title" content="Building My Portfolio Website with LLM Agents" />
<meta property="og:description" content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent." />
<meta property="og:url" content="https://mamadaevv.site/en/cases/site-portfolio/" />
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="This Website — Developed with AI IDE — Case Study" />
<meta property="og:image:alt" content="Building My Portfolio Website with LLM Agents" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="This Website — Developed with AI IDE — Case Study" />
<meta name="twitter:description" content="Case Study: This website was developed using an AI IDE." />
<meta name="twitter:title" content="Building My Portfolio Website with LLM Agents" />
<meta name="twitter:description" content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent." />
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta name="twitter:image:alt" content="This Website — Developed with AI IDE — Case Study" />
<meta name="twitter:image:alt" content="Building My Portfolio Website with LLM Agents" />
<script type="application/ld+json">
{
@@ -169,8 +169,8 @@
"@type": "CreativeWork",
"@id": "https://mamadaevv.site/en/cases/site-portfolio/#page",
"url": "https://mamadaevv.site/en/cases/site-portfolio/",
"name": "This Website — Developed with AI IDE — Case Study",
"description": "Case Study: This website was developed using an AI IDE.",
"name": "Building My Portfolio Website with LLM Agents",
"description": "My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent.",
"isPartOf": {
"@id": "https://mamadaevv.site/#website"
},
@@ -203,7 +203,7 @@
{
"@type": "ListItem",
"position": 3,
"name": "This Website — Developed with AI IDE — Case Study",
"name": "Building My Portfolio Website with LLM Agents",
"item": "https://mamadaevv.site/cases/site-portfolio/"
}
]
@@ -223,6 +223,28 @@
max-width: 48rem;
margin: 0 auto;
}
.case-article .case-brief {
list-style: none;
margin: 1.5rem 0 0;
padding: 1rem 1.1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.85rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.case-article .case-brief li {
margin: 0;
}
.case-article .case-brief span {
display: block;
margin-bottom: 0.2rem;
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.case-article h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -399,30 +421,68 @@
<main id="case-main" class="section section--tight">
<div class="section__inner case-article">
<p class="hero__eyebrow">Development · AI IDE</p>
<h1 class="case-page__h1">This website</h1>
<p class="case-page__sub">Website Development Using AI IDE</p>
<p class="hero__eyebrow">Personal experience · LLM and web development</p>
<h1 class="case-page__h1">Building My Portfolio Website with LLMs</h1>
<p class="case-page__sub">From no-code limitations to working with Cursor and Hermes Agent</p>
<p class="section__prose">
<!-- Здесь будет введение -->
I needed an up-to-date website for my work and résumé. This case follows my experience working with LLMs on the site: how I explored different tools and changed my process.
</p>
<h2 id="context">Context</h2>
<ul class="case-brief">
<li><span>Format</span>Personal project</li>
<li><span>My role</span>Set the direction and structure, review the result</li>
<li><span>Tools</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
<li><span>Status</span>Site works; content and promotion are next</li>
</ul>
<h2 id="context">Why I needed a new site</h2>
<p class="section__prose">
<!-- Контекст проекта -->
I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
</p>
<h2 id="task">Task</h2>
<h2 id="task">The builder got in the way</h2>
<p class="section__prose">
<!-- Описание задачи -->
I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
</p>
<h2 id="solution">Solution</h2>
<p class="section__prose">
<!-- Что было сделано -->
I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
</p>
<h2 id="result">Result</h2>
<h2 id="solution">How the process took shape</h2>
<h3>At first, the model helped me write code</h3>
<p class="section__prose">
When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
</p>
<p class="section__prose">
The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
</p>
<h3>Mockups were not a required step</h3>
<p class="section__prose">
I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
</p>
<p class="section__prose">
I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
</p>
<h3>Components kept the site consistent</h3>
<p class="section__prose">
I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
</p>
<p class="section__prose">
Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
</p>
<h2 id="agents">From code assistant to agent</h2>
<p class="section__prose">
A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
</p>
<p class="section__prose">
Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
</p>
<h2 id="result">The site is working</h2>
<p class="section__prose">
The site is fully functional. Next, I plan to work on its content and promotion.
</p>
src/pages/cases/site-portfolio.en.html
+75 -15
View File
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
<html lang="en" data-theme="dark" data-radius="medium" data-font="merriweather">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Case Study: This website was developed using an AI IDE."
content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent."
/>
<title>This Website — Developed with AI IDE — Case Study</title>
<title>Building My Portfolio Website with LLM Agents</title>
{{> head-links}}
{{> head-plyr}}
<style>
@@ -15,6 +15,28 @@
max-width: 48rem;
margin: 0 auto;
}
.case-article .case-brief {
list-style: none;
margin: 1.5rem 0 0;
padding: 1rem 1.1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.85rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.case-article .case-brief li {
margin: 0;
}
.case-article .case-brief span {
display: block;
margin-bottom: 0.2rem;
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.case-article h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -86,30 +108,68 @@
{{> fab-stack}}
<main id="case-main" class="section section--tight">
<div class="section__inner case-article">
<p class="hero__eyebrow">Development · AI IDE</p>
<h1 class="case-page__h1">This website</h1>
<p class="case-page__sub">Website Development Using AI IDE</p>
<p class="hero__eyebrow">Personal experience · LLM and web development</p>
<h1 class="case-page__h1">Building My Portfolio Website with LLMs</h1>
<p class="case-page__sub">From no-code limitations to working with Cursor and Hermes Agent</p>
<p class="section__prose">
<!-- Здесь будет введение -->
I needed an up-to-date website for my work and résumé. This case follows my experience working with LLMs on the site: how I explored different tools and changed my process.
</p>
<h2 id="context">Context</h2>
<ul class="case-brief">
<li><span>Format</span>Personal project</li>
<li><span>My role</span>Set the direction and structure, review the result</li>
<li><span>Tools</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
<li><span>Status</span>Site works; content and promotion are next</li>
</ul>
<h2 id="context">Why I needed a new site</h2>
<p class="section__prose">
<!-- Контекст проекта -->
I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
</p>
<h2 id="task">Task</h2>
<h2 id="task">The builder got in the way</h2>
<p class="section__prose">
<!-- Описание задачи -->
I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
</p>
<h2 id="solution">Solution</h2>
<p class="section__prose">
<!-- Что было сделано -->
I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
</p>
<h2 id="result">Result</h2>
<h2 id="solution">How the process took shape</h2>
<h3>At first, the model helped me write code</h3>
<p class="section__prose">
When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
</p>
<p class="section__prose">
The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
</p>
<h3>Mockups were not a required step</h3>
<p class="section__prose">
I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
</p>
<p class="section__prose">
I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
</p>
<h3>Components kept the site consistent</h3>
<p class="section__prose">
I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
</p>
<p class="section__prose">
Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
</p>
<h2 id="agents">From code assistant to agent</h2>
<p class="section__prose">
A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
</p>
<p class="section__prose">
Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
</p>
<h2 id="result">The site is working</h2>
<p class="section__prose">
The site is fully functional. Next, I plan to work on its content and promotion.
</p>
src/pages/cases/site-portfolio.html
+74 -14
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Кейс: Этот сайт — разработка с использованием AI IDE."
content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent."
/>
<title>Этот сайт — Разработка с AI IDE — кейс</title>
<title>Как я создаю сайт-портфолио с LLM-агентами</title>
{{> head-links}}
{{> head-plyr}}
<style>
@@ -15,6 +15,28 @@
max-width: 48rem;
margin: 0 auto;
}
.case-article .case-brief {
list-style: none;
margin: 1.5rem 0 0;
padding: 1rem 1.1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.85rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.case-article .case-brief li {
margin: 0;
}
.case-article .case-brief span {
display: block;
margin-bottom: 0.2rem;
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.case-article h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
@@ -86,32 +108,70 @@
{{> fab-stack}}
<main id="case-main" class="section section--tight">
<div class="section__inner case-article">
<p class="hero__eyebrow">Разработка · AI IDE</p>
<h1 class="case-page__h1">Этот сайт</h1>
<p class="case-page__sub">Разработка сайта с использованием AI IDE</p>
<p class="hero__eyebrow">Личный опыт · LLM и веб-разработка</p>
<h1 class="case-page__h1">Как я создаю сайт-портфолио с LLM</h1>
<p class="case-page__sub">От ограничений конструкторов до работы с Cursor и Hermes Agent</p>
<p class="section__prose">
<!-- Здесь будет введение -->
Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.
</p>
<h2 id="context">Контекст</h2>
<ul class="case-brief">
<li><span>Формат</span>Личный проект</li>
<li><span>Моя роль</span>Задаю направление, структуру и принимаю результат</li>
<li><span>Инструменты</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
<li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
</ul>
<h2 id="context">Мне понадобился новый сайт</h2>
<p class="section__prose">
<!-- Контекст проекта -->
Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
</p>
<h2 id="task">Задача</h2>
<h2 id="task">Конструктор начал мешать</h2>
<p class="section__prose">
<!-- Описание задачи -->
Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
</p>
<p class="section__prose">
Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
</p>
<h2 id="solution">Решение</h2>
<h2 id="solution">Как складывался процесс</h2>
<h3>Сначала модель помогала писать код</h3>
<p class="section__prose">
<!-- Что было сделано -->
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
</p>
<p class="section__prose">
Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
</p>
<h2 id="result">Результат</h2>
<h3>Макеты не были обязательным этапом</h3>
<p class="section__prose">
Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
</p>
<p class="section__prose">
В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
</p>
<h3>Компоненты помогали держать сайт цельным</h3>
<p class="section__prose">
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
</p>
<p class="section__prose">
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
</p>
<h2 id="agents">От помощника к агенту</h2>
<p class="section__prose">
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
</p>
<p class="section__prose">
Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
</p>
<h2 id="result">Сайт работает</h2>
<p class="section__prose">
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
</p>
</div>
</main>