现代前端 — 包装路由器
本包包含六个方向。每个方向都建立在相同的工艺基础（Emil Kowalski 动画规范 + 低质量过滤器）之上，但回答不同的设计问题。路由器的工作是快速选择正确的方向，然后让路。
本包的标识不是“通用品味”。它具体是：Louis Paquet / Locomotive 作品的电影般的自信 + Emil Kowalski 的隐形工艺。每个方向都针对这一轴线进行策划。使用本包构建的页面应同时让人感到被导演过（Louis Paquet）和被精心制作过（Emil Kowalski）。
六个方向
| 方向 | 它回答的问题 |
|---|---|
cinematic-scroll | “我如何让产品成为页面的故事？” |
motion-bento | “我如何在营销语境中展示一个可用的产品表面？” |
publication | “我如何让页面读起来像一篇精心设计的文章？” |
nightside | “我如何让这个品牌感觉像是深夜的、深思熟虑的、不浮夸的？” |
modernist-grid | “我如何让排版和网格完成所有工作？” |
considered-modern | “我如何让这个页面读起来温暖且专业，而不是冷漠的创业公司？” |
方向是被选择的，而不是被协商的。除非用户明确要求，本包不会产生混合输出。
选择方向
路由器按以下顺序决定：
- 明确命名。 如果用户输入
cinematic-scroll、motion-bento、publication、nightside、modernist-grid或considered-modern，则路由到该方向。也接受相近的措辞——参见下方的别名章节。 - 短语信号。 如果用户使用了 § 短语路由 中列出的高信号短语之一，则路由到匹配的方向。
- 模糊推断。 阅读简报——产品、受众、氛围、密度、能量——并使用 § 推断规则 选择最匹配的方向。
路由器不会要求用户从菜单中选择。它会自行选择，并在输出顶部用一句话解释其选择（“选择 nightside——该品牌想要的是深夜的自信，而不是初创公司的光鲜。”）。
别名
cinematic、cinematic product、scrolltell、product launch、immersive→cinematic-scrollbento、premium bento、motion engine、SaaS feature grid、archetype bento→motion-bentoeditorial、editorial premium、magazine、publication、design journal→publicationdark luxe、dark luxury、moody premium、late night UI、after hours→nightsideswiss、swiss system、swiss design、modernist、grid system、typographic poster→modernist-gridwarm modern、humane modern、studio site、professional services→considered-modern
短语路由（无明确名称）
- “product launch” / “hardware” / “scroll-driven” / “feels like a film” →
cinematic-scroll - “SaaS landing” / “feature section” / “AI product page” / “bento” →
motion-bento - “magazine” / “image-led” / “publication” / “design studio” →
publication - “dark” + “premium” / “restaurant” / “hospitality” / “exclusive” →
nightside - “rational” / “grid” / “Swiss” / “typographic poster” / “institutional” →
modernist-grid - “professional services” / “agency site” / “warm” / “consultancy” / “studio” →
considered-modern
推断规则（当简报模糊时）
- 强叙事弧 + 产品作为主角 →
cinematic-scroll - 在微型界面中展示产品功能 →
motion-bento - 排版主导 + 精心策划的图像序列 →
publication - 氛围主导 + 深色负空间 →
nightside - 网格主导 + 结构性色彩 →
modernist-grid - 工作室口吻 + 真实摄影 →
considered-modern
如果两个方向看似竞争，选择那个更能匹配品牌自信的方向：一家高级手表品牌可能想要 nightside，而不是 motion-bento。一家B2B可观测性工具想要 motion-bento，而不是 cinematic-scroll。
本包的双层模型
每个输出都是两个层按此顺序应用的产物：
第1层——方向
所选风格文件夹的 skill.md 就是设计简报。它定义了：
- 该方向的刻度校准（差异/运动/密度基线）。
- 使该方向可识别的三个标志性动作。
- 素材：排版、色彩、布局、表面处理。
- 适合该方向的动态编排。
- 错误风格提示（特定于该方向的低质量信号）。
- 用于基调校准的参考案例。
第2层——工艺规范（通用）
无论方向如何，每个输出都有两个文件适用。智能体在选择方向后读取它们：
references/animation.md——Emil Kowalski 动画规范。决策框架（缓动优先、可用性框架、频率、目的、持续时间）、缓动曲线、工艺检查清单（按钮按下、弹出式触发器原点、scale(0.95)进入、非对称时间、手势速度）以及每条规则是直接来自 Emil 还是技能调整的出处说明。references/forbidden.md——低质量过滤器。视觉/排版/布局/内容/组件/React-Framer 反模式 + 在输出前必须通过的前置检查清单。
这些定义了本包在工艺层面上的“高端”标准。一个 modernist-grid 按钮在 :active 时仍然会按下。一个 publication 弹出窗口仍然从其触发器缩放。禁止模式同样适用于所有六个方向。
组件知识——打开文件
选择方向后，智能体查阅共享的组件库研究：
components/style-recipes.md——将每个方向映射到各个库中能增强该方向的具体模式（哪些 GSAP 演示、哪些 Framer 原语、哪些 Aceternity 配方、哪些 21st.dev 组件）。请先打开此文件。components/gsap-patterns.md——面向电影方向的 GSAP + ScrollTrigger + Lenis 配方。components/motion-libraries.md——Framer Motion 模式、React Bits 笔记、Aceternity UI 笔记（当谨慎应用时）。components/component-libraries.md——21st.dev 原语、shadcn 自定义规则、Radix 弹出窗口原点强制规则。
将这些作为研究资料，而不是模板。任何原始粘贴的内容都会读起来像组件套件；请针对所选方向进行自定义。
包级安全规则——无条件应用
这些规则从不依赖于方向或简报。它们适用于每一个输出。
- 没有表情符号。 任何地方——代码、标记、内容、alt 文本。请使用 Phosphor 或 Radix 图标。
- 依赖验证。 在导入
framer-motion、lucide-react、@phosphor-icons/react、@radix-ui/react-icons、zustand等之前，检查package.json。如果缺失，则先输出安装命令。 - Tailwind 版本锁定。 检查
package.json以确定是 v3 还是 v4。 - 视口稳定性。 永远不要使用
h-screen。对于任何全视口表面，始终使用min-h-[100dvh]。 - 图标系列锁定。 Phosphor 或 Radix，不要两者都使用。描边权重 1.5 或 2.0。
- 不要将
Inter、Roboto或系统无衬线字体作为标识字体。 - 不要使用纯
#000000。 使用调整过的非纯黑色。 - Lila 禁令。 没有紫/蓝 AI 渐变光晕。
- 没有
scale(0)进入。 始终使用scale(0.95)+opacity: 0。 - UI中不要使用
ease-in。 始终使用带有自定义贝塞尔曲线的ease-out。
质量最低标准
无论方向如何，每个输出都必须达到此标准：
- 从任何部分进行截图裁剪，都可被视为经过深思熟虑的设计。
- 即使移除 Logo，仍能感受到其独特性。如果另一个品牌可以毫无违和感地替换上去，那么工作就失败了。
- 在英雄区域或前两个部分中，当图像有帮助时，包含真实的视觉媒体（摄影、渲染、插画）。
- 将“视觉媒体”视为实际图像，而不是渐变/粒子/着色器。
- 包含与方向节奏相匹配的交互状态（加载、空状态、错误、悬停、聚焦、激活）。
- 在宣布完成之前，通过
references/forbidden.md中的前置检查。
当简报宽泛时
路由器会选择最有可能成立的方向并commit。它不会模棱两可。
如果简报在两个方向之间模棱两可，选择那个更能保留品牌自信的方向。一个手工艺品牌会优先选择 cinematic-scroll 或 nightside，而不是 motion-bento。一个 B2B 平台会优先选择 motion-bento 或 modernist-grid，而不是 publication。
如果简报宽泛到无法很好地适应任何方向，这本身就是信号：在编写代码之前，简报需要被精确打磨。提出一个澄清性的问题，然后commit。
包示例——用于校准基调，而非复制
两个参考案例位于 examples/：
examples/cinematic-landing.html——Maris & Co.，自1947年起的新港帆船制造商。一个完整的cinematic-scroll页面：非对称标题、黏性字母、库存滑动网格、深海军蓝引语、磁性 CTA、版权信息页脚、三幕式节奏。examples/bento-saas.tsx——Morse，面向游戏工作室的音效设计库工作流。一个将所有五种原型连接起来的motion-bento页面。
阅读这些文件用于校准基调。不要逐字复制。每个页面都必须创造自己的世界。