Opus for UI Work with Clear Constraints
Opus for UI Work with Clear Constraints
The surprise was not that Claude Opus could generate UI code. It was that the generated UI was better than what I would have built through manual iteration. The key was giving it tight design constraints instead of open-ended instructions.
Why Constraints Matter for AI UI Work
Telling an AI "design a connection stats UI" produces generic output. Telling it "design a connection stats panel that shows 4 metrics in a 2x2 grid, uses the app's existing color tokens, fits in a 320px sidebar, and matches the visual density of the settings panel" produces something you can actually ship.
The constraints eliminate the vast majority of design decisions. The AI does not need to invent a layout system, choose colors, or decide on information density. It works within the box you define, and it fills that box effectively.
The Superpowers Plugin Approach
The plugin provides additional context to Claude - screenshots of existing UI, design tokens, component library references. This context plus constraints means the AI understands both what the UI should look like and what system it needs to fit into.
The result was a connection stats panel that matched the existing app's visual language, handled edge cases like "no data" and "loading" states, and included responsive behavior for different sidebar widths. Getting this through manual iteration would have taken 3-4 rounds of design and implementation. The AI produced a shippable version on the first attempt.
When This Works and When It Does Not
This approach works best for: utility UI (settings panels, stats displays, data tables), component variations (new card types using existing patterns), and responsive adjustments (adapting a layout for different sizes).
It works poorly for: novel interaction patterns the AI has not seen, highly branded visual design that requires artistic judgment, and complex animated transitions.
Use Opus for the 80% of UI work that is structured and predictable. Save your design energy for the 20% that requires genuine creativity.
Fazm is an open source macOS AI agent. Open source on GitHub.