←Back/Engineering/Claude
IntermediateEngineering

Build Disposable Micro-Apps with AI to Edit Complex Plans

Turn one awkward section of an HTML plan into a temporary editing app. Claude builds controls for the exact data you need to change, then exports the revised rules back into your plan.

Build Disposable Micro-Apps with AI to Edit Complex Plans

Source episode · 17:25

How I AI: Thariq Shihipar on Replacing Markdown with HTML for AI-Powered Development

with Claire Vo

Thariq selects a hard-to-edit rules table, asks Claude for the ideal editing interface, changes the rules visually, and copies the result back into the plan.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • An existing HTML plan with structured content that is awkward to edit
  • A sample of the current data and the format the main plan expects
  • Claude Code and a local web browser

What you’ll make

A disposable single-file editor with controls for the selected data and an export that can be pasted back into the main plan.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

4 steps

Step01

Identify an Editing Challenge

Choose one structured section that is painful to edit in raw HTML, such as a table of visualization rules. Copy its current values and note the exact format the main plan needs when you paste the result back.

Step02

Prompt for a Custom Editing UI

Ask Claude for a small, disposable editor built around that data. Name the controls you need, but let Claude choose the layout. Require a self-contained HTML file and an export in the same format as the source section.

Example prompt
Create an editable HTML artifact for the decision rules below. I do not like editing them in the main plan. Build a focused custom interface that gives me structure and flexibility, including add, remove, reorder, and edit controls. Preserve every source field and provide a copy button that exports the revised rules in the original format. Design the ideal interface for this specific job.

[Paste the current rules here]
Step03

Use the Throwaway Micro-App

Open the file in a browser and change the rules through its controls. Test adding, deleting, and reordering an item. Compare the visible values with the source data before exporting anything.

Step04

Integrate the Refined Output

Use the export control to copy the revised Markdown or JSON. Validate the structure, paste it into the original plan, and reopen the plan to confirm that the new rules render correctly.

What good looks like

  • Every source rule appears in the editor without losing values.
  • You can add, remove, and change entries without editing HTML by hand.
  • The exported data matches the format expected by the main plan.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The editor changes or drops fields from the source data
Give Claude a representative input object and the exact output schema. Ask it to preserve unknown fields and show a before-and-after diff in the interface.
Edits disappear when the page reloads
Add import and export controls plus local browser storage. Export a copy before closing the page if the tool is intentionally temporary.
Claude builds a full application instead of a focused editor
Restate the single editing job, require one self-contained HTML file, and remove authentication, databases, and unrelated navigation.
The exported Markdown or JSON cannot be pasted back into the plan
Add a validator that checks the export against the required schema and display errors next to the field that caused them.

Keep building

Related workflows

Create an Automated Workout Tracker with a Simple Claude Voice Note
beginnerPersonalClaude

Create an Automated Workout Tracker with a Simple Claude Voice Note

Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.

Open
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
advancedOperationsClaude

How to Rebuild Your Gmail Inbox Inside Claude to Manage Email

Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.

Open
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
intermediateSalesClaude

Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'

Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready