用途:这是一套面向 AI 智能体的、带有明确约束的 Plaid 风格界面设计规范,适用于构建深色模式界面、Plaid 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI。
主要能力与约束: 颜色方面,主表面必须使用深色背景(亮度低于 20,检测值为 11),页面背景必须为 #1B1B1B(surface-base),主操作与焦点状态必须使用 #7FB4D5(accent),文字对比度至少 4.5:1。语义令牌包括 surface-raised #1376C1、surface-overlay #A6C5D9、text-primary #40645C、text-secondary #2D4B49、text-tertiary #9E9E9F、border-default #373D3E。 排版必须使用 Inter 作为主字体,主标题 72px/700,正文 23px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不得擅自修改字距。 间距必须遵循 4px 网格,默认元素间距 5px,不得使用任意间距值。圆角取自 18px、19px、26px、32px,默认 26px,胶囊元素用 26px 以上,边框宽度限 1px、2px、3px。 布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset,方形元素用 size-*。 交互上,焦点必须使用 2px 强调色轮廓并带 2px offset,不得移除焦点指示;禁用态用 opacity 0.5 与 cursor: not-allowed;破坏性操作必须用 AlertDialog;加载用结构骨架;错误显示在操作发生处;不得阻止输入框粘贴;纯图标按钮需 aria-label。 动画仅在明确要求时添加,只动画 transform 与 opacity,入场用 ease-out,交互反馈不超过 200ms,尊重 prefers-reduced-motion。性能上不得动画大面积 blur() 或 backdrop-filter,不得在非活动动画上使用 will-change,不得用 useEffect 表达可用渲染逻辑实现的内容。
使用方式与限制:资料未提供安装命令、代码示例或具体接入步骤,暂未提供。该技能以规则约束形式供智能体在生成界面时遵循,不包含运行时组件库或 API 说明。