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
advancedEngineeringClaude
How to Implement AI Governance with Context-Aware Project Controls
Create context-aware guardrails for your enterprise AI agent using a 'Project' governance layer. As a project owner, define rules, scope tools, and require human-in-the-loop approval for sensitive actions, ensuring safe and effective AI use.
Open
intermediateOperationsKai (Stripe)
How to Turn a One-Off AI Chat Session into a Reusable Workflow for Your Team
Transform a successful AI chat session into a reusable skill that anyone in your company can use. Package prompts, tools, and code into a standardized workflow, making it easy to share and scale automation across your organization.
Open
beginnerDataKai (Stripe)
How to Create a Custom Data Dashboard On-the-Fly with a Natural Language AI Agent
Use a natural language AI agent to instantly generate and iterate on custom data dashboards. This workflow queries your company's data securely, allowing non-technical users to perform their own 'last mile' data analysis without filing tickets.
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