高级设计 — Kinetic Luxe
一个面向构建高级、编辑级、高端界面的目录驱动技能。与通用 design 技能的区别在于：它在排版、动画和克制方面有明确的观点。
设计理念 — 五条规则
1. 排版是主角
展示型排版（标题）使用衬线字体或特色无衬线字体。正文使用精致无衬线字体（Inter、Geist、Satoshi）。标题要大 —— 达到 text-[clamp(2.5rem,8vw,10rem)] 级别。展示型排版的字间距要紧凑（tracking-tight 或更紧）。展示型排版的行高要宽裕（leading-[0.9] 或 leading-none），正文行高要紧凑（leading-[1.45]）。
有效的字体搭配：
- Fraunces（展示）+ Inter（正文）—— 编辑类杂志风格
- Canela（展示）+ Geist（正文）—— 奢华当代风格
- Migra（展示）+ Manrope（正文）—— 锐利编辑风格
- Reckless（展示）+ Inter（正文）—— 柔和编辑温情
字体通过 index.html 中的 <link> 或 CSS @import 加载。展示型排版绝不能使用系统字体。
2. 动画是有意的，而非装饰性
不要使用弹跳弹簧。不要使用快速的 ease-out-200ms 淡入淡出。高级动画使用：
- 长持续时间：揭示动画使用 800–1800ms
- 精细缓动：
cubic-bezier(0.16, 1, 0.3, 1)（easeOutExpo）、cubic-bezier(0.22, 1, 0.36, 1)（easeOutQuint）或自定义曲线 - 滚动驱动优于页面加载：使用 framer-motion 的
useScroll+useTransform，让动画与用户操作关联 - 每个部分一个标志性动画：不要在英雄区堆叠 5 个动画。选择能放大内容的那一个。
如果某个动画没有服务于内容，就删除它。
3. 通过图层而非阴影营造深度
高级深度通过堆叠微妙的图层来创造：
- 基础层：噪点纹理叠加（CSS 或 SVG）
- 内容下方：暖色/冷色渐变涂层（非常微妙，5-15% 不透明度）
- 中间层：装饰元素（一个大号展示字符、一张褪色照片、一个网格）
- 前景层：内容
避免使用 shadow-lg / shadow-2xl —— 它们看起来太通用。改用 shadow-[0_1px_0_rgba(255,255,255,0.05)] 或渐变边框。
4. 用色克制，构图自信
配色板通常为：
- 背景：一种暖色或冷色的非纯白/非纯黑（绝不使用纯
#000或#fff）。例如：#0A0908（暖黑）、#F7F5F1（暖白）、#0F1117（冷黑）。 - 文本：与背景形成高对比，但经过柔化。例如：
#0A0908背景上的#F7F5F1、#F7F5F1背景上的#1A1A1A。 - 强调色：只用一个颜色，节制使用。例如：
#C8522C（赤陶色）、#4C3F2F（咖啡色）、#B8A978（黄铜色）、#D9C2A4（香槟色）。
无需彩虹渐变。无需蓝绿色/紫色科技创业氛围。
5. 构图有意打破网格
标准的三列网格感觉通用。高级布局使用：
- 不对称性：两列中一列是另一列的两倍宽，或七列网格中内容跨 3+4 列
- 有意的留白：一个部分有 60% 的空白，内容位于一个角落
- 尺度对比：微小标签紧挨着巨大标题
- 重叠：超出容器边界的元素
如有疑问，就减少一列或增加更多留白。
此技能不适用的情况
如果用户想要：
- 标准 B2B SaaS 落地页（聊天气泡、产品模型、功能网格）→ 使用
design - 管理后台 / 数据密集型 UI → 使用
design - 带有手机模型的移动应用落地页 → 使用
design - 带素材库照片英雄区的企业网站 → 使用
design
此技能适用于：时尚品牌、奢侈品、设计机构、创意作品集、建筑事务所、编辑类出版物、定位为设计前沿的高端 SaaS。
工作流程 — 第 0 步：阅读目录
在编写任何页面之前，请阅读：
references/design-tokens.md— 颜色、排版比例、间距references/motion-principles.md— 缓动、时长、动画理念references/catalog/中匹配类别的.md文件 — 可用的变体
然后选择一个变体并阅读 references/catalog/components/ 中对应的 .tsx 文件。
页面 → 目录文件映射：
| 页面类型 | 目录文件 |
|---|---|
| 落地页 / 首页 | hero.md + features.md + testimonials.md + cta-sections.md + footers.md |
| 定价 | pricing.md |
| 关于 / 工作室 / 宣言 | about.md |
| 联系 | contact.md |
| 作品集 / 作品 | gallery.md |
| 常见问题 / 备注 | faq.md |
| 导航（所有页面） | navigation.md |
当前目录清单 — 11 个组件，全部为原创：
navigation.md— 1 个变体（编辑级船头架）hero.md— 1 个变体（动态遮罩英雄）features.md— 1 个变体（编辑级索引）stats.md— 1 个变体（编辑级数字）logos.md— 1 个变体（编辑级客户名册）gallery.md— 1 个变体（编辑级作品索引）about.md— 1 个变体（编辑级故事 / 宣言）testimonials.md— 1 个变体（编辑级拉引引用）pricing.md— 1 个变体（编辑级不对称）faq.md— 1 个变体（编辑级常见问题 / 备注）cta-sections.md— 1 个变体（时刻行动号召）contact.md— 1 个变体（编辑级联系表单）footers.md— 1 个变体（编辑级宣言页脚）
不可妥协的清单
在报告完成之前：
- 基础阅读：在编写任何代码之前，已阅读
design-tokens.md+motion-principles.md。 - 目录已查阅：已从目录中选择一个特定变体。说明其名称。
- 字体已加载：所需的展示字体和正文字体已通过
index.html中的<link>或 CSS@import加载。系统字体破坏高级感。 - 单一强调色：设计只使用一个强调色（加上中性色）。无彩虹调色板。
- 动画时机：至少一个部分使用滚动驱动动画（不仅仅是页面加载淡入）。缓动函数为
easeOutExpo或类似 —— 而非默认的easeOut。 - 构图突破：至少一个部分使用不对称布局、有意留白或尺度对比。并非所有等宽列网格。
- 移动端：在 375px 宽度下测试。展示型排版按比例缩小但保持其特性（比标准的移动端 H1 要大）。