SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsui-ux-pro-max

ui-ux-pro-max

Design & creation

View repository

Updated 10-15 20:05

About this skill

UI/UX Pro Max

Expert skills in UI/UX design and implementation.

Core: "Doing everything properly" is the essence of the AI-generated feel. "What to discard" is design.

Areas of Expertise

  • Landing page design
  • Dashboard UI
  • SaaS product
  • Mobile app (responsive)

Principles of Action (Five Iron Rules)

1. Question before you build

  • Ask "is this really needed?" of every element
  • If the answer is vague, build it without it first

2. Decide on one protagonist

  • Decide on just one "thing you most want to show" per section
  • Don't write code until it's decided

3. Don't line up 70-pointers

  • All elements having the same presence = failure
  • Make one 120 points and the rest 60 points

4. "Let's stop" rather than "we can"

  • Propose deletions rather than additions
  • When in doubt, cut it

5. Criticize before you build

  • List at least 3 current problems before presenting improvement ideas
  • "Looks good" is forbidden

Avoiding the AI-generated feel

Things you shouldn't do

  • All elements having the same presence(uniform spacing, safe colors)
  • Absence of decisions(Either A or B, whichever you prefer)
  • Excessive decoration(meaningless gradients, animations)

"Looks good" is forbidden

  • Even after completion, add "if there's room for improvement, ..."
  • When asked for a decision, make a decision (recommend one with rationale)

The formula for premium design

Premium = (画像の質 × サイズ) + (余白) - (装飾)

Three pillars:

  1. Large images - Images occupy 70-85% of the card
  2. Bold whitespace - 112px or more between sections
  3. Restraint - Every effect needs a reason

Reference brands: Spitfire Audio, Native Instruments, iZotope

Image guidelines

Context Image size Aspect ratio
Product card 70-85% of card area 16:9 or 4:3
Hero section Full viewport width Variable
Gallery grid Uniform height, variable width Mixed

Image handling:

  • Images are the protagonist of the content
  • Text is minimal (name + one-line description)
  • Don't overlay feature lists on images
  • Use high-quality screenshots/renders

Spacing tokens

Tokens Value Usage
--space-section 112px Between sections
--space-group 64px Between related content
--space-element 24px Between elements

Section padding:

/* プレミアムセクション */
padding-top: 112px;    /* py-28 */
padding-bottom: 112px;

/* コンパクトセクション */
padding-top: 64px;     /* py-16 */
padding-bottom: 64px;

Tailwind support:

// プレミアムセクション
<section className="py-28">...</section>

// コンパクトセクション
<section className="py-16">...</section>

Grid system

Number of columns Usage Gap
4 columns Product showcase 24px (gap-6)
3 columns Feature cards, pricing 32px (gap-8)
2 columns Hero, comparison 48px (gap-12)

Visual hierarchy checklist

Before starting work

  • Have you verbalized "what is the protagonist of this section"?
  • Did you consider "Are there any elements that can be removed?"
  • Can you explain "why this color?"

In progress

  • Are all elements given the same level of presence?
  • Is the visual flow as intended?
  • Is the background interfering with the content?

Before work completion

  • When viewed on a smartphone, can you tell "what to do" within 3 seconds?
  • Is there any cause of an "AI-generated feel"?
  • Is there any element where you think "this could have been removed"?

CRITICAL: Accessibility first

This section is the top priority. Prioritize accessibility over design beauty.

WCAG 2.1 contrast requirements

Text size Minimum contrast ratio
Normal text (< 18px) 4.5:1
Large text (≥ 18px bold / ≥ 24px) 3:1
UI components/icons 3:1

Required: Use the project's globals.css

Do not use Tailwind's default colors directly. Project's globals.css Prefer the tokens defined in

// NG: Tailwind デフォルトをそのまま使用
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>

// OK: プロジェクトトークンを使用
<p className="text-muted">...</p>
<p className="text-subtle">...</p>

Before implementation, always check app/globals.css and understand the defined tokens.

Badge/tag contrast

Combinations of similar colors are dangerous:

// NG: 同系色でコントラスト不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開発中</span>

// OK: 十分なコントラストを確保
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開発中</span>

Disabled state text

// NG: 薄すぎてコントラスト不足
<button className="text-white/50" disabled>...</button>

// OK: 無効でも読める濃さ
<button className="text-white/70" disabled>...</button>

Multilingual typography

Why it is necessary: Japanese looks visually heavier than English at the same font size (because it has more strokes). At the same size, Japanese looks cramped and heavy, so reduce it by one step to achieve visual balance.

Typography tokens (defined in globals.css)

Tokens Usage English (desktop) Japanese (desktop)
.text-hero Landing page main title 96px 80px
.text-section Section heading (h2) 48px 40px
.text-headline Feature titles, product headings 30px 24px
.text-subhead Taglines, lead paragraphs 24px 20px

How to use

// NG: Tailwind直接指定（言語による調整なし）
<h1 className="text-5xl md:text-8xl font-bold">...</h1>

// OK: トークン使用（自動で言語対応）
<h1 className="text-hero text-white">...</h1>

Responsive support

The tokens include responsive sizes for mobile, tablet, and desktop. No additional breakpoint specification is needed.

// NG: 冗長なブレークポイント指定
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>

// OK: トークンのみ
<h1 className="text-hero">...</h1>

Scope of application

  • Landing page headings (h1, h2)
  • Section title
  • Product names, feature names
  • Taglines, lead paragraphs

Note: Do not apply to body text (long paragraphs in p elements). For body text, use normal styles such as text-white/80 .

Design token compliance rules

Principle: Do not use Tailwind's default values directly; use the design tokens defined inglobals.css .

Border radius

Tokens Value Usage
--radius-sm 8px Small badges, tags
--radius-md 12px Buttons, input fields
--radius-lg 16px Cards, modals
--radius-full 999px Pill-shaped buttons, avatars 
// NG: Tailwind直接指定
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>

// OK: トークン使用
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>

Color

// NG: Tailwind色を直接使用
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>

// OK: プロジェクトトークン使用
<p className="text-muted">...</p>
<div className="bg-mued-bg">...</div>

Token violation check

After implementation, check for violations with the following:

# 角丸のTailwind直接指定を検索
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/

# 色のTailwind直接指定を検索
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/

Replace detected items with tokens sequentially.

Button style

Primary CTA (default: white base)

<button className="bg-white text-black px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/90 transition-colors cursor-pointer">
  Download Now
</button>

Secondary (border only)

<button className="border-2 border-white text-white px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/10 transition-colors cursor-pointer">
  Learn More
</button>

Brand-specific (used sparingly)

Conditions for using colored buttons:

  • Only in brand-specific sections (MUEDear amber, etc.)
  • Up to 1-2 places per page
  • Don't make it the default
// MUEDear用: amber
<button className="border-2 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-white ...">
  Download App
</button>

Disabled

<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
  Disabled
</button>

Background styles

Backgrounds to use

// プレミアム: 単色のみ
<section className="bg-black">...</section>
<section className="bg-[#0f0f0f]">...</section>
<section className="bg-white">...</section>

Decorations to avoid

Patterns Problem Alternative
Floating glow orb Distracting Remove
bg-gradient-to-b from-violet-900/20 Decorative noise Solid color
Grain texture Unnecessary complexity Remove
Animated background Performance degradation Static

Card style

Image-centered card (default)

<div className="bg-[#0f0f0f] rounded-[var(--radius-lg)] overflow-hidden">
  {/* 画像: カードの70-85% */}
  <div className="aspect-video">
    <Image src="..." alt="..." fill className="object-cover" />
  </div>
  {/* テキスト: 最小限 */}
  <div className="p-6">
    <h3 className="text-white text-lg font-medium">製品名</h3>
    <p className="text-white/60 text-sm">一行の説明</p>
  </div>
</div>

Glass Card (used sparingly)

Note: Use Glassmorphism only in specific contexts (pricing tables, feature comparisons, etc.). Do not make it the default.

<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[var(--radius-lg)] p-6">
  <h3 className="text-white font-semibold">Title</h3>
  <p className="text-white/80">Description</p>
</div>

Notes when using Glass Card:

  • Text is text-white or text-white/80 or more
  • text-slate-* や text-gray-* Do not use
  • Because the background is semi-transparent, contrast calculation is complex

Instruction escalation protocol

Change the response level according to the user's wording:

User's wording Interpretation Required response
"Spitfire level" "Native Instruments level" Full-scale visual overhaul A complete redesign, not minor adjustments
"Make it more premium" Substantive changes Remove effects, increase whitespace
"Make it clean" Moderate cleanup Remove 30% of decorative elements
"Adjust" "fine-tune" Small fixes CSS changes only

Important rule: If a reference brand is named, compare the current implementation with that brand before proposing.

Implementation checklist

Pre-implementation check

  • Do you have high-quality product screenshots?
  • Can you reduce the text by 50%?
  • Have you confirmed the aesthetic standard you want to reference?
  • Are you matching that level of restraint?

During implementation check

Question Action if "No"
Section padding >= 100px? py-28or more
Is the image 60% or more of the card area? Enlarge the image
Are buttons white or border-only? Change from colored
Is the background solid color (no gradient)? Remove decorative elements

Post-implementation check

  1. Skin test: Squint your eyes. Can you identify the product? If the effects dominate, reduce them.
  2. "Delete one" test: Remove one element from each section. Does it still work? If so, it wasn't needed.
  3. Spitfire comparison: Place screenshots side by side with Spitfire.com. Does the visual "weight" feel similar?

Patterns to avoid (explicit prohibition list)

"Claude defaults to safe choices" - without explicit prohibition, it converges on generic choices

Backgrounds & decoration

Prohibited pattern Problem Alternative
bg-white/5 backdrop-blur-xl Heavy use "2023 template" feel bg-black or bg-[#0f0f0f]
bg-gradient-to-b from-violet-900/20 Decorative noise Remove
bg-gradient-to-br from-indigo-500/10 Same as above Remove
Animated blob background Distracting, performance degradation Static, solid color
Grain texture (noise.svg) Unnecessary complexity Remove
Floating glow orb Early 2020s trend Remove

Shadows & glow

Prohibited pattern Problem Alternative
shadow-lg shadow-indigo-500/20 Artificial "pop" No shadow or shadow-sm shadow-black/20
shadow-xl shadow-violet-500/30 Same as above Same as above
shadow-2xl shadow-amber-500/25 Same as above Same as above
hover:shadow-*-500/40 Glow emphasis on hover hover:bg-white/10 etc., used sparingly
drop-shadow-[0_0_*px_rgba()] Custom glow Remove

Layout

Prohibited pattern Problem Alternative
3-column feature grid with icons Generic SaaS design Large image + minimal text
Even 3-column cards (same size) "Everything has the same presence" Make one large, the rest small
py-12 section spacing of Cramped py-28 (112px) or more
Everything center-aligned Too safe Consider left-align or asymmetry

Components

Prohibited pattern Problem Alternative
hover:scale-105 + hover:shadow-* Excessive hover effects hover:bg-white/10 only
transition-all duration-300 Heavy, unpredictable transition-colors duration-200
group-hover:translate-x-2 arrow Commonly seen pattern Remove or translate-x-1
Colored CTA button (used by default) AI safe choice White background or white border

Animation

Prohibited pattern Problem Alternative
Scattered micro-interactions No consistency Focus on one page-load effect
animate-pulse Heavy use Distracting Remove or only in one place
animate-bounce Always on Same as above Only on user action
Simultaneous animation of multiple elements Chaos Sequential with staggered delays

Color (AI Safe Choices)

Prohibited Patterns Problem Alternative
Purple gradient on white background The most generic AI choice Solid dark color
from-violet-600 to-indigo-600 Same as above Delete
text-indigo-400 as default Overuse of brand colors text-white or text-white/80
Same-color badge (indigo on indigo) Insufficient contrast White background + black text

Icons

  • Libraries Used: Lucide Icons
  • Prohibited: Do not use emoji as icons
import { Music, Brain, Sparkles, Check, X } from 'lucide-react';

Responsive breakpoints

/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */

Screen widths to verify:

  • 320px (minimum mobile)
  • 768px (tablet)
  • 1024px (desktop)
  • 1440px (large screen)

Pre-Delivery Checklist

  • Lighthouse accessibility 100%(most important)
  • Use the project's globals.css tokens
  • Are the images the main focus
  • Spacing between sections >= 112px (py-28)
  • Are the buttons white/border-based
  • Is the background a solid color
  • No emoji icons used (use Lucide)
  • Dark mode support
  • cursor-pointer on clickables
  • Responsive support
  • Performance optimization (images, animations)

How to Check Contrast

After implementation, always check accessibility with Lighthouse:

# ローカル確認
npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view

# 詳細な失敗項目の確認
lighthouse http://localhost:3000 --only-categories=accessibility --output=json | jq '.audits["color-contrast"]'

Goal: Lighthouse Accessibility Score 100%