Ask HN: How do you employ LLMs for UI development?
Source: Hacker News
Using Claude for Mockups
I’ve found Claude helpful at creating ideas and mockups for GUI apps I need. Don’t ask it to generate any images or vectors—it’s horrible at that—but you can ask it to make a mock for an app that does such and such, has three columns, etc., and it has produced impressive results in HTML/CSS for me.
Screenshot‑Comparison Workflow
The best approach I’ve used is to give the LLM instructions to use WebDriver + browser screenshots. I start with baseline screenshots of how I want the UI to look (usually created in Figma), then instruct the agent to match against those screenshots and continue iterating until the implementation aligns with the screenshots.
Once the first implementation is done, I go through all the code, devise a proper software design and architecture, and refactor everything into clean code, again using screenshot comparison to ensure there are no regressions.
Styling via Reference Screenshots
Since LLMs are almost AGI, you can feed one a screenshot of a few UIs you like and ask it to duplicate the style for your own application, specifying requirements such as “please style the application like this, while observing best practices for internationalization, assistive technologies, and Fitts’ Law.”
If this workflow fails, it’s likely because you’re using an outdated LLM; the older models are much less capable.
Challenges in UI Design
User‑interface design is a very cursed task for an LLM. They can generate high‑quality CSS and design patterns, but they’re often horrible at actual layout and composition.
For simple, well‑defined requests—e.g., “add a status strip to the form with …”—the output works perfectly. However, for broader prompts like “a modern UI for gathering customer details,” the results are usually unsatisfactory.
“Vibe” vs. “Serious” Approaches
I haven’t completely cracked the nut yet, but the patterns that have worked best for me are:
- “Vibe” – using vanilla HTML/CSS/JS. It’s surprisingly good at producing a functional first version, and the lack of a build step speeds up iteration.
- “Serious” – using Go with server‑side template rendering and handlers, combined with
go‑rod(Chrome DevTools Protocol driver) for testing components and taking screenshots. With a skill set and some existing examples, the LLM can generate well‑tested components. A single compiled language aids correctness and maintenance.
Claude Code with Figma and Chrome DevTools
For UI implementation (even if not for UX), I use Claude Code together with Figma MCP and Chrome DevTools MCP so the model can take screenshots and compare them to the expected design as part of the acceptance criteria.
When working on a React‑based app, I also use the Agentation library for more targeted fine‑tuning of the UI:
https://github.com/benjitaylor/agentation
Best Practices for LLM‑Assisted UI Development
- Use a standard CSS library – e.g., Tailwind.
- Use a common React component library such as Radix UI (don’t reinvent the wheel).
- Avoid inventing new UI patterns.
- Use Storybook to isolate all custom UI elements and test/polish them in every state.
- Develop enough taste over the years to know what constitutes good UI, then ask Claude/Codex to iterate on details you don’t like.
Final Thoughts
The original question is about “UI development” – the implementation part of the UI, not the earlier design discovery phase. Current LLMs are still pretty awful at that specific part of the workflow.