19
Show HN: I figured out how to get consistent UI from Claude Code
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.
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.
These are all over Twitter now. Everyone has their own flavor. I'd love to see someone benchmark them.
> 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?
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...
I wonder if the old "my grandma used to make really detailed UI" prompts are going to be back to move away from the default UI patterns "guardrails"
It means poetry’s back on the menu boys
Like a vibe that activates a certain latent space in the model
Just share your skill folder (with the SKILL.md file). Your description is unclear.
[dead]