258 | How I Built an AI Website + Editor from Scratch with Claude & Replit (And Zero Developers)

0:00Hello and welcome to the Leveraging AI podcast, the podcast that shares practical ethical ways to leverage AI, improve efficiency, grow your business, grow your business, and advance your career. This is Isar, made this your host. And today I'm going to walk you through the process on how I go from having an idea in my head to a fully functioning working product with all the steps in between. It will involve using AI for research. It will involve using AI for ideation. It will involve using AI for visual decision making, prototyping, as well as vibe coding an actual solution in the end. And we're going to do all of that in just a matter of about 30 minutes.

0:38So it's going to be really exciting if you want to build any kind of solution and you have ideas on what you want to get, but you're not sure exactly how to get there. This would be a perfect episode for you. So let's get started. In the next few years, AI technology will change our world dramatically. Whether you are a business executive trying to catapult your business forward, or just somebody who refuses to be left behind and want to advance your career, this is the show for you. I'm your host Isar Maitis, a serial entrepreneur and an AI enthusiast. You'll hear invaluable practical tips from innovative business leaders, AI practitioners, and some of the brightest AI minds in our world today on how you can leverage AI in ethical ways to advance your career and grow your business.

1:35This episode is brought to you by the AI Business Transformation Course. Since we are in the beginning of 2026, I want to start with a New Year's resolution for each and every one of you. If you have not yet taken critical steps to make sure that you and or your company or team are ready for using AI effectively, this is the right time to do this. Consider this your New Year's resolution, either a personal resolution or a company-wide resolution. we are a week and a half away from the launch of the coming cohort of the AI Business Transformation course. It is starting on January 20th, and we still have some open seats.

2:20The next course will probably be a quarter after that. So you do not want to miss this opportunity to jumpstart 2026 and to create a very solid baseline to your AI knowledge in a business context. I have been teaching this course since April of 2023. So it's going to be three years in just a few months. And I have obviously updated it numerous times, but it is most likely the best course out there when it comes to providing solid baseline for business people on how to effectively implement AI, how to change your mindsets, what things you need to change in your company, in your business, in the way you approach data analysis, content creation, and so on, providing solid baseline for growth.

3:09So if you haven't taken any such steps, if you didn't take serious courses, and even if you have, but there were more general high-level courses and you want to learn practical knowledge with AI, come join us. You can use promo code LeveragingAI100, all uppercase, in order to get$100 off the price of the course just for being listeners of this podcast. I would love to see you within a week and a half from now in the course. The course is four weeks, two hours per week. All the details and the way to sign up are in the link in the show notes. So you can open your phone right now, click on the link and go and sign up and join us for this amazing opportunity.

3:50In addition, if you are running a company or a department and you're looking for custom training for your team, just reach out to me on LinkedIn or on my email. Again, it is available on the show notes. And I can share with you what I have been doing with multiple companies, large and small, from the largest enterprises in the world to small startups and everything in between to get them ready and accelerate their AI adoption. A little bit of background. I have a second company other than Multiply. So Multiply is the company in which I provide AI education and consulting services. And the other company is called Databreeze.

4:25And what Databreeze does is a product that was under stealth until very recently. but it is just released and available now for companies. And it uses AI agents in order to do AI vouching and reconciliation at scale in a very effective way, taking the times it takes to do AI vouching and reconciliation from multiple people every single day to one person can manage a very large amount of invoices and do this a lot quicker while still giving full visibility to the human on what's actually happening and what are the changes that are going to be inputted into the accounting system or ERP, depending on the setup of the company.

5:02So that's a general idea. But as I mentioned, the company is now moving out of stealth to actual client deployment, and hence I needed a website. And previously, when I needed a website, I usually either went myself on a platform like Wix or like Elementor on WordPress and created a website myself. Or if I wanted something that looks a an offense here, I would hire somebody off of Upwork or Fiverr to develop the website for me. Either way, I would invest a lot of time and X number of thousands of dollars in the creation of it if I'm counting the value of my own time or if I'm paying for somebody else to do this.

5:37But this time I said, okay, no more. I'm in the AI business. I can do this myself. I'm not going to use any third party platform and I'm not going to pay anybody. I'm going to figure this out myself, just me and different AI tools. And let's see how far I can push it from the ideas that I have in my head into a working website. Now, while the example I'm going to give you is about a website, the same thing would be true to any other application you want to develop. So in general, you need four steps in order to go from the beginning to the end of that. The first step is research, right? You need to do research.

6:10And we're not going to dive into that because hopefully most of you by now know how to do deep research. If not, go back and check. If you want to learn more about deep research, go back to episode 171 titled The Ultimate Battle of Deep Research, ChatGPT versus Gemini versus Perplexity versus Grok versus You.com. And you can learn more about the deep research side. But if you use it for deep research, you can learn about your target audience. You can learn about your competition. You can learn about many other aspects that you need to know about before developing a solution. If you're doing something internal for just your own personal or company usage, then competition is less relevant, but still you want to know what it needs to connect to, what kind of APIs exist, what other tools, MCPs, all these kind of things.

6:50You can do all of that with deep research. So that is step number one. Step number two is defining the actual requirements of the product. So doing a product design phase. All AI tools, regardless of which one you're going to use, are most likely better than you in writing a product requirements document or a PRD for short. and all you got to do is explain to it what you want to create, ask it to help you through the process, ask it to ask you clarifying questions, and then have it write an initial PRD, and then go back and forth several times to start the implementation. So that's step two. Step three is creating a prototype inside of your favorite AI tool.

7:30This could be in ChatGPT, this could be in Cloud, this could be in Gemini, it doesn't matter, and ask it to create it specifically for its own canvas solution. So if it is in Chachypt, it's actually called canvas and the same thing in Gemini. But if you are in claw, then it's called an artifact. The benefit of creating a canvas or an artifact is the fact that it is fast and quick and runs within the system you already have access to right now. The disadvantage, the biggest disadvantage is that it doesn't have a back end. The other big disadvantage is that there's no rollback capabilities. So if you break something, you have to unbreak it or fix it and you can roll back to the previous version that was actually working okay that you do get if you go to step four, which is using some kind of a vibe coding solution, whether cursor or replit or lovable or base 44 or whichever tool you prefer in order to create vibe coding in.

8:19What we're going to cover in this episode is steps three and four. So after I have done the research and the design, and I'm now in the step of, I want to start implementing the actual solution. And how do I do that? Now in this particular case, because it was a website and not a fully functioning working application, the product requirements document was not actually needed, meaning I just went ahead and started with several ideas that I had. In the research, one of the things I was looking for is cool, unique, different websites. So because my platform goes into the accounting software space, which is maybe the most boring topic you can think about, I wanted the website to be very different, cool, and unique and do not look like any other website out there, definitely not like any other accounting software platform out there.

9:06And hence, one of the things I was looking for in the research is specific, unique websites that have cool transitions and look interesting to my taste. And so this is how I started when I started using Claude. The reason I went with Claude and not with ChatGPT or Gemini is that I find that Claude better understands my needs when it comes to design. And hence why I went with Claude as my initial starting point. And I must admit that I'm actually very happy with it. So I'll probably, as of right now, would recommend to use Claude if you're creating something inside of a standard AI platform and you're looking for high-end solution when it comes to the graphic interface of the thing that you're developing.

9:47So for the prototyping phase. So really, all I did in the first prompt was very basic. I opened a regular chat in Claude and I said, these websites have some amazing transitions and unique graphics. and I gave it links to several of the websites. And I said, would you be able to create a website based on my colors and my messaging, but using these kinds of transitions? If needed, I can provide you with a video of the transitions and scrolling. And some of the cool things in these websites were that they have very unique scrolling where some of the transitions happened when you were scrolling that were not just regular vertical scrolling as we're used to from most websites.

10:26And the answer from the AI was, I'd love to help you create a website with these stunning transitions. Let me first take a look at the designs of these websites to understand the specific effects you are drawn to and also pull up your Multiply AI brand guidelines. We talked about this in previous episodes, but inside of Claude, I have a Claude brand guidelines skill, which it knows how to pull from. And those of you who are watching the screen can see that it says, I found your Multiply AI brand guidelines, which look great. And it gave me the colors and the fonts, et cetera. But then it said it had an imitation with looking at the website.

11:00It can see the website, but it cannot see the transitions because it wasn't able to scroll. So it said, yes, a video would be incredibly helpful. That way I can see exactly which effects you love, et cetera. And so it also asked me what the website is for, what sections or pages are needed, and what key messages do I want to communicate. So then I uploaded a video of the different websites and how they work. And then I also uploaded the different versions of the logo that I have for Databreeze, which was the only design elements that I had. And I wrote the following prompt. This will not be for Multiply, but for another brand.

11:37The brand is called Databreeze. I do not have a full branding kit for it. All I have is the logo. I would like you to suggest the entire color palette and design the brand guidelines based on the style of the logo. This is a tech company that is supposed to dramatically reduce the amount of time people invest in data entry. The branding should reflect freshness, advanced technology, speed, and innovation while maintaining simplicity and calmness. Also attached is the video that hopefully will allow you to analyze and to see the transitions and how they work. It got back and said, excellent, this is for Databreeze.

12:15Love the logos. The following wave icon is perfect for conveying breeze through data entry. Let me analyze the video and extract colors from your logo and build a complete brand guidelines. So then he wrote a few more things and then it actually came out with the actual colors in my logo and suggested what the website should break out and look like as far as the breakdown and provided me with two different outputs. One is brand guidelines, and the other is a working prototype or the website. It also asked me what are the key messages or the sections that I want and the messages in each section.

12:53Do I have a specific tagline or copy ready? And what is the primary call to action? And I give it all of that information in detail. And then it created me two different outputs. One of them was the brand guidelines, which those of you are watching will be able to see in a minute. It has a full document that says database brand guidelines, brand overview, brand attributes, fresh and clean, technology advanced, fast and efficient, and so on. The color palette, the secondary colors, where do they belong? What is the typography? H1, H2, H3, body, small captions, fallback font, the leading font, all the things that you need in a brand guidelines.

13:33So this is a five-page document of my brand guidelines. And it also created an initial version of the website that you can see right now. And this website basically says Databreeze on top, get in touch as the action item. And it has the tagline that I provided to it that says zero human error, zero data entry, zero time wasted, precision vouching powered by AI agents. Now the website is currently roughly static. There's a few basic transitions that come in and it looks more like a basic kids gaming platform than anything else. Definitely not the techie advanced website that I wanted to create.

14:08Then I wrote, I would like you to review the video again and specifically look at the transitions. If you have any way to look at the code behind the websites, or if you can walk me through how to get that information, I will try to do that. The website includes some horizontal scrolling for a section of a website, plus some really unique transitions and shifting of images as the user. So now it went to do some more research and it looked at the video again, and then it identified the different kind of transitions that happen. It says, stroll triggered by horizontal gallery, split screen color wipe, 3D floating mockups, scroll pinned sections, staggered text reveal, animated underlines, large text footer parallax.

14:51So now it had the things it needed to develop, and it went ahead and said, want me to build version 2 with all these components? And I said, please build version 2 as far as the images that are being used. You can use any placeholders. And once I see the second version, I can provide you with the relevant real images to put instead of these placeholders. So then it created version two of the website. And again, those of you who are watching the video can see that in this segment, now there's actual really cool transitions. So you get to a section where there are images that are in different angles and in different sizes, and they actually scroll horizontally as you get to that section.

15:30And only when the section is over, it continues scrolling vertically. And then there's a few other small movements in other sections, but at least it captured the horizontal scrolling section that I requested. It also created the placeholders for the images that exist in that section and in every other section in the area. And it actually gave them names. So one of them says analytics dashboard, ERP integration, AI agent workflow, invoice processing, et cetera. So this way I can see how the website will work and gives me an idea of what images will go where, but without actually having to figure out what the images will be.

16:02Then I ask it to make additional transitions that existed in the websites that I gave it and went back and forth several times until it provided me the next version. So in the next version, the vertical scrolling looks much better. The website looks a lot more professional and less like a game. There are additional zoom transitions and some other movements as I'm scrolling the website. So it's coming together slowly but surely. But then I had another issue. It added these orange and beige colors that I did not like into the overall palette that it made up in the beginning. And this goes back to doing another research.

16:40So I wrote, this is much better, but before we're diving into more details, I would like to work on the big picture. I would like you to do some research on color palettes that will be relevant and work well with the two colors that exist in the logo right now. the lime green and the dark navy blue. I would like you to make several suggestions based on a thorough online research on what would be a good what would be good color palettes. Go back to what I mentioned earlier as what I want the feeling to be when people scroll through the website. As an example I think that a light background like gray or off-white will actually work better than the dark background for the goal that I'm trying to create.

17:20What I would like you to create is boards one above the other, each with a different color palette, creating code so I can see it in one screen, one above the other, and compare it. So then it created something actually really, really cool. It took the original two colors that I had in my logo, and it says your logo colors, and it said fresh, clean, technology advanced, fast, efficient, innovative, simple, and calm, trustworthy, and professional. These are the target brand feelings that I requested in the beginning, and then it gave me several different options. Option one was called clean minimal and has several different colors.

17:52But in addition to just giving me the color swatch, it also created like a very basic homepage that has my tagline and a button and the logo and a few other basic elements showing me how this color palette will actually look if we implement a basic version of the website. And then the second version was warm and sophisticated with a slightly different color palette. The third one was cool tech that added this light blue and a different shade of gray to it and so on and so forth, each and every one of them showing me both the color palette as well as how it is going to look like in the homepage implementation, which was very helpful.

18:31This was a really great way for me to understand how a color palette will look like in an actual website, and I thought that three of them actually look pretty good, and I couldn't really decide just based on the limited simple homepage that it created, so I went ahead and asked the following, Great work. There are three that I like in concept. The Clean Minimal ,Cool Tech, and Pure White Minimal. These are the names that it gave to these colors. I would like you to create three different versions of the website that you created earlier using one of these three color palettes, name them accordingly.

19:06So I would like you to create three different versions of the website that you created earlier using one of these three color palettes, name them accordingly so I know which artifact is which style. So Artifact is the way that Claude shows you on the right side the output of what it has created. And I asked for three different versions. Or I continued and said the other option, if you think it is going to be easier for you, you can create one version of the website with a drop-down menu on top that will allow me to pick one of the three options. When I pick that option, it will change the colors of everything in the website.

19:43This means that the actual colors of everything in the website needs to be parameters and dynamically be applied when I select from the drop-down menu. This will allow me to understand how it's actually going to look if we develop the website. So it suggested going with the drop-down menu, which is actually really cool. So if I show you the website, those of you who are watching this, you can see that the website looks roughly like it did before with the same transitions and so on. But there's a drop-down menu on top that said theme, and it has three different options. So if I scroll to a section that has more stuff in it and I switch, you can see that the colors of multiple components are changing.

20:20The images, the backgrounds, the transitions, the buttons, everything changes based on the style that I select. This was, again, an amazing unlock based on a very short, simple prompt, allowing me to really see the differences in design between the three different options. That allowed me to pick the option that I liked. And from there, I just kept going and going and adding more and more features and more transitions to the website based on the one version, based on the one color palette that now I selected as my brand. And so then every one of the components, different transitions, different zoom effects, different changes between one segment and the other.

20:55And again, those of you who are watching can see that the website now has a lot more features and it actually is scrolling very, very cool as you move forward. So this was my prototype. I got to a very good point as far as how the transitions, what are going to be the different segments, what are going to be the messaging in each one. But then I thought about a problem from a practical implementation perspective. Every time I want to make even a small change to this website, such as changing the text or changing the image or moving stuff around or changing the size of an image, I had to write a detailed prompt explaining exactly what I want to change.

21:32when in reality, I just want to change two words in a sentence, but there's no way for me to actually edit what is on the screen because it's just rendering the HTML. This was the point that I needed something more. I needed an actual platform that will allow me to add more functionality. I also needed the ability to now control the versions better because I keep on changing more and more stuff, and then things break, and then it becomes harder and harder to fix. So at that point in time, I went to my favorite Vibe coding platform, which is Repli. So two words about what is Replit and what are Vibe Coding tools.

22:06There is now a pretty wide range of Vibe Coding tools, but I would say the top three or four are Cursor, which is more for technical people and people actually write code, but still has Vibe Coding functionality. There is Replit, which I believe is the best balance between more technical, more advanced capabilities combined with simple, easy-to-use agents that can do everything for you if you know nothing about writing code and structurate and so on. But you also have tools like Lavable and Base44, which each has its own pros and cons. But all these tools work roughly the same. You start by giving it your design and ideas and what you want to create and give it some additional information and give it as much information as possible on the way you want the outcome to look.

22:52And it will create it for you and you can there. So the first step in this case was literally giving it the code from Claude. So if you are in Claude and you see the website on the right in the artifact, which is, again, just the display of the regular Claude that everybody has access to, there's a little toggle button on top. One option looks like an eye that shows you the actual website. But if I click on the other option, it will actually show me the HTML code that it has created to create this website. And there's a copy button. So I copied the code and gave that to Replit and asked it to continue from there.

23:25What I asked it to do is to do two things. One is to create the website in a way that will be easy for it to deploy. But the other is to create an editor for me that will allow me to select different components on the screen and edit them. So if I select an image, allow me to edit the image. If I select text, allow me to edit the text. Now, again, those of you who are watching this episode, and there is a link to the YouTube episode. If you are not driving, you can see it right now. I suggest you do that. You'll be able to see that the website here looks way more advanced because this is probably version 57 or whatever versus version 4 that you've seen previously, but you can see a lot more advanced functions and capabilities.

24:05You will see that the transitions are a lot more professional. You will see that there's actual images instead of placeholders. The messaging are there. The colors of the buttons and the logos are changing as the background is changing. It's a really cool and unique website that only transitions as I scroll. So those of you, again, are watching it and seeing things are happening, they're happening when I'm scrolling the screen. And if not, it just staying still. So I really like the way it came out. But the cool thing is you will see that if I put my mouse around anything, it actually puts a highlight around that component.

24:36So if it's an image, it puts a green box around the image. If it's a text, the same thing. And if I click on that, it actually opens a menu on the right side, a very similar menu to what you would have in Wix or Elementor or any other website editing platform. So you can see I can change the text. I can change the link if I want to put a link in the text. I can make it the style of a hyperlink or not. I can change the font family, what type of font, what font size, what's the line spacing, what's the letter spacing, which colors I want to use either out of my palette of the website, or I can pick any other color that I want.

25:12Then I can select either by code or by dragging along a color palette, just like in any other editor. I can control the alignment. I can control the layout, the width, and many other aspects as far as padding and so on, just like a professional editor. This is not the first version of this. So in the first version, I had very basic functionality, such as changing the text and changing the style and the color of the font. And then the other components I added as I needed more capabilities. Another good example of something I didn't think of in the beginning, but then it became very clear as I continued to developing it, is that I need three different variations.