Case Study · PostAI Studio

20 Years In.
One File Out.

What vibe coding actually looks like.

For the first time in history, anyone can describe a webpage and watch it appear. The AI tools delivered on their promise. Beautiful, functional HTML — generated in minutes. Then you need to change a headline. And there is nowhere to go.

What Comes After AI
✏ Design
▢ Preview
on 1/1
163%
Desktop
Save
QUICK ACTIONS
▷ Import HTML
☷ Components
☰ Templates
📷 Add Image
🔗 Add Link
💾 Save
⇧ Export
Try it — click any text to edit
×
Welcome to Our Amazing Product
Transform your business with our innovative solution
Get Started
Properties
Properties
HTML
SEO
QUICK EDIT
Select an element to see editable fields here.
STYLE
ProductPostAI Studio
MethodVibe Coding with Claude
TimelineMonths of focused sessions
Output~33,000 lines · single file
Scroll
00 — The Builder

Why an IT veteran could build this when a pure developer might not.

PostAI Studio isn’t the product of someone who learned to code last year. It’s the product of 20+ years of living inside the exact problems it solves — on both the technical and the human side.

Systems thinking from the network up
As a LAN Specialist and IT Consultant, I spent years designing systems where isolation, security, and data integrity were non-negotiable. Shadow DOM wasn’t a foreign concept — it was CSS scoping applied the same way I’d think about network segmentation. When Claude explained the architecture, I already had the mental model to evaluate it.
LAN Specialist · IT Consultant · Azure · VMware · Linux
Project discipline that kept the build from sprawling
Managing 125 field technicians across 500 polling stations, running agile portfolios, building critical path schedules — I knew how to sequence a build. The discipline of one focused session per problem didn’t come from a blog post. It came from years of knowing what happens when you try to solve everything at once.
Senior IT PM · Agile · MS Project · Oracle Primavera P6
Help desk roots: I know user pain from the inside
I started in help desk. I managed Level II teams of 25–30 specialists. I’ve sat with users who couldn’t get their work done because of technical friction. PostAI Studio exists because I’d seen that frustration a thousand times — and built the tool to fix it.
Help Desk Manager · Desktop Support · End-User Training
Technical depth without developer dependency
HTML, SQL, Azure, Active Directory, Linux, Cisco VPN — I’m not afraid of the stack. I’ve led Office 365 migrations across 12 facilities, built cloud-based solutions for nonprofits, and architected AI apps as an IT Consultant. I could evaluate Claude’s code because I understood what it was trying to do.
HTML · Azure · SQL · Linux · Office 365 · Cloud Architecture
Instructional design as product QA
My M.S. in Instructional Technology and years applying ADDIE/SAM trained me to ask the right question: does this actually work for the person using it? That lens made every vibe coding session sharper. I wasn’t just testing whether the feature ran — I was testing whether it solved the real problem it was built for.
M.S. Instructional Technology · ADDIE · SAM · UX Evaluation
Vendor and stakeholder fluency
I’ve managed relationships with Microsoft, Dell, Lenovo, and Avaya. Reported to C-suite across industries. Bridged technical and non-technical worlds for 20+ years. Working with Claude as a technical partner wasn’t a new dynamic — I just brought that same skill into the AI era.
IT Consultant · Vendor Management · Stakeholder Alignment
The reason vibe coding worked isn’t that I got lucky with prompts. It’s that I came in with 20+ years of knowing how systems should behave, how users actually struggle, and how to hold a build to a standard. Claude handled the implementation. I handled everything else.
That background matters — because the problem PostAI Studio solves isn’t theoretical. It’s one Clea had lived from every angle. Here’s what it actually was →
01 — The Problem

The tools got us to the finish line.
Then left us there.

The AI generation wave arrived and it was everything it promised. Canva AI, Claude, ChatGPT, Cursor, Lovable — within minutes, anyone could have a polished, functional HTML page. Marketers. Educators. Consultants. Small business owners. People who had never opened a text editor in their lives were suddenly producing real, deployable web content.

Then reality arrived right behind it.

The headline was wrong. The button copy needed to change. The color didn’t match the brand. Small things — the kind of things that take thirty seconds in any normal editor. But there was no normal editor. There were two options: open the raw HTML in a text editor and find the right line among hundreds, or go back to the AI and re-prompt. Describe the page again. Wait. Paste again. Hope the rest didn’t change.

And that re-prompt isn’t free. Every one costs tokens, burns API credits, consumes compute, draws power from a data center grid. The cognitive cost is real too — the context lost, the flow broken, the conversation thread that was working now stretched thin. For teams and agencies doing this at scale, it compounds fast.

“I just wanted to change the HTML without opening a text editor or re-prompting the AI. That’s it. That was the whole problem. And there was nothing that solved it.”

Publish it to WordPress and a new set of problems begins. The sanitizer strips the styles. The layout collapses. Elementor won’t touch raw AI-generated HTML. Divi doesn’t know what to do with it. The page that looked perfect in the chat window arrives broken on the other side.

The AI had done its job. The infrastructure around it hadn’t caught up. Nobody had built the bridge between generation and use — the layer where a non-developer could simply open the output, make it theirs, and ship it.

Canva AI Claude ChatGPT Cursor Lovable Any HTML file

PostAI Studio accepts HTML from any source — edit it visually on the canvas — publish or export.

Without PostAI Studio
Every small change restarts the cycle
  • AI generates the page — it lives in a chat window or exported file with no editor
  • One wrong headline means re-prompting, re-pasting, burning tokens and energy every time
  • Copy into WordPress — the sanitizer strips styles, the layout collapses
  • Open the source code — 400+ lines of CSS you didn’t write and didn’t need to see
  • Elementor and Divi won’t accept raw AI-generated HTML
  • Non-developers are locked out of their own output entirely
With PostAI Studio
Paste. Click. Edit. Ship.
  • Paste any HTML — it renders live on the canvas, styles intact, in seconds
  • Click any heading, paragraph, or button to edit it in place — no code, no re-prompting
  • Change colors, add links, rearrange blocks — all visually, all immediately
  • One-click publish to WordPress with styles fully preserved through the sanitizer
  • Export as a clean standalone HTML file, ready to deploy anywhere
  • The AI did its job once. PostAI Studio makes sure that’s enough.
0
tools existed to visually edit AI-generated HTML without re-prompting or touching source code
40%+
of the web runs WordPress — with no reliable path to publish AI-generated HTML cleanly
1 file
the entire product — open in any browser, no install, no setup, start editing immediately
The problem was clear. The question was how to build the solution — without a traditional development team. That’s where the method comes in →
02 — The Method

What vibe coding with Claude actually looks like.

Vibe coding isn’t asking an AI to write code and hoping for the best. It’s a disciplined iterative process: you hold the vision, set the constraints, and direct the problem-solving. Claude handles the implementation. You review, test, push back, and iterate.

“I didn’t need to know how to implement shadow DOM isolation from scratch. I needed to know that shadow DOM was the right architectural choice — and then work with Claude to get it right across multiple sessions.”

The key skill isn’t typing code. It’s knowing what to build, in what order, and being able to evaluate whether the output is correct. That’s the instructional designer’s superpower applied to software development.

Vibe Coding Workflow — PostAI Studio
01
Identify the problem clearly
Define the exact user experience gap before writing a single line
Needs analysis
02
Architect the approach
Decide on single-file, shadow DOM isolation, no-dependency design
With Claude
03
Prompt → implement → test
Focused feature-by-feature sessions. One problem per session.
With Claude
04
Break it intentionally
Test edge cases. Find the failure modes before users do.
QA loop
05
Refactor and harden
Clean up what works, cut what doesn’t, document decisions
Iteration
06
Ship the increment
Working features go live. Start the cycle again.
Deploy
session-01.md — Initial Architecture Prompt
// How a typical vibe coding session begins:

Me: "I want to build a browser-based visual page builder as a single HTML file. No npm, no backend. Users paste HTML from Claude, Canva AI, or ChatGPT and get a live editable canvas. Key constraint: imported styles must never bleed into the editor UI. What’s the right architecture?"

Claude: "Shadow DOM is the right call here. Each imported block gets its own shadow root — complete style isolation by design, not convention. Here’s how we’d structure the rendering pipeline..."

// And the build begins.
The method was disciplined. But discipline alone doesn’t solve hard technical problems. Here’s exactly how the build unfolded →
03 — The Build

Built across months of focused sessions.
One problem at a time.

Each session had a single focused objective. This discipline made vibe coding work — not trying to build everything at once, but solving one real problem thoroughly before moving to the next. Not every session went cleanly. One didn’t.

S·01
Single-file architecture & shadow DOM foundation
Established the core rendering model: one HTML file, shadow DOM isolation per block, no external dependencies
Architecture
S·02
Import pipeline — paste to canvas
Built the HTML import flow. Any AI-generated HTML renders inside an isolated shadow root immediately on paste
Architecture
S·03
Direct click-to-edit text on the canvas
Switched from iframes to shadow DOM to enable native contenteditable — users click any text to edit inline
Editing
S·04
Background color — styling through shadow DOM cascade
Solved applying visual styles through shadow DOM boundaries using override style injection
Editing
S·05
Add link — toolbar action across shadow boundary
Built the link insertion flow, persisting text selection state across shadow DOM and light DOM interactions
Editing
S·06
CSS scoper — surviving WordPress sanitization
Built a prefix-based CSS scoper that rewrites rules with .postai-export so styles survive wp_kses on publish
Publishing
S·07
WordPress connector plugin
PHP REST API endpoint receives HTML and metadata, creates or updates WordPress pages cleanly
Publishing
It shipped. Then themes broke it.
The WordPress connector worked cleanly in testing — but testing used a bare theme. In the real world, active themes inject their own global CSS: resets, font stacks, layout wrappers. Published pages arrived with collapsed spacing, overridden fonts, and layout shifts that hadn’t existed in the Studio. The connector was technically correct. The assumption that a published page would be style-isolated was wrong.
Setback
Theme-aware CSS scoping & conflict resolution
Extended the CSS scoper to wrap all exported rules inside a high-specificity container class, overriding theme interference. Added a theme compatibility testing checklist to the QA process. Validated across Astra, GeneratePress, Kadence, and Neve before re-shipping.
Publishing
S·08
Undo/redo across shadow DOM
Rebuilt state management around a descriptor-based snapshot system that serializes block state without DOM access
UX
S·09
Export pipeline — clean standalone HTML output
Built the full export flow: inline styles, resolve assets, produce a self-contained file ready to deploy anywhere
Publishing
S·10
Floating toolbar & contextual editing UI
Context-aware toolbar that appears on text selection with the right actions for the selected element type
UX
S·11+
Multi-site WordPress management & licensing
Connect multiple WordPress instances from one Studio; tiered SaaS licensing with license API validation
Architecture
Sessions tell you what was built. The hard problems tell you how Clea thinks. See what required real architectural reasoning →
04 — Hard Problems

The parts that required real thinking.

Vibe coding accelerates execution. But some problems don’t have obvious solutions. These required architectural reasoning — not just prompting.

Style isolation inside the editor
AI-generated pages bring their own stylesheets. If those styles bleed into the editor UI, the whole application breaks. iframes failed because they killed contenteditable. Shadow DOM was the solution — but required a complete renderer rebuild.
→ Each imported block gets its own shadow root with full style scope
CSS surviving WordPress sanitization
WordPress’s wp_kses sanitizer aggressively strips styles it doesn’t recognize. Custom CSS from AI-generated pages gets wiped on publish — pages arrive broken on the other side of the pipe.
→ CSS scoper prefixes all rules with .postai-export before export
Undo/redo across shadow DOM
Standard undo implementations snapshot innerHTML. But shadow DOM content can’t be serialized that way. Naively saving state broke the entire undo stack.
→ Rebuilt around descriptor-based state: each block stored as a data object
Text selection across shadow boundaries
When a user selects text inside a shadow root and clicks a toolbar button in the light DOM, the selection is lost before the handler fires. Standard Selection API doesn’t cross shadow boundaries.
→ Selection range captured and persisted before any toolbar interaction clears it
Hard problems, solved by design — not by accident. See what that produced →
05 — The Product

The bridge the industry hadn’t built yet.

PostAI Studio sits in a category that didn’t exist before: the AI-output editing layer. The tool between generation and use. The place where non-developers take ownership of what AI produced and make it fully theirs — without a developer, without re-prompting, without touching a line of code.

What shipped looks like in practice

A marketer pastes a Claude-generated landing page into PostAI Studio. She clicks the headline and types her actual copy. She changes the button text. She publishes directly to her WordPress site. The page arrives intact — fonts, spacing, colors — untouched by the sanitizer. She did not open a text editor. She did not re-prompt. She did not wait for a developer.

That sequence — paste, click, edit, publish — is what PostAI Studio made possible. It took months of architectural work to make it feel that simple.

01
Paste any AI-generated HTML
Renders live on the canvas in seconds, styles intact
02
Click any element to edit
Headlines, paragraphs, buttons — all inline, no code
03
Publish to WordPress
Styles survive the sanitizer. Page arrives intact.
04
Or export as clean HTML
Self-contained file, ready to deploy anywhere
Industry context

Adobe, Wix, WordPress, Squarespace — they’re all building AI natively into their editors. The gap PostAI Studio occupies is real and it’s closing. But right now, in this moment, Clea saw it before they did, understood it from 20+ years of living inside the user frustration it creates, and built the product to close it. That’s not a portfolio piece. That’s a proof of how she works.

Solves For — Workflow
Click-to-edit — any HTML, instantly
Paste HTML from Canva AI, Claude, ChatGPT, or anywhere. Click any heading, paragraph, or button to edit it in place. No re-prompting. No source code. No round-trips.
Solves For — Technical
Shadow DOM isolation — styles that never bleed
Every imported block renders in its own shadow root. AI-generated styles stay contained. The editor UI stays intact. The two never interfere — by architecture, not by hope.
Solves For — Publishing
WordPress — styles survive the sanitizer
A lightweight PHP connector and a CSS scoper that prefixes every rule with .postai-export. Pages that looked right in the editor arrive right in WordPress. Every time.
Solves For — Access
No install. No setup. No developer.
The entire application is a single .html file — ~33,000 lines. Open it in any browser. Non-developers own their AI-generated output from the moment they paste it in.
Solves For — Scale
Multi-block canvas & multi-site management
Stack multiple imported HTML blocks on one canvas. Connect and manage multiple WordPress sites from one Studio. Built for users who aren’t building one page — they’re building a practice.
Solves For — Resources
Generate once. Edit directly. Ship it.
Every unnecessary re-prompt costs tokens, burns compute, draws power. PostAI Studio closes the loop: the AI does its job once, and the output belongs to you from that moment on.
~33KLines of production code in a single HTML file
6+Distinct problem categories solved in one tool
40%+Of the web on WordPress — now with a clean path for AI HTML
0External frameworks, dependencies, or install steps
The product speaks for itself. But what did building it actually teach? The honest reflection →
06 — Reflection

What this taught me about building with AI.

PostAI Studio didn’t come from a sprint. It was built session by session, problem by problem — with Claude as a technical partner and me as the product director. The combination worked because I brought what AI can’t: user empathy, product judgment, and the ability to say “that’s not quite right” with precision.

Domain knowledge is the real leverage
Understanding why shadow DOM was necessary — not just that it existed — made every session more productive. You can’t prompt your way out of not understanding the problem.
One problem per session is a rule, not a preference
Sessions that tried to solve multiple things at once produced tangled code. Constraint equals clarity.
Breaking it intentionally is part of the workflow
The best sessions ended with deliberate stress-testing until the feature failed — so the next session could harden it. Vibe coding without a QA mindset produces fragile work.
The product vision has to be yours
Claude never suggested what PostAI Studio should be. I did. Vibe coding accelerates implementation — it doesn’t replace product thinking.
The gap was simple: people were generating great HTML with AI and had no way to get it onto their website — or even just edit a headline — without a developer. I’d felt that frustration myself. That clarity made every architectural decision easier.
— On identifying the problem
Shadow DOM wasn’t the first approach. We went through iframes first — they worked for rendering but killed contenteditable. Switching to shadow DOM was a complete rebuild, but the right call. Claude helped me understand exactly why before we committed.
— On the shadow DOM decision
33,000 lines in a single HTML file sounds absurd until you use the product. No install friction. No setup. You open a file and you’re building. That constraint forced elegance.
— On the single-file architecture
You’ve seen the background, the problem, the method, the build, and the product. You know who built this and how. If that’s the kind of thinking you need — here’s how to reach Clea →
PM
Select engagements only

The kind of thinking
that builds what doesn’t
exist yet.

You need to build something that doesn’t exist yet.
Your organization bought the technology. Nobody planned for adoption.
You need a trusted technical advisor in the room before the decision gets made.

If you recognized yourself in any of those —

Let’s talk.

PostAI Studio started as a problem nobody had solved. It ended as a production SaaS. That’s what working with Clea looks like.

← Back to Portfolio Gallery