Vibe Coding Etch Templates with Claude Code: My Workflow

This is a breakdown of how I’ve been using Claude Code to build out an entire pattern library of Etch layouts. I’ll walk through my setup, the actual process of going from screenshot to functional layout, and where AI assistance fits into the workflow. If you’re using Etch, this might give you ideas for how to use your tools differently—or spark something entirely new.

My Setup

I use Lando for local WordPress development. No strong opinions on it—it just works from the terminal without a UI, which I appreciate. It comes with WP-CLI baked in, and that’s the key piece here.

For the AI side, I’m running Claude Code with a claude.md file that contains project-specific instructions. This file tells future sessions about the project, points to local documentation (I’ve got SWP and ACSS docs downloaded), and outlines how I want things built—BEM naming conventions, structure preferences, that sort of thing.

Why WP-CLI Over MCP

Let me explain MCP real quick: Model Context Protocol is how AI connects to different services. Etch provides MCP tools—things like get_page, update_page, parse_blocks, list_components—that can build layouts.

But through my own testing, I’ve found that using straight WP-CLI commands is more efficient than MCP, at least for my workflow. I’ve had quirky stuff happen with MCP, and building layouts feels smoother when you’re just writing directly to the database via WP-CLI. Your mileage may vary.

The Workflow

Here’s how I actually build things.

Step 1: Grab a Screenshot

I find a layout I want to recreate—in this case, a hero section from the Lattice website. I screenshot it using Monosnap (use whatever you prefer) and save it to my clipboard.

Step 2: Let Claude Analyze

I paste the screenshot into Claude Code and ask it to build a new Etch element based on the image. But here’s the important part: I have it confirm its understanding before it starts building.

My prompt looks something like:

Build a new Etch element based on this screenshot. Confirm your understanding and how you will build.

Claude analyzes the image and responds with a breakdown: “Left column with large serif supporting text, collage of overlapping screenshots on the right,” etc. It shows me the proposed structure—the HTML hierarchy, the BEM class names, the build plan.

I review this. If something looks off, I can correct it before any code gets written. If it looks good, I approve and let it proceed.

Step 3: It Builds via WP-CLI

Once approved, Claude creates the pattern post, builds out the block structure, applies BEM styling, and writes everything directly to the database. It outputs the structure in the terminal so I can see exactly what was created.

For the hero I built during this demo, the whole process took about 39 seconds from screenshot to functional layout.

Step 4: Generate a Featured Image

After the layout is built, I have Claude take a screenshot of the finished pattern and apply it as the featured image to the post. This is just a nice touch for the pattern library—you can see what each layout looks like at a glance.

My claude.md file includes instructions for this: “Once I approve a layout, generate a screenshot and set it as the featured image.”

My CLAUDE.MD File

My claude.md file is pretty straight forward and contains info on how I would like things built and a few house-cleaning items. It can be best broken down like so.

Project context at the top (lines 6-10 in your file) that tells future agents/sessions about the project
Local documentation references pointing to SWP and ACSS docs downloaded locally
Use WP-CLI first for building layouts (before considering MCP)
Create pattern posts using a custom DGS pattern post type
Build with BEM styling and follow BEM naming conventions
Use ACSS for styling preferring to use variables over utility classes
Output structure in the terminal after building so you can review and request modifications
Confirm understanding before building — the AI should explain its build plan and wait for approval
Generate a screenshot after approval and apply it as the featured image to the pattern post

A Realistic Example

Let me be honest about what happened during my demo. The second layout—a simple services list grid—came out great. Beautiful. I loved it.

The first layout—the hero section—was close but not perfect. The gutter spacing was a bit off from the original, images were stacked. I could have provided better instructions. At that point, I had to refine things and I made a few tweaks in the editor itself.

This is the reality of vibe coding: it’s not always a time save. Sometimes you spend more time refining AI output than you would have spent building it yourself. But for spinning up multiple layouts quickly, or getting 80% of the way there on complex sections, the potential is huge.

What Makes Etch Special for This

Here’s something I don’t think the Etch team necessarily intended: they’ve built one of the most AI-friendly page builders I’ve seen. The fact that you can interact with Etch via REST API endpoints and WP-CLI, that it stores layouts in a structured way that AI can read and write—this is genuinely cool.

You can:

Create patterns programmatically
Build out block structures
Apply styles using ACSS variables
All without touching the visual editor

I can’t overstate how exciting this is. I’ve been losing sleep over the possibilities here.

What I’m Not Doing (Yet)

To be clear about the limitations of my current workflow:

I’m not using container queries. I still don’t fully understand them and haven’t spent the time to learn.
I’m not using Etch components yet. I know that’s a huge value-add, but I haven’t integrated it into this workflow.
My MCP implementation isn’t ready for primetime. I’m probably not going to share that code until it’s more stable. Using WP-CLI is superior thus far.

If you’ve figured out better approaches to any of these, I’d genuinely love to hear about it.

Lessons Learned

Don’t one-shot a whole layout. Do it a section or two at a time. While it could do a whole layout at once, it’s not going to get it right. Doing so eats up your whole context window. Section by section has worked well for me when tackling a full page layout.

Be careful having multiple editor instances open. It’s easy to lose your work. When I was using MCP, I sometimes found that I had to go into the editor and save in order to generate the changes for CSS. I don’t seem to have to do that when using WP-CLI directly.

The TL;DR

Develop locally with WP-CLI access
Use a rules file (claude.md or equivalent) to give your AI context about your project and preferences
Screenshot your target layout and have the AI confirm its build plan before executing
Let it write directly to the database via WP-CLI commands
Review and refine—sometimes the AI nails it, sometimes you need to jump in and tweak

The workflow isn’t perfect, and it’s definitely not polished. But the ability to spin up Etch layouts by describing what you want, having AI write the structure, and seeing it appear in your pattern library? That’s the future, and it’s already here.

If you have questions or a different approach, let me know. I’m learning as I go, same as everyone else.