MakingnicepageswithOnepageAI

The way we generally work with Onepage AI can be formulated in a single sentence:

Focus on one part of the work at a time.

Here is one of the key takeaways of many thousand hours of working with LLMs in terms of pages : all of us are getting very similar results. Standing out with AI-generated pages is hard, because LLMs have a bias: a limited pool of knowledge about styles and layouts, pushing us toward available angles.

And there is nothing wrong with general styles unless you are trying to create something you really like.

So let's see what "general" prompt output from LLMs really looks like.

One of these styles an LLM will create for you if you ask it to make a "nice", "awesome", "polished" or any other adjective of "superior" quality page.

Many people think that by adding one of those adjective it will get an LLM to "think" in a more creative direction while in fact it actually narrows down the range of styles it can potentially produce (mostly to the 3 mentioned above)

They look cool, but in this article let's talk about how to push the LLM toward your own desired style.

I start with a visual reference.

Sometimes I find a page online.
Sometimes I generate a rough full-page concept with GPT Image.

The reference does not need to be perfect or high resolution. What matters is that it has a distinct look: the colors, the buttons, the frames, the shadows, the type of background, the feeling of the surfaces.

And it has to be something you weren't able to get out of AI easily with simple prompts.

Then I upload that reference into Onepage AI and ask it to do only one thing: recreate the visual style.

After the first result, I check only the style without worrying too much about whether the layout is good yet. I look at the materials, the buttons, frames, hover effects, and the general mood, and I'm trying to spot the weaknesses.

This step may take a few tries. That is normal. AI will not get it right on the first go, so 2–3 more prompts are required to get it right. The goal is to create one strong section, usually the hero, that becomes the style base for the rest of the page.

Once the style feels right, I switch to layout. This is a separate step. I ask the AI to keep the style and focus only on composition: spacing, alignment, density, hierarchy, and the position of elements.

This separation makes the process much easier to control. If I ask for better style and better layout at the same time, the AI may improve one thing and damage another.

When I separate the tasks, I can see exactly what changed. Because the models can actually "see" from screenshots, I may paste a screenshot or two pointing out examples of what it did wrong alongside the correction prompt.

After the first section works, I use it as the reference for the next sections. It's done now. You won't have to re-explain that much anymore as soon as the first section is built, because everything that follows will be "inspired" by the already existing sections.

If I have another screenshot with a layout I like, I may upload it too, but only for structure. I ask the AI to copy the composition from the new screenshot while taking the style from the section we already built. It can also be done without a screenshot at all.

This works well because the AI usually understands an existing coded section better than a screenshot. Once the style is already created in code, the model can reuse it more consistently. The page starts to feel like one design instead of a collection of separate AI outputs.

Now don't get me wrong. The way Onepage AI works is that whatever you do, it will always try to inherit an overall style of the page even without you prompting. But the prompt always works better.

I repeat this process section by section. First I fix the style if it drifts. Then I fix the layout. Then I move on. I usually leave animation until the end. It's easier to judge when the page already has a clear structure.

At this point I can ask the AI to think about the full sequence: what appears first, what moves next, which elements should stay calm, and where the page can have a stronger effect.

Sometimes I also ask the AI to suggest libraries or techniques. This is useful because I may not know all the best options myself. I can test one approach, roll it back if it does not work, and try another.

For later sections, I may ask the AI to reuse an animation style from a section that already works.

Instead of asking Onepage AI to make a full page in one step, I build a strong reference section first. Then I use it as the base for the rest of the page. Style first, layout second, section by section, and animation at the end.

It takes a little more time, but the result is easier to guide. The page looks more consistent, less generic, and closer to the original design direction.

Now, here's how my final result looks like, and as you can see it's pretty static, so let's turn it into something beautiful.

Everyone has seen those beautiful websites (especially showcased on Twitter) that are supposedly "made with AI". While it's true, it requires a ton of work and it's not as easy as many of those people claim. The key is always assets and libraries.

What is a library? Something Onepage AI can connect to your website with ready-made effects. There are libraries for many things (charts, background effects, general animators) and you'll always win big if you can tell the AI to connect a certain library, or ASK the AI which library it can use.

Let's do exactly that.

With overall effects, there's no cheatsheet aside from this: you have to be able to explain desired effects with human knowledge after the libraries are picked. I went for the "layered" and "parallax" effects and started applying an "orchestrated sequence" for the hero section.