How does ChatGPT help with AI website creation? – My own experiences, tips

ai-val weboldalkészítés

When it comes to website development, it's almost a sin to ignore the possibilities of artificial intelligence these days. Lots of people talk about it, but few use it in a way that actually saves time, adds value, and even makes a profit. But I work with it every day - not just testing it, but also using it in live projects.

In this article, I'll show you how I use ChatGPT for website design, copywriting, and other creative tasks. You'll get specific prompts from me that I actually use. Not theory, not gibberish, but working, practical methods. If you have a website or are just starting out, these tips can save you a lot of time and money.

The three main phases of website creation – and where AI comes into play

Website creation can be divided into three main stages:

  1. Planning – when we figure out the goals, the structure of the page, the logic of the content.
  2. Execution – when it comes to design, development, and technical settings.
  3. Fine tuning – SEO, speed optimization, testing, analytics.

ChatGPT can help in every phase, but its strongest card comes in the planning and copywriting stages. That's where it can really add a lot.

Wireframe prompt – to quickly build a website structure

One of the most useful things I do with ChatGPT is generate a wireframe. This is not design, but a logical, well-thought-out structure of the page: what subpages should be, with what sections, in what order. I usually use the following prompt. Anyone can copy this, just fill in the [your answer] parts.

I would like to request a well-structured, Hungarian-language website wireframe from you. Please first help me build the site based on the following questions: 1. What type of website will it be? (e.g. introduction, sales, booking, blog, etc.) → [answer] 2. Who is the site aimed at? (e.g. individuals, companies, young people, seniors, etc.) → [answer] 3. What tone should the text have? (e.g. friendly, direct, professional, trust-building) → [answer] 4. What is the primary goal of the website? (e.g. sales, lead generation, brand building, blog readers, booking, etc.) → [answer] Important: - Please review the most important elements of a modern website wireframe. - Describe what subpages there should be (e.g. Home, About Us, Services, Contact, etc.) - Describe the necessary sections for each subpage (e.g. Hero section, offers, reviews, CTA, etc.) - Make sure that the text is spelled correctly, there are no unnecessary capital letters, and the structure is logical. **I will provide the following information, DO NOT guess it for me:** - What does the business do → [answer] - What services does it offer → [answer] - Is there a featured product or service worth building on → [answer] The goal is to get a clear, logical structure, which then only needs to be filled with text and design.

This prompt has become a staple for me. It's fast, precise, and leads to the questions you should ask the client.

Text prompt

In the next article I will show you the text writing prompt that I brought a lot of money – and if you learn to use it well, you can easily incorporate it into your everyday life. You don't have to be a professional copywriter, just know, how to ask questions well, and you'll already have content that sells. If you're interested, watch the next part!

Relume and Figma: if you also want a visual basis

THE Relume is an AI-powered website generation tool that lets you create wireframes, text, and complete designs. One of its best features is that it can be connected to Figma, so you can instantly get an editable visual design.

What's even better: Relume also works in Hungarian. For example, you type in "Miskolci locksmith" - and a complete page structure with text, subpages, and structure is created. This is a huge help for beginners, because a draft is created in practically minutes, which only needs to be refined.

I use it less often because I like to build consciously, but it's a really great tool for brainstorming, learning, and quick sketching.

CSS, animations, SEO – where ChatGPT adds value

CSS generation – if you don't know anything about CSS

ChatGPT is a great tool if you don't know how to code but want to add some cool stuff to your site. For example, you can type in "make a gradient animated title bar" and it will write the CSS for you. The best part is that it will explain what the code does afterwards, so you can learn from it.

This is especially good if you don't want to install plugins for every little thing. For example, I often ask for help with hover animations, transitions, sticky menus, or even light/dark mode. It usually takes 3-4 tries to get what I want – but if you're good at it, you might be able to get it right the first time.

What else is CSS good for with ChatGPT?

  • Sticky header (remains fixed at the top)
  • Clickable icon animation
  • Scrolling bars, transitions
  • Dark/light mode toggle with basic CSS

SEO – it can help you even when writing text

Search engine optimization doesn't just start with meta data. It's important to use good keywords even when writing text. For example, if you type this into ChatGPT:

“Write a text for the homepage of a painting company in Békéscsaba, the keyword is: painter Békéscsaba.”

This will give you text that naturally includes the specified term, but won't be forced or spammy. This is especially useful if you need to write subpages targeting multiple cities or services.

Midjourney, DALL·E, Freepik – images with artificial intelligence

  • Midjourney: an AI-based image generator that can be used via Discord. You write a prompt and it generates spectacular, artistic images.
  • SONG: OpenAI's image generator, which you can even use within ChatGPT, draws an image based on an image description.
  • Freepik AI: an image generation function is now available on the Freepik website, and you can request images in various styles (e.g. photo-like, illustration, icons).

ChatGPT helps you formulate prompts for these tools or describe the scene you want to see.

Meta title and description – when nothing comes to mind

The meta title and description are one of the most important SEO elements, yet they are often the hardest to figure out, especially if you create many similar pages.

ChatGPT helps with this too. You write a short description and it will throw in 5-10 meta title + description pairs. You can either choose from these or use them as inspiration – but you definitely won't be sitting there for half an hour.

If you don't want to bother with this...

...but you need a website, then feel free to write to me!

I help you plan, write, and put it all together – whether AI-based or completely customized.

Next part: text writing prompt that makes money. In the meantime: try the wireframe prompt and start playing with it!

en_GBEnglish