prompts library

Styling

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

For visual polish and making things look right.

Layout

Spacing

Add more space between [elements]. The [element] is too close to [other element]. Add padding.

Alignment

Align [elements] to the [left/center/right]. Make sure [element] is vertically centered in its container.

Sizing

Make [element] [bigger/smaller]. The [element] should take up [full width / fixed width of X / etc].

Typography

Font size

Make the [text] [larger/smaller]. It's hard to read.

Font weight

Make [text] bold. / Make [text] lighter.

Text color

Change [text] color to [color/description like "a muted gray"].

Text hierarchy

terminal
The [heading] should stand out more from the [body text].
Create clearer visual hierarchy.

Colors

Change color

Change [element]'s color to [color].

Match existing

Use the same [blue/color] that's used in [other element].

Subtle backgrounds

Add a subtle background to [element] to set it apart.

Dark mode

Make sure this looks good in dark mode.

Animations

Add animation

Animate [element] when [trigger]. It should [describe motion].

Transition

When [state change], smoothly transition rather than jumping.

Feel adjustment

The animation is too [fast/slow/abrupt]. Make it feel more [natural/snappy/smooth].

Like Apple

Make the animation feel like Apple's spring animations — natural, not mechanical.

Polish

General polish

terminal
This works but looks rough. Polish the visual details.
Focus on spacing, alignment, and consistency.

Specific element

terminal
The [element] doesn't look right. [Describe what's off].
I want it to feel [describe desired quality].

Native feel

terminal
Make this feel more like a native [macOS/iOS] app.
Follow platform conventions.

Reference

Style this like [product/reference]'s [their element].

Responsive / Adaptive

Window resizing

When the window resizes, [element] should [behavior].

Different sizes

Handle the case when [content] is [very long / empty / etc].

Icons & Images

Add icon

Add an icon for [element/action]. Use SF Symbols.

Icon sizing

The icon is too [big/small] relative to the text.

Image handling

When displaying images, [handle aspect ratio / add rounded corners / etc].

Want Consistent Styling Without Repeating Yourself?

Instead of adding styling details to every prompt, drop a Design System skill file into your project. Claude will use consistent spacing, color tokens, and typography in every response — without you having to ask.

Exercises

  1. Take a rough screen in your project and run the "General polish" prompt, then list which three changes Claude made that you'd have asked for individually.
  2. Use the "Match existing" prompt to unify a color that's slightly off across two elements, and verify they now use the exact same token.
  3. Try the "Feel adjustment" prompt on an animation that bothers you, iterating on the [fast/slow/abrupt] and [natural/snappy/smooth] words until it feels right — note which wording got you closest.