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

ui-ux-pro-max

Design & creation

View repository

Updated 10-15 20:21

About this skill

UI/UX Pro Max

Expert skills in UI/UX design and implementation.

Core: "Doing everything properly" is the true nature 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, first build it without it

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-point work

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

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

  • Propose deletions rather than additions
  • If 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, then..."
  • 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 Use
--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 Use 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 "is there anything that can be removed?"
  • Can you explain "why this color?"

In progress

  • Are all elements given the same level of presence?
  • Is the flow of the gaze as intended?
  • Is the background getting in the way of 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 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 Prioritize 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, be sure to 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 appears 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 title, product heading 30px 24px
.text-subhead Tagline, lead paragraph 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
  • Tagline, lead paragraph

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/

Detected items are sequentially replaced with tokens.

Button styles

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 orbs 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 styles

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
  • Contrast calculation is complex because the background is semi-transparent

Instruction escalation protocol

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

User's wording Interpretation Required response
"Spitfire level" "Native Instruments level" Comprehensive visual overhaul Complete redesign rather than minor adjustments
"More premium" Substantive changes Remove effects, increase whitespace
"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 making a proposal.

Implementation checklist

Pre-implementation check

  • Are there high-quality product screenshots?
  • Can the text be reduced by 50%?
  • Have you confirmed the aesthetic level 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 the buttons white or border-only? Change from colored
Is the background a 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. "Remove one" test: Remove one element from each section. Does it still work? If it does, 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" - unless explicitly prohibited, it converges on generic choices

Background & 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 orbs 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., use 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 below Cramped py-28 (112px) or more
Everything center-aligned Too safe Consider left-aligned or asymmetric

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?
  • Section spacing >= 112px (py-28)
  • Are buttons white/border-based?
  • Is the background a solid color?
  • No emoji icons (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%