Show HN: I figured out how to get consistent UI from Claude Code
17 points
8 hours ago
| 4 comments
| interface-design.dev
| HN
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.

F7F7F7
17 minutes ago
[-]
These are all over Twitter now. Everyone has their own flavor. I'd love to see someone benchmark them.
reply
k2so
2 hours ago
[-]
Interesting work, in the examples I can see that quite a few of them have the teracotta/warm-cream colour palette, was that an explicit choice to keep them in the prompts?

From the official frontend-design skill, on multiple occasions, unprompted, even I received the same warm-cream tones for different projects. Wondering if it's a new latent direction the model chooses to go to avoid safe/generic patterns.

reply
soared
4 hours ago
[-]
> 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.

This is kind of unclear language to me. What does this mean? What is evocative in this context?

reply
insin
3 hours ago
[-]
I think it means stuff like this, but I can't tell tell when people are parodying stuff any more when it comes to LLMs:

> The squint test: Blur your eyes. Can you still perceive hierarchy? Is anything jumping out harshly? Craft whispers.

https://github.com/Dammyjay93/interface-design/blob/main/.cl...

reply
Erem
1 hour ago
[-]
It means poetry’s back on the menu boys
reply
joshribakoff
2 hours ago
[-]
Like a vibe that activates a certain latent space in the model
reply
erichocean
4 hours ago
[-]
Just share your skill folder (with the SKILL.md file). Your description is unclear.
reply