RU EN
~/wiki / interfeis-i-sayty / kak-obnovit-dizain-s-ii

Как обновить дизайн сайта с ИИ: быстрый маршрут без хаоса

◷ 5 min read 2/14/2026
AI Prompts For The Site CursorAI Loveable Grok

Main chat

A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.

$ cd section/ $ join vibe dev
Как обновить дизайн сайта с ИИ: быстрый маршрут без хаоса - обложка

Короткий ответ

Обновлять дизайн с ИИ лучше поэтапно: сначала структура и тексты, потом визуал, затем адаптив и только после этого финальные стили. Такой порядок снижает риск красивого, но нерабочего интерфейса. Самая частая ошибка — менять всё сразу без контрольных скриншотов и проверок SEO.

  • Шаг 1: фиксируй контент и структуру блоков.
  • Шаг 2: накладывай новый визуальный стиль без смены URL и смыслов.
  • Шаг 3: проверяй мобильный вид, скорость и мета-данные до релиза.

The short answer

It is better to update the design with AI in stages: first structure and texts, then visual, then adaptive and only after that final styles. This reduces the risk of a beautiful but non-working interface. The most common mistake is to change everything at once without screenshots and SEO checks.

  • Step 1: capture the content and structure of the blocks.
  • Step 2: Impose a new visual style without changing the URL or meaning.
  • Step 3: Check the mobile view, speed and meta data before release.

Да, дизайн этого сайта сделан именно такXX

The main advantage: at each stage you can control the result with prompts** - in Grok, in Lovable and in Cursor. You do not like it, you write “make the colors softer”, “remove this section”, “increase the fonts”, etc.

Step 1. Creating a structure and visual concept in Grok

Reference: https://grok.com/

** Template 1 - Site structure**

code 
“You are a product designer and website architect.
I have a website [site name].

The main idea: [in one sentence - for whom the site and what problem solves].

Make a detailed structure of the site (all pages, sections, subsections).
Navigation – maximum 4-5 points.

Make two choices:
1. Minimalistic (3-4 pages)
2. More complete.

Indicate what should be on the main page, in articles and in other sections.”

Template 2 - visual concept

code 
“You are a creative art director.
Create a new visual concept for the site.

Main idea: [in one sentence].
Target audience: [who uses].
Tone and feeling: [confidence, simplicity, audacity, etc.]

Suggest 3 different directions. For each, describe:
- color palette
- typography
mood
Example of the main + one internal page

Choose one direction and copy its description in full.

Step 2. Create a new design in Lovable

https://lovable.dev (Go and create a new project)

Insert this template in the Lovable chat:

code 
“Create a modern website using the following concept:

[Insert full description from Grok + structure]

Technical requirements:
- Next.js 15 + Tailwind CSS
Fully responsive (mobile version is a priority)
- maximum loading speed
- clean modern design
One main CTA on each page

Generate the entire site at once: the main, one internal page, navigation and footer

After generation, you can edit the design directly in Lovable prompts (for example: “make the background lighter”, “change the font to Inter”, “remove animations”).

Step 3. Fly the project from Lovable to GitHub (automatically)

  1. In Lovable, click on the icon GitHub in the upper right corner of the project (or go to Settings → Connectors → GitHub).
  2. If your account is not already connected, click Connect GitHub → log in via GitHub.
  3. Press Connect project (or Transfer repository).
  4. Choose an account or organization where the repository will be created.
  5. Lovable will automatically create a new repository on GitHub and start bilateral synchronization.
  6. Done! All changes to Lovable are now automatically injected into GitHub (main).

Check: go to https://github.com - there should be a new repository with your project.

Now you can edit the prompt code right in Cursor.

Step 4. Bringing a new design to your old website

Open your project in Cursor** Insert this prompt into the Cursor chat:

code 
I made a website design in loveable
Move all the new design and styles to the old site.
Keep all existing logic, articles, data, routing and functionality.
Replace only UI/UX, components and Tailwind classes.
Do it carefully, without losing functionality.
At the end, show a list of major changes.

Here is the design reference: https://github.com/ [Your Nickname] + [Repository Name]

Step 6. Final edits (short prompts)

Examples for Loveable or Codex:

  • Make the fonts bigger and airier
  • Remove the excess indentations, make the layout tighter
  • “Add smooth transitions between sections”
  • "Make the colors softer / saturated"
  • “Check the mobile version and fix everything that’s broken.”
  • Make the main button more visible

**Also in Codex you can insert screenshots and show exactly where and what to change, what does not converge, etc. **

After editing, just ask Codex to run the code - the changes will start in GitHub and the site design will be updated (if you did the site in the same way as it was written in the previous article).

Что читать дальше

$ cd ../ ← back to Interface and sites