Effective HTML guide
Choose and create useful HTML artifacts for work with coding agents.
HTML is useful with agents for the same reason it is useful everywhere else: it can combine structure, visual form, and interaction in one inspectable thing.
The point is not to replace Markdown. The point is to recognize the decisions that become easier when the artifact can show layout, compare alternatives, respond to input, or expose relationships directly.
Start with the decision
Ask what the next human judgment actually is:
- What belongs, and where? Start with a wireframe.
- How should this feel and look? Make a more resolved mockup.
- Does this flow behave correctly? Build a prototype.
- How do these parts relate? Draw a diagram.
- What sequence preserves the source commitments? Write a plan.
Higher fidelity is not automatically better. The right artifact is the lowest fidelity that answers the current question without creating a new distraction.
The working loop
- Name the decision the artifact needs to support.
- Choose the form and fidelity that make that decision visible.
- Make one self-contained artifact with realistic content.
- Inspect it at real desktop and mobile sizes.
- Review the structure, behavior, and boundaries that matter at this stage.
- Revise or advance the fidelity only when the next decision requires it.
What this guide covers
The guide starts with the five artifact forms represented in the Effective HTML repository: broad HTML artifacts, wireframes, prototypes, plans, and diagrams. The examples stay inspectable and source-grounded.
Continue with why HTML, or go directly to choosing fidelity.