Codex plans with ASCII Wireframes → Claude Code builds → Codex reviews

I used to dive straight into The Codex-Claude Code Workflow and watch it build features.

Sometimes it worked brilliantly.

Other times?

The implementation worked but looked nothing like what I imagined.

The problem wasn’t Claude Code.

It was me.

I was expecting it to read my mind about UI layout and catch its own bugs.

Then I added two things to my workflow:

ASCII wireframes and systematic code review.

Now?

97% of my features work perfectly on the first shot.

No back-and-forth debugging. No “that’s not quite right” moments. Just clean, working code that matches my vision.

Let me show you exactly how this works.

.

.

.

The Old Way Was Good. The New Way Is Magic.

Here’s what I used to do:

1. GPT-5 plans the feature
2. Claude Code implements it
3. Hope for the best

It worked.

Kind of.

But UI was always a gamble, and bugs only showed up during testing.

Here’s what I do now:

1. GPT-5 asks questions until it’s 95% confident
2. GPT-5 creates ASCII wireframes (visual blueprint, minimal tokens)
3. Claude Code implements (following both plan AND wireframes)
4. GPT-5 reviews the git diff (catches bugs before I even test)
5. Claude Code applies fixes (surgical corrections)

The difference?

Night and day.

.

.

.

Real Example: Building WordPress Collapsible Sections

My WordPress newsletter was getting unwieldy. Long code snippets and prompts made posts hard to read.

Readers had to scroll forever to get through everything.

I needed collapsible sections.

Click to expand when you want details, stay collapsed when you don’t.

Here’s how the new workflow handled it.

Step 1: Setting Up for Success

I hit GPT-5 with my requirements.

But here’s the critical part – I told it explicitly: “DON’T WRITE OR EDIT ANY FILES.”

Prompt:

__YOUR_INSTRUCTIONS_HERE__

Read the codebase, and help me come up with a plan to implement everything above.

Make sure to include a short description for this plan in paragrah format at the beginning of the plan.

IMPORTANT: DON'T WRITE OR EDIT ANY FILES.

Use web search if you need to find solutions to problems you encounter, or look for the latest documentation.

Ask me clarifying questions until you are 95% confident you can complete this task successfully.

a. If the question is about choosing different options, please provide me with a list of options to choose from. Mark the option with a clear label, like a, b, c, etc.
b. If the question need custom input that is not in the list of options, please ask me to provide the custom input.

Always mark each question with a number, like 1/, 2/, 3/, etc. so that I can easily refer to the question number when I answer.

For each question, add your recommendation (with reason why) below each options. This would help me in making a better decision.

And I added this game-changer: “Ask me clarifying questions until you are 95% confident you can complete this task successfully.”

Plus numbered questions with lettered options.

No typing paragraphs. Just “1/a, 2/c, 3/b”.

Done.

Step 2: GPT-5 Goes Detective Mode

GPT-5 immediately dove into my codebase:

Then came the questions.

Not random questions.

Strategic ones:

Look at those options:

• Where should content live? (Theme files, CPT, or plugin)
• How should expand/collapse work? (Native HTML, JS toggle, or hybrid)
• Content delivery? (Inline, lazy-load, or auto-switch)

Every question had options. With recommendations. With reasons.

This is what thinking looks like.

Step 3: Quick Answers, Deep Impact

I fired back my choices:

Fast. Decisive. No essays needed.

But GPT-5 wasn’t done:

More edge cases.

More decisions.

Every answer shaped the final implementation.

Step 4: The Plan Emerges

After gathering everything, GPT-5 delivered:

This wasn’t a vague outline.

It was a blueprint:

• Exact file structure
• CPT registration details
• Shortcode parameters
• REST endpoint specs
• Caching strategy
• Security measures

Everything. Decided. Documented.

The ASCII Wireframe Revolution

Here’s where things get interesting.

I asked GPT-5: “Based on this plan, give me the UX flow map and screen-by-screen content using ASCII wireframe.”

Prompt:

Based on this plan, give me the ux flow map and screen-by-screen content using the ASCII wireframe. Put it at @notes/wireframes.md.

What came next blew my mind:

The Power of ASCII Wireframes

Look at this beauty:

This isn’t just a sketch.

It’s a contract.

Claude Code sees this and knows EXACTLY what to build.

No interpretation. No guesswork. Just pure clarity.

Why ASCII beats everything else:

• 10x fewer tokens than HTML
• Zero ambiguity
• Instant understanding
• Easy to modify
• Works in any terminal

Step 5: Claude Code Takes the Wheel

Armed with the plan AND wireframes, I unleashed Claude Code (Sonnet 4.5):

Watch what happened:

Claude didn’t hesitate. Didn’t guess. It knew exactly what to build because the wireframes showed it.

Implementation complete. First try.

Step 6: The Code Review That Catches Everything

This is where most devs stop.

Not me.

I fired up Codex CLI’s code review feature:

Prompt:

Please read the git diff, and review the code changes to see if the implementation is correct and follows the plan @notes/plan.md and wireframes @notes/wireframes.md, correctly.

GPT-5 went full detective:

Found issues? You bet:

• P1: Missing lazy-mode fallback for non-JS users
• P1: Copy button behavior was wrong
• P2: Preview line count didn’t match CSS
• Security improvements needed

These weren’t “nice to have” fixes. These were bugs waiting to happen.

Step 7: Surgical Fixes

I handed GPT-5’s review to Claude Code:

Claude applied every fix.

No arguments. No confusion. Just clean corrections.

The End Result: From Concept to Production

Here’s what we built. In one shot. With this workflow.

The WordPress Admin Experience

Clean integration into WordPress admin. “Longform Sections” sits right where it should, right below Pages.

Look at that meta box on the right. Copy shortcode with one click. Multiple usage examples. All the parameters documented right there.

Every attribute explained:

• id – Post ID (required)
• title – Custom title or defaults to post title
• lines – Preview line count (default 6)
• mode – smart|inline|lazy
• expand_text / collapse_text – Customizable labels
• deep_link – Enable direct linking to sections
• copy_button – Show copy button for code

No documentation needed. It’s self-explanatory.

The Frontend Magic

This is what readers see. Clean. Collapsed. A bash script preview with “Show more” button ready.

The “Next Worktrees Manager” section shows just enough code to give context. The fade-out effect tells readers there’s more. One click to reveal everything.

Clean.

Collapsed.

A bash script preview with “Show more” button ready.

Click “Show more” and boom – the full script appears.

.

.

.

Why This Workflow Changes Everything

97% Success Rate Isn’t Luck

It’s the result of:

• Clear communication through wireframes
• Systematic planning with questions
• Meticulous review before testing
• Surgical corrections based on feedback

You don’t get 97% success by luck.

You get it by design.

That’s how “good enough” becomes “ships perfectly.”

.

.

.

Your Turn to Level Up

Stop settling for “close enough” implementations.

Stop debugging for hours.

Stop the back-and-forth madness.

Here’s your action plan:

1. Tonight: Save the workflow prompts
2. Tomorrow: Try it on one small feature
3. This week: Build something complex
4. Next month: Wonder how you ever worked differently

.

.

.

The Bottom Line

I built a production-ready WordPress feature in less than 20 minutes.

Not a prototype. Not “mostly working.” Production-ready.

97% of my features now ship on the first try.

The 3% that don’t? External dependencies. Environment issues. Things no AI can predict.

This workflow transform you from someone who “uses AI to code” to someone who orchestrates AI to build exactly what I envision.

ASCII wireframes + systematic planning + code review = development superpowers.

What will you build when implementation matches imagination perfectly?

---

P.S. – This workflow needs GPT-5 (via Codex CLI) for planning/review and Claude Code (Sonnet 4.5) for implementation. Together, they’re unstoppable. Apart, they’re just good. Choose wisely.