How to Update the Design of Any Website With Only Prompts

Да, дизайн этого сайта сделан именно так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**

“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

“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:

“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:

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).