Mature AI design workflows involve spending significantly more time in low-cost, exploratory environments like HTML prototypes before a full build. This "visual planning" phase solidifies UX and flows, proving more efficient than the earlier method of immediately generating and then tweaking code.

Markdown plans from AI agents are becoming too long and unreadable. HTML allows for richer, more engaging artifacts with visuals and better formatting. This improves human oversight and collaboration with the AI, as the plans are more likely to be read and understood by the engineer.

Instead of static mockups, prompt an AI to create a single HTML file containing multiple interactive UI options. This allows designers to quickly test and compare complex elements like animations or hover states, providing a faster and more tangible feedback loop for UI development.

Instead of simple mockups, AI can generate standalone HTML documents with interactive elements like approve/deny buttons. This creates a conversational artifact, allowing designers to provide structured feedback directly within the prototype, which is then fed back to the AI for the next iteration.

Expert users can request effects like "staggered animation" because they know the technical terms, but most users don't. To unlock AI's potential for everyone, design tools need to build features, like a visual vocabulary center, that teach users the words needed to describe and request sophisticated visual outcomes.

Hera's core technology treats motion graphics as code. Its AI generates HTML, JavaScript, and CSS to create animations, similar to a web design tool. This code-based approach is powerful but introduces the unique challenge of managing the time dimension required for video.

To speed up iteration with an AI video agent, first generate a Markdown storyboard for the narrative, then have the agent create a static `storyboard.html` file. This file shows one key visual frame per scene, allowing for rapid aesthetic review and changes before committing to the time-intensive full video render.

Instead of receiving a wall of text from an agent, prompt it to generate an interactive HTML artifact using a tool like Lavish. This makes plans easier to skim, critique, and annotate, enabling a much richer and faster feedback loop with the agent.

Instead of writing complex descriptive prompts for animations, designers at Notion sketch keyframes in Figma, take screenshots, and feed them to an LLM. The AI's computer vision interprets the visual steps and generates the animation code, streamlining the motion design process.