hebel. today · 12 November 202642 / 74

Technology · Frontend Web Development

Developers use comparison pages to judge AI-generated UI

Thorsten Ball accelerates interface exploration by prompting agents to generate 20 variations of a screen or flow, which the agent then renders on a single HTML page for side-by-side comparison. This move shifts the…

Thorsten Ball accelerates interface exploration by prompting agents to generate 20 variations of a screen or flow, which the agent then renders on a single HTML page for side-by-side comparison (John Ma from AI Artifact). This move shifts the developer’s role from iterative feedback—where each round starts from the previous guess—to judging a range of options at once, enabling the selection of specific headers or layouts from different variations. Christine Vallaure similarly uses a Figma manifest, a small JSON file listing library components and their internal keys, to stop agents from guessing layouts and ensure they use only authorized design system components (UX Collective). By reading the layout file from the code before building, her agent names auto-layout frames with consistent spacing variables, allowing developers to recognize the structure immediately.

  • Dropbox used scoped agent tasks to complete 53 test cleanup tasks and deliver 22 accessibility improvements in one week (TLDR DEV).
  • PostHog uses decision models to filter 98.7% of LLM calls, answering narrow questions with typed outputs before invoking larger models.
  • A team of 1,000 agents reproduced a formal proof of Fermat's Last Theorem in 28.7 hours using separate sandboxes and shared Git.
  • Emil Kowalski compiled a collection of 17 AI agent skills that provide specialized guidance for animation, gestures, and performance edge cases (TLDR Design).

Try today · 30 min

Generate 20 variations of a UI component and a comparison page.

Prompt your agent to vary layout, hierarchy, and density rather than just color.

You need

  • A specific UI component or screen to iterate on
  • An AI coding agent

Steps

  1. Prompt the agent to generate 20 variations of the chosen screen for a specific user task.
  2. Instruct the agent to vary the layout, hierarchy, density, and tone across these versions.
  3. Ask the agent to build one HTML page showing all versions side by side at mobile and desktop widths.
  4. Request a notes field under each variation to label the primary decision that makes it different.
  5. Review the page to identify which specific elements from different variations work best together.

One email instead of your newsletter pile.

Forward the newsletters you already get (a Gmail filter does it) and tell Hebel your goals. Every morning it reads them with 20,000 others and sends one short email, with one small thing to do today. Fewer emails, not more. Free during beta.

Start my paper →
LinkedIn X

Sources

  1. TLDR DEV on hebel. →Describes how Dropbox used scoped agent tasks for cleanup and how PostHog filters LLM calls to reduce unnecessary processing.

  2. John Ma, AI Artifact on hebel. → ✎ Written by a personDetails the method of generating 20 UI variations on a single page to enable better design judgment.

  3. TLDR Design on hebel. →Contains a collection of 17 specialized AI agent skills for developers to improve interface quality.

  4. UX Collective on hebel. →Explains the use of Figma manifests and layout naming conventions to keep design and code in sync.

More in Technology

Sorting data tiers to prevent AI leaks

Automating file maintenance with agents versus manual rules

Gemini Robotics 2.5 hits 96% success in Mercedes-Benz pilot

Automated bug-hunting resets patch volume

Guatemala pivots from necessity to fintech-led growth

Payment systems prevent double charges with idempotency and atomic outboxes

Frontend Web Development yesterday

AI prototypes hit the design system wall

Sign in to Hebel first

Likes, your collection and done Hebel need an account. We email you a six digit code; no password.