用途:这是一套面向 AI 智能体的约束型设计规范,用于构建 Webflow 风格的界面,尤其是深色模式 UI 与 Webflow 风格设计系统。
主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互等方面的明确规则。颜色要求主表面使用深色背景(亮度低于 20),页面背景为 #151515,主操作与焦点态使用 #8DB8F2,文字对比度至少 4.5:1。语义令牌包括 surface-base #151515、surface-raised #1252F1、surface-overlay #FFFFFF、text-primary #505050、text-secondary #383838、text-tertiary #2A5090、border-default #0E0E0E、accent #8DB8F2、destructive #855C37。排版要求以 Inter 为主字体,主标题 62px/700,正文 28px/semi_bold,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不随意改字距。间距基于 4px 网格,默认元素间距 3px。圆角取自 1px、2px、3px、18px,默认 2px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需考虑 safe-area-inset。交互上焦点用 2px 强调色描边并偏移 2px,禁用态透明度 0.5,破坏性操作使用 AlertDialog,图标按钮需 aria-label,动画仅限 transform 与 opacity 且不超过 200ms。
使用方式:资料未提供具体安装命令或调用步骤,仅说明在构建深色模式界面、Webflow 风格设计系统或使用 Inter 字体与 4px 网格实现 UI 时参考这些准则。
适用场景:深色模式界面、Webflow 美学设计系统、以 Inter 与 4px 网格为基础的 UI 实现。
限制:资料未提供收费、价格、平台支持或效果保证等信息;部分规则为 SHOULD 建议而非强制,实际应用需结合项目情况判断。