supanova-redesign-engine

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Supanova Redesign Engine

Supanova 重设计引擎

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.

将本引擎应用于现有落地页时，请遵循以下步骤：

扫描 — 读取HTML/CSS代码，识别样式方法、当前设计模式、字体栈、配色方案和布局结构。
诊断 — 执行下方的审核流程，记录所有通用模式、薄弱点和缺失元素。
修复 — 应用针对性升级。请勿从头重写，在保留现有结构的基础上进行改进。

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.

浏览器默认字体、Inter或Noto Sans KR：替换为Pretendard（韩文标准字体）+ 高端英文显示字体（Geist、Outfit、Cabinet Grotesk、Satoshi）。
标题缺乏存在感：韩文标题需设置
```
text-4xl md:text-6xl tracking-tight leading-tight font-bold
```
。收紧字间距以增强视觉冲击力。
韩文文本未设置
word-break: keep-all
：若无此属性，韩文单词会在字符中间断开。请为所有韩文文本块添加该属性。
正文宽度过宽：将最大宽度限制在约65字符以内。增加
```
line-height
```
以提升韩文可读性。
仅使用常规和粗体字重：引入Medium（500）和SemiBold（600）字重以增强层级深度。
数字使用比例字体：对指标和定价使用
```
font-variant-numeric: tabular-nums
```
或等宽字体。
孤立单词：为标题添加
```
text-wrap: balance
```
以修复该问题。

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.

纯
#000000
背景：替换为
```
#0a0a0a
```
、
```
#09090b
```
（zinc-950）或带色调的深色背景。
饱和度过高的强调色：将饱和度保持在80%以下。降低饱和度以与中性色优雅融合。
多种强调色相互冲突：仅选择一种强调色，移除其余颜色。
紫色/蓝色“AI渐变”风格：这是最常见的AI设计特征。替换为中性底色+单一精心挑选的强调色。
通用
box-shadow
：为阴影添加背景色调。蓝色背景上使用深蓝色阴影，而非
```
rgba(0,0,0,0.3)
```
。
无纹理的扁平化设计：添加细微的噪点叠加、网格渐变背景或微图案。
浅色页面中随机出现深色区块：保持背景色调一致。使用色调变化而非大幅跳跃。
空白的扁平化区块：添加背景图像（模糊、遮罩处理）、环境渐变或图案叠加。

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.

所有元素居中对称：通过偏移边距、混合宽高比、分屏布局打破对称。
三列等宽卡片展示功能：这是最通用的AI布局。替换为Bento网格、交错排列或横向滚动布局。
所有区块使用相同布局：相邻区块必须使用不同的布局模式。例如：Hero区（分屏）→ 功能区（Bento网格）→ 客户评价区（瀑布流）→ 转化按钮区（全屏 bleed）。
使用
height: 100vh
：替换为
```
min-height: 100dvh
```
以兼容iOS Safari。
无最大宽度容器：添加
```
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
```
。
留白不足：将区块内边距翻倍。落地页区块的最小内边距为
```
py-20 md:py-32
```
。
强制卡片等高：允许卡片高度变化或使用瀑布流布局。
无重叠或层次感：使用负边距、z-index分层或元素重叠来营造视觉深度。
转化按钮（CTA）不够突出：CTA按钮的最小尺寸为
```
px-8 py-4 text-lg
```
。必须成为视觉上最突出的元素。

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
```
.

按钮无悬停状态：添加
```
hover:scale-[1.02]
```
、背景色变化或位移效果，并搭配平滑过渡动画。
无激活/按下反馈：添加
```
active:scale-[0.98]
```
以提供触觉点击感。
即时过渡：为所有交互元素添加
```
transition-all duration-300 ease-out
```
。
无滚动动画：使用CSS
```
@keyframes
```
+
```
IntersectionObserver
```
添加淡入上移的显示效果。
交互元素无加载状态：添加骨架屏闪烁或加载指示器。
静态Logo条：将信任Logo转换为自动滚动的CSS跑马灯效果。
无效的
href="#"
链接：移除或视觉上禁用这些链接。
无平滑滚动：为
```
html
```
添加
```
scroll-behavior: smooth
```
。

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.

翻译腔韩文：重写为地道自然的韩文。例如使用“지금 시작하세요”而非“시작을 하세요 지금”。
敬语级别混杂：保持统一：始终使用합니다/하세요格式。
AI文案陈词滥调：移除以下词汇：“혁신적인”、“원활한”、“차세대”、“게임 체인저”、“한 차원 높은”。使用具体语言。
通用占位符姓名：将“김철수”、“이영희”替换为真实的现代姓名：“하윤서”、“박도현”、“이서진”。
虚假的整数指标：将
```
50,000+
```
替换为
```
47,200+
```
。将
```
5.0/5.0
```
替换为
```
4.87/5.0
```
。
英文占位文本：所有可见内容必须为韩文。
Lorem Ipsum文本：立即替换为真实的韩文草稿文案。

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.

纯色背景上居中显示文本的通用Hero区：使用分屏、全屏媒体或不对称的特色布局。
三卡片功能行：替换为Bento网格、交错排列或横向滚动条。
带圆点指示器的轮播式客户评价：替换为瀑布流墙、嵌入式社交风格卡片或带大头像的单条轮换评价。
三列相同样式的定价表：通过颜色、缩放和强调效果突出推荐套餐。
包含4列以上链接的页脚链接区：简化为必要导航、法律链接和社交图标。
手风琴式FAQ：替换为并排列表、可搜索帮助或可展开的内联区块。
与周围内容融合的CTA按钮：CTA需要鲜明的视觉对比——不同的背景、更大的内边距、悬浮效果。

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.

Lucide或Feather图标：替换为Iconify Solar图标集以保持一致性。
失效的Unsplash链接：使用
```
picsum.photos/seed/{name}/{w}/{h}
```
替换风景图，使用
```
i.pravatar.cc/150?u={name}
```
替换头像。
缺少网站图标（favicon）：添加品牌化的favicon。
图标描边宽度不一致：将所有图标统一为一种粗细（Solar图标集会自动处理此问题）。
通用的“团队”库存照片：使用统一的插画风格或高质量的场景化照片。

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).

Div标签滥用：使用语义化HTML标签：
```
<nav>
```
、
```
<main>
```
、
```
<section>
```
、
```
<article>
```
、
```
<footer>
```
。

缺少元标签：添加

<title>

、

<meta name="description">

、

<meta property="og:image">

、

<meta name="viewport">

。

<html>
标签未设置
lang="ko"
：添加该属性以提升可访问性和SEO效果。
图片未设置
loading="lazy"
：为所有首屏以下的图片添加懒加载。
图片缺少
alt
文本：添加描述性的韩文alt文本。
任意的z-index值：建立层级规范：导航栏（40）、遮罩层（50）、装饰元素（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.

** staggered入场动画**：元素使用
```
animation-delay: calc(var(--index) * 80ms)
```
依次入场。

弹簧式悬停效果：为交互元素添加

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

。

滚动驱动的进度条：进度条或SVG线条绘制与滚动位置关联。
Logo跑马灯：客户Logo实现无限循环的CSS跑马灯动画。

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.

真正的毛玻璃效果：使用
```
backdrop-blur-xl
```
+
```
border border-white/10
```
+ 内阴影。
网格渐变背景：多层
```
radial-gradient
```
营造自然的环境氛围。
噪点纹理叠加：添加固定的
```
pointer-events-none
```
元素以实现细微的颗粒感。
带色调的阴影：阴影携带背景色调而非通用黑色。

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

按照以下顺序应用修复，以实现最大视觉效果和最低风险：

替换字体为Pretendard — 立即提升韩文内容的高端质感
清理配色方案 — 移除AI风格紫色，降低强调色饱和度
重写韩文内容 — 自然文案、真实姓名、真实数字
添加悬停与激活状态 — 让界面更具活力
多样化布局 — 打破区块布局重复
添加区块动画 — staggered显示、滚动触发
优化间距与排版 — 最后的高端收尾

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.

请勿破坏现有页面结构。逐步改进。
输出必须保持为单个独立的HTML文件。
添加任何CDN依赖之前，验证URL正确且来自主流提供商。
保持修改集中且可审核。优先针对性改进而非完全重写。
所有内容修改必须保持自然的韩文语言质量。