supanova-redesign-engine

Supanova Redesign Engine

工作原理

应用于现有落地页时，请按以下顺序操作：

1. 扫描 — 阅读 HTML/CSS。识别样式方法、当前设计模式、字体栈、配色方案和布局结构。
2. 诊断 — 根据以下审查清单逐项检查。记录每一种通用模式、薄弱环节和缺失元素。
3. 修复 — 针对性地进行升级。不要从头重写。在保持现有结构的同时加以改进。

落地页设计审查

排版

• 使用浏览器默认字体、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，提升韩语文本的可读性。
• 仅使用 Regular 和 Bold 字重。 引入 Medium（500）和 SemiBold（600），增强层次感。
• 数字使用比例字体。 对指标和价格使用 font-variant-numeric: tabular-nums 或等宽字体。
• 标题中出现孤行词语。 在标题上使用 text-wrap: balance 加以修正。

颜色与表面

• 背景为纯 #000000。 替换为 #0a0a0a、#09090b（zinc-950）或带色调的深色。
• 强调色饱和度过高。 将饱和度控制在 80% 以下。降低饱和度，使其与中性色优雅融合。
• 多个强调色相互争夺视觉注意力。 只选一个。移除其他颜色。
• 紫色/蓝色的“AI 渐变”风格。 这是最常见的 AI 设计特征。替换为中性色基底 + 单一、经过审慎选择的强调色。
• 使用通用的 box-shadow。 让阴影与背景色调相匹配。在蓝色背景上使用深蓝色阴影，而不是 rgba(0,0,0,0.3)。
• 扁平设计，毫无纹理。 添加细微的噪点叠加、网格渐变背景或微图案。
• 浅色页面中随机出现深色区块。 保持背景色调一致。使用不同明暗层次，而不是突兀切换。
• 空洞、平坦的区块。 添加背景图像（模糊处理、遮罩处理）、环境渐变或图案叠加。

布局（落地页专用）

• 所有内容都居中且对称。 通过偏移边距、混合宽高比或分屏布局打破对称。
• 功能区采用三列等宽卡片。 这是最常见的 AI 布局。替换为 Bento 网格、交错式布局或水平滚动布局。
• 每个区块都使用相同的布局。 相邻区块必须使用不同的布局模式。Hero（分栏）→ 功能（Bento）→ 用户评价（瀑布流）→ CTA（全幅）。
• 使用 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。它必须是视觉上最突出的元素。

交互效果与状态

• 按钮没有悬停状态。 添加 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。

韩语内容质量

• 韩语读起来像翻译腔。 改写为自然地道的韩语。例如使用“지금 시작하세요”，而非“시작을 하세요 지금”。
• 敬语等级混用。 统一使用一种表达方式，例如始终使用 합니다／하세요。
• AI 文案陈词滥调。 删除“혁신적인”“원활한”“차세대”“게임 체인저”“한 차원 높은”等表述，改用具体描述。
• 通用占位姓名。 将“김철수”“이영희”替换为符合当代习惯的姓名，例如“하윤서”“박도현”“이서진”。
• 虚假的整数指标。 将 50,000+ 替换为 47,200+，将 5.0/5.0 替换为 4.87/5.0。
• 英文占位文本。 所有可见内容都必须使用韩语。
• Lorem Ipsum。 立即替换为真实的韩语草稿文案。

组件模式（落地页）

• 居中纯色背景的通用 Hero 区块。 改用分屏布局、全出血媒体或不对称声明式布局。
• 3 张卡片并排的功能区。 改用 Bento 网格、交错布局或水平滚动条带。
• 带圆点的轮播用户评价。 改用瀑布流墙、嵌入式社交风格卡片，或带大型头像的单条轮播引言。
• 由 3 个相同卡片组成的定价表。 使用颜色、尺寸和视觉强调突出推荐方案。
• 包含 4 列以上链接的页脚。 精简为必要导航、法律链接和社交图标。
• 手风琴式常见问题解答。 改为并排列表、可搜索的帮助内容或可展开的内嵌区块。
• 与周边内容融为一体的 CTA。 CTA 需要强烈的视觉对比，例如使用不同背景、更大的内边距或悬浮式设计。

图标与图片

• Lucide 或 Feather 图标。 统一替换为 Iconify Solar 图标集。
• 失效的 Unsplash URL。 风景图片替换为 picsum.photos/seed/{name}/{w}/{h}，头像替换为 i.pravatar.cc/150?u={name}。
• 缺少 favicon。 添加品牌 favicon。
• 图标描边宽度不一致。 统一所有图标的描边粗细（Solar 图标集会自动处理）。
• 通用的“团队”图库照片。 使用风格统一的插画或高质量的情境摄影。

代码质量

• 过度堆叠 div。 使用语义化 HTML：<nav>、<main>、<section>、<article>、<footer>。
• 缺少 meta 标签。 添加 <title>、<meta name="description">、<meta property="og:image">、<meta name="viewport">。
• <html> 缺少 lang="ko"。 添加此属性以提升无障碍性和 SEO 效果。
• 图片没有 loading="lazy"。 为所有首屏以下的图片添加延迟加载。
• 图片没有 alt 文本。 添加描述性韩语替代文本。
• 随意设置 z-index 值。 统一设置：导航栏（40）、遮罩层（50）、装饰元素（60）。

升级技巧

字体排印升级

• 文字逐步显现动画。 在滚动时让字符或单词依次淡入／滑入。
• 渐变文字强调。 为一个关键标题添加微妙的渐变填充（每页最多一个）。
• 悬停时改变字重。 鼠标悬停在交互元素上时，让文字字重微妙变化。

布局升级

• 网格错位／不对称。 有意让元素偏离网格列结构。
• 视差深度。 让背景图片以不同于内容的速度滚动。
• 滚动时粘性层叠。 让各个区块在滚动时固定并相互叠加。
• 全出血区块过渡。 使用渐变或斜向过渡，让各区块相互延伸。

动效升级

• 交错式入场级联。 元素通过 animation-delay: calc(var(--index) * 80ms) 入场。
• 基于弹簧效果的悬停。 在交互元素上使用 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)。
• 由滚动驱动的进度效果。 将进度条或 SVG 线条绘制效果与滚动位置关联。
• 跑马灯式 Logo。 客户 Logo 以无限循环的 CSS 跑马灯动画展示。

表面效果升级

• 真正的玻璃拟态。 backdrop-blur-xl + border border-white/10 + 内阴影。
• 网格渐变背景。 使用多个 radial-gradient 图层营造自然的环境氛围。
• 噪点纹理叠层。 添加带有细微颗粒感的固定 pointer-events-none 元素。
• 染色阴影。 阴影应带有背景色调，而非使用通用的黑色。

修复优先级

按以下顺序实施，以实现最大的视觉效果并将风险降至最低：

1. 将字体替换为 Pretendard — 让韩文内容即刻显得更有质感
2. 清理配色方案 — 移除 AI 紫色，降低点缀色的饱和度
3. 重写韩文内容 — 使用自然的文案、真实的名称和自然的数字
4. 添加悬停和激活状态 — 让界面更具活力
5. 丰富布局样式 — 打破各个区块重复雷同的布局
6. 添加区块动画 — 交错显示、滚动触发
7. 优化间距和排版 — 实现高级质感的最后一步

规则

• 不要破坏现有页面结构。循序渐进地改进。
• 输出必须保持为单个独立的 HTML 文件。
• 添加任何 CDN 依赖前，请先确认 URL 正确且来自主要服务提供商。
• 改动应有明确重点且便于审查。优先进行有针对性的改进，而非彻底重写。
• 所有内容修改都必须保持自然的韩语表达质量。