Frontend design

When starting a new project or working on an existing one, you should determine these key factors before editing. This will help your changes to be thematically consistent with each other or with the existing project.

• Purpose: Determine the purpose of the project and anchor all features around that purpose.
• Colors: Determine the color scheme and palette of the project.
• Fonts: Determine the font family for different roles of text.
• Spacing: Determine the space between text and elements, from comfortable to compact.
• Animations: Determine speed, style, and whether to include animations at all.
• Layout scheme: Determine reactivity, flow, and common mouse/finger paths.
• Background: One of: solid color, image, particles, or gradient. Be sensible, match with color scheme, and don't distract from content.
• Fine details: Tiny, barely-noticeable niceties that the user will associate with the brand.

The user's impression of this software is mission critical. Go out of your way to make a good experience, and the principle of "less is more" can often apply here, but creature comfort/QoL features also often fit. Really think about it while planning.

When getting started, choose a specific visual direction that fits the product and execute it consistently rather than falling back to generic "modern" UI.

When working in an existing product or system, make use of it's component patterns, visual language, and technical conventions unless the user asks for a redesign.

Feature requirements to remember:

• empty/loading/error states: Intentional empty, loading, error, and success states for the UI to properly communicate the state to the user.
• responsive behavior: Clean and readable interface on mobile and desktop with layouts, spacing, and interactions adapted to each device.
• semantic structure: Use correct UI primitives and interactive elements to create a UI that is understandable to users, browsers, and assistive technology.
• design tokens: Re-use consistent definitions for color, spacing, typography, radius, shadows, and motion instead of inconsistent one-off decisions.
• production-grade code expectations: Produce working and maintainable UI code with predictable behavior, states, accessibility, and styling that fits the existing system.

Pay very close attention to component states and how they interact with one another. Ensure every state is beautiful and functional, and does not encroach on other parts of the UI.

Adamantly avoid aesthetics commonly associated with generic AI-generated UI, such as trend-chasing purple gradients, decorative eyebrow text, unjustified glassmorphism, repetitive card grids, and ornamental effects that do not improve comprehension.

More examples of aesthetics to avoid:

• Overused purple-blue gradients on white backgrounds.
• Generic card grids with identical spacing and no visual hierarchy.
• Tiny uppercase eyebrow text above every heading.
• Overly centered landing-page layouts when the product needs task flow.
• Floating glassmorphism panels with no contextual reason.
• Excessive pill badges, chips, and labeled metadata clutter.
• Oversized hero sections that push useful content below the fold.
• Decorative shadows, blurs, and glow effects that reduce legibility.
• Too many accent colors with no dominant visual rhythm.
• Inconsistent border radii, spacing scales, and type sizes.
• Motion that feels ornamental instead of helping comprehension.
• Placeholder copy that sounds like product marketing instead of interface text.
• Trend-chasing font choices used without regard for tone or readability.
• High-contrast “dribbblified” UI that looks striking but is tiring to use.
• Fake complexity: dashboards, charts, or status widgets added without product need.

One product should feel like one product. Re-use elements, globalize font family, color selection, and spacing.

Use motion and animation to support comprehension and understandability, always respect reduced-motion preferences, and avoid effects that hurt performance, readability, or layout stability.

Follow best practices for accessibility. Keyboard navigation, screen readers, UI scale, and predictability must be well-thought-out.

Make sure to not cause unnecessary layout spacing churn or recalculation. Elements shouldn't pop into frame or move around in ways that will cause points of interest - especially text - to jump around the page. Give adequate space for text and numbers that can update live ahead of time.

Avoid things like unnecessary subtitles, taglines, or eyebrows/kickers/overlines; components that do not contribute to the UI. Prefer straightforward hierarchy: Title -> Content. Use clarification (like subtitles) only when they provide meaningful clarification that materially improves comprehension of the interface.

Do not allow the context of the project, chat history, system prompt, or environment leak into the UI. Do not put random details about the prompt into text fields in the UI. Keep the text separate from the process of building. Unless explicitly directed, do not let the UI hint at the contents of the prompt.

Feel free to go back and modify what you're working on to better meet the standards in this skill and in the user's prompt.