expressive-style-guide
Installation
SKILL.md
快速参考
| 要素 | 规范 |
|---|---|
| 背景色 | bg-background (CSS Variable 层定义近黑色调) |
| 前景色 | text-foreground (CSS Variable 层定义高亮白) |
| 强调色 | text-primary / bg-primary (单一品牌色) |
| 圆角 | rounded-lg (8px) 或 rounded-xl (12px) |
| 动效引擎 | Framer Motion, Spring Physics 优先 |
| 视觉模式 | 聚光灯 / 视差 / 形变 / 氛围渐变 / 遮罩揭示 / 浮层玻璃 / 动态排版 (可组合) |
| 对比度 | WCAG AA (≥4.5:1),暗色背景上的文本必须达标 |
| 硬编码 Hex | 禁止 — 组件层严格使用语义 Token |
核心指令 (Core Mandate)
本规范旨在构建 "影院级质感 (Cinematic UI)" 或 "动效极简主义 (Kinetic Minimalism)"。核心在于将界面视为一个受控的摄影舞台,利用光影、材质和摄像机逻辑(运镜)将数字内容提升至艺术品高度。
强制技术栈 (Hard Constraints):