Frontend Page Design

Problem

Many generated frontend pages look similar: default fonts, white backgrounds with purple gradients, centered cards, even palettes, predictable layouts. This skill does not provide a UI kit; it constrains the generation process. Before coding, it asks the model to define purpose, tone, constraints, and differentiation, so the result is not a generic template translated from a short requirements message. For engineers building public pages, demos, prototypes, or rapidly iterating interfaces, that is where the page is most easily read as AI-made.

How It Works

The skill turns the request into design decisions first, then implements working code. Key steps include:
- Aesthetic direction: choose a clear style, such as minimal, editorial, retro-futuristic, industrial, or refined luxury;
- Typography: avoid generic families like Arial, Inter, and Roboto, then pair a distinctive display face with a readable body face;
- Color: use CSS variables for consistency and let dominant colors plus sharp accents create hierarchy;
- Motion: prioritize one orchestrated page load, scroll reveals, and memorable hover states over scattered micro-interactions;
- Layout: use asymmetry, overlap, diagonal flow, grid-breaking elements, or controlled density;
- Background: add texture, gradients, shadows, transparency, and atmospheric details instead of flat defaults.

It can target HTML/CSS/JS, React, Vue, or similar implementations, but the code is expected to be production-grade, not just a visual mockup.

Boundaries

This is best suited for pages, components, application shells, and demo interfaces where the output needs to feel deliberately designed. It does not replace business logic, backend APIs, permissions, or full product workflow. If a project already has a design system, team standards should win. For production use, add accessibility, performance budgets, responsive strategy, and browser compatibility requirements. The result still depends on the model's aesthetic judgment, so it is useful as a design starting point rather than a final design system.