SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsweb-design-pro

web-design-pro

Design & creation

View repository

Updated 10-16 16:27

About this skill

Web Design Pro (Modern Design Engineering)

When to Use This vs Others

  • Use this (web-design-pro) for advanced design engineering: tokens, accessibility, performance, and production-grade UI systems.
  • Use web-design-guidelines when the primary task is compliance auditing against external guideline rules.
  • Use ui-ux-pro-max when you need deliverable-driven UX flows, component specs, and direct UI generation/refinement output.

Beyond the aesthetics of web design, a professional-level skillset that integrates system design, performance optimization, accessibility, and game-specific UX.

1. Design Systems & Tokens

Manage design decisions as data to eliminate the gap between design and code.

Token hierarchy

  • Primitive Tokens (Raw): Foundational values (e.g., blue-500: #3B82F6)
  • Semantic Tokens (Meaning): Assign roles and context (e.g., action-primary: var(--blue-500))
  • Component Tokens (Specific): Specific to a particular component (e.g., btn-bg: var(--action-primary))

Implementation Guide

  • CSS Custom Properties: Real-time theme switching is possible with browser-native tokens.
  • Tokens Studio (Figma): Extract JSON/CSS directly from the design source.
  • Automation: When a token changes, Style Dictionary deploy to each platform at build time via etc.

2. UI/UX Methodologies

A framework for solving the user's "real" problems.

Key Methodologies

  • Jobs to be Done (JTBD): "Players don't want to read a game introduction; they want to confirm within 3 seconds whether this game is fun." -> Place gameplay video instead of text in the Hero section.
  • Design Thinking: Iteration of Empathize - Define - Ideate - Prototype - Test.
  • Design Sprints: A compressed process that validates the core hypothesis within 2-5 days.

3. Responsive Design Patterns

Modern CSS techniques that provide a perfect layout on every device.

Fluid Typography & Layout

  • clamp() Usage: Fluidly adjust font size/spacing according to screen size without media queries. 
    h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
  • Container Queries: Component design that responds to the parent container size rather than the viewport.
  • Mobile-First: Write a 320px mobile layout as the default, and @media (min-width: ...)progressively enhance with.

4. Accessibility Standards (WCAG 2.1)

The foundation of design that ensures no user is left out.

Key Checkpoints

  • Semantic HTML: <div> instead of <nav>, <main>, <article>, <section> use.
  • Color Contrast: Text contrast of at least 4.5:1 (based on AA level).
  • Keyboard Friendly: All interactions must be possible with Tab/Enter.
  • ARIA Labels: For icon-only buttons, always aria-label assign.
  • Reduced Motion: prefers-reduced-motionControl excessive animation by respecting.

5. Performance & Web Vitals

Speed is the user experience.

Core Web Vitals (as of 2024)

  • LCP (Largest Contentful Paint): Largest Contentful Load < 2.5s.
  • INP (Interaction to Next Paint): Interaction response speed < 200ms. (Replaces FID)
  • CLS (Cumulative Layout Shift): Layout shift < 0.1.

Optimization Techniques

  • Image optimization: Use WebP/AVIF, width/height Prevent CLS by specifying.
  • Preload: Preload critical fonts and Hero images.
  • Defer JS: Non-essential scripts should be handled with defer나 async.

6. Game UI/UX Specifics

UI techniques that maximize the player's immersion.

Game UI Patterns

  • Immediate Feedback: Provide immediate visual/auditory feedback for every click/hover.
  • Visual Hierarchy: Place the most important Action (e.g., Play Now) at the top of the F-Pattern.
  • Immersive layout: The UI must match the texture, font, and tone of the game's world.

7. Actionable Skills for eastsea.monster Redesign

3 techniques that can be applied immediately:

  1. Fluid Typography (clamp): Change the font size of all pages to clampto make transitions between mobile and desktop smooth.
  2. WebP Batch Conversion: Convert all game thumbnails and assets to WebP to improve LCP.
  3. Hero Video Autoplay: Place a muted gameplay video in the Hero section instead of a static image (applying JTBD).

Best-Practice Checklist for Game Portfolio

  • Is there a gameplay video (muted) in the Hero section?
  • Does the main font change fluidly through clamp()?
  • Are all images in WebP format and width/heightspecified?
  • Can all games be selected and played using only the Tab key?
  • Do buttons respond (scale/glow) on hover?
  • Is the Lighthouse accessibility score 90 or higher?
  • prefers-reduced-motion Is the flashing effect turned off when set?