The Shift to HTML-First Design

Kyle Zantos and the host discuss a fundamental shift in their design practice: moving away from static design tools toward generating functional HTML artifacts. By using AI agents to produce standalone HTML documents, designers can now prototype, test, and iterate on ideas that are closer to the final product than static mockups ever could be. This approach allows for "feeling" the design—testing motion, interaction, and layout in a browser environment early in the process.

Autonomous Auditing and UX Writing

One of the most powerful applications of this workflow is the use of autonomous agents to audit design systems. By chaining specific skills (such as those developed by Emil Kowalski or Jakub Krehel), designers can prompt an orchestrator agent to run multiple sub-agent audits on a project. These agents compile results, remove duplicates, and present a clean HTML document with proposed changes, allowing the designer to approve, deny, or discuss specific items. This same logic applies to UX writing, where designers can create a centralized "UX writing ecosystem" to manage system dialogues, toasts, and notifications, ensuring consistency across the entire product.

Visualizing Motion and Interaction

For design engineers, text-based descriptions of animation are often insufficient. The speakers highlight the value of having agents generate "before and after" visual comparisons of motion. By incorporating interactive elements like sliders or easing curve visualizers directly into the HTML artifacts, designers can fine-tune animations in real-time. This turns the design process into a collaborative dialogue with the AI, where the designer provides feedback on the visual output rather than just the code.

Node-Based Exploration and Pipeline Refinement

Kyle Zantos introduces a more advanced, node-based workflow using tools like Terminal Graph. Instead of relying on a single prompt, he constructs a pipeline where an agent iterates through multiple versions of a design. Each iteration is audited by a sub-agent, and the feedback is fed back into the next loop. This allows for iterative refinement where the designer can pinpoint exactly where the process needs adjustment—such as adding a specific instruction or invoking a different skill—to achieve a more polished result. This method moves beyond simple generation and into the realm of building custom, repeatable design systems.

Key Takeaways

  • Design in the browser: Use HTML artifacts to prototype ideas that require interaction or motion, as static tools often fail to capture the "feel" of the final product.
  • Chain your agents: Use an "orchestrator" agent to manage sub-agents that perform specific tasks like accessibility audits, copy reviews, or code quality checks.
  • Build visual feedback loops: Always ask agents for visual representations (screenshots or rendered components) rather than just text descriptions when iterating on UI or motion.
  • Create UX writing hubs: Centralize all system messages and dialogues into a single document to ensure tone and copy consistency across the product.
  • Iterate on the process, not just the output: If an AI output is predictable or lacks variety, treat the workflow as a pipeline that can be tuned by injecting specific instructions or audit steps at different nodes.

Notable Quotes

  • "If I am primarily designing something, it makes all the sense in the world to me to own the front end. If I'm the one designing it, why wouldn't I own that? I want to play the songs that I write."
  • "I had no idea how much standalone HTML documents could do. That was just a complete blind spot for me as a designer turned builder."
  • "When you have to feel something, it's a really good way to just feel something a million different directions. I was previously doing that in static design tools... but when you have to feel it, it just doesn't cut it."
  • "I'm getting tired of coming up with five variations... it's not giving me anything inspiring or refined enough. This process is kind of trying to help refine the outputs from an autonomous loop."