supanova-design-engine

Supanova 设计引擎

1. 当前基准配置

• DESIGN_VARIANCE：8（1=完美对称，10=艺术化混乱）
• MOTION_INTENSITY：6（1=静态／无动态，10=电影级／魔法物理效果）
• VISUAL_DENSITY：3（1=美术馆／通透，10=飞行员驾驶舱／数据密集）
• LANDING_PURPOSE：conversion（conversion | brand | portfolio | saas | ecommerce）

AI 指令： 所有生成内容的标准基准值严格设为（8、6、3、conversion）。不要要求用户编辑此文件。始终遵循用户的要求：根据用户在提示词中的明确要求，动态调整这些值。使用这些基准值（或用户覆盖的值）作为全局变量，驱动第 3 至第 8 节中的具体逻辑。

2. 默认架构与约定

所有输出均为独立 HTML，可直接在浏览器中渲染。无需构建工具、打包器或框架。

• 输出格式： 单个 HTML 文件，所有样式和脚本均内联。只需在浏览器中打开文件，页面即可正常运行。
• 样式： 通过 CDN 使用 Tailwind CSS（<script src="https://cdn.tailwindcss.com"></script>）。使用 tailwind.config 脚本块扩展自定义主题（颜色、字体、间距）。
• 排版——韩语优先：
  • 主要字体： 通过 CDN 使用 Pretendard（https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css）。这是韩语文本渲染的硬性要求。
  • 英文展示字体： 英文标题搭配 Geist、Outfit、Cabinet Grotesk 或 Satoshi。通过 Google Fonts CDN 或自托管链接加载。
  • 字体栈： font-family: 'Pretendard', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
• 图标： 仅使用 Solar 图标集中的 Iconify。通过 <script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script> 加载。用法：<iconify-icon icon="solar:arrow-right-linear"></iconify-icon>。
• 图片： 所有占位图片均使用 https://picsum.photos/seed/{descriptive_name}/{width}/{height}。绝不使用 Unsplash URL（它们会失效）。头像使用 https://i.pravatar.cc/150?u={unique_name}。
• 动画库： 当 MOTION_INTENSITY > 5 时，加入 <script src="https://unpkg.com/motion@latest/dist/motion.js"></script>（Motion One——轻量、独立）。对于较简单的动画，使用纯 CSS @keyframes 和 Tailwind 的 animate- 工具类。
• 禁止使用表情符号［重要］： 标记或可见文本内容中绝不使用表情符号。改用 Iconify Solar 图标或简洁的 SVG 图形。
• 响应式设计：
  • 统一断点（sm:、md:、lg:、xl:）。
  • 使用 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 限制页面布局宽度。
  • 视口稳定性［重要］： 绝不使用 h-screen。始终使用 min-h-[100dvh]，防止 iOS Safari 上的布局跳动。
  • 优先使用网格布局： 使用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6），而不是复杂的 Flexbox 百分比计算。
• 语言： 默认内容语言为韩语。所有占位文本、标题、描述和 CTA 都必须使用自然、专业的韩语撰写，不能像翻译腔。

3. 设计工程规范（偏差修正）

大模型在 UI 设计上容易受到特定陈词滥调的影响。以下规则有助于打造高品质的落地页：

规则 1：确定性排版

• 韩文标题： text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold。Pretendard 在这些字号下能很好地呈现韩文。
  • 至关重要： 韩文文本需要使用 leading-tight 到 leading-snug（而非 leading-none）。与拉丁文字相比，韩文字符需要更多垂直留白。
  • 断词： 韩文文本块始终添加 word-break: keep-all（Tailwind 中为 break-keep-all），避免在词语中间换行。
• 英文展示文字： 搭配拉丁字体时，使用 tracking-tighter leading-none，以获得最大视觉冲击力。
• 正文/段落： text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch]。
• 避免俗套字体： 禁用 Inter。禁用 Noto Sans KR（改用 Pretendard——它是现代韩文字体标准）。禁用 Roboto、Arial 和 Open Sans。

规则 2：色彩校准

• 限制： 每页最多使用 1 种强调色。饱和度低于 80%。
• 严禁紫蓝配色： 严禁使用紫色/蓝色的“AI”渐变。不要使用霓虹光晕或紫色按钮效果。
• Supanova 配色理念： 使用深色中性色作为底色（Zinc-900、Slate-950、Stone-100），搭配 1 种高对比度强调色（Emerald、Electric Blue、Warm Amber 或 Deep Rose）。
• 颜色一致性： 整页使用同一套配色。不要混用冷暖灰色。
• 默认使用深色模式： 深色模式能让落地页显得更有质感。除非内容需要浅色背景，否则默认使用深色背景（bg-zinc-950、bg-slate-950）。

规则 3：落地页布局多样化

• 避免居中偏好： 当 DESIGN_VARIANCE > 4 时，严禁将 Hero 区块居中。改用以下布局：
  • 左右分栏（各占 50%，分别放置文字和视觉素材）
  • 左侧对齐内容 / 右侧对齐素材
  • 不对称留白，营造醒目的负空间
  • 铺满全屏的图片并叠加文字
• 区块流转： 落地页不能由一连串相同布局的区块组成。应让每个区块的布局各不相同：
  • Hero → 功能（Bento Grid）→ 社会认同（见证内容拼贴）→ CTA（铺满全屏）
  • 相邻区块必须采用不同的布局模式。

规则 4：材质感与层次

• 仅在阴影层级能够传达信息层级时使用卡片。需要阴影时，让阴影色调与背景色调一致。
• 玻璃效果： 不要只使用 backdrop-blur。添加 border border-white/10 和 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]，营造具有物理质感的边缘折射效果。
• 颗粒纹理： 通过固定的 pointer-events-none 伪元素叠加细微噪点，营造自然、非数字化的质感。

规则 5：以转化为导向的 UI 状态

• CTA 按钮： 必须包含悬停状态（scale-[1.02]）、按下状态（scale-[0.98]）和焦点状态。最小尺寸为 px-8 py-4 text-lg。
• 社会认同： 数字应显得真实自然（如 47,200+，而非 50,000+）。使用听起来真实的韩文姓名和公司名称。
• 信任信号： 至少包含一项：客户 Logo、推荐语、指标栏或媒体报道。
• 紧迫感元素（适用于转化场景）： 适当加入倒计时、名额有限提示或“正在浏览”的社会认同信息。

规则 6：韩文内容规范

• 不要翻译腔韩文： 使用地道、自然的韩文。“지금 시작하세요”，而不是“시작을 하세요 지금”。
• 敬语： 始终统一使用 합니다/하세요 句式。切勿混用非敬语和敬语。
• CTA 文案： 简洁直接、强调行动：“무료로 시작하기”“3분만에 만들어보기”“지금 바로 체험하기”
• 避免韩文 AI 套话： 禁用“혁신적인”“획기적인”“차세대”。改用具体、明确的表述。

4. 创意主动性（反通用实现）

将这些高端模式系统地作为默认基准：

• “液态玻璃”折射效果： 不要止步于 backdrop-blur-xl。叠加 border border-white/10、shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] 和细微的 bg-white/5，营造真实的纵深感。
• 磁吸式 CTA 按钮： 悬停时使用 CSS transform，并设置 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)。添加方向箭头图标，并让它们在悬停时移动。
• 交错显现： 各个区块按顺序淡入，使用 CSS animation-delay 级联效果。使用 @keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }，并设置 animation-delay: calc(var(--index) * 100ms)。
• 浮动元素： 为装饰元素添加细微的无限浮动动画：@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }。
• 渐变网格背景： 使用多个 radial-gradient 图层营造自然、有机的光斑背景，而非纯色背景。
• 滚动触发动画（MOTION_INTENSITY > 6）： 使用 IntersectionObserver 实现基于视口的显现效果。绝不要使用 window.addEventListener('scroll')。

5. 性能防护规范

• DOM 开销： 颗粒／噪声滤镜只能应用于 position: fixed; inset: 0; z-index: 50; pointer-events: none 元素。绝不要应用于滚动容器。
• 硬件加速： 只为 transform 和 opacity 添加动画。绝不要为 top、left、width、height 添加动画。
• 图像优化： 为首屏以下的所有图像使用 loading="lazy"。为所有图像使用 decoding="async"。
• CDN 体积： 外部 CDN 脚本总数不得超过 5 个。Tailwind CDN + Iconify +（可选）Motion One 是基准上限。
• 克制使用 Z-Index： 只在以下情况下使用 z-index：粘性导航（z-40）、覆盖层（z-50）、噪声纹理（z-[60]）。

6. 落地页区块模式库

不要默认采用通用布局。请从此高端落地页模式库中选择：

主视觉区块

• 分栏式主视觉： 文字与视觉内容按 60/40 分栏。文字在左，产品截图或 3D 渲染图在右。背景渐变向外晕染。
• 全屏媒体主视觉： 使用全屏图像／视频并叠加文字。底部添加深色渐变蒙层。CTA 悬浮在底部中央。
• 极简宣言式主视觉： 使用超大字号（text-7xl+）和大面积留白。价值主张保持单行。CTA 胶囊按钮悬浮显示。
• 交互式主视觉： 通过打字机效果轮换展示不同用例。使用“AI로 __ 만들기”，并轮换其中的词语。

功能区块

• 便当盒网格： 使用不对称网格（2fr 1fr 1fr），卡片高度各不相同。每张卡片包含图标、标题和简短描述。
• 交替式之字布局： 图片在左／文字在右 → 文字在左／图片在右。绝不要使用三列等宽卡片。
• 图标横条： 使用可水平滚动的功能图标条，并在悬停时显示更多内容。
• 对比表： 通过醒目的视觉差异呈现“之前 vs 之后”或“我们 vs 他们”。

社会认同区块

• 品牌 Logo 墙： 在细腻的自动滚动跑马灯中展示客户／媒体 Logo。悬停时由灰度变为彩色。
• 用户评价瀑布流： 卡片高度交错排列。使用真实的韩国人名和公司名，以及头像照片。
• 数据指标栏： 使用大号数字，并添加计数动画效果。“47,200+ 页面生成”、“4.9/5.0 满意度”。
• 案例研究卡片： 使用叠加描述的前后对比截图。

CTA 区块

• 全屏 CTA： 深色背景、超大文字、带发光效果的强调色 CTA 按钮，下方悬浮展示信任徽章。
• 底部粘性 CTA： 滚动越过主视觉后出现的底部固定栏。
• 内容内嵌 CTA： 嵌入内容流中，并采用与周围区块不同的样式。

页脚

• 极简页脚： Logo、必要链接、语言选择器、版权信息。不要使用四列链接堆砌布局。
• 丰富页脚： 简短公司简介、主要导航链接、社交图标、新闻通讯订阅入口。

7. AI 痕迹（禁止使用的模式）

为确保输出高端且不落俗套：

视觉与 CSS

• 禁止霓虹色／外发光。 改用内侧边框或带色调的阴影。
• 禁止纯黑色（#000000）。 使用 #0a0a0a、Zinc-950 或 Slate-950。
• 禁止过度饱和的强调色。 降低饱和度，使其与中性色调融合。
• 禁止过度使用渐变文字。 每页最多使用一个渐变文字元素。

排版

• 禁止使用 Inter、Noto Sans KR、Roboto、Arial。 使用 Pretendard 和优质英文字体。
• 禁止无故使用超大 H1。 通过字重和颜色控制层级，而不只是字号。

布局

• 禁止使用三列等宽卡片布局。 使用 Bento 网格、曲折布局或非对称布局。
• 禁止所有区块采用相同布局。 每个区块都必须采用视觉上不同的结构。
• 禁止内容铺满整个页面宽度。 始终使用 max-w-7xl mx-auto 限制容器宽度。

内容

• 禁止使用“John Doe”／“김철수”。 使用有创意且真实的韩国姓名：“하윤서”、“박도현”、“이서진”。
• 禁止使用“Acme Corp”／“넥서스”。 创造优质的韩国品牌名称：“스텔라랩스”、“베리파이”、“루미너스”。
• 禁止使用整数。 使用 47,200+，不要用 50,000+。使用 4.87，不要用 5.0。
• 禁止使用 AI 陈词滥调。 禁用：“혁신적인”、“원활한”、“차세대”、“게임 체인저”。文案应具体、明确。
• 禁止使用 Lorem Ipsum 或英文占位文本。 所有内容都必须使用自然的韩语。

外部资源

• 禁止使用 Unsplash URL。 只能使用 picsum.photos/seed/{name}/{w}/{h}。
• 禁止使用失效的 CDN 链接。 确保所有 CDN URL 均来自可靠的主流服务商（jsdelivr、unpkg、cdnjs、code.iconify.design）。

8. SUPANOVA 落地页公式

生成完整落地页时，必须严格遵循以下结构：

A. 文档设置

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지 제목</title>
  <meta name="description" content="페이지 설명">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css">
  <script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Pretendard', 'system-ui', 'sans-serif'],
          },
        },
      },
    }
  </script>
</head>

B. 必需的区块顺序（至少包含以下区块）

1. 导航 — 悬浮玻璃质感胶囊导航，或极简顶部栏
2. 首屏主视觉 — 影响力最强的单一区块。必须在首屏可见。
3. 社会认同展示条 — Logo 墙或指标栏，立即建立信任。
4. 功能特性 — 在 Bento 网格或曲折布局中展示 3-5 项核心功能。
5. 客户评价 — 使用包含姓名和职位、读起来真实的韩国客户评价。
6. 行动号召（CTA） — 全宽转化区块，包含主要操作。
7. 页脚 — 简洁、清爽，仅保留必要链接。

C. 设计理念

• 默认即优质： 每个像素都必须经过精心设计。如果看起来像模板，就不合格。
• 原生韩式风格： 页面必须让人感觉是由韩国人为韩国人设计的，而不是翻译而来。
• 以转化为核心： 每个区块都应引导视线转向 CTA。视觉层级就是转化漏斗。
• 移动端优先： 韩国 70% 以上的网页流量来自移动端。优先设计移动端，再适配桌面端。

9. 最终输出前检查

输出前请根据以下清单进行评估：

• 输出是否为可在浏览器中运行的独立 HTML 文件？
• 是否已加载 Pretendard 并将其设为主要字体？
• 所有图标是否都使用 Iconify Solar 图标集？
• 所有可见文本内容是否都使用自然的韩语？
• 韩语文本块是否包含 word-break: keep-all？
• 全高区块是否使用 min-h-[100dvh] 而非 h-screen？
• 是否确保所有区块的移动端布局（w-full、px-4）？
• CTA 按钮是否足够大，便于移动端点击（高度至少 48px）？
• 每个区块是否都采用了与相邻区块不同的布局模式？
• 是否完全没有禁用字体、表情符号和 Unsplash 链接？
• 页面是否显得优质，而非模板化？