Premium Web Design
Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.
Install
npx skills add Lucxar/premium-web-design-skill --skill premium-web-designgit clone --depth 1 https://github.com/Lucxar/premium-web-design-skill.git /tmp/premium-web-design-skill
mkdir -p ~/.claude/skills
cp -r /tmp/premium-web-design-skill/. ~/.claude/skills/premium-web-designPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Premium Web Design Expert System You are now a premium web design expert. Every design decision you make must pass one test: **"Would this feel at home on Apple.com?"** If not, refine it. ## Core Mental Model Premium = Restraint + Intention + Craft. Every pixel, every animation, every color choice must be deliberate. Nothing is accidental. Nothing is default. Users judge a website in **50 milliseconds** (Lindgaard et al., 2006, r=0.97 stability). That judgment transfers directly to the product/brand. A cheap-looking website = a cheap-seeming product, regardless of actual quality. ## Decision Framework When making ANY design decision, apply this priority stack: 1. **Does it reduce cognitive load?** (Remove if it adds complexity without value) 2. **Does it guide the user?** (Every element should direct attention intentionally) 3. **Does it feel crafted?** (No defaults, no generic patterns, no template aesthetics) 4. **Does it perform?** (Sub-2.5s LCP, no jank, 60fps animations) 5. **Is it accessible?** (WCAG AA minimum, keyboard navigable, screen-reader compatible) ## The 10 Laws of Premium Web Design ### Law 1: The 50ms Rule The above-the-fold area must communicate quality instantly. This means: - Clean visual hierarchy with clear focal point - Professional typography (no system defaults) - Generous whitespace (40% content, 60% space for luxury feel) - High-quality imagery (no generic stock photos) - Fast paint (inline critical CSS, preload LCP image)
Details
- Skill name
premium-web-design- Repository
- Lucxar/premium-web-design-skill
- Repo updated
- 6 April 2026
FAQ
What does the Premium Web Design skill do?
Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.
How do I install the Premium Web Design skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add Lucxar/premium-web-design-skill --skill premium-web-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Premium Web Design popular?
It lives in Lucxar/premium-web-design-skill, which has 9 GitHub stars and 3 forks.
Related skills
Senior Designer
10sshahzaiib/senior-designer-skill
Act as an evidence-based senior product designer for any UI/app design or build task. Use this skill whenever the user wants to design or build an app, screen, page, component, landing page, dashboard, onboarding flow, or any user interface — web or native iOS (SwiftUI) — even if they only say "build me X" without mentioning design. Also use when the user complains that a UI looks generic, AI-generated, or ugly, or asks for design review, redesign, color/typography/layout decisions. Every rule inside is sourced from 158 vetted design publications (Apple HIG, WCAG, NN/g research, Bringhurst, No
No Slop Design
10agshinrajabov/no-slop-design
Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to design, redesign, review, or "make it look better" for any screen, app, landing page, component, or design system; when building UI from scratch; when a design system or brand must be adopted or created; when generating design tokens, moodboards, or design specs; or when output must not look AI-generated. Runs discovery (market, audience, existing design system) → mini research → moodboard → tokens →
A2ui Adk
11coolxeo/a2ui-adk
Build agents that generate rich, interactive UIs using Google's A2UI (Agent-to-User Interface) format with Google ADK (Agent Development Kit). Use when building ADK agents that need to render dynamic UI components, forms, cards, lists, or interactive elements via the A2UI declarative JSON format. Includes a Tailwind CSS + shadcn/ui design system flavor for creating beautiful, modern A2UI catalogs and components. Covers A2UI schema management, catalog configuration, A2A transport integration, response parsing/validation, custom catalog creation, and the orchestrator pattern for multi-agent UI r
Motion Graphics
10acelera-agency/html-animation
Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest
Funnel Cloner
9Perspectiveco/funnel-cloner
Clone any landing page or marketing funnel from a URL into the user's Perspective account, rebuilt as closely as possible. Use this whenever the user drops a URL and wants to rebuild, recreate, clone, copy, replicate, or "funnel hack" it as a Perspective funnel — including turning a competitor's funnel into their own, recreating a landing page in Perspective, or "make this in Perspective." Trigger on phrasings like "rebuild this URL in Perspective", "clone this funnel", "copy this landing page into Perspective", "recreate this page as a funnel", "funnel hack this and build it", or even just pa
Liquid Glass Frontend
10ngocanhnckh/liquid-glass-frontend-skill
Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default fonts, uniform fade-ins). Covers creative direction and signature interactions, the frost/blur glass material, single-source color tokens with dark+light theming, scroll/stagger/parallax/scroll-scrubbed animation, type-as-hero typography, and asymmetric grid-breaking composition.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.