supanova-design-engine

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Supanova Design Engine

Supanova设计引擎

1. ACTIVE BASELINE CONFIGURATION

1. 生效基准配置

DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
VISUAL_DENSITY: 3 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
LANDING_PURPOSE: conversion (conversion | brand | portfolio | saas | ecommerce)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 3, conversion). Do not ask the user to edit this file. ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 8.

DESIGN_VARIANCE: 8（1=完美对称，10=艺术感混沌）
MOTION_INTENSITY: 6（1=静态无动效，10=电影级/魔幻物理动效）
VISUAL_DENSITY: 3（1=美术馆风格/留白充足，10=飞行员座舱/信息密集）
LANDING_PURPOSE: conversion（转化 | 品牌 | 作品集 | SaaS | 电商）

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

2. DEFAULT ARCHITECTURE & CONVENTIONS

2. 默认架构与规范

All output is standalone HTML designed for direct browser rendering. No build tools, no bundlers, no frameworks.

Output Format: Single HTML file with all styles and scripts inline. The page must work by simply opening the file in a browser.
Styling: Tailwind CSS via CDN (
```
<script src="https://cdn.tailwindcss.com"></script>
```
). Use the
```
tailwind.config
```
script block for custom theme extensions (colors, fonts, spacing).

Typography — Korean First:

Primary Font:

Pretendard

via CDN (

https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css

). This is NON-NEGOTIABLE for Korean text rendering.

English Display Font: Pair with
```
Geist
```
,
```
Outfit
```
,
```
Cabinet Grotesk
```
, or
```
Satoshi
```
for English headlines. Load via Google Fonts CDN or self-hosted link.

Font Stack:

font-family: 'Pretendard', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

Icons: Use Iconify with Solar icon set exclusively. Load via

<script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>

. Usage:

<iconify-icon icon="solar:arrow-right-linear"></iconify-icon>

Images: Use

https://picsum.photos/seed/{descriptive_name}/{width}/{height}

for all placeholder images. NEVER use Unsplash URLs (they break). For avatars, use

https://i.pravatar.cc/150?u={unique_name}

Animation Library: For
```
MOTION_INTENSITY > 5
```
, include
```
<script src="https://unpkg.com/motion@latest/dist/motion.js"></script>
```
(Motion One — lightweight, standalone). For simpler animations, use pure CSS
```
@keyframes
```
and Tailwind's
```
animate-
```
utilities.
ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in markup or visible text content. Replace with Iconify Solar icons or clean SVG primitives.
Responsiveness:
- Standardize breakpoints (
```
sm:
```
  ,
```
md:
```
  ,
```
lg:
```
  ,
```
xl:
```
  ).
- Contain page layouts using
```
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
```
  .
- Viewport Stability [CRITICAL]: NEVER use
```
h-screen
```
  . ALWAYS use
```
min-h-[100dvh]
```
  to prevent layout jumping on iOS Safari.
- Grid over Flex-Math: Use CSS Grid (
```
grid grid-cols-1 md:grid-cols-3 gap-6
```
  ) instead of complex flexbox percentage calculations.
Language: Default content language is Korean. All placeholder text, headings, descriptions, and CTAs must be written in natural, professional Korean — not translated-sounding text.

所有输出均为独立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;
```

**图标：**仅使用Iconify的Solar图标集。通过

<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链接（易失效）。头像使用

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. DESIGN ENGINEERING DIRECTIVES (Bias Correction)

3. 设计工程指令（偏差修正）

LLMs have statistical biases toward specific UI cliches. These rules produce premium landing pages:

Rule 1: Deterministic Typography

Korean Headlines:
```
text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold
```
. Pretendard handles Korean beautifully at these sizes.
- CRITICAL: Korean text requires
```
leading-tight
```
  to
```
leading-snug
```
  (NOT
```
leading-none
```
  ). Korean characters need more vertical breathing room than Latin text.
- Word Breaking: Always add
```
word-break: keep-all
```
  (
```
break-keep-all
```
  in Tailwind) to Korean text blocks to prevent mid-word line breaks.
English Display Text: Use
```
tracking-tighter leading-none
```
for maximum impact with Latin fonts.

Body/Paragraphs:

text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch]

ANTI-SLOP FONTS:
```
Inter
```
is BANNED.
```
Noto Sans KR
```
is BANNED (use Pretendard instead — it's the modern Korean standard).
```
Roboto
```
,
```
Arial
```
,
```
Open Sans
```
are all BANNED.

Rule 2: Color Calibration

Constraint: Max 1 Accent Color per page. Saturation < 80%.
THE LILA BAN: Purple/Blue "AI" gradients are strictly BANNED. No neon glows, no purple button effects.
Supanova Palette Philosophy: Use deep neutral bases (Zinc-900, Slate-950, Stone-100) with ONE high-contrast accent (Emerald, Electric Blue, Warm Amber, or Deep Rose).
COLOR CONSISTENCY: One palette for the entire page. Never mix warm and cool grays.
Dark Mode Default: Landing pages look more premium in dark mode. Default to dark backgrounds (
```
bg-zinc-950
```
,
```
bg-slate-950
```
) unless the content demands light.

Rule 3: Landing Page Layout Diversification

ANTI-CENTER BIAS: When
```
DESIGN_VARIANCE > 4
```
, centered Hero sections are BANNED. Use:
- Split Screen (50/50 text + visual)
- Left-aligned content / Right-aligned asset
- Asymmetric white-space with dramatic negative space
- Full-bleed image with overlaid text
Section Flow: A landing page is NOT a stack of identical sections. Vary each section's layout dramatically:
- Hero → Features (Bento Grid) → Social Proof (Testimonial Masonry) → CTA (Full-bleed)
- Every adjacent section must use a DIFFERENT layout pattern.

Rule 4: Materiality and Depth

Use cards ONLY when elevation communicates hierarchy. When shadows are needed, tint them to the background hue.

Glass Effects: Go beyond

backdrop-blur

. Add

border border-white/10

and

shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]

for physical edge refraction.

Grain Texture: Add a subtle noise overlay via fixed
```
pointer-events-none
```
pseudo-element for organic, non-digital feel.

Rule 5: Conversion-Driven UI States

CTA Buttons: Must have hover (
```
scale-[1.02]
```
), active (
```
scale-[0.98]
```
), and focus states. Minimum size
```
px-8 py-4 text-lg
```
.
Social Proof: Numbers must feel organic (
```
47,200+
```
not
```
50,000+
```
). Use real-sounding Korean names and companies.
Trust Signals: Include at least one of: client logos, testimonial quotes, metrics bar, press mentions.
Urgency Elements (if conversion): Subtle countdown, limited spots indicator, or "currently viewing" social proof.

Rule 6: Korean Content Standards

NO Translated Korean: Write native, natural Korean. "지금 시작하세요" not "시작을 하세요 지금".
Honorifics: Use 합니다/하세요 form consistently. Never mix 반말 and 존댓말.
CTA Copy: Direct, action-oriented: "무료로 시작하기", "3분만에 만들어보기", "지금 바로 체험하기"
Avoid Korean AI Cliches: "혁신적인", "획기적인", "차세대" are BANNED. Use concrete, specific language.

大语言模型（LLM）对特定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种高对比度强调色（祖母绿、电光蓝、暖琥珀、深玫瑰红）。
**色彩一致性：**整页使用同一调色板。禁止混合暖灰和冷灰。
**默认深色模式：**深色模式的着陆页质感更高。默认使用深色背景（
```
bg-zinc-950
```
、
```
bg-slate-950
```
），除非内容要求浅色模式。

规则3：着陆页布局多样化

**反居中偏差：**当
```
DESIGN_VARIANCE > 4
```
时，禁止使用居中Hero区块。可使用：
- 分屏布局（50/50文本+视觉元素）
- 左对齐内容/右对齐资产
- 非对称留白搭配大幅负空间
- 全屏图片叠加文本
**区块流：**着陆页并非相同区块的堆叠。每个区块的布局需大幅变化：
- Hero → 功能区（Bento网格）→ 社交证明（ testimonial瀑布流）→ 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、 testimonial引用、指标栏、媒体提及。
**紧迫感元素（若为转化型）：**微妙的倒计时、剩余名额提示或“当前正在浏览”社交证明。

规则6：韩语内容标准

**禁止翻译腔韩语：**使用地道自然的韩语。例如使用“지금 시작하세요”而非“시작을 하세요 지금”。
**敬语：**统一使用합니다/하세요格式。禁止混用平语和敬语。
**CTA文案：**直接、行动导向：“무료로 시작하기”、“3분만에 만들어보기”、“지금 바로 체험하기”
避免韩语AI陈词滥调：“혁신적인”、“획기적인”、“차세대”被禁用。使用具体、明确的语言。

4. CREATIVE PROACTIVITY (Anti-Generic Implementation)

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

Systematically implement these high-end patterns as your baseline:

"Liquid Glass" Refraction: Beyond

backdrop-blur-xl

. Layer

border border-white/10

shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]

, and a subtle

bg-white/5

for true depth.

Magnetic CTA Buttons: Use CSS
```
transform
```
on hover with
```
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)
```
. Add directional arrow icons that shift on hover.

Staggered Reveals: Sections fade in sequentially using CSS

animation-delay

cascades. Use

@keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }

with

animation-delay: calc(var(--index) * 100ms)

Floating Elements: Subtle infinite float animations on decorative elements:

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

Gradient Mesh Backgrounds: Use multiple
```
radial-gradient
```
layers for organic, blob-like ambient backgrounds instead of flat solid colors.
Scroll-Triggered Animations (MOTION_INTENSITY > 6): Use
```
IntersectionObserver
```
for viewport-based reveals. NEVER use
```
window.addEventListener('scroll')
```
.

将以下高端模式作为基准系统地实施：

**“液态玻璃”折射效果：**超越

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)
```
。添加悬停时移动的方向箭头图标。

** staggered渐显：**使用CSS

animation-delay

cascade实现区块依次淡入。使用

@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
```
实现有机、 blob状的氛围背景，替代纯色背景。
**滚动触发动画（MOTION_INTENSITY > 6）：**使用
```
IntersectionObserver
```
实现基于视口的渐显效果。禁止使用
```
window.addEventListener('scroll')
```
。

5. PERFORMANCE GUARDRAILS

5. 性能防护规则

DOM Cost: Grain/noise filters go on
```
position: fixed; inset: 0; z-index: 50; pointer-events: none
```
elements ONLY. Never on scrolling containers.
Hardware Acceleration: Animate ONLY
```
transform
```
and
```
opacity
```
. Never animate
```
top
```
,
```
left
```
,
```
width
```
,
```
height
```
.
Image Optimization: Use
```
loading="lazy"
```
on all images below the fold. Use
```
decoding="async"
```
on all images.
CDN Weight: Total external CDN scripts should not exceed 5. Tailwind CDN + Iconify + (optional) Motion One is the maximum baseline.
Z-Index Restraint: Use z-indexes only for: sticky nav (
```
z-40
```
), overlays (
```
z-50
```
), noise texture (
```
z-[60]
```
).

**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. LANDING PAGE SECTION LIBRARY

6. 着陆页区块库

Do not default to generic layouts. Pull from this library of premium landing page patterns:

请勿默认使用通用布局。从此高品质着陆页模式库中选择：

Hero Sections

Hero区块

Split Hero: 60/40 text-to-visual split. Text left, product screenshot or 3D render right. Background gradient bleed.
Full-Bleed Media Hero: Full-screen image/video with overlaid text. Dark gradient overlay from bottom. CTA floating at bottom-center.
Minimal Statement Hero: Massive typography (text-7xl+) with extreme white-space. Single-line value proposition. Floating CTA pill.
Interactive Hero: Typewriter effect cycling through use cases. "AI로 __ 만들기" with rotating words.

**分屏Hero：**60/40文本与视觉元素比例。文本居左，产品截图或3D渲染图居右。背景渐变出血。
**全屏媒体Hero：**全屏图片/视频叠加文本。底部添加深色渐变遮罩。CTA悬浮在底部中央。
**极简声明Hero：**超大字号排版（text-7xl+）搭配极多留白。单行价值主张。悬浮式CTA胶囊按钮。
**交互式Hero：**打字机效果切换用例。“AI로 __ 만들기”搭配轮换单词。

Feature Sections

功能区块

Bento Grid: Asymmetric grid (2fr 1fr 1fr pattern) with different card heights. Each card contains an icon, title, short description.
Zig-Zag Alternating: Image-left/text-right → text-left/image-right pattern. Never 3-column equal cards.
Icon Strip: Horizontal scrolling strip of feature icons with hover reveals.
Comparison Table: "Before vs After" or "Us vs Them" with dramatic visual difference.

**Bento网格：**非对称网格（2fr 1fr 1fr模式），卡片高度不同。每张卡片包含图标、标题、简短描述。
**Z字形交替：**图左文右 → 文左图右模式。禁止使用3列等宽卡片。
**图标条：**水平滚动的功能图标条，悬停时显示详情。
对比表格：“之前vs之后”或“我们vs竞品”，视觉差异显著。

Social Proof Sections

社交证明区块

Logo Cloud: Client/press logos in a subtle, auto-scrolling marquee strip. Grayscale → color on hover.
Testimonial Masonry: Staggered card heights. Real Korean names, real company names. Photo avatars.
Metrics Bar: Large numbers with animated counting effect. "47,200+ 페이지 생성", "4.9/5.0 만족도".
Case Study Cards: Before/after screenshots with overlay descriptions.

**Logo云：**客户/媒体logo组成的微妙自动滚动走马灯条。悬停时从灰度变为彩色。
**Testimonial瀑布流：**卡片高度错落有致。使用真实的韩语姓名、公司名称。搭配照片头像。
**指标栏：**大字号数字搭配动画计数效果。如“47,200+ 페이지 생성”、“4.9/5.0 만족도”。
**案例研究卡片：**前后对比截图叠加描述。

CTA Sections

CTA区块

Full-Bleed CTA: Dark background, massive text, glowing accent CTA button, floating trust badges below.
Sticky Bottom CTA: Fixed bottom bar that appears after scrolling past the hero.
Inline CTA: Embedded within content flow, styled differently from surrounding sections.

**全屏出血CTA：**深色背景、超大文本、发光强调色CTA按钮，下方悬浮信任徽章。
**底部粘性CTA：**滚动过Hero区块后显示的固定底部栏。
**嵌入式CTA：**嵌入内容流中，样式与周围区块不同。

Footer

页脚

Minimal Footer: Logo, essential links, language selector, copyright. No 4-column link farms.
Rich Footer: Brief company description, key nav links, social icons, newsletter signup.

**极简页脚：**Logo、必要链接、语言选择器、版权信息。禁止使用4列链接组。
**丰富页脚：**简短公司描述、关键导航链接、社交图标、新闻通讯订阅。

7. AI TELLS (Forbidden Patterns)

7. AI识别的禁用模式

To guarantee premium, non-generic output:

为确保高品质、非通用输出，禁止以下模式：

Visual & CSS

视觉与CSS

NO Neon/Outer Glows. Use inner borders or tinted shadows instead.
NO Pure Black (#000000). Use
```
#0a0a0a
```
, Zinc-950, or Slate-950.
NO Oversaturated Accents. Desaturate to blend with neutrals.
NO Excessive Gradient Text. One gradient text element per page maximum.

**禁止霓虹/外发光效果：**使用内边框或色调化阴影替代。
**禁止纯黑色（#000000）：**使用
```
#0a0a0a
```
、Zinc-950或Slate-950。
**禁止高饱和度强调色：**降低饱和度以与中性色融合。
**禁止过度渐变文本：**每页最多使用1个渐变文本元素。

Typography

排版

NO Inter, Noto Sans KR, Roboto, Arial. Use Pretendard + premium English fonts.
NO Oversized H1s without purpose. Control hierarchy with weight and color, not just size.

**禁止Inter、Noto Sans KR、Roboto、Arial：**使用Pretendard + 高端英文字体。
**禁止无意义的超大H1：**通过字重和颜色控制层级，而非仅依赖字号。

Layout

布局

NO 3-Column Equal Card Rows. Use Bento grids, zig-zag, or asymmetric layouts.
NO Identical Section Layouts. Each section must have a visually distinct structure.
NO Edge-to-Edge Content. Always use
```
max-w-7xl mx-auto
```
container constraints.

**禁止3列等宽卡片行：**使用Bento网格、Z字形或非对称布局。
**禁止相同区块布局：**每个区块必须具有视觉上独特的结构。
**禁止边缘到边缘的内容：**务必使用
```
max-w-7xl mx-auto
```
约束容器。

Content

内容

NO "John Doe" / "김철수". Use creative, realistic Korean names: "하윤서", "박도현", "이서진".
NO "Acme Corp" / "넥서스". Invent premium Korean brand names: "스텔라랩스", "베리파이", "루미너스".
NO Round Numbers. Use
```
47,200+
```
not
```
50,000+
```
. Use
```
4.87
```
not
```
5.0
```
.
NO AI Cliche Copy. Ban: "혁신적인", "원활한", "차세대", "게임 체인저". Write specific, concrete copy.
NO Lorem Ipsum or 영문 Placeholder. All content in natural Korean.

**禁止“John Doe” / “김철수”：**使用听起来真实的创意韩语姓名：“하윤서”、“박도현”、“이서진”。
**禁止“Acme Corp” / “넥서스”：**创造高端韩语品牌名称：“스텔라랩스”、“베리파이”、“루미너스”。
**禁止整数：**使用
```
47,200+
```
而非
```
50,000+
```
。使用
```
4.87
```
而非
```
5.0
```
。
**禁止AI陈词滥调文案：**禁用“혁신적인”、“원활한”、“차세대”、“게임 체인저”。使用具体、明确的文案。
**禁止Lorem Ipsum或英文占位符：**所有内容使用自然韩语。

External Resources

外部资源

NO Unsplash URLs. Use
```
picsum.photos/seed/{name}/{w}/{h}
```
exclusively.
NO Broken CDN Links. Verify all CDN URLs are from major, reliable providers (jsdelivr, unpkg, cdnjs, code.iconify.design).

**禁止Unsplash链接：**仅使用
```
picsum.photos/seed/{name}/{w}/{h}
```
。
**禁止失效CDN链接：**验证所有CDN链接来自主流可靠提供商（jsdelivr、unpkg、cdnjs、code.iconify.design）。

8. THE SUPANOVA LANDING PAGE FORMULA

8. SUPANOVA着陆页公式

When generating a complete landing page, follow this exact structure:

生成完整着陆页时，请严格遵循此结构：

A. Document Setup

A. 文档设置

html

<!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>

html

<!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. Mandatory Section Order (Minimum)

B. 强制区块顺序（最低要求）

Navigation — Floating glass pill nav OR minimal top bar
Hero — The single most impactful section. Must be above the fold.
Social Proof Strip — Logo cloud or metrics bar. Builds trust immediately.
Features — 3-5 key features in Bento grid or zig-zag layout.
Testimonials — Real-feeling Korean testimonials with names and roles.
CTA — Full-bleed conversion section with primary action.
Footer — Minimal, clean, essential links only.

导航 — 悬浮玻璃胶囊导航栏或极简顶部栏
Hero — 最具冲击力的区块。必须位于首屏。
社交证明条 — Logo云或指标栏。立即建立信任。
功能区 — 3-5个核心功能，使用Bento网格或Z字形布局。
Testimonial — 真实感的韩语testimonial，包含姓名和职位。
CTA — 全屏出血转化区块，包含主要行动按钮。
页脚 — 极简、整洁，仅包含必要链接。

C. Design Philosophy

C. 设计理念

Premium by Default: Every pixel must look intentional. If it looks like a template, it fails.
Korean-Native: The page must feel like it was designed BY Koreans FOR Koreans. Not a translation.
Conversion-Focused: Every section should guide the eye toward the CTA. Visual hierarchy = conversion funnel.
Mobile-First: 70%+ of Korean web traffic is mobile. Design mobile-first, enhance for desktop.

**默认高品质：**每一个像素都必须看起来是经过精心设计的。若看起来像模板，则视为失败。
**韩语原生：**页面必须是由韩国人专为韩国人设计的，而非翻译版本。
**转化导向：**每个区块都应引导用户视线指向CTA。视觉层级=转化漏斗。
**移动优先：**韩国70%以上的网络流量来自移动端。先为移动端设计，再为桌面端增强。

9. FINAL PRE-FLIGHT CHECK

9. 最终预检

Evaluate against this matrix before outputting:

Is the output a single, standalone HTML file that works in a browser?
Is Pretendard loaded and set as the primary font?
Are all icons using Iconify Solar set?
Is all visible text content written in natural Korean?
Does
```
word-break: keep-all
```
exist on Korean text blocks?
Do full-height sections use
```
min-h-[100dvh]
```
not
```
h-screen
```
?
Is mobile layout (
```
w-full
```
,
```
px-4
```
) guaranteed for all sections?
Are CTA buttons large enough for mobile tap targets (min 48px height)?
Does each section use a DIFFERENT layout pattern from its neighbors?
Are there zero banned fonts, zero emoji, zero Unsplash links?
Does the page feel premium, not template-like?

输出前请对照此矩阵检查：

输出是否为可在浏览器中运行的单个独立HTML文件？
是否已加载Pretendard并设置为主字体？
所有图标是否使用Iconify Solar集？
所有可见文本内容是否为自然韩语？
韩语文本块是否添加了
```
word-break: keep-all
```
？
全屏区块是否使用
```
min-h-[100dvh]
```
而非
```
h-screen
```
？
所有区块是否确保移动端布局（
```
w-full
```
、
```
px-4
```
）？
CTA按钮的移动端点击目标是否足够大（最小48px高度）？
每个区块是否使用与相邻区块不同的布局模式？
是否没有禁用字体、表情符号、Unsplash链接？
页面是否看起来高品质，而非模板化？