Three Resources That Dramatically Improve Claude Code's UI Output

When you ask Claude Code to build a UI, it tends to produce generic, AI-looking layouts. These three resources seem useful for improving that, so I am taking notes.

I have used one of them, the Atlassian Design System, a few times for other work, and it clearly helps at the level of skeleton screens and mockups. That also means it still feels a bit AI-ish once you go beyond that level. I want to see what happens when I combine the remaining two as well.

The Three Resources

1. UX psychology - https://www.shokasonjuku.com/ux-psychology
2. frontend-design SKILL.md - https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
3. Atlassian Design System - https://atlassian.design/

What Each One Does

Resource	Role	Layer
UX psychology	Principles for why things should be done a certain way	Design philosophy
frontend-design SKILL.md	Aesthetic rules for what to do and what to avoid	Visual direction
Atlassian Design System	Concrete implementation patterns	Structure, spacing, and grid

1. UX Psychology

A collection of psychological effects and biases related to UX, compiled by Shokasonjuku. It explains about 50 different psychological effects.

Some highlights:

• Aesthetic-usability effect: Beautiful UI feels easier to use
• Cognitive load: Design that reduces the user’s mental effort
• Decision fatigue: Too many choices make rational decisions harder
• Doherty threshold (the 0.4-second wall): If you make users wait longer than 0.4 seconds, they lose interest
• Loss aversion: People try harder to avoid losing than to gain
• Peak-end rule: The best moment and the ending determine the memory
• Progressive disclosure: Do not reveal everything at once; show it when needed

2. frontend-design SKILL.md

Claude Code’s frontend design skill. It is a set of guidelines for avoiding generic, AI-looking designs and producing distinctive, serious UIs.

Core Rule

Decide on an aesthetic direction before coding. Choose a strong direction such as brutalist, retro-futurist, minimalist, maximalist, organic, or luxurious.

Absolute No-Gos

• Inter, Roboto, Arial, and system fonts
• Purple gradients on white backgrounds
• Predictable layouts and components
• Space Grotesk, which AI tends to converge on

Five Aesthetic Principles

1. Typography: Choose distinctive, attractive fonts, ideally pairing a display face with a body face
2. Color and theme: Use CSS variables for consistency, and support both light and dark modes
3. Motion: Use high-impact moments such as staggered page-load reveals and meaningful hover effects
4. Layout: Use unusual, asymmetrical, and surprising compositions
5. Background: Add atmosphere and depth instead of relying on a flat fill

The key point: minimal or maximal is fine as long as it is intentional. What matters is that it feels deliberate.

3. Atlassian Design System

The Atlassian Design System covers:

• Spacing
• Grid systems
• Font usage
• Guidance for color, icons, illustrations, and typography

If you hand it the URL, it can suggest improvements without much extra prompting.

How They Work Together

The three do not conflict; they complement each other:

1. Atlassian gives you a solid structure, with spacing, grid, and component placement
2. frontend-design SKILL.md adds direction that breaks the “flat Atlassian look” by bringing in distinctive fonts, unusual colors, and less predictable layouts
3. UX psychology helps you make decisions with a rationale, such as “reduce cognitive load” or “provide feedback within 0.4 seconds”

What Happens in Practice

• Atlassian alone tends to produce something that is well organized but bland
• Add frontend-design SKILL.md and the direction becomes more specific, such as “go brutalist” or “go retro-futurist,” which gives the Atlassian skeleton more personality
• UX psychology is useful when deciding things like where the CTA button should go or how many choices to show

My Takeaways

In the end, there are a few things you should still decide yourself instead of leaving everything to AI:

• Color: Pick around three site colors. That alone helps prevent the design from drifting into purple gradients
• Fonts: Automatic generation often has to rely on web fonts, so avoiding the no-go fonts can be tricky. If you already license a web font, using it is a good option
• Background animation: Unless the site is highly interactive, flashy moving backgrounds are usually annoying. AI sometimes inserts them anyway, so watch out

Beautiful UI and usable UI are not the same thing. UX psychology is useful because it helps you think beyond appearances and toward actual usability.

Try It Out (TODO)

Put all three into CLAUDE.md and make it build something UI-related.