One day I quickly put together a landing page to introduce Lody’s features.

With AI, everyone can build cooler websites

Disclaimer: I’m not a professional designer. This is mainly to share an approach. Below is the practical process – hope it helps other non-designers. Written entirely by hand, no AI, many images ahead.

Time flies. Lody AI’s homepage is still the one I vibe-coded in half a day six months ago.

leon7hao@leon7hao·Jan 9 One day I quickly put together a landing page to introduce Lody’s features. Quote leon7hao@leon7hao·Jan 7 Lody needs a landing page. Any good prompts to get an agent to just whip up something nice?

9438 9.8K

Since Lody has already built the sync foundation and mobile apps, and is gradually moving toward multi-agent interaction and team collaboration workspaces, the old landing page no longer effectively conveys Lody’s capabilities and vision. So the next step is to start from the landing page, clarify priorities, and build a new brand identity.

Just finished the first page and can’t wait to share it – building in public every day.

leon7hao@leon7hao·Jun 30 Trying something new – how does it look?

523 1.4K

This redesign was entirely done with Codex and Claude – I didn’t write a single line of code, just pointed and critiqued. I really believe AI can handle all kinds of coding tasks and extend into work enabled by coding. The rest depends on how the infrastructure provides the AI environment and how people unleash AI’s potential.

Defining the Theme

Half of my X timeline is now design-related – you really need to see good work and accumulate aesthetic taste. Ultimately, combining Lody’s logo (a jellyfish) and Lody’s vibe coding as the main feature, I wanted to create a feeling of techiness, cyber underwater, serene but not scary.

I remembered seeing a 3D dot-matrix wave image somewhere before – it felt perfect as an underwater terrain, and the dot matrix fit the digital world well. I took that image to ChatGPT (Codex works the same) to discuss technical approaches: 3D models, Three.js procedural generation, shader generation. I’d seen a lot of shader effects like that before, and with AI, procedural generation like this wouldn’t be too hard. I decided to use shaders.

I told ChatGPT the basic requirements, and it generated a description and corresponding concept images – pretty close to what I imagined. If you’re not satisfied, copy the previous conversation and paste it into a new chat to “reroll”. I found that asking it to keep iterating only yields results similar to the first version, but gets worse.

Implementation and Fine-tuning

I directly sent ChatGPT’s instructions and generated images to Opus 4.8 (must use Opus, not GPT), with a bit of context about where it would be used.

Create a techy dot-matrix underwater dynamic background: use a point cloud height field to represent seabed canyons, semi-transparent jellyfish and a few corals for life, blue volumetric fog, Bloom, and floating particles to create an underwater atmosphere. The overall motion should be slow and restrained, suitable as a product website background. Implement using shaders or third-party libraries, completely replacing the existing landing page design. No backward compatibility needed, ignore any existing design or content. Push to GitHub when done.

The first version already had the vibe – Opus is amazing. I wonder if Fable 5 would be even better. But it was a bit bland, especially the jellyfish (just a semicircle with some dashed lines) and the terrain was too plain. So I gave some guidance.

For example, the jellyfish could be more detailed with more sample points. The terrain is still a bit flat – I’d like it to be higher on both sides and lower in the middle, like the seabed. Use lighting to make the terrain structure more obvious.

Humans Control the Floor

AI listens well – it made improvements exactly as I instructed. The jellyfish became more detailed, but the canyon looked terrible. Since everything is procedurally generated with shaders using different initial values, trigonometric functions, and random noise, I could expose all those parameters for manual tuning.

You can do better on the point cloud lighting version. The left and right height peaks are too rigid – almost right angles – they need to be curved. Also, the terrain currently has the same slope everywhere. You can randomly adjust the maximum height and slope at different distances to add variety. Remove the god rays. Expose all adjustable parameters with a button that, when clicked, shows all configurable sliders. Changes should take effect in real time so I can tweak them.

Now I had the feel I wanted. I tuned it myself. For areas the parameters couldn’t control, I had AI fine-tune the algorithm – for example, the valley bottom was too rigid; I wanted it rounded like a cosine function. After final tuning, I just copied the parameters to AI as the final preview.

Then there were many detail tasks – for example, the jellyfish tentacles sometimes extended beyond the bell, and the overall color was off. I wanted the jellyfish and terrain to sparkle. To make things bright, you need to add darkness. Continue fine-tuning.

Now the tentacles and the bell edge are almost the same width, which doesn’t look like a jellyfish. The tentacle edge should be slightly inside the bell, not as wide. Is there a light simulation at the top of the page? It makes the whole interface feel gray and not premium enough. Can you make the overall appearance darker?

After confirming the effect, I verified performance on both desktop and mobile. I had AI generate several rendering tiers based on point count, frame rate, etc., and choose configurations based on the device.

A Few Words

My consistent principle is: don’t let AI do the thinking or make subjective decisions for you. You can have AI search for technical solutions and analyze pros and cons, but don’t let AI write a plan and then blindly execute /goal. You can have AI help generate design drafts and optimize copy options, but you must know what you want. AI is an omniscient genius – it can create greatness from good prompts and garbage from bad ones. Its ceiling is high, but its floor is low. So the human’s role is to keep the floor high enough, and then enjoy the surprises when AI breaks through its own ceiling.