Supanova Redesign Engine

How This Works

When applied to an existing landing page, follow this sequence:

Scan — Read the HTML/CSS. Identify the styling method, current design patterns, font stack, color palette, and layout structure.
Diagnose — Run through the audit below. Document every generic pattern, weak point, and missing element.
Fix — Apply targeted upgrades. Do not rewrite from scratch. Improve what's there while maintaining the existing structure.

Design Audit for Landing Pages

Typography

Browser default fonts, Inter, or Noto Sans KR. Replace with Pretendard (Korean standard) + premium English display font (Geist, Outfit, Cabinet Grotesk, Satoshi).
Headlines lack presence. Korean headlines need
```
text-4xl md:text-6xl tracking-tight leading-tight font-bold
```
. Tighten letter-spacing for impact.
Missing
word-break: keep-all
on Korean text. Korean words break mid-character without this. Add to all Korean text blocks.
Body text too wide. Constrain to ~65 characters max width. Increase
```
line-height
```
for Korean readability.
Only Regular and Bold weights. Introduce Medium (500) and SemiBold (600) for hierarchy depth.
Numbers in proportional font. Use
```
font-variant-numeric: tabular-nums
```
or monospace for metrics and pricing.
Orphaned words. Fix with
```
text-wrap: balance
```
on headings.

Color and Surfaces

Pure
#000000
background. Replace with
```
#0a0a0a
```
,
```
#09090b
```
(zinc-950), or tinted dark.
Oversaturated accent colors. Keep saturation below 80%. Desaturate to blend elegantly with neutrals.
Multiple accent colors competing. Pick ONE. Remove the rest.
Purple/blue "AI gradient" aesthetic. The most common AI design fingerprint. Replace with neutral bases + single considered accent.
Generic
box-shadow
. Tint shadows to background hue. Dark blue shadow on blue background, not
```
rgba(0,0,0,0.3)
```
.
Flat design with zero texture. Add subtle noise overlay, mesh gradient background, or micro-patterns.
Random dark section in a light page. Maintain consistent background tone. Use shade variations, not dramatic jumps.
Empty flat sections. Add background imagery (blurred, masked), ambient gradients, or pattern overlays.

Layout (Landing Page Specific)

Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, split-screen layouts.
Three equal card columns for features. The most generic AI layout. Replace with Bento grid, zig-zag alternating, or horizontal scroll.
Every section uses the same layout. Adjacent sections MUST use different patterns. Hero (split) → Features (bento) → Testimonials (masonry) → CTA (full-bleed).
Using
height: 100vh
. Replace with
```
min-height: 100dvh
```
for iOS Safari compatibility.
No max-width container. Add
```
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
```
.
Missing whitespace. Double the section padding.
```
py-20 md:py-32
```
minimum for landing page sections.
Cards of forced equal height. Allow variable heights or use masonry.
No overlap or depth. Use negative margins, z-index layering, or overlapping elements for visual depth.
CTA buttons not prominent enough. CTAs need
```
px-8 py-4 text-lg
```
minimum. Must be the most visually dominant element.

Interactivity and States

No hover states on buttons. Add
```
hover:scale-[1.02]
```
, background shift, or translate effect with smooth transition.
No active/pressed feedback. Add
```
active:scale-[0.98]
```
for tactile click feel.
Instant transitions. Add
```
transition-all duration-300 ease-out
```
to all interactive elements.
No scroll animations. Add fade-up reveals using CSS
```
@keyframes
```
+
```
IntersectionObserver
```
.
No loading states for interactive elements. Add skeleton shimmer or loading indicators.
Static logo strips. Convert to auto-scrolling CSS marquee for trust logos.
Dead
href="#"
links. Remove or visually disable them.
No smooth scroll. Add
```
scroll-behavior: smooth
```
to
```
html
```
.

Korean Content Quality

Translated-sounding Korean. Rewrite in native, natural Korean. "지금 시작하세요" not "시작을 하세요 지금".
Mixed honorific levels. Stick to one: 합니다/하세요 consistently.
AI copywriting cliches. Remove: "혁신적인", "원활한", "차세대", "게임 체인저", "한 차원 높은". Use concrete language.
Generic placeholder names. Replace "김철수", "이영희" with realistic modern names: "하윤서", "박도현", "이서진".
Fake round metrics. Replace
```
50,000+
```
with
```
47,200+
```
. Replace
```
5.0/5.0
```
with
```
4.87/5.0
```
.
English placeholder text. All visible content must be in Korean.
Lorem Ipsum. Replace with real Korean draft copy immediately.

Component Patterns (Landing Page)

Generic hero with centered text over solid color. Split screen, full-bleed media, or asymmetric statement layout.
3-card feature row. Replace with Bento grid, zig-zag alternating, or horizontal scroll strip.
Carousel testimonials with dots. Replace with masonry wall, embedded social-style cards, or single rotating quote with large portrait.
Pricing table with 3 identical towers. Highlight recommended tier with color, scale, and emphasis.
Footer link farm with 4+ columns. Simplify to essential nav, legal links, social icons.
Accordion FAQ. Replace with side-by-side list, searchable help, or expandable inline sections.
CTA that blends into surrounding content. CTAs need dramatic visual contrast — different background, larger padding, floating treatment.

Icons and Images

Lucide or Feather icons. Replace with Iconify Solar icon set for consistency.
Broken Unsplash URLs. Replace with
```
picsum.photos/seed/{name}/{w}/{h}
```
for landscapes,
```
i.pravatar.cc/150?u={name}
```
for avatars.
Missing favicon. Add a branded favicon.
Inconsistent icon stroke widths. Standardize all icons to one weight (Solar set handles this automatically).
Generic stock "team" photos. Use consistent illustration style or high-quality contextual photography.

Code Quality

Div soup. Use semantic HTML:
```
<nav>
```
,
```
<main>
```
,
```
<section>
```
,
```
<article>
```
,
```
<footer>
```
.

Missing meta tags. Add

<title>

<meta name="description">

<meta property="og:image">

<meta name="viewport">

No
lang="ko"
on
<html>
. Add it for accessibility and SEO.
Images without
loading="lazy"
. Add lazy loading to all below-fold images.
No
alt
text on images. Add descriptive Korean alt text.
Arbitrary z-index values. Establish: nav (40), overlay (50), decorative (60).

Upgrade Techniques

Typography Upgrades

Animated text reveals. Characters or words fade/slide in sequentially on scroll.
Gradient text accent. ONE key headline with subtle gradient fill (max one per page).
Variable weight on hover. Text weight shifts subtly when interactive elements are hovered.

Layout Upgrades

Broken grid / asymmetry. Elements that deliberately offset from the column structure.
Parallax depth. Background images scroll at different speeds from content.
Sticky scroll stacking. Sections stick and layer over each other during scroll.
Full-bleed section transitions. Sections bleed into each other with gradient or diagonal transitions.

Motion Upgrades

Staggered entry cascades. Elements enter with
```
animation-delay: calc(var(--index) * 80ms)
```
.

Spring-based hover.

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)

on interactive elements.

Scroll-driven progress. Progress bars or SVG line drawings tied to scroll position.
Marquee logos. Client logos in an infinite CSS marquee animation.

Surface Upgrades

True glassmorphism.
```
backdrop-blur-xl
```
+
```
border border-white/10
```
+ inner shadow.
Mesh gradient backgrounds. Multiple
```
radial-gradient
```
layers for organic ambient feel.
Noise texture overlay. Fixed
```
pointer-events-none
```
element with subtle grain.
Tinted shadows. Shadows that carry the background hue instead of generic black.

Fix Priority

Apply in this order for maximum visual impact, minimum risk:

Font swap to Pretendard — instant premium feel for Korean content
Color palette cleanup — remove AI purple, desaturate accents
Korean content rewrite — natural copy, real names, organic numbers
Hover and active states — make the interface feel alive
Layout diversification — break the same-section repetition
Section animation — staggered reveals, scroll triggers
Polish spacing and typography — the premium final touch

Rules

Do not break existing page structure. Improve incrementally.
Output must remain a single standalone HTML file.
Before adding any CDN dependency, verify the URL is correct and from a major provider.
Keep changes focused and reviewable. Targeted improvements over total rewrites.
All content modifications must maintain natural Korean language quality.

supanova-redesign-engine

NPX Install

Tags

SKILL.md Content

Supanova Redesign Engine

How This Works

Design Audit for Landing Pages

Typography

Color and Surfaces

Layout (Landing Page Specific)

Interactivity and States

Korean Content Quality

Component Patterns (Landing Page)

Icons and Images

Code Quality

Upgrade Techniques

Typography Upgrades

Layout Upgrades

Motion Upgrades

Surface Upgrades

Fix Priority

Rules