mcpField
P
premium_web_design

premium_web_design

github.com/jerrar670Design & UI0252 installsUpdated 40w ago
Repository

About premium_web_design

A design skill for shaping polished web applications through guidance on typography, color, motion, layout, and imagery. It is intended for people creating web interfaces and emphasizes concrete visual design principles.

Key features

  1. 01Typography hierarchy and spacing
  2. 02Curated palettes and textured gradients
  3. 03Glass-style overlays
  4. 04Motion and interaction patterns
  5. 05Grid layouts and whitespace
  6. 06Image styling and parallax

Use cases

  1. 01Set typography for a web interface
  2. 02Design layered colors and overlays
  3. 03Add motion to page elements
  4. 04Plan layouts for feature showcases

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/jerrar670/surf-website --skill premium_web_design

After installing, type/premium_web_designin Claude Code to confirm it loaded.

Details

From the project README

Premium Web Design Principles

This skill outlines the key elements required to create "wow" factor, premium web applications.

1. Typography

  • Font Choice: Use modern, geometric sans-serifs (e.g., Inter, Outfit, Manrope) or elegant serifs for headings. Avoid default system fonts unless intentionally styled.
  • Hierarchy: Establish clear scale (h1 vs p). Use extreme contrast in size (huge headlines, small refined labels).
  • Spacing: Generous line-height (1.5-1.7 for body). tracking-tight for large headings to make them feel solid.

2. Color & Depth

  • Palette: Use a curated palette. Avoid pure black (#000000) or pure white (#FFFFFF) for backgrounds; use off-blacks (#0a0a0a) or soft creams (#fafafa).
  • Gradients: Use subtle, noise-textured gradients rather than flat linear ones.
  • Glassmorphism: Use backdrop-filter blur for overlays and navbars. 
    .glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

3. Motion & Interaction (Framer Motion)

  • Micro-interactions: Buttons should scale or glow on hover.
  • Page Transitions: Smooth fade/slide between routes.
  • Scroll Animations: Elements should fade up or reveal as they enter the viewport. 
    <motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
>

4. Layout & Rhythm

  • Grid: Adhere to a strict grid system but break it intentionally for interest.
  • Whitespace: Use whitespace (padding/margin) aggressively. "Premium" means space to breathe.
  • Bento Grids: Use boxy, card-based layouts for feature showcases.

5. Imagery

  • Quality: Use high-res, optimized images (WebP).
  • Styling: Rounded corners (e.g., rounded-2xl or rounded-3xl for that modern feel).
  • Parallax: Subtle scroll parallax on background images adds depth.

Comments

Markdown supported