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.
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.
Source episode · 17:25
How I AI: Thariq Shihipar on Replacing Markdown with HTML for AI-Powered Developmentwith 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.
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
- ClaudeVisitClaude
Anthropic AI assistant
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
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.
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
intermediateContentJev
How to Analyze YouTube Comments for Audience Insights with AI
Quickly analyze thousands of YouTube comments for sentiment and new content ideas using the Jev AI model. This workflow helps creators turn audience feedback into actionable insights for their content strategy.
Open
advancedProductJevCodex
How to Build a Multi-Model AI Product Insights Engine
Create a powerful product insights engine by combining Jev with other LLMs. Use Jev for large-scale classification of customer feedback and development data, then apply reasoning models to analyze the structured output for deep insights.
Open
intermediateEngineeringJevCodex+1
How to Analyze GitHub PRs to Understand Engineering Effort with AI
Use the Jev AI model to cheaply and quickly cluster thousands of GitHub pull requests into thematic areas. This helps engineering and product leaders understand the breakdown of work between new features, tech debt, and maintenance.
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.
Free to start
No credit card
SOC 2 certified
Enterprise ready