Claude Code html-plan 插件：结构化代码计划展示与交互

This is how Claude Code plans should look.

It's html-plan, a plugin Thariq on the Claude Code team is testing: the plan becomes 𝗼𝗻𝗲 𝘄𝗲𝗯 𝗽𝗮𝗴𝗲 𝘆𝗼𝘂 𝗰𝗮𝗻 𝗿𝗲𝗮𝗱 𝗶𝗻 𝗮 𝗺𝗶𝗻𝘂𝘁𝗲, and you answer its questions by clicking an option.

It opens as a tree you expand one level at a time: → Level 1: what users can do or see after the change, with a UI mockup → Level 2: how it works, with the call stack, data structures or a few lines of code → Level 3: the file and line it changes Read only level 1 and you already know the whole change.

For every question, Claude has already picked the answer it recommends. Change it if you disagree, and leave a comment on any line you take issue with. Then hit Respond to get one reply. Paste it back into Claude Code, and only then does it start writing code. Any question you never opened gets flagged in that reply, and 𝗖𝗹𝗮𝘂𝗱𝗲 𝘄𝗼𝗻'𝘁 𝘁𝗮𝗸𝗲 𝗶𝘁 𝗮𝘀 𝗮 𝘆𝗲𝘀.

The plan's text is written in ASD-STE100, the English used in aircraft maintenance manuals, which Karpathy recommended last week. Each sentence says one thing, and packing the page checks for long sentences and passive voice.

Thariq also wants it to 𝗿𝗲𝗽𝗹𝗮𝗰𝗲 𝘁𝗵𝗲 𝗱𝗲𝗳𝗮𝘂𝗹𝘁 𝗽𝗹𝗮𝗻 𝗺𝗼𝗱𝗲. To install: claude plugin marketplace add anthropics/claude-plugins-community claude plugin install html-plan@claude-community Then type /html-plan followed by what you want to build. You'll need node.

Using Codex, or don't want to install a plugin? Add this to your CLAUDE.md or AGENTS.md and your plans in the terminal get written the same way 👇

Writing plans When I ask for a plan first, write it as a tree and wait for my reply before you start: - Level 1: what users can do or see once it's done. One sentence per item, one line max, written as a claim that can be true or false, like "Each user can hold 50 scheduled messages at most." Don't just write "Message limit." Split by feature, not by file, module or order of steps. Reading only level 1, I should know the whole change - Level 2: how each item works, naming the entry point, the rule or the data structure - Level 3: where it changes, as file:line. Mark code that doesn't exist yet as a sketch - At most 5 items under each item and at most 3 levels. Number every item, and I'll reply by number - Put each question for me under the item it affects, 2 to 5 per plan. Give options for each and mark the one you recommend. If an option would drop an item, say which - Write level 1 and your questions in plain language with no code names. Save code names for levels 2 and 3 - End with what you're not changing this time, then list your question numbers again Don't take a question I didn't answer as a yes. If it matters, ask me again before you start.