frontend-design

This skill guides the creation ofdistinctive, production-readyfront-end interfaces that avoid the cookie-cutter "AI feel" aesthetic. While implementing runnable code, give full attention to aesthetic details and creative choices.

The user will provide front-end requirements: the component, page, application, or interface to build, possibly with usage scenarios, target users, or technical constraints.

Design Thinking

Before writing code, first understand the context andchoose a clear, bold aesthetic direction：

• Purpose: What problem does this interface solve? Who is using it?
• Tone: Choose a distinct style and carry it through to the end, for example: minimalist restraint, ornate and flamboyant, retro-futuristic, organic/natural, luxurious and refined, playful/toy-like, editorial/magazine style, brutalist/raw, Art Deco/geometric, soft/macaron, industrial/pragmatic, etc. Use these as inspiration, but ultimately stay true to the aesthetic you have chosen.
• Constraints: Technical conditions (framework, performance, accessibility, etc.).
• Differentiation: What will make usersnever forget it? What is the one thing you most want to be remembered for?

Key: Choose a clear conceptual direction and execute it precisely. Bold complexity and restrained minimalism both work—the core isintentionality, not simply being "bold enough" or "subtle enough."

On this basis, implement it with runnable code (HTML/CSS/JS, Vue, React, etc.):

• Production-ready and fully functional
• Visually impactful and memorable
• Cohesive overall with a clear aesthetic stance
• Details that withstand scrutiny

Front-End Aesthetics Guide

Focus on the following dimensions:

Fonts and Typography

• Choosedistinctive, enduring, and interestingfonts, and avoid choices with too strong a "default feel" such as Arial, Inter, Source Han Sans, etc.
• Use fonts with character to elevate the overall temperament; try unconventional, personality-rich font combinations.
• Use an expressive display font for headings and a clear, readable font for body text, creating hierarchy.
• Establish a clearfont size and weight hierarchy(heading / subheading / body / auxiliary text), along with line height, letter spacing, and whitespace.

Color and Theme

• Center on a set ofunified color system, managed with CSS variables for easy maintenance and theme switching.
• A clear primary color + a small amount of high-contrast accent coloris more powerful than an "evenly distributed" color scheme.
• Also consideraccessibility: For important text and backgrounds, a contrast ratio of ≥ 4.5:1 is recommended (WCAG AA); do not convey information by color alone—pair it with shape, icons, or text.

Motion and Micro-interactions

• Use animation to create feedback and atmosphere. For pure HTML/CSS scenes, prioritize CSS; React projects can work with libraries such as Motion.
• Focus on doing a few highlight moments well: for example, one carefully choreographed page entrance (staggered appearance, animation-delay) is more impressive than scattered micro-interactions.
• Use scroll triggers and hover states in moderation to make interactions feel surprising.
• Respect user preferences: through the prefers-reduced-motion media query, provide static or simplified motion for users who prefer reduced motion, and do not force them to watch animations.

Space and layout

• Unconventional layouts: asymmetry, overlap, diagonal directions, elements that break the grid.
• Whitespace (negative space): either give ample whitespace to create a sense of breathing room, or deliberately use high-density information arrangement; both must have clear intent.
• Whitespace can guide the eye, establish hierarchy, and reduce visual fatigue; the more whitespace around important elements, the more focused attention becomes. Try leaving "30% more space than you think you need" to improve the sense of quality.

Background and visual details

• Uselayers and atmosphereinstead of solid color blocks: gradient meshes, noise textures, geometric patterns, translucent overlays, strong shadows, decorative borders, grain overlays, etc., consistent with the overall style.
• Choose according to the scene: custom cursors, thin lines, background textures, etc., to enhance the sense of context.

Taboo: avoid "generic AI aesthetics"

Do notuse the following clichés:

• Overused fonts: Inter, Roboto, Arial, system default font stacking.
• Clichéd color schemes: especially white background + purple/blue gradients.
• Mechanical, template-like layouts and component styles, lacking personality related to the business/scene.

On the basis of understanding the requirements, makecreative interpretations, and make choices that feel "designed specifically for this scene." Every design should differ: light/dark themes, fonts, and styles can all vary,do notrepeatedly converge on the same set of common combinations (such as Space Grotesk, etc.).

Implementation complexity should match the aesthetics

Important: the amount of implementation should match the aesthetic goal.

• Ornate/expressivestyles: require more complete motion, layering, and detailed code.
• Minimal/restrainedstyles: require restrained code, precise spacing, typography, and subtle contrast; less is more.

Elegance comes fromexecuting the chosen direction well, not from piling on effects.

Accessibility (WCAG-oriented)

• Perceivable: content can be perceived by different users (multiple channels such as color + shape/text/icons).
• Operable: support keyboard, touch, and pointer, with a reasonable focus order, using :focus / :focus-visible etc.
• Understandable: clear structure, semantic HTML (headings, links, forms, etc.), and ARIA enhancements when necessary.
• Robust: compatible with mainstream browsers and assistive technologies; text can be enlarged (e.g. 200%–400%) and still usable.

For the animation part, be sure to consider prefers-reduced-motion, and avoid forced animation.

Summary

With a clear purpose and tone established, usebold, consistent, and memorablevisuals and interactions to deliver production-grade frontend. Whitespace, hierarchy, motion, and accessibility together support an interface that is "both beautiful and usable." Dare to make unconventional choices and make a single design unforgettable.