Framer UI Skills 是一套面向 AI 智能体的约束性设计指南，用于构建 Framer 风格的界面。它适用于深色模式界面、Framer 风格设计系统，以及采用 Inter 字体和 4px 网格的 UI 实现。
颜色方面：主表面必须使用深色背景（亮度<20，检测值为0），页面背景必须使用 #000000；建议精简调色板。语义令牌包括 surface-base（#000000，页面背景）、surface-raised（#141415，卡片/模态）、surface-overlay（#F8F8F1，浮层/提示）、text-primary（#89786E）、text-2（#D8AD9D）、text-tertiary（#D1CFD0）、border-default（#494453），以及 destructive（#D8AD9D）和 warning（#F8F8F1）。文本对比度须至少 4.5:1。
排版：主字体必须为 Inter，建议单一字体族；主标题用 93px/700，正文用 23px/500；标题用 text-balance，正文用 text-pretty；数字用 tabular-nums；不得擅自修改字间距。
间距与边框：必须使用 4px 网格，元素间默认 gap 为 2px，不得用任意间距值；圆角取自 1px、2px、3px、4px、7px、8px、15px、17px，默认 4px，边框宽度限 1px 或 2px。
布局：以 1920px 为基准视口，标题区高度 72px；全屏高度用 h-dvh 而非 h-screen；固定元素需尊重 safe-area-inset；方形元素用 size-*。
交互：焦点须用 2px 轮廓（#5E6AD2）并带 2px offset，不得移除焦点指示；禁用态用 opacity:0.5 与 cursor:not-allowed；破坏性操作须用 AlertDialog；加载用骨架屏；错误就近展示；不得阻止输入框粘贴；图标按钮须加 aria-label。动画仅在明确要求时添加，只动 transform/opacity，时长不超过 200ms，并尊重 prefers-reduced-motion。性能上不得动画大范围 blur 或 backdrop-filter，不得在非活动动画外使用 will-change。资料未提供安装命令、代码示例与适用项目类型的更多说明。