WAIT! Etch AI Can Do This Already - CourtneyR.dev's 2nd Brain

WAIT! Etch AI Can Do This Already??? ![rw-book-cover](https://img.youtube.com/vi/HWPi7BRDZQs/maxresdefault.jpg) 🔗 **Source:** [WAIT! Etch AI Can Do This Already???](https://www.youtube.com/watch?v=HWPi7BRDZQs) > [!note]+ Document Notes > tags: #etch-ai #visual-development #wordpress #page-builder #ai-coding #web-development > author: Kevin Geary > source: YouTube > reference: https://www.youtube.com/watch?v=HWPi7BRDZQs > date created: 2024-12-28 09:30 > > # 🏷️ Title: WAIT! Etch AI Can Do This Already??? - Complete Visual AI Development Demo >  ## 🧰 Action Inbox - [H1] Test Etch AI screenshot-to-code functionality with complex designs — evaluate output quality #etch-ai - [H2] Compare Etch AI approach vs Cursor/Claude for professional development workflows — analyze replacement vs re-prompting #ai-coding - [H3] Explore Etch's Gutenberg auto-authoring feature for client handoff workflows — test block generation #wordpress ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Etch Visual Development](https://etchcss.com) - [Landbook Design Inspiration](https://landbook.com) ## 📝 Summary Kevin Geary demonstrates Etch AI's capabilities after one month of development, showcasing how it can build complete web pages from screenshots using semantic HTML, BEM naming conventions, and modern CSS. The tool positions itself as an "anti-slop" system that produces clean, professional code while maintaining visual development environment benefits. Key differentiators include intelligent code parsing, selective insertion/replacement, and automatic Gutenberg block authoring for WordPress integration. ## 📖 Main Content Etch AI represents a hybrid approach to AI-assisted web development, combining visual page building with professional coding standards. Unlike traditional AI coding tools that rely heavily on re-prompting, Etch emphasizes developer control through visual manipulation of generated code. The system automatically applies semantic HTML structure, BEM CSS methodology, responsive design principles, and modern CSS nesting without requiring detailed prompting. The demonstration shows building a complex homepage from a single screenshot with minimal prompting, highlighting the tool's ability to parse, organize, and insert code selectively. The replacement functionality allows targeted updates to specific sections without rebuilding entire pages. Integration with WordPress through automatic Gutenberg block creation provides seamless client handoff capabilities. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/HWPi7BRDZQs?t=0) — [H1] Etch AI Integration Overview - Key idea: One month of weekly releases improving AI integration incrementally - Evidence: "We've been doing weekly releases making the experience incrementally better and better" #### ⏱️ [02:30](https://youtu.be/HWPi7BRDZQs?t=150) — [H2] Anti-Slop Philosophy - Key idea: Etch Intelligence should follow professional standards without explicit prompting - Evidence: "We want essentially an anti-slop system. We want it to use semantic HTML, BEM class naming conventions" #### ⏱️ [04:15](https://youtu.be/HWPi7BRDZQs?t=255) — [H3] Screenshot-to-Code Workflow - Key idea: Single screenshot input with minimal prompting produces complete page structure - Evidence: "I want you to build this homepage for me. That guys is literally the extent of the prompt" #### ⏱️ [06:45](https://youtu.be/HWPi7BRDZQs?t=405) — [H2] Professional Development Focus - Key idea: Code visibility and verification rather than "vibe coding" approach - Evidence: "This is not a system that is designed for vibe coding. This is a system that is designed for professional development" #### ⏱️ [08:20](https://youtu.be/HWPi7BRDZQs?t=500) — [H1] BEM Parser and Auto-Labeling - Key idea: Automatic structure panel organization using BEM methodology - Evidence: "Etch will use the class names, the block and element names to auto label your structure panel" #### ⏱️ [12:30](https://youtu.be/HWPi7BRDZQs?t=750) — [H2] Code Insertion and Parsing - Key idea: Selective insertion of markup and CSS with intelligent parsing - Evidence: "This is actually going to parse this entire stylesheet and put the styles on each selector at the element level" #### ⏱️ [15:45](https://youtu.be/HWPi7BRDZQs?t=945) — [H3] Visual Development Advantage - Key idea: Direct manipulation vs continuous re-prompting workflow - Evidence: "I can click on things and make the adjustments that I want to make. I can still read the code" #### ⏱️ [18:10](https://youtu.be/HWPi7BRDZQs?t=1090) — [H2] Replacement Functionality Demo - Key idea: Targeted section replacement for CSS counter implementation - Evidence: "In the steps section, the cards are statically numbered. I'd like these to use CSS to auto count them" #### ⏱️ [21:00](https://youtu.be/HWPi7BRDZQs?t=1260) — [H1] Replace vs Insert Intelligence - Key idea: System automatically detects existing sections and offers replacement option - Evidence: "Etch has identified this section already exists. We don't want to insert another one. We want to replace" #### ⏱️ [23:30](https://youtu.be/HWPi7BRDZQs?t=1410) — [H3] Manual Code Adjustment Capability - Key idea: Developer can directly modify generated code when needed - Evidence: "As a knowledgeable user, I can see what's being produced and say something got left out" #### ⏱️ [26:15](https://youtu.be/HWPi7BRDZQs?t=1575) — [H1] Gutenberg Auto-Authoring - Key idea: Automatic WordPress block creation for client editing - Evidence: "Everything that we build is automatically authored in Gutenberg as well for the client editing experience" #### ⏱️ [28:00](https://youtu.be/HWPi7BRDZQs?t=1680) — [H1] WordPress Future Positioning - Key idea: Etch represents the evolution of WordPress development - Evidence: "If there is a future of WordPress, Etch is the future of WordPress" ## 📚 References - [Etch Visual Development Platform](https://etchcss.com) - [Landbook Design Inspiration](https://landbook.com) - [BEM CSS Methodology](http://getbem.com/) ## 🗣️ Paraphrase - Etch AI combines visual development with professional coding standards, producing clean semantic HTML and BEM CSS from screenshot inputs without requiring expert prompting skills - The platform emphasizes developer control through selective code insertion and visual manipulation rather than the continuous re-prompting cycle common in traditional AI coding tools - Automatic WordPress integration through Gutenberg block authoring provides seamless handoff between developer and client editing experiences ## 📰 Newsletter 🎯 **Etch AI Transforms Screenshot-to-Code Development** Kevin Geary showcased Etch AI's impressive capabilities, demonstrating how developers can build complete web pages from single screenshots while maintaining professional coding standards. The tool automatically generates semantic HTML, BEM CSS, and responsive designs without requiring detailed prompts. **Key Benefits:** - **Visual + Code Control**: Unlike traditional AI coding tools, Etch maintains visual development environment benefits while providing full code access and manipulation - **Anti-Slop Philosophy**: Automatically follows professional standards including semantic HTML, BEM naming, and modern CSS nesting - **WordPress Integration**: Automatic Gutenberg block authoring ensures seamless client handoff and editing capabilities **Perfect for developers who want AI assistance without sacrificing code quality or development control.** Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create comparison content between Etch AI and traditional AI coding tools, emphasizing professional development workflows - Education: Develop workshops on hybrid visual-code development approaches and BEM methodology integration - Developer experience: Document screenshot-to-code best practices and code quality validation processes - Community management: Gather feedback on AI-assisted development preferences and pain points #### WordPress - Core: Evaluate automatic block authoring patterns for broader WordPress development - Community: Share best practices for AI-assisted theme and plugin development - Training: Create lesson plans on modern CSS techniques and semantic HTML in AI workflows - Documentation: Document integration patterns between visual builders and Gutenberg - Accessibility: Ensure AI-generated code meets WCAG standards by default ## 🧪 Hypotheses - Visual development environments with code access reduce AI re-prompting cycles compared to text-only AI coding tools - Automatic application of coding standards (BEM, semantic HTML) improves AI-generated code quality without explicit prompting - Screenshot-based prompting produces more accurate layouts than text descriptions for complex designs - Selective code insertion/replacement workflows are more efficient than full page regeneration for iterative development ### 📊 Methodology - Compare development speed and iteration cycles between Etch AI and traditional AI coding tools across multiple projects - Measure code quality metrics (semantic correctness, accessibility compliance, maintainability) in AI-generated vs hand-coded implementations - Analyze developer satisfaction and workflow efficiency in visual-code hybrid vs pure code environments ### ❓ Questions - How does automatic coding standard enforcement scale across different design complexity levels? - What are the limitations of screenshot-based prompting for dynamic functionality requirements? - How effectively can AI-generated code integrate with existing design systems and component libraries? ### 🔮 Future Research - Integration patterns between AI visual development and existing WordPress development workflows - Automated accessibility compliance validation in AI-generated web components - Performance optimization strategies for AI-generated CSS and HTML structure ### 💡 Implications - Practice: Visual-code hybrid tools may reduce the learning curve for AI-assisted development while maintaining professional standards - Education: Training programs need to address both AI prompting skills and traditional development fundamentals - Tooling: Integration between visual builders and traditional IDEs becomes increasingly important for professional workflows ### 🧠 Learning Styles Assessment Reading level estimate: 10th Grade (technical demonstration with clear explanations) #### 👀 Visual learners - Present: Extensive screen recording showing visual development interface and code output - Improve: Side-by-side comparison diagrams showing Etch vs traditional AI coding workflows #### 🔊 Aural learners - Present: Detailed narration explaining each step and decision rationale - Improve: Audio summary of key differentiators and technical benefits #### 🗣️ Verbal learners - Present: Clear definitions of BEM, semantic HTML, and visual development concepts - Improve: Glossary of technical terms and methodology comparisons #### 🧩 Kinesthetic learners - Present: Step-by-step demonstration of screenshot capture, code insertion, and modification processes - Improve: Hands-on tutorial checklist for replicating the demonstrated workflow #### 🧠 Logical learners - Present: Systematic progression from screenshot to final output with clear cause-effect relationships - Improve: Decision tree for when to use replacement vs insertion vs manual coding #### 🧑‍🤝‍🧑 Social learners - Present: Community positioning and comparison to other development tools - Improve: Discussion prompts about team adoption and collaborative development workflows #### 🧘‍♀️ Solitary learners - Present: Individual development workflow demonstration with personal control emphasis - Improve: Self-assessment questions for evaluating tool fit with development preferences #### 🌿 Naturalistic learners - Present: Evolution narrative from traditional page builders to AI-enhanced development - Improve: Ecosystem thinking about tool integration and workflow sustainability ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Demo emphasizes semantic HTML generation as core feature - Improve: Explicit demonstration of generated markup's accessibility compliance #### Keyboard navigation - Present: Shows interface navigation through various panels and controls - Improve: Demonstration of keyboard-only workflow for AI-assisted development #### Contrast and readability - Present: Clear visual distinction between code blocks, interface elements, and output - Improve: High contrast mode demonstration for development environment accessibility #### Text resizing and reflow - Present: Video interface scales well across different viewing sizes - Improve: Demonstration of responsive design validation in generated output #### Media and captions - Present: Video demonstration with clear narration - Improve: Captions for technical terminology and code explanations #### Forms and interactions - Present: Clear demonstration of AI chat interface and code insertion controls - Improve: Error handling and validation feedback examples ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal web development concepts and standards - Improve: Examples from diverse design traditions and global web practices #### Inclusive language - Present: Professional development terminology without exclusionary jargon - Improve: Plain language explanations for non-technical stakeholders #### Neurodiversity support - Present: Multiple interaction modes (visual, code, chat) accommodate different cognitive preferences - Improve: Discussion of customizable interface options and workflow adaptations #### Representation - Present: Focus on technical capabilities rather than demographic assumptions - Improve: Examples showing diverse use cases and developer scenarios #### Psychological safety - Present: Emphasis on developer control and choice in AI assistance level - Improve: Discussion of learning curve accommodation and skill development support ### ✅ Logical Validity #### Strong reasoning - Deductive strength: "Visual development + code access + AI assistance = better professional workflow" - supported by specific feature demonstrations - Inductive strength: Multiple examples show consistent code quality and standard compliance across different page sections - Causal reasoning: Clear cause-effect relationships between tool design choices and developer experience outcomes - Analogical strength: Effective comparison between Etch approach and traditional AI coding limitations #### Fallacies - Appeal to novelty: Some emphasis on "future of WordPress" without sufficient comparative analysis - could strengthen with more rigorous benchmarking - Hasty generalization: Claims about superiority based on single demonstration - would benefit from broader use case validation #### Tone of voice - Overall tone: Enthusiastic and confident, appropriate for product demonstration while maintaining technical credibility through detailed feature explanations ### 🛡️ DARVO Analysis - Deny: No significant denial patterns present - Attack: Mild criticism of competing tools (Cursor, Claude) but focused on technical limitations rather than personal attacks - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Enthusiasm and confidence appropriate for product demonstration, technical focus maintains credibility ## 🎯 Conclusion Etch AI represents a significant evolution in AI-assisted web development by combining visual development benefits with professional coding standards and developer control. The tool's ability to generate clean, semantic code from screenshots while maintaining visual manipulation capabilities addresses key limitations in current AI coding workflows. The automatic WordPress integration through Gutenberg block authoring provides a compelling path for professional WordPress development that bridges the gap between developer efficiency and client usability. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] AI visual development tools enable professional coding standards > [!quote] [WAIT! Etch AI Can Do This Already???](https://www.youtube.com/watch?v=HWPi7BRDZQs) by Kevin Geary via YouTube. Published 2024. Accessed 2024-12-28. > "We want essentially an anti-slop system. We want it to use semantic HTML, BEM class naming conventions." Etch AI automatically applies professional development standards without requiring detailed prompting, addressing code quality concerns in AI-assisted development. [view highlight](https://youtu.be/HWPi7BRDZQs?t=150) #xref #articleseed ID:rw_etch_ai_standards ### [H2] Screenshot-based prompting reduces complexity in AI coding > [!quote] [WAIT! Etch AI Can Do This Already???](https://www.youtube.com/ --- ## Full Transcript [00:00] About a month ago, our team started [00:02] working on integrating AI into Etch. And [00:04] we've been doing weekly releases making [00:07] the experience incrementally better and [00:09] better and better. But I have not done [00:12] an official demonstration on what Etch [00:14] AI is capable of until now. That's what [00:18] I want to do for you today. And I want [00:20] to talk a little bit about the [00:22] philosophy behind Etch AI and why this [00:24] is such a unique experience, an [00:26] experience that you are not going to get [00:28] in an IDE like cursor or uh in an [00:32] experience like claude code or co-work [00:35] uh and certainly not in any traditional [00:38] page builder either. Etch is literally [00:40] the best of both worlds in a true [00:43] professional visual development [00:45] environment. But before we get into all [00:47] of that, let's go ahead and just see [00:49] what Etch is capable of at the one month [00:52] mark of getting AI into Etch. I'm going [00:55] to go ahead and share my screen. Now, I [00:58] found this reference site right here on [01:00] Landbook, which is a great site for [01:02] website design inspiration. And my goal [01:05] today with this demo is to have Etch [01:08] build this entire page. not just build [01:11] the entire page, but build the entire [01:13] page from a screenshot. And one of our [01:16] philosophies with Etch is that you [01:18] shouldn't have to be an expert prompt [01:20] engineer to get a good output either. [01:24] Okay? And so what I'm going to do is I'm [01:26] going to take a screenshot and I'm not [01:28] really going to provide any additional [01:30] guidance or details as to how I want [01:33] this page to be built. I want etch to be [01:37] and this is why we call uh our our uh [01:40] internal systems etch intelligence. We [01:43] want it to build according to all of the [01:46] standards that we want. We want it to [01:48] use semantic HTML. We want it to use BM [01:51] class naming conventions for proper [01:53] class organization. We want it to nest [01:56] CSS using modern techniques. We want it [01:58] to be automatically responsive. We these [02:00] are all the things that are obvious that [02:02] we want that we shouldn't have to tell [02:04] an AI to do. It should just know already [02:08] and do those things every single time. [02:11] We want essentially an anti-slop [02:15] system. And so what I'm going to do here [02:16] is I am going to grab a screenshot of [02:19] this entire page. So I'm going to come [02:21] down and I'm going to do a scrolling [02:23] capture. I'm going to go ahead and draw [02:25] a box where I want it to capture. I'll [02:28] start the capture and I will autoscroll [02:31] so that it just goes down the entire [02:33] page and gives me one nice screenshot. [02:37] Okay, so it's almost to the end of the [02:39] page now. You you're going to notice on [02:40] here there's a footer. There's some um [02:42] there's some some FAQs that are actually [02:45] expandable. I'm going to say that this [02:47] is done and it's going to put it over [02:49] here. I'm just going to copy that [02:50] screenshot to my clipboard and I am [02:52] going to go into Etch. Now we have the [02:54] AI chat window. Remember that Etch is [02:56] modular. So, I can actually drag this [02:58] and put it on any side that I want. You [03:00] can even put it in the bottom drawer if [03:02] you prefer it in the bottom drawer. I'm [03:03] going to have it over here in the left [03:05] sidebar. You're also going to notice [03:06] that we currently have two modes. We [03:08] have an ask mode and we have a build [03:10] mode. Of course, we want to be in the [03:12] build mode because we are asking Etch to [03:14] build something. And all I'm going to do [03:16] is I'm going to paste in the screenshot. [03:18] Just commandV on my keyboard. You can [03:21] also drag a screenshot into here. Now, [03:23] you can use normal prompts if you want, [03:25] but prompting for this entire page, how [03:28] would we actually even do that, right? [03:30] Uh much easier to just grab a screenshot [03:33] and paste it in. And keep in mind that [03:35] this screenshot could come from Figma. [03:37] It could come from the client. It it can [03:38] come from anywhere, okay? Any any uh [03:41] image can be the data source for your [03:43] prompt. And I'm going to say, I want you [03:46] to build this homepage for me. And that [03:50] guys is literally the extent of the [03:52] prompt that I'm going to give. I'm going [03:54] to submit that and then we're going to [03:57] talk about this process that it's going [03:58] to go through and the process of [04:00] inserting and how this process may [04:02] evolve over time. But I also want to [04:04] talk a little bit about our philosophy [04:07] as we do this. We want Etch AI to [04:10] essentially do as much or as little as [04:13] you want it to. We want you to be in [04:16] command of the AI and in command of your [04:20] projects. This is not a system that is [04:23] designed for vibe coding. This is a [04:26] system that is designed for professional [04:28] development. And so you are able to see [04:31] the code output. As you can see right [04:33] here, I am watching the code get written [04:36] and I can verify that the code is [04:38] semantically accurate, that it is clean, [04:40] that it has the proper classes. uh I can [04:44] verify all the things and you're going [04:46] to notice that it doesn't actually auto [04:48] add anything to the canvas. Uh what is [04:50] required at least right now is for us to [04:53] opt into using that code that was [04:55] produced. So we're not littering our [04:57] project with a bunch of nonsense. Of [04:59] course we have an undo system and a redo [05:01] system as well. So if something does get [05:03] added that you want to undo, you can [05:05] easily undo that so it's not committed [05:08] to the database. Um, we also have a [05:11] replacement system as we might be able [05:13] to take a look at in this video as well. [05:15] So, if something is already on the [05:17] canvas, Etch can intelligently replace [05:20] that markup and intelligently replace [05:22] the CSS for specific areas of the [05:27] website. And so, you see what's [05:28] happening right now is that it is [05:30] producing all of the markup and now it [05:33] is producing all of the CSS. You can see [05:35] here that it is in fact using BEM [05:38] properly. Etch also has a BIM parser in [05:41] the sense that when you are using BIM, [05:44] Etch will use the class names, the block [05:46] and element names to auto label your [05:50] structure panel. This means that when I [05:52] insert these things, the structure panel [05:54] will be automatically organized and [05:56] labeled for me as well. Okay, so I'm [05:59] going to zoom in here and we'll see what [06:00] the final response says. This gives you [06:02] a full etch ready homepage structure [06:04] matching the layout and feel of the [06:06] reference header, hero, image, ribbon, [06:07] blah blah blah blah blah. Okay, I assume [06:10] a mostly static build and use [06:11] placeholder image URLs so you can swap [06:13] in your actual assets if you want. Next, [06:16] I can convert this into smaller reusable [06:18] etch components, wire sections to props [06:20] or add loop manager content for [06:22] testimonials, plans, and FAQs. Now in [06:25] the future uh this will and I would say [06:28] in the near future this will be able to [06:31] create loops for you. It will be able to [06:33] go into the loop manager and configure a [06:35] loop. It will be able to go into uh our [06:38] content hub and create a custom post [06:40] type and custom fields. It will then [06:42] loop through things like the testimonial [06:44] cards for example. It will autogenerate [06:46] those loops. It will be able to take the [06:48] testimonial card and actually create a [06:50] component out of it with props and map [06:52] the props. It will be able to do all of [06:54] these things for you in the near future. [06:56] But let's take a look at what it is able [06:58] to do right now. So, I'm going to scroll [07:00] up and I'm going to find the markup. And [07:03] obviously, there's a lot of work that [07:04] was done here. Okay, this is a lot of [07:07] code that is produced. And so, we're [07:09] seeing exactly what we want. Uh [07:12] everything looks clean. It looks [07:14] according to and it's not going to be [07:15] perfect. Um, but we're going to talk [07:17] about my ability to easily go in unlike [07:21] in uh claude code. A lot of times unlike [07:24] in cursor with a vibe coding experience [07:26] where you don't have a visual [07:28] development environment, you can't click [07:30] on and interact with things and easily [07:32] edit them. Etch is going to have a [07:34] tremendous advantage for when it comes [07:35] to tweaking and cleaning things up that [07:38] doesn't require reprompting and [07:40] reprompting and reprompting and [07:42] reprompting. So, I'm going to go up here [07:44] and if we go to the beginning of our [07:46] code block, we see that we have an [07:47] insert button. I'll try to zoom in on [07:48] this for you. We have an insert button. [07:50] And so, all I'm going to do is I'm going [07:52] to click that insert button. And all of [07:55] that page is here. You can see [07:57] everything is here in terms of markup, [08:00] but there is no styling yet. So, the [08:03] page doesn't look the way we want it to [08:05] look. So, what I'm going to do is I'm [08:06] going to scroll down to the CSS that it [08:08] produced. Notice again, it's it's doing [08:10] some intelligent things. It's using [08:12] locally scoped variables. It's using [08:14] nesting. Okay, it's nesting the hover [08:17] styles. It's nesting the focus visible [08:19] styles. When we train it on automatic [08:21] CSS, for those of you who are using [08:23] automatic CSS, it will use automatic CSS [08:26] variables in all of these appropriate [08:28] places. Okay, but for right now, what [08:31] I'm going to do is I'm just going to [08:32] accept things as they are, and I'm going [08:34] to say insert the CSS. Now, this is not [08:36] just going to insert some crazy global [08:38] stylesheet or code block. This is [08:40] actually going to parse this entire [08:42] stylesheet and it's going to put the [08:44] styles on each selector at the element [08:47] level. So, I'm going to go ahead and hit [08:48] insert and we're going to see here that [08:50] we we actually have the page. And if I [08:53] click on anything, if I click on hero, [08:55] you're going to see that the styles are [08:56] actually attached to the selectors for [08:59] every single area. So, any element that [09:02] I click on and again we see a organized [09:05] structure panel. An organized structure [09:07] panel. Uh, I can go in now and I can [09:10] make adjustments to these things. I have [09:12] the full mini guey to help me. Okay. Um, [09:16] so I have access to the CSS. I can see [09:18] all of the markup. I can adjust the [09:20] markup. I can change the markup. If [09:22] something got a little sloppy, I can go [09:25] in and fix it. I don't have to reprompt [09:27] and reprompt and reprompt. Now, let's [09:29] scroll down here and let's just take a [09:32] look at uh one of these sections. Like, [09:34] for example, this uh this how it works [09:37] section. Okay, so these are process [09:39] cards and it looks like we were given [09:41] step numbers. First of all, before we do [09:43] this, let's just go take a look at this [09:45] site on the front end. Okay, so this is [09:47] the site on the front end. Um, you know, [09:50] it's not a bad starting point at all. Is [09:52] it perfect? No, it's not perfect. I [09:54] mean, these things work. Um, it's it's [09:57] not perfect. It's not perfect. Uh, I [09:59] don't think any AI is perfect, and [10:01] that's the point. And one of the [10:03] questions is what is the game we want to [10:05] play? do we want like mostly there and [10:07] then I just make quick tweaks and [10:09] adjustments and I save a tremendous [10:10] amount of time uh because I have control [10:13] over the codebase. I am in command of [10:15] the project or do we want to play a game [10:17] of reprompt reprompt reprompt reprompt [10:19] reprompt repro trying to dial it in [10:22] which is often a very frustrating [10:24] experience. The advantage of etch is [10:26] that I'm still in a visual development [10:27] environment where I can literally click [10:29] on things and make the adjustments that [10:31] I want to make. I can still read the [10:34] code. I can still decipher exactly what [10:37] is going on because these things are [10:39] done to my specific preferences as a [10:43] developer. It's doing the things the way [10:46] I would do them, the way I want them [10:48] done, which is absolutely fantastic. But [10:51] I want to give you a demo of [10:52] replacement. Okay. What I can see here [10:54] is that these are statically numbered [10:57] cards. And so I don't want statically [11:00] numbered cards. CSS has the ability to [11:02] actually auto count cards. And so what [11:05] we're going to try to do is I'm gonna [11:06] I'm gonna say the how it works section. [11:08] Okay, which is actually called steps in [11:11] the structure panel. And it's been given [11:12] the class of steps. So I'm going to go [11:15] down to the AI here and I'm going to say [11:17] in the steps section, the cards are [11:20] statically numbered. I'd like these [11:24] to use CSS to auto count them. Please [11:28] provide the new markup for that section [11:32] only and the revised CSS for that [11:36] section only. All right. And then I'm [11:39] going to go ahead and submit that and [11:41] we'll see what it comes back with. By [11:43] the way, um you know, you can see the [11:45] I'm going to scroll all the way up here [11:47] just to show you something real quick. [11:49] Uh well, I can't I don't think I can [11:50] scroll up while it's answering because [11:51] it's trying to keep me at the bottom of [11:53] the answer. But you can also see the [11:55] etch reasoning now uh as as it's [11:58] thinking. So you can see kind of what [12:00] it's considering what it's thinking [12:01] about. Um but if we look down here, it [12:03] says this removes the hard-coded number [12:05] element and uses a CSS counter on steps [12:08] list with each step card generating its [12:10] number via a before element. If you [12:13] want, I can also make the numbers render [12:14] as 0 1 0203 instead of plain integers. [12:18] Uh I don't I don't need to worry about [12:20] that. Uh the question is how are we [12:22] going to get this new section in here [12:24] and how do we make sure that the CSS all [12:27] gets remapped properly? Well, very very [12:29] simple. We now have a replace button [12:32] because you can see etch has identified [12:34] okay this section already exists. We [12:36] don't want to insert another one. We [12:38] want to replace the existing one. So I'm [12:40] going to go ahead and hit the replace [12:42] button. And then I'm going to come down [12:44] here and just insert the CSS again. our [12:46] processor, our parser for selectors is [12:49] intelligent enough to handle collisions [12:52] in the appropriate way. So I'm going to [12:55] hit insert and we are going to hit save [12:57] and then we are going to go to the front [13:00] end. Now we're going to see cuz I don't [13:02] see any numbers. We're going to see [13:04] where is in fact the before pseudo [13:07] element and I can even look at the code. [13:10] Uh let's go ahead and see where it [13:12] placed the pseudo element. So we have [13:14] the steps. Okay, it should be on the [13:16] step card itself has the counter and [13:20] then we're looking at where is it [13:21] actually using [13:23] um Okay, no, it's just using a before on [13:26] the card itself. So, let's go ahead and [13:29] see. We're going to go into the article [13:31] and this is the benefit. Okay, I see [13:32] that. I see that I don't see a pseudo [13:34] element on the card. I don't see a [13:36] pseudo element being created. Um, and it [13:40] looks like Okay, so let's go in step [13:43] card. Did I hit insert here? Okay, I did [13:45] hit insert. Maybe maybe it did not grab [13:49] the before pseudo element. Um, it [13:52] doesn't look like it did. So, let's go [13:53] ahead and throw that in. Now, notice [13:56] this is the benefit, guys. I, you know, [13:59] as a knowledgeable user, uh, I can go I [14:02] can I can see what's being produced and [14:03] I can say, "Oh, okay. Something got left [14:05] out. Let me just go ahead and paste that [14:07] in real quick." And now you see I have [14:09] the auto counting cards. In fact, if I [14:11] were to duplicate a step card, it's [14:14] going to say four. And if I duplicate it [14:16] again, it's going to say five. Let's go [14:18] ahead and duplicate again. It's going to [14:21] say five. Again, I This is the best of [14:24] both worlds. I have the kind of code [14:26] experience. It's going to write the code [14:28] for me. It's going to see I'm going to [14:30] see the code. I can touch the code. I [14:32] can tweak the code, but I also have a [14:34] visual development environment. Sorry, [14:35] my voice. I'm I'm getting over being [14:37] sick. Um, you you can you can touch [14:40] things on the canvas. You can see [14:42] exactly what's attached to things on the [14:44] canvas. You have the page builder [14:47] experience, but you also have all of the [14:50] professional stuff happening under the [14:52] hood. Uh, and and you are able to [14:55] interact with all of it. Let's go ahead [14:57] and save and let's go back to the front [14:59] end. Let's refresh and let's see what [15:01] we've got. We've even got a sticky [15:03] header. Obviously, we need to adjust the [15:05] width of this item. So all of these can [15:08] fit on one row. But as a starting point, [15:11] guys, with doing hardly any work, I'm [15:14] getting a very long way. Like I'm [15:17] getting a lot of progress made. And more [15:20] importantly, [15:21] I am not in a scenario where I have to [15:24] continuously reprompt and reprompt and [15:26] reprompt and use a gazillion tokens. I [15:29] can get to a very clean starting point, [15:32] not a slop starting point, a very clean [15:34] starting point. And then I am in command [15:37] from there. If I want to reprompt for [15:40] everything, I absolutely can. But if I [15:43] don't want to reprompt for everything, [15:44] if I want to dig in and I want to touch [15:46] the code and I want to make the [15:48] adjustments myself cuz I know, hey, [15:49] that's an easy thing. I can just do it [15:51] real quick. I can fix it up. I don't [15:52] have to, you know, prompt five more [15:54] times. I'm free to do that as well. Now, [15:58] let's just keep in mind, okay, I I got [16:00] to show you one last thing just to [16:02] remind you. Some of you are maybe new [16:04] here. You don't realize that Etch has an [16:07] autoblock authoring feature where [16:09] everything that we build is [16:11] automatically authored in Gutenberg as [16:13] well for the client editing experience. [16:16] And so if I switch over to Gutenberg, [16:18] I'm going to see the exact same thing [16:20] here. And your client can easily come in [16:23] and make changes to all of these areas, [16:26] to all of this content. It's exactly one [16:29] to one as you saw on the front end. This [16:33] is Gutenberg now. This is the client [16:36] editing experience. This is back in [16:38] native WordPress. Etch authored all [16:41] everything that was authored in ETH is [16:43] automatically authored to custom blocks [16:46] in Gutenberg. No other platform is able [16:49] to do this. We have to understand what [16:52] is happening here. Th this this is if if [16:56] there is a future of WordPress, Etch is [16:59] the future of WordPress. It has [17:02] everything that you could possibly need. [17:04] It has the fastest possible experience. [17:07] It has an experience that is tailored to [17:09] literal development practices. It's [17:12] visual and it's code. You don't even [17:14] need to touch the code if you don't want [17:15] to. You can just stay strictly visual. [17:18] It it it has the best of everything and [17:21] none of the downsides. Uh this is where [17:24] we're at. This is where we're at with [17:25] things with Etch AI. Uh comment down [17:27] below. Let us know what you think. Uh [17:30] we're excited about this. We hope you [17:31] guys are excited about this. If you [17:33] haven't given ETH a shot yet, I would [17:35] highly encourage you to uh get a [17:37] license, dive in, start building some [17:39] things in Etch. You are going to quickly [17:41] see that Etch is in fact the future of [17:44] WordPress and beyond WordPress as  📄 **Full text:** ![[Full Document Contents/Articles/WAIT! Etch AI Can Do This Already|WAIT! Etch AI Can Do This Already???, YouTube]] ## Highlights - 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, ([View Highlight](https://read.readwise.io/read/01knwvwwzb1kncn8m1170fmfhj)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01knwvwwzztn7zpfzmzkz6w55y)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01knwvwx0m9583m50eghbmym2s)) - Tags: 👻 ai highlighted