←Back/Product/Claude
BeginnerProduct

Create Interactive HTML Project Plans with AI for Better Visualization

Ask Claude Code to brainstorm and plan in a self-contained HTML file with comparable ideas, mockups, risks, code excerpts, and implementation details that people will actually inspect.

Create Interactive HTML Project Plans with AI for Better Visualization

Source episode · 06:13

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

with Claire Vo

Thariq replaces a long Markdown brainstorm with a scrollable HTML guide, chooses one concept, and expands it into a visual implementation plan.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • Claude Code and a local web browser
  • A project idea, audience, and decision you need to make
  • Relevant repository or product context

What you’ll make

A self-contained HTML plan that compares ideas visually and expands the selected concept into requirements, mockups, code excerpts, and implementation steps.

Tools used

Step by step

The workflow

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

3 steps

Step01

Start the Brainstorm in HTML

Give Claude the project, audience, and decision you need to make. Ask it to put the brainstorm in a single HTML file so it can use layout, mockups, and comparison controls instead of returning a long chat response.

Example prompt
I need to choose a direction for [project or demo]. Brainstorm 6 to 8 ideas in one self-contained HTML file. For each idea, include the user problem, a small visual mockup, why it fits the audience, one risk, and a recommendation. Make the options easy to compare. Do not implement the product yet.
Step02

Generate the Full Implementation Plan

Choose one concept and let Claude interview you about unclear requirements. After you answer, ask for a visual implementation plan with the details you need to build: key flows, file structure, code excerpts, mockups, risks, and verification.

Example prompt
Create a self-contained HTML plan that helps me visualize the implementation of the selected idea. Include requirements, user flows, file structure, code excerpts, interface mockups, risks, and verification steps. Add whatever else is needed to give me maximum context, but keep the plan navigable and specific to this project.

Specify the pieces you care about, then leave room for Claude to add context you did not anticipate.

Step03

Review and Share the Visual Plan

Open the file locally and walk through it as if you were about to build. Check that the mockups agree with the requirements and that every major step names an output or verification method. Share the file or host it at a reviewable URL when teammates need to comment.

What good looks like

  • The brainstorm makes the options easy to compare on one page.
  • The selected plan includes requirements, risks, file changes, and visual examples.
  • The HTML file opens locally without a build step or missing assets.

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 brainstorm is a decorated list with no useful comparison
Add decision criteria, ask for a visual mockup for each option, and require one concrete risk and recommendation per idea.
The HTML file opens with missing styles or scripts
Ask Claude for one self-contained file with embedded CSS and JavaScript. Remove remote dependencies unless the plan truly needs them.
The implementation plan is long but still vague
Ask for named files, data flow, code excerpts, interface states, risks, and verification steps tied to the selected concept.

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