Speaker A
In this lesson, I’ll show you clearly how work is conducted on a real project with real people, what tools I used in one case versus another, and how much time it all takes. And I will be telling you all about it. I’ll start
Learn how Dmitry Varfolomeyev builds client websites from brief to prototype using AI tools like Figma, CloudCode, and neural networks.
Key Takeaways
- AI tools significantly reduce website creation time from days to hours.
- Effective client communication and feedback loops are crucial for project success.
- Using AI for image selection and editing streamlines visual content management.
- Prototyping and design can be efficiently managed with Figma and CloudCode.
- Large team projects require patience and persistent follow-up for approvals.
What the video covers
- Dmitry demonstrates real project workflows with clients, including tool selection and time management.
- He starts with a swimming school website, showing briefing, prototyping in Figma, and design iterations.
- Transition from Tilda to CloudCode for website building is explained with client feedback.
- Use of AI to create reusable templates and rapidly generate new landing pages is highlighted.
- AI-assisted image management and generative expansion techniques are used to enhance visuals.
- Neural networks help restore and swap faces in images for perfect branding consistency.
- A second project, Virtu Digital, illustrates handling redesigns, repositioning, and team coordination.
- Prototype approval challenges with large teams and iterative design feedback processes are discussed.
- Dmitry shares insights on starting design with references and working directly in CloudCode.
- Future lessons will cover advanced AI integration and client collaboration benefits.
Chapters
- 00:00Introduction and Swim Swimming School Project Overview
- 01:38Design Iterations and Platform Choice: Tilda vs CloudCode
- 03:10AI-Assisted Page Creation and SEO Content Management
- 04:20Image Management and AI Generative Expansion Techniques
- 05:54Virtu Digital Project: Rebranding and Prototype Development
- 07:19Prototype Feedback and Design Process Challenges
- 08:30Direct Design Implementation in CloudCode and Visual Effects
Full Transcript — Download SRT & Markdown
Speaker A
with my very first interesting project: the Swim swimming school. A person came to me with a request: "I want to build a website." I replied, "That's fine, I'll do it for you." Okay, we hopped on a call, I briefed him, and after I
Speaker A
understood what I wanted to get from the AI and got the necessary results in terms of target audience analysis—doing it all manually—I even transferred everything into Figma by hand for this project. And I showed the prototype to the client in this format.
Speaker A
He looked at it and said, "Let's move this here, and let's change the wording to this." All of this happened through messages and correspondence in Telegram. Anyway, once he was satisfied with these three pages, I moved on to the
Speaker A
design. He explained the design he wanted: white, dark, white, dark—these kinds of transitions. They already had a logo and all their brand colors. So, I had to put it all into the right composition. I put it all
Speaker A
together in Figma in this format; naturally, since our site consists of a large number of landing pages, and all these pages have more or less identical blocks. Therefore, working on each new page became easier and easier for me.
Speaker A
Anyway, I finished one page, then the second, and we tweaked the design of the third one as well. He said, "Everything's okay, let's start building." At that time, I was still building on Tilda. I made it on Tilda, then
Speaker A
realized I wanted to test CloudCode. I tried doing it on CloudCode and realized that Tilda was done for me. I showed it to the client and compared them. He said, "Definitely CloudCode." That’s it, we now work with this
Speaker A
client using CloudCode. So, I finished the design, and he gave the green light. After that, your next steps are to use the skill I'll provide in the third lesson to transfer everything one-to-one from here directly into your
Speaker A
CloudCode blocks. What is the advantage when we maintain a site that was created using AI? See, since we have a large number of blocks here that, in principle, repeat from page to page, we tell Claude: look, save all these
Speaker A
blocks as templates, and later we will use them on new pages. And then you create new pages. Actually, I create new pages without even going into Figma. I just say, look, we are going to make a page now dedicated to such and
Speaker A
such a direction, for example, adult swimming. Adult swimming, or maybe some private sessions. And I explain that there should be such and such content here, and take the visual of this specific block. It inserts it. And, actually, creating an entire page takes
Speaker A
me, well, probably about two hours now. Whereas before, it took almost two working days. Okay, we’ve figured that out. And we also have a bunch of articles here, because I’m also promoting the client for SEO. And the site needs to be filled with images.
Speaker A
The client has a huge number of images. And this is a great case for using AI.
Speaker A
What did I do? The client has around fifteen hundred photos on Yandex Disk. Everything is organized into folders.
Speaker A
In general, it's not very convenient for me to search through and select all of this. What did I come up with? I downloaded everything and uploaded it all to Claude locally. Then I taught it to find the images I need. And now,
Speaker A
when I want to find an image and insert it into some block, I tell Claude: "Find me, make a selection of images that feature this, that, and the other."
Speaker A
Basically, that’s the format I use to ask it to find them. From fifteen hundred photos, it makes a selection like this for me. I tell it which ones I liked, say, the twelfth, the fifteenth, the seventh. It provides me
Speaker A
with the originals. And I upload the original right here. That is, you can do this in Webflow, in Wix, or anywhere else. The principles are the same everywhere. So, I have an image, but I want to add it to the main page so that
Speaker A
I have, well, a full-view pool, because in this case, everything gets cropped here. I ask it to perform a generative expansion using AI. It actually gives me something like this—yes, sometimes with some flaws, sometimes it's better, and sometimes the trainer looks
Speaker A
different. In short, I find the most successful generation out of these. After a certain number of generations, the coach's face changed. We need to restore the coach's original face. So, we use a neural network to swap the coach's face back to ours. And then we
Speaker A
combine it all, uh, with our original photo. After that, in Photoshop, we swap this unknown young man for our coach. And, essentially, we get the perfect aspect ratio, a perfect pool, a perfect coach, and a perfect student.
Speaker A
In short, everything is just right, as if it had been specially photographed and cropped for us. The next project we'll look at is Virtu Digital. The design is already done, which I haven't received feedback on yet because I
Speaker A
haven't sent it, but all the work stages leading up to the design have already been approved, and that's what I'll tell you about. A client came to me with this website on Tilda, made with standard blocks, but as you can
Speaker A
see, there isn't really anything here to evaluate. They are currently changing their entire positioning. They used to be Chrome Cloud, and now they will be Virtu Digital. They also want to create a landing page as part of their new service to attract investment
Speaker A
for all of this. Anyway, I'll tell you a bit more about that later. As for the site I have, we hopped on a call with the client; they initially just wanted a redesign, then it turned out they changed their positioning, and a whole
Speaker A
bunch of other stuff started piling up. So, one task after another, then a third task. Basically, I organized a group chat in Telegram, after which I established a clear objective for where we are heading. Everyone agreed with this objective. It was just kind of
Speaker A
floating around for them before. But because there are five people on the team, each of whom has to make a decision, I combined it all into one single proposal, and everyone agreed to it. Now I have to figure out what they
Speaker A
actually do, who their competitors are, understand their new positioning, analyze the target audience, and turn that into a full-fledged prototype.
Speaker A
Essentially, this is what came of it. A full-fledged prototype with comments. You’ve already seen many pages here about pricing, the company, and the platform they are planning. In general, I've broken it all down. They went in, took a look, and said to make a few
Speaker A
edits here and there. Actually, the edits were mostly just minor text tweaks or changing an arrow somewhere.
Speaker A
Well, those edits took me about 10 minutes. But getting this prototype approved took about a week and a half.
Speaker A
Simply because when you work with a big company, they have a ton of other tasks, and you just have to keep pestering them: "Please, give me some feedback, please, please." Because of this, the project implementation time drags on
Speaker A
for quite a long period. And, well, they are actually willing to pay big money for that. After I made all the edits to the prototype and they approved it, I started on the design.
Speaker A
And how should one start the design? I send them references. They tell me what they like and what they don't like. And after they gave the go-ahead, I understood what visual style they liked. You can move to Figma, or you can go
Speaker A
straight to CloudCode if you have a good eye for design and a clear understanding of what you want to implement. I had that understanding, so skipping Figma for the main screen, I started doing it right in CloudCode. I
Speaker A
put the composition together in literally 20-30 minutes, but then I started getting bogged down. I wasn't happy with the glow effect that was there. I was sending references, sending pictures. I couldn't manage to achieve the effect I wanted so that
Speaker A
everything would run smoothly just th
Speaker A
saw that cipher effect. I added the cipher from just a hover state. In short, I combined a bunch of effects into one using AI and achieved the result I had originally intended. But it took me quite a lot of time to find
Speaker A
the necessary sites that have a library of all these solutions, and a lot of time to adapt those solutions to my specific task. And in the end, we get this nice, simple little project. Well, "simple" for me now, since my eyes have
Speaker A
grown accustomed to it. But I spent a whole day on this screen and did the rest in one day. I just have to go through the other pages now. As you can see, in large projects, the main difficulty is communication with the
Speaker A
client. It takes a long time, and we mostly communicate once a week. I send them things, and they give me their feedback by the end of the week. Next week I implement those changes and move into a new cycle of work. The next
Speaker A
project we're talking about is Mir Gift , which consists of gift sets, corporate gift sets. A client came to me, and he already had his own generations that he made using ChatGPT.
Speaker A
He uploaded them to Google Drive and Yandex Disk and showed me what he wanted to get. Here. Here is the visual . Here is the visual. Here I am skipping the Figma stage entirely. Uh, such a design can be implemented
Speaker A
immediately using low-code and neural networks. So what did I do? That's right, bam, and I implemented it all. I just made it a little bit cleaner. Here is how it actually looks. More or less what he wanted. Here is this block.
Speaker A
Here is the block that he generated. I achieved correspondence, I achieved it. That's it, the client is thrilled with the design. But what were the nuances of the work here? There is a large number of sets that the client also
Speaker A
generated, but they were either cropped or in different styles. And it was very difficult to, well, generally combine them into a single background. And the hardest thing was that when we click on a set, it has to open in this format.
Speaker A
That is, a universal image and some description on the left and right side. I also moved the photo a little bit here so that everything would look good . And we need to have pages like this for every product, you see? And to
Speaker A
generate everything with a unified background, of one color, so that they were all on a table, and so that everything was centered—in general, to achieve this exact result, that is a fairly large and colossal amount of manual work. What had to be done for
Speaker A
this? First, not find, but create a prompt that would generate everything in the right proportions, in the right aspect ratio. Next, you need to use generative expand to widen the image that the neural network initially made so that we could easily put it on the
Speaker A
site, and then manually add our generated images to Photoshop and manually crop them so that each of our products, each of our gift sets, would have the right color, the right placement, and the right aspect ratio overall, so that nothing would overlap
Speaker A
anywhere. Like that. And if for the whole site, for the prototype, for the main design, that is, for about 90%of everything you see, I spent, well, literally about 2 days of work, then for generating and editing these images
Speaker A
—first generation, then reviewing everything, then saving, then adding to Photoshop. Everything had to be cropped correctly in Photoshop so it would all have a unified background, you know, just to get it right. I spent three working days on it. It was really
Speaker A
intense work; I didn't do practically anything else. And that's when I realized I’d undercharged for this project, but I guess experience comes with time. Now I understand how to handle more complex tasks and what pitfalls can arise, even in projects we
Speaker A
consider fully AI-generated. While creating this site, we had a call with the client. I told him about the additional things I know how to do. And that’s what gave him an idea for our further cooperation. We should make
Speaker A
sites for advent calendars. He will sell these advent calendars, and I will be the one to build them. He paid me more, and I created an MVP model for him. What does it actually look like?
Speaker A
Well, we have this, sort of, landing page for sales managers so they can hop on calls with clients and show them what we actually offer. You can look at it through the eyes of an employee who receives this link with gifts from the
Speaker A
company. They open it, let’s say via Telegram, and these little windows pop up. They enter a window, first there’s a personal greeting, then they see a sticker pack that they can add to their corporate Telegram or VK accounts. Then they get some merch,
Speaker A
they choose the sizes they need, enter their address, and arrange for delivery . The next step is a video background for Zoom calls; here’s how that looks . Then, they choose a promo code for Wildberries or Ozon, maybe some online
Speaker A
training, or corporate gift options. So they’ve picked something from somewhere. And it just goes on like that, step by step, all the way to the very last day, which features a 15,000 ruble cash bonus. And they just, boom,
Speaker A
receive that bonus right onto their card. Overall, it’s a big corporate project that’s worth quite a bit of money, and I needed to create a quick MVP model for him to present to clients . And for those clients, we will work
Speaker A
together to build it out fully, using their designs, their ideas, and their entire visual style, from A to Z.
Speaker A
He’s going to roll this out closer to New Year’s, but I’ve already earned money on this client for both the first and second sites. Specifically for these advent calendars. And the actual mechanics of creating these advent calendars are quite simple. So, we
Speaker A
hopped on a call, he described his idea to me and sent over some references. An hour after the call, I saved the entire dialogue, the transcript, and I pitched my own ideas and how I wanted to implement everything, how I envisioned
Speaker A
it all. Naturally, I sent him some references as well. He already had a prototype ready for me. And I applied this design to the finished prototype in just 3 days. So, literally, an MVP model was done in 5 days, and I made
Speaker A
another 45,000 rubles from that. Well, it wasn't exactly full-time intensive work. The next project is Resile. A long time ago, I built them a site on Tilda. See, it takes a long time to load. Anyway, it’s a standard online
Speaker A
store on Tilda, and they really struggled with it a lot. Even considering that it uses completely standard blocks. We got on a call with them, and they described the task and what they wanted to do. I, actually, began implementing the project. In
Speaker A
principle, there is nothing that complicated here. It was a complete redesign. You’ve already seen it in Figma. I sketched out what I wanted to see. First, I wanted to make a grid like this. First, I made a menu like
Speaker A
this. I tested one thing, then another. What else? I tried to do it all the way the competitors do. In short, I experimented first in Figma, then moved everything to my own server, watched how it all works, added some animations
Speaker A
and hooks, how things slide out, what animations are where, and how everything opens up in general. Well, in short, I designed and built all of that. Even though it’s a big project, the work itself is actually quite boring. Building online stores is easy.
Speaker A
But polishing them and bringing them to perfection is a rather tedious part, though, hey, they pay 250,000 rubles.
Speaker A
It will probably take me a little over a month. I’m far from working on it full-time. I do all my projects in parallel. I consider that, in principle , it’s decent compensation for the work. In the process of working, they
Speaker A
realized that I could implement some even cooler things, but I’ll talk about that in detail in the third lesson. And in general, what the consequences of working with me were for the clients, and what they eventually arrived at, and why I start
Speaker A
making decent money from them starting only from the second order, not the first. Also, I’ll explain the mechanics of working with a client for whom I did a presale. And it’s exactly what you will be doing as well.
Speaker A
A client reaches out and says, "Look, my landing pages aren't working like this." I seem to have made them, the traffic is flowing to them, but there are actually no inquiries coming from them at all. What should you be doing?
Speaker A
You need to have a good eye and an overall understanding of how a website works. Based on that, you dictate the necessary prompt. Meaning you've looked at it, and you should have formed your own opinion on why it isn't working.
Speaker A
That is, the relevance of the offer, the demand itself, how the text is written, what headers are used, the actual meaning in each block, and whether the page structure was done correctly. In short, you have some hypotheses, and you dictate those
Speaker A
hypotheses to the neural network. Next, you send the links to all the pages that were provided to you. And together with the prompt, the neural network starts working with all of this. Uh-huh . It analyzes, confirming what you
Speaker A
think or refuting it. And instead of searching for information in Yandex or Google, you are communicating with the neural network, trying to explain your hypotheses so it can confirm or disprove them. After this whole dialogue is over, you say, "Let's make
Speaker A
a prototype for this specific target audience." Meaning it has identified several target audiences. Made for this specific target audience, a prototype.
Speaker A
And this prototype should contain this specific information. It makes the prototype for you. This is the final version, which I corrected first. It made something, you looked at it and thought, "No, this is complete nonsense .""Let's redo the second and third
Speaker A
blocks, and convey completely different meanings." You give it edits first, and then it's done. In your opinion, it's basically an ideal version. You would spend—well, I spent around 40 minutes on all of this. You send the link to
Speaker A
the client. The client might agree or disagree with something. In my case, he wasn't entirely in agreement. We got on a call, and we met. He is also from Saransk, from my city. And that's it.
Speaker A
In the near future, say tomorrow or the day after, we have a final meeting to discuss the price. I can't say yet what amount I'll close him on. It will most likely be a monthly fee of 40,000.
Speaker A
We'll sign a one-year contract, covering both SEO and all these websites. So, I’ve explained the mechanics of how I work and what I do before heading into that final client meeting. I mean, it's possible they still might not sign the deal after
Speaker A
that. It’s not a hundred percent guaranteed, but it’s much easier and faster to show them what you want to do by building it, rather than trying to explain it all and having them not understand a damn thing. And then, once
Speaker A
you're there, maybe the price is an issue, and they'll say, "I've only got 10,000 a month for all of this." Well, that's fine, it doesn't matter, I'll just work with other clients, but you’ve grasped the working mechanics.
Speaker A
So, what’s the bottom line? Our way of working has shifted. While we used to get paid for complex technical solutions and generally charged by the hour, we can now take on much larger projects with more complex processes.
Speaker A
And overall, we can deliver products for our clients at a completely different level. Yes, the price for a simple, standard site like a landing page has definitely dropped. But now, to reach a decent payout, we just offer them a completely different scope of
Speaker A
work. Simply because it’s very difficult to realize all of a client’s ideas and requests within a single month. And if we immediately quote them a price of 300, 400, or 500,000 rubles, the client is much more likely to just walk away, because
Speaker A
committing that much money upfront is pretty tough. But spreading that cost out over a year makes it much easier for them to swallow. Plus, they get all their ideas brought to life, along with additional SEO promotion for their site
Speaker A
.
Topics:web designAI in web developmentFigmaCloudCodeTildaneural networkswebsite prototypingclient communicationimage generation AISEO promotion
