I figured out how to get consistent UI from Claude Code

Details

External ID

46699260

Source

HN

Company

—

Product

I figured out how to get consistent UI from Claude Code

Website domain

interface-design.dev

Launched

Jan. 20, 2026

Cohort

—

Upvotes

26

Upvotes percentile

0.6903820816864296

Tags

—

Fetched at

Sept. 7, 2026, 9:25 p.m.

Updated at

Sept. 7, 2026, 9:25 p.m.

Description

The answer is simple: the more "prescriptive" you are with instructions for Claude, the worse your output. The reason is that Claude tries to pattern match - it's been trained on thousands of safe UI patterns, which is why when you ask for "a modern dashboard" it doesn't really think about the problem space; it just defaults to whatever safe design pattern it can whip up at the time.I've been working on a Claude Code skill to combat generic UI output, and I tried different approaches like being very detailed with my personal visual style, e.g., the type of alpha values to use for borders, specific token patterns to follow, etc. - and while I got okay-ish output, I realized that most of the visual output looked similar across a range of different instructions, with no diversity in creativity or information architecture.So I analyzed and broke down the official frontend-design skill to understand how it's able to excel at creative tasks, and what I discovered is that the skill is mostly principle-based and evocative, which is brilliant when you think about it. It maintains just the right balance to fuel creativity while maintaining structure across different ranges of tasks.So my approach changed. I decided to build my skill using the same pattern: detailing my design principles but framing them in an evocative way to force Claude to deeply explore the task domain before any visual output (feel free to tear apart my approach, but hey, it works). Since then I've been getting way more thoughtful initial output from Claude rather than it defaulting to the safe UI patterns it was trained on.My goal for this skill is to complement Anthropic's frontend-design skill. While frontend-design focuses on distinctive, memorable aesthetics for any web UI, interface-design is built for systematic consistency across functional interfaces - dashboards, tooling, web apps - where design decisions need to persist and compound across sessions.

• Source listing
• Website