WAIT! Etch AI Can Do This Already???  About a month ago, our team started working on integrating AI into Etch. And we've been doing weekly releases making the experience incrementally better and better and better. But I have not done an official demonstration on what Etch AI is capable of until now. That's what I want to do for you today. And I want to talk a little bit about the philosophy behind Etch AI and why this is such a unique experience, an experience that you are not going to get in an IDE like cursor or uh in an experience like claude code or co-work uh and certainly not in any traditional page builder either. Etch is literally the best of both worlds in a true professional visual development environment. But before we get into all of that, let's go ahead and just see what Etch is capable of at the one month mark of getting AI into Etch. I'm going to go ahead and share my screen. Now, I found this reference site right here on Landbook, which is a great site for website design inspiration. And my goal today with this demo is to have Etch build this entire page. not just build the entire page, but build the entire page from a screenshot. And one of our philosophies with Etch is that you shouldn't have to be an expert prompt engineer to get a good output either. Okay? And so what I'm going to do is I'm going to take a screenshot and I'm not really going to provide any additional guidance or details as to how I want this page to be built. I want etch to be and this is why we call uh our our uh internal systems etch intelligence. We want it to build according to all of the standards that we want. We want it to use semantic HTML. We want it to use BM class naming conventions for proper class organization. We want it to nest CSS using modern techniques. We want it to be automatically responsive. We these are all the things that are obvious that we want that we shouldn't have to tell an AI to do. It should just know already and do those things every single time. We want essentially an anti-slop system. And so what I'm going to do here is I am going to grab a screenshot of this entire page. So I'm going to come down and I'm going to do a scrolling capture. I'm going to go ahead and draw a box where I want it to capture. I'll start the capture and I will autoscroll so that it just goes down the entire page and gives me one nice screenshot. Okay, so it's almost to the end of the page now. You you're going to notice on here there's a footer. There's some um there's some some FAQs that are actually expandable. I'm going to say that this is done and it's going to put it over here. I'm just going to copy that screenshot to my clipboard and I am going to go into Etch. Now we have the AI chat window. Remember that Etch is modular. So, I can actually drag this and put it on any side that I want. You can even put it in the bottom drawer if you prefer it in the bottom drawer. I'm going to have it over here in the left sidebar. You're also going to notice that we currently have two modes. We have an ask mode and we have a build mode. Of course, we want to be in the build mode because we are asking Etch to build something. And all I'm going to do is I'm going to paste in the screenshot. Just commandV on my keyboard. You can also drag a screenshot into here. Now, you can use normal prompts if you want, but prompting for this entire page, how would we actually even do that, right? Uh much easier to just grab a screenshot and paste it in. And keep in mind that this screenshot could come from Figma. It could come from the client. It it can come from anywhere, okay? Any any uh image can be the data source for your prompt. And I'm going to say, I want you to build this homepage for me. And that guys is literally the extent of the prompt that I'm going to give. I'm going to submit that and then we're going to talk about this process that it's going to go through and the process of inserting and how this process may evolve over time. But I also want to talk a little bit about our philosophy as we do this. We want Etch AI to essentially do as much or as little as you want it to. We want you to be in command of the AI and in command of your projects. This is not a system that is designed for vibe coding. This is a system that is designed for professional development. And so you are able to see the code output. As you can see right here, I am watching the code get written and I can verify that the code is semantically accurate, that it is clean, that it has the proper classes. uh I can verify all the things and you're going to notice that it doesn't actually auto add anything to the canvas. Uh what is required at least right now is for us to opt into using that code that was produced. So we're not littering our project with a bunch of nonsense. Of course we have an undo system and a redo system as well. So if something does get added that you want to undo, you can easily undo that so it's not committed to the database. Um, we also have a replacement system as we might be able to take a look at in this video as well. So, if something is already on the canvas, Etch can intelligently replace that markup and intelligently replace the CSS for specific areas of the website. And so, you see what's happening right now is that it is producing all of the markup and now it is producing all of the CSS. You can see here that it is in fact using BEM properly. Etch also has a BIM parser in the sense that when you are using BIM, Etch will use the class names, the block and element names to auto label your structure panel. This means that when I insert these things, the structure panel will be automatically organized and labeled for me as well. Okay, so I'm going to zoom in here and we'll see what the final response says. This gives you a full etch ready homepage structure matching the layout and feel of the reference header, hero, image, ribbon, blah blah blah blah blah. Okay, I assume a mostly static build and use placeholder image URLs so you can swap in your actual assets if you want. Next, I can convert this into smaller reusable etch components, wire sections to props or add loop manager content for testimonials, plans, and FAQs. Now in the future uh this will and I would say in the near future this will be able to create loops for you. It will be able to go into the loop manager and configure a loop. It will be able to go into uh our content hub and create a custom post type and custom fields. It will then loop through things like the testimonial cards for example. It will autogenerate those loops. It will be able to take the testimonial card and actually create a component out of it with props and map the props. It will be able to do all of these things for you in the near future. But let's take a look at what it is able to do right now. So, I'm going to scroll up and I'm going to find the markup. And obviously, there's a lot of work that was done here. Okay, this is a lot of code that is produced. And so, we're seeing exactly what we want. Uh everything looks clean. It looks according to and it's not going to be perfect. Um, but we're going to talk about my ability to easily go in unlike in uh claude code. A lot of times unlike in cursor with a vibe coding experience where you don't have a visual development environment, you can't click on and interact with things and easily edit them. Etch is going to have a tremendous advantage for when it comes to tweaking and cleaning things up that doesn't require reprompting and reprompting and reprompting and reprompting. So, I'm going to go up here and if we go to the beginning of our code block, we see that we have an insert button. I'll try to zoom in on this for you. We have an insert button. And so, all I'm going to do is I'm going to click that insert button. And all of that page is here. You can see everything is here in terms of markup, but there is no styling yet. So, the page doesn't look the way we want it to look. So, what I'm going to do is I'm going to scroll down to the CSS that it produced. Notice again, it's it's doing some intelligent things. It's using locally scoped variables. It's using nesting. Okay, it's nesting the hover styles. It's nesting the focus visible styles. When we train it on automatic CSS, for those of you who are using automatic CSS, it will use automatic CSS variables in all of these appropriate places. Okay, but for right now, what I'm going to do is I'm just going to accept things as they are, and I'm going to say insert the CSS. Now, this is not just going to insert some crazy global stylesheet or code block. This is actually going to parse this entire stylesheet and it's going to put the styles on each selector at the element level. So, I'm going to go ahead and hit insert and we're going to see here that we we actually have the page. And if I click on anything, if I click on hero, you're going to see that the styles are actually attached to the selectors for every single area. So, any element that I click on and again we see a organized structure panel. An organized structure panel. Uh, I can go in now and I can make adjustments to these things. I have the full mini guey to help me. Okay. Um, so I have access to the CSS. I can see all of the markup. I can adjust the markup. I can change the markup. If something got a little sloppy, I can go in and fix it. I don't have to reprompt and reprompt and reprompt. Now, let's scroll down here and let's just take a look at uh one of these sections. Like, for example, this uh this how it works section. Okay, so these are process cards and it looks like we were given step numbers. First of all, before we do this, let's just go take a look at this site on the front end. Okay, so this is the site on the front end. Um, you know, it's not a bad starting point at all. Is it perfect? No, it's not perfect. I mean, these things work. Um, it's it's not perfect. It's not perfect. Uh, I don't think any AI is perfect, and that's the point. And one of the questions is what is the game we want to play? do we want like mostly there and then I just make quick tweaks and adjustments and I save a tremendous amount of time uh because I have control over the codebase. I am in command of the project or do we want to play a game of reprompt reprompt reprompt reprompt reprompt repro trying to dial it in which is often a very frustrating experience. The advantage of etch is that I'm still in a visual development environment where I can literally click on things and make the adjustments that I want to make. I can still read the code. I can still decipher exactly what is going on because these things are done to my specific preferences as a developer. It's doing the things the way I would do them, the way I want them done, which is absolutely fantastic. But I want to give you a demo of replacement. Okay. What I can see here is that these are statically numbered cards. And so I don't want statically numbered cards. CSS has the ability to actually auto count cards. And so what we're going to try to do is I'm gonna I'm gonna say the how it works section. Okay, which is actually called steps in the structure panel. And it's been given the class of steps. So I'm going to go down to the AI here and I'm going to say in the steps section, the cards are statically numbered. I'd like these to use CSS to auto count them. Please provide the new markup for that section only and the revised CSS for that section only. All right. And then I'm going to go ahead and submit that and we'll see what it comes back with. By the way, um you know, you can see the I'm going to scroll all the way up here just to show you something real quick. Uh well, I can't I don't think I can scroll up while it's answering because it's trying to keep me at the bottom of the answer. But you can also see the etch reasoning now uh as as it's thinking. So you can see kind of what it's considering what it's thinking about. Um but if we look down here, it says this removes the hard-coded number element and uses a CSS counter on steps list with each step card generating its number via a before element. If you want, I can also make the numbers render as 0 1 0203 instead of plain integers. Uh I don't I don't need to worry about that. Uh the question is how are we going to get this new section in here and how do we make sure that the CSS all gets remapped properly? Well, very very simple. We now have a replace button because you can see etch has identified okay this section already exists. We don't want to insert another one. We want to replace the existing one. So I'm going to go ahead and hit the replace button. And then I'm going to come down here and just insert the CSS again. our processor, our parser for selectors is intelligent enough to handle collisions in the appropriate way. So I'm going to hit insert and we are going to hit save and then we are going to go to the front end. Now we're going to see cuz I don't see any numbers. We're going to see where is in fact the before pseudo element and I can even look at the code. Uh let's go ahead and see where it placed the pseudo element. So we have the steps. Okay, it should be on the step card itself has the counter and then we're looking at where is it actually using um Okay, no, it's just using a before on the card itself. So, let's go ahead and see. We're going to go into the article and this is the benefit. Okay, I see that. I see that I don't see a pseudo element on the card. I don't see a pseudo element being created. Um, and it looks like Okay, so let's go in step card. Did I hit insert here? Okay, I did hit insert. Maybe maybe it did not grab the before pseudo element. Um, it doesn't look like it did. So, let's go ahead and throw that in. Now, notice this is the benefit, guys. I, you know, as a knowledgeable user, uh, I can go I can I can see what's being produced and I can say, "Oh, okay. Something got left out. Let me just go ahead and paste that in real quick." And now you see I have the auto counting cards. In fact, if I were to duplicate a step card, it's going to say four. And if I duplicate it again, it's going to say five. Let's go ahead and duplicate again. It's going to say five. Again, I This is the best of both worlds. I have the kind of code experience. It's going to write the code for me. It's going to see I'm going to see the code. I can touch the code. I can tweak the code, but I also have a visual development environment. Sorry, my voice. I'm I'm getting over being sick. Um, you you can you can touch things on the canvas. You can see exactly what's attached to things on the canvas. You have the page builder experience, but you also have all of the professional stuff happening under the hood. Uh, and and you are able to interact with all of it. Let's go ahead and save and let's go back to the front end. Let's refresh and let's see what we've got. We've even got a sticky header. Obviously, we need to adjust the width of this item. So all of these can fit on one row. But as a starting point, guys, with doing hardly any work, I'm getting a very long way. Like I'm getting a lot of progress made. And more importantly, I am not in a scenario where I have to continuously reprompt and reprompt and reprompt and use a gazillion tokens. I can get to a very clean starting point, not a slop starting point, a very clean starting point. And then I am in command from there. If I want to reprompt for everything, I absolutely can. But if I don't want to reprompt for everything, if I want to dig in and I want to touch the code and I want to make the adjustments myself cuz I know, hey, that's an easy thing. I can just do it real quick. I can fix it up. I don't have to, you know, prompt five more times. I'm free to do that as well. Now, let's just keep in mind, okay, I I got to show you one last thing just to remind you. Some of you are maybe new here. You don't realize that Etch has an autoblock authoring feature where everything that we build is automatically authored in Gutenberg as well for the client editing experience. And so if I switch over to Gutenberg, I'm going to see the exact same thing here. And your client can easily come in and make changes to all of these areas, to all of this content. It's exactly one to one as you saw on the front end. This is Gutenberg now. This is the client editing experience. This is back in native WordPress. Etch authored all everything that was authored in ETH is automatically authored to custom blocks in Gutenberg. No other platform is able to do this. We have to understand what is happening here. Th this this is if if there is a future of WordPress, Etch is the future of WordPress. It has everything that you could possibly need. It has the fastest possible experience. It has an experience that is tailored to literal development practices. It's visual and it's code. You don't even need to touch the code if you don't want to. You can just stay strictly visual. It it it has the best of everything and none of the downsides. Uh this is where we're at. This is where we're at with things with Etch AI. Uh comment down below. Let us know what you think. Uh we're excited about this. We hope you guys are excited about this. If you haven't given ETH a shot yet, I would highly encourage you to uh get a license, dive in, start building some things in Etch. You are going to quickly see that Etch is in fact the future of WordPress and beyond WordPress as, WAIT! Etch AI Can Do This Already???, YouTube, 01knvpqfjqmfrwr0kdvq36h472.