Getting a high-quality visual result

The visual style is established at the start, not as an afterthought. Once Claude has generated several files in one stylistic direction, going back means starting over.

Prompt: macOS / iPadOS style

A style, components, animations and transitions in the style
of macOS and iPadOS, with Liquid Glass. Avoid purple.
Avoid emojis and replace them with icons from the
Lucide React library. Modern grotesque sans-serif typography,
with multiple typescale levels for a professional result.
Prefer small and medium-sized components, better
suited to a productivity interface with lots of data
displayed.

This prompt can be added to CLAUDE.md so it applies automatically at every project session.

Implement micro-interactions, animations and transitions
with Framer Motion. Follow Apple's Human Interface Guidelines
for animations: short durations (150-300ms),
natural easing, immediate feedback after each user action.
For web components, also apply the Material Design
principles for state transitions and elevations.

What this prompt covers:

• Enter and exit animations for elements in the DOM
• State transitions (hover, focus, active, disabled)
• Visual feedback after an action (confirmation, error, loading)
• Consistent motion across different views

Use the Shadcn/ui library with small-sized components
throughout the interface. Optimize for information density:
lists, columns, filters, status badges,
state indicators. Each component should display as much
information as possible in a compact space without sacrificing readability.

Why small and not medium or large: productivity interfaces work better with compact components. A dashboard built with large components looks like a presentation mockup, not a tool someone uses for 8 hours a day.

Implement all interface states:
- Loading states with skeleton loaders during
  data fetching, spinners for short actions
- Empty states with an explicit message and
  a suggested action
- Error states with a clear message and a retry option
- Immediate visual feedback after each user action:
  confirmation, toast notification, validation animation
- Transitional states between two views or two steps of a flow

This is consistently the part Claude Code skips if you do not ask for it explicitly. A prototype without loading states breaks the illusion of reality during a client presentation or a user test.

Apply progressive disclosure principles:
- Show essential information first, reveal
  details on demand (expand, tooltip, drawer)
- Modal behavior following Apple's HIG and iOS:
  enters from the bottom on mobile, centered with a semi-transparent
  background on desktop, closed by tapping outside or swiping down
- Side drawer for detail panels on desktop
- Bottom sheet for contextual actions on mobile

When working on a project with an existing design system in Figma, the most efficient approach is to connect Claude Code directly to that file via Figma Console MCP.

What this enables

• Color, typography, and spacing tokens applied automatically
• Components named in code exactly as in Figma
• Design system variables respected in every generated file
• Changes reflected in Figma in real time from Claude Code

Opening prompt with Figma Console MCP active

Connect to the Figma file [file URL]. Read the tokens,
variables and styles from the design system before generating
anything. Use these values for all color, typography
and spacing decisions. Name components consistently
with the names defined in Figma.

# Visual conventions and interactions

## Style
macOS / iPadOS style with Liquid Glass.
No purple. No emojis, use Lucide React for
all icons. Grotesque sans-serif typography, multiple
typescale levels for a professional result.
Shadcn/ui components in small size throughout the interface.

## Animations
Framer Motion for all transitions and micro-interactions.
Follow Apple HIG: durations 150-300ms, natural easing.
Material Design for elevations and state transitions.

## States
Always implement:
- Loading states with skeleton loaders
- Empty states with message and suggested action
- Error states with explicit message and retry option
- Immediate visual feedback after each user action

## Progressive disclosure
Modals following iOS/macOS HIG.
Side drawer for detail panels on desktop.
Bottom sheet for contextual actions on mobile.

## Figma
Reference file: [Figma file URL]
Use design system tokens and variables.
Name components consistently with Figma names.

## Active skills
frontend-design, creative-director