Warm / Editorial
Desire
情绪定调
滚动叙事
签名动画
单文件交付
响应式适配
动效降级
The Difference
普通网页在排列信息。惊艳网页在控制注意力：先抓住你，再带你穿过故事，最后把情绪变成行动。
这套 skill 把设计判断写进流程：先识别产品应该制造的情绪，再选择视觉原型与动画语言。 它不是给页面加几段淡入，而是决定什么值得动、何时动，以及为什么动。
Narrative Before Decoration
Signature Moment
一句话， 五种视觉宇宙。
使用 $stunning-landing-page 为我的产品设计官网首页。
先判断情绪与叙事，再输出有签名动画的单文件 HTML。
Warm / Editorial
Desire
Dark / Precision
Awe
Playful / Elastic
Delight
Avant / Journal
Curiosity
Cinematic / Fluid
Immersion
不是模板选择器，
是一个有判断的创意导演。
Direction先定情绪
从敬畏、愉悦、灵感、信任、渴望与好奇中判断主导情绪，再确定配色、字体、排版密度和动效气质。
Narrative再写剧本
每个 section 只承担一个叙事任务：开场抓住注意力，中段逐步建立价值，最终把情绪收束到一个明确行动。
Choreography选择主角
全页只挑一个最贵的签名动画，再用 reveal、视差、磁性按钮与数字动效做支撑。克制，让高光真正成立。
Craft打磨细节
统一缓动与时长，补齐移动端、动效降级、hover 反馈、无破图检查与真实文案，直到页面可以直接发布。
Built-In Judgment
把审美判断，写进工作流。
技术只是实现手段。真正稳定的输出，来自一套会先做取舍、再开始编码的流程。
使用 $stunning-landing-page 为一款 AI 音乐创作工具制作发布页，希望访客感到“灵感正在发生”。
主题映射
从产品属性推导情绪原型与视觉语言。
滚动编排
使用 GSAP、ScrollTrigger 与 Lenis 组织节奏。
单文件交付
CSS 与 JS 内联，零构建，双击即可预览。
工程降级
响应式、reduced-motion 与渐进增强默认具备。
惊艳不是形容词，
它需要通过检查。
当前 benchmark 覆盖温暖品牌、AI 开发者工具与儿童教育三类典型场景，核心断言包括滚动驱动、Hero 冲击力、动效降级与主题匹配。
100%启用 skill 的三组典型场景全部通过核心断言
3温暖品牌 / 暗夜科技 / 活泼游戏
1一个完整 index.html，零构建直接打开
评测日期：2026-06-11
阅读 benchmark
Your Theme, Directed
下一场演出，
下一场演出，
从一句话开始。
给出产品、受众和希望访客带走的情绪。剩下的交给叙事、编排与细节。
使用 $stunning-landing-page 为我的产品做一个有滚动叙事和高级动效的官网首页，输出单个 HTML 文件。
已复制到剪贴板