Step 01
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.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.1.
Source episode · 17:25How 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.
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
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Step 02
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]
Step 03
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.
Step 04
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.
Runbook notes
How to recover when the loop fails and where human judgment helps.
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.
Related workflows
intermediateProductCodex
Create an Immersive AI Language Tutor
Build a voice-first language practice app that forces immersion by refusing to switch to the user's native language. The AI tutor provides corrections in real-time, within the flow of the conversation, to simulate an authentic learning environment.
Open
advancedOperationsChatGPTCodex+1
How to Manage Business Operations with Role-Based AI Agents
Organize your business operations by creating a 'fellowship' of specialized AI agents. This workflow shows how to silo responsibilities into projects and assign distinct roles to AI assistants to automate administrative tasks and context retrieval.
Open
intermediateProductCodex
Build a Native Mobile App with AI and Clear Product Direction
Use Codex to help build a native mobile app, then guide the design and review the resulting code. William brought web-development and product experience to the project.
Open
Start shipping better products.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start · 14-day Pro trial · SOC 2 Type II
