Full transcript of Building Websites with Kimi K3. Source: https://x.com/viktoroddy/status/2078140696910037002
Transcribed from the 13-minute video tutorial by Viktor Oddy, July 2026.
In this video you will learn how you can create animated websites just like this using a new model that just came out which is Kimi K3. I’ll share with you all of the techniques to build websites that have different e-commerce sections, even websites that have hover mouse reveal effects and different dashboards, apps — everything can be built inside of AI now.
Without further do, let’s get into the first step: looking for some inspirations that we’re going to be using on our website. For that I’m going to go to Pinterest. If you click on one image you’ll have access to a lot more that is in the same style that you can then select. I’m going to type something like “3D relief” and I’ll have a lot of beautiful images that I can start working with. I already found one which is this one.
Now let’s just drag into any AI image generator. You can use ChatGPT directly. I’m going to use it inside of Figma because I have my subscription and this gives me access to the AI feature here. I’m just going to click on “edit with prompt” and I’m going to say “create an image exactly like this but with a metallic texture.” Make sure GPT-4o is selected as the best image model. Just like this we have two similar images that are slightly different but the reveal hover effect would work very smoothly here. You can do a lot more changes, I just wanted to keep it similar.
Now that we have two distinct images, there is a simple prompt for creating this mask grail effect. The first part of this prompt are the links to your projects (or local files) and the second part of the prompt is how the reveal effect works. Just screenshot it. Upload both of these images to the prompt. Let’s go to Kimi.
Before pasting a prompt, make sure Kimi K3 is selected. There are a few ways to get a good UI. First you can go to Dribbble or Landbook and look for some fonts inspirations that you like. The only thing is if you just take a screenshot and send something that you like to the AI, it cannot recreate it exactly because it doesn’t have access to the fonts, the colors, the animations and stuff like that. So either you can do this, or what I’m going to do is go to motion.design and find a UI element that you like. I like this font, this position of the elements. All I have to do is just copy the prompt.
I’m going to open Kimi, paste the prompt here, and say “build this.” Just like that we have this full landing page that was built in a couple of minutes that I now can start editing with the two images that we’ve got. Let’s open them up and straight up upload them to Kimi AI. Drag the image that you want to have here and say “replace the video in the background with this static image and also turn the content into a dark mode so the text is dark color so it’s readable well.”
This is what we got - we have this beautiful liquid glass, this nice background, and then this video which we’re going to update now. Let’s add the reveal hover effect. Go to the prompt, just copy the reveal prompt and paste it into Kimi. “In this section, let’s have a mouse hover reveal effect.” This is the result — once we hover we have this beautiful reveal effect.
Now let’s actually build the same image in the style of our image. Get this image from here, open the inspect tool, copy the image. Inside Figma, use “edit with prompt” — “create the same image but in the style of this light kind of option.” Right click, copy as SVG, paste into Kimi. “On the bottom right hand side we have the image, let’s replace that with this image.” Now we have this image that fits the style very well and the hover reveal effect works.
For the second section I wanted to have a video. Take a frame of this video, copy this image, paste into ChatGPT, use “edit with prompt” again. “Paste this image and create me an image like this but in the style of the second image.” Here is the result — it looks perfect in our styles. Now export this, go to a website like cleanai.com to animate this, just type a simple prompt: “animate this image.” This is the result that you will receive. Upload it to our website to the second section. The video is very light, just 10 megabytes, so on most internet speeds it’s going to load very fast. I’m going to use a link instead so it’s much faster. “Replace the video in the second section to be this and also turn all of the content text into dark color.”
Now we have this beautiful video in the background with the text on dark colors.
Once you have one or two sections you can build dozens of more sections and different pages by following the same techniques that are already established. In the nav bar we have services, pricing, and download. Let’s create pages for them. For services: a small hero section, three services one under each other, and a small footer. For pricing: straightforward pricing page using the same techniques, styles, fonts, positioning we already established — the liquid glass. For download: build a download page, don’t generate any images, reuse existing images, keep it simple on a white background.
These are the results. First page is services with animated sections, beautiful services, hero section and footer. It just takes a little bit of time to customize the images. Create five icons, remove the background, upload them as overlay images. Take a screenshot and ask AI to put it somewhere. You’ll have this beautiful interactive website. Then ask AI to add a parallax effect. Just like that you have a website that is very unique.
The whole process would not take you longer than a few hours.
Now let’s actually create a platform or a dashboard. Kimi K3 is not just for creating websites but also apps. Create a new chat: “build me an app for a DJ-friendly to-do list, very simple white background, everything should be on a light theme, no gradients, just white background, just display the content.” This is the result — everything is working.
If you want to make it more beautiful and you’re not a designer, go to motion.design and click on the apps tab. You can select among any different designs. For example I like this one, copy the full prompt, go back to Kimi. “I’m going to send you a prompt that describes a different application. Ignore that, keep the structure of the app we already created (the DJ planner). Do not change the text, do not change the position of elements, do not change anything that we already created. Just take the design style from the prompt — the colors, the fonts, the styles — and apply to our design.”
Just like that, with a simple prompt, we have this beautiful dashboard that you can run to production. It has this beautiful video in the background, nicely designed sections, a really cool sidebar, this island-style search. Everything is mobile responsive — AI builds everything by default mobile responsive.
Hopefully you’ve learned a thing or two and will implement some of these techniques.